/* removes scroll bar */
/* Chrome, Safari */
::-webkit-scrollbar { display: none; }

/* Firefox */
html { scrollbar-width: none; }

/* Edge and IE */
body { -ms-overflow-style: none; }

/* page setting */
body {
    background-color: black;
    color: white;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ===== Desktop styles (fixed color issue) ===== */
.navbar {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:
            background 0.3s,
            width 0.3s,
            height 0.3s,
            border-radius 0.3s,
            padding 0.3s,
            opacity 0.3s,
            transform 0.3s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.navbar:hover {
    background: rgba(255, 255, 255, 0.8);
}

.navbar .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
    align-items: center;
}

.navbar li {
    position: relative;
}

.navbar a {
    color: white; /* make base white */
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: color 0.3s, font-weight 0.3s, font-size 0.3s;
    white-space: nowrap;
}

/* when hovering on navbar background but not links */
.navbar:hover a {
    color: black;
}

/* active (current page) = white + bold by default */
.navbar a.active {
    font-weight: bold;
}

/* on hover over a specific link */
.navbar a:hover {
    color: black;
    font-weight: bold;
    font-size: 1.2em;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(5px);
    white-space: nowrap;
    padding: 5px 10px;
}

.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(10px);
}

.arrow {
    display: inline-block;
    transition: transform 0.3s;
}

.dropdown:hover > a .arrow { transform: rotate(90deg); }

/* ===== Mobile behavior (FAB + open) ===== */
.nav-fab,
.nav-close { display: none; }

@media (max-width: 768px) {
    /* When at the top (transparent background) → turns opaque + black text on hover */
    .navbar.is-open.at-top:hover {
        background: rgba(255, 255, 255, 0.8); /* more opaque on hover */
    }

    .navbar.is-open.at-top:hover a {
        color: black; /* text turns black */
        font-weight: bold;
    }


    .navbar .nav-list { gap: 10px; }

    .navbar.is-fab {
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .15);
    }
    .navbar.is-fab .nav-list {
        pointer-events: none;
        opacity: 0;
        transform: translateY(-6px) scale(.96);
    }

    .nav-fab {
        display: none;
        position: absolute;
        inset: 0;
        margin: auto;
        width: 56px;
        height: 56px;
        border-radius: 999px;
        background: transparent;
        border: none;
        cursor: pointer;
    }
    .navbar.is-fab .nav-fab { display: block; }

    .nav-fab .lines {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 24px; height: 18px;
    }
    .nav-fab .line {
        display: block;
        width: 24px; height: 2px;
        background: white;
        margin: 4px 0;
        transition: transform .25s ease, opacity .25s ease;
    }

    .navbar.is-open {
        border-radius: 12px;
        padding: 10px;
        background: rgba(255, 255, 255, .65);
    }

    .navbar.is-open.at-top { background: rgba(255, 255, 255, .10); }

    .navbar .nav-list {
        transition: opacity .28s .06s, transform .28s;
        transform-origin: 90% 0;
    }
    /* When navbar is open on mobile, shift menu content left to make space for the X */
    .navbar.is-open .nav-list {
        margin-right: 50px; /* shift everything left to leave room for X */
        transition: margin-right 0.3s ease, opacity .28s .06s, transform .28s;
    }

    /* Adjust close button alignment */
    .navbar.is-open .nav-close {
        display: block;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        cursor: pointer;
        line-height: 36px;
        font-size: 26px;
        color: white;
    }


    .navbar.is-open .nav-close:hover {
        background: rgba(255, 255, 255, 0.25);
    }


    /* MOBILE: text color based on state */

    /* When opened from the circle (opaque background) → black text */
    .navbar.is-open:not(.at-top) a {
        color: black;
    }
    .navbar.is-open:not(.at-top) a:hover {
        color: black;
        font-weight: bold;
        font-size: 1.2em;
    }

    /* When at the top (transparent background) → white text */
    .navbar.is-open.at-top a {
        color: white;
    }
    .navbar.is-open.at-top a:hover {
        color: black;
        font-weight: bold;
        font-size: 1.2em;
    }

    /* Keep hover disabled ONLY when collapsed as a FAB */
    .navbar.is-fab .dropdown:hover .dropdown-menu {
        display: none;
        opacity: 0;
        transform: translateY(5px);
    }

    /* ==== Mobile OPEN: make dropdowns behave like normal flyouts ==== */
    .navbar.is-open { overflow: visible; }              /* allow menu to overflow */
    .navbar.is-open .dropdown { position: relative; }   /* anchor for absolute submenu */

    /* Hover OR tap-to-toggle both reveal the submenu */
    .navbar.is-open .dropdown:hover .dropdown-menu,
    .navbar.is-open .dropdown.open .dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    /* Submenu panel styling and absolute placement under parent item */
    .navbar.is-open .dropdown .dropdown-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 220px;

        /* make it opaque like the navbar */
        background: rgba(255, 255, 255, 0.9);
        border: none;

        border-radius: 10px;
        padding: 8px 10px;
        box-shadow: 0 8px 20px rgba(0,0,0,.35);
        white-space: nowrap;

        /* bring it in front of everything */
        z-index: 5000;
    }


    /* Link colors inside the dropdown (stay white per your mobile color rule) */
    .navbar.is-open .dropdown .dropdown-menu a {
        color: black;
    }
    .navbar.is-open .dropdown .dropdown-menu a:hover {
        color: black;
        font-weight: bold;
    }

    /* Arrow rotates when the dropdown is open (hover or tap) */
    .navbar.is-open .dropdown:hover > a .arrow,
    .navbar.is-open .dropdown.open > a .arrow {
        transform: rotate(90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar, .navbar * { transition: none !important; }
}

/* project page */
.project-page { max-width: 1100px; margin: 140px auto 140px; padding: 0 20px 80px; }
.project-hero {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 50px;
}
.project-title { margin: 0 0 6px; font-size: 2rem; }
.project-subtitle { margin: 0 0 12px; opacity: .9; }
.project-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-pill { padding: 6px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: .9rem; opacity: .95; }

/* overview */
.project-overview { border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 20px; margin-bottom: 50px; }
.project-overview h2 { margin-top: 0; }
.overview-list { margin: 10px 0 0 18px; }

/* versions */
.versions { display: flex; flex-direction: column; gap: 18px; }
.version-block {
    margin-bottom: 50px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px;
    background: transparent;
    padding: 16px;
}
.version-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.version-title { margin: 0; font-size: 1.25rem; }
.jump-link { color: #9ad0ff; text-decoration: none; font-size: .95rem; }
.jump-link:hover { text-decoration: underline; }

.version-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 10px;
    text-decoration: none; font-weight: 600; color: #fff;
    border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12);
}
.btn:hover { background: rgba(255,255,255,.22); border-color: rgba(154,208,255,.6); }

.version-body { display: grid; grid-template-columns: 1fr; gap: 16px; }
.version-notes h4 { margin: 0 0 8px; }
.version-notes ul { margin: 0 0 8px 18px; }

.version-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.gallery-column { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px; }
.gallery-label { margin: 0 0 10px; opacity: .95; font-weight: 600; }

/* slideshow placeholder */
.slideshow-placeholder {
    border: 1px dashed rgba(255,255,255,.25);
    border-radius: 10px;
    min-height: 360px;
    display: grid; place-items: center;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, rgba(255,255,255,.06) 12px 24px);
}
.slideshow-placeholder::after { content: 'Insert slideshow here'; opacity: .6; font-size: .95rem; }

/* downloads */
.downloads { border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 20px; margin-top: 10px; }
.downloads h2 { margin-top: 0; }
.file-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.file-card {
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px; padding: 12px; text-decoration: none; color: #fff;
    background: rgba(255,255,255,.04);
}
.file-card:hover { background: rgba(255,255,255,.08); border-color: rgba(154,208,255,.6); }
.file-name { display: block; font-weight: 600; margin-bottom: 6px; }
.file-meta { opacity: .85; font-size: .9rem; }

/* back to top */
.back-to-top {
    display: none;
}
.back-to-top:hover { background: rgba(255,255,255,.25); }

/* Slideshow */
.mySlides {display: none;}
img {
    vertical-align: middle;
    width: 100%;
    height: auto;
    display: block;
}
.slideshow-container {
    max-width: 500px;
    position: relative;
    margin: 5px auto;
    text-align: center;
}
.slideshow-title {
    min-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 3px;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.5);
}
.next {right: 0;}
.prev {left: 0;}
.prev:hover, .next:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
}
.slideshowSection-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

/* footer */
footer {
    text-align: center;
    align-items: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, .15);
    color: white;
}

.social-buttons a {
    margin: 0 10px;
    display: inline-block;
}

.social-buttons img {
    width: 40px;
    height: 40px;
}

.download-btn img {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    display: none;
    pointer-events: none;
}

/* --- FIXES BELOW --- */

/* Prevent buttons from shrinking */
.version-actions .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Make slideshow columns stack on small screens */
@media (max-width: 1024px) {
    .version-gallery {
        grid-template-columns: 1fr;
    }
    .slideshow-container {
        max-width: 100%;
        margin: 5px 0;
    }
}

/* Make download grid wrap instead of shrinking */
@media (max-width: 1200px) {
    .file-grid { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}
@media (max-width: 900px) {
    .file-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 520px) {
    .file-grid { grid-template-columns: 1fr; }
}

/* Keep borders consistent */
.btn,
.file-card {
    border-width: 1px;
    box-sizing: border-box;
}