/* ==========================================
   Diamond In The Ruff Navigation v3
   Dark ice-blue theme, matching the brand poster — previously relied
   on --charcoal/--charcoal-light from theme.css, which is never
   actually linked by any page, so those colors silently resolved to
   nothing and the nav inherited whatever text color the page itself
   used (white, once pages started going dark) on top of a hardcoded
   white background. Colors below are explicit, not borrowed from an
   unlinked file.
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&display=swap');

.site-header,
.site-title,
.site-nav,
.site-nav a {
    font-family: 'Cinzel', 'Times New Roman', serif;
}

.site-header{
    position:sticky;
    top:0;
    z-index:1000;

    display:flex;
    align-items:center;
    justify-content:space-between;

    height:95px;

    padding:0 55px;

    background:rgba(5,7,10,.92);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 8px 25px rgba(0,0,0,.35);
}

/* Logo */

.site-title{

    display:flex;
    align-items:center;

    gap:14px;

    font-size:1.55rem;

    font-weight:700;

    color:#ffffff;

    text-decoration:none;

    letter-spacing:-.01em;

    transition:.25s;
}

.site-title:hover{

    color:#3ecbff;

}

/* Hamburger — always visible; it's the only way into the nav now,
   on every screen size, not just mobile. Shows the logo by default
   (also the future app-store icon); hovering swaps it to the
   hamburger glyph so the menu affordance is still discoverable. */

.menu-toggle{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    border:none;

    border-radius:14px;

    background:rgba(255,255,255,.08);

    color:#ffffff;

    font-size:1.2rem;

    cursor:pointer;

    transition:.25s;
}

.menu-toggle:hover{

    background:#3ecbff;

    color:#04141f;

}

.menu-toggle-logo{

    display:block;

    width:32px;

    height:32px;

    object-fit:contain;

    border-radius:8px;

}

.menu-toggle-hamburger{

    display:none;

}

.menu-toggle:hover .menu-toggle-logo{

    display:none;

}

.menu-toggle:hover .menu-toggle-hamburger{

    display:block;

}

/* Navigation — hidden by default on every screen size, opened only via
   the hamburger. Renders as a dropdown panel under the header on
   desktop, and a full-width panel on mobile (see media query below).
   position:fixed (not absolute) so it stays under the sticky header
   regardless of scroll position instead of scrolling away with the
   page. */

.site-nav{

    display:none;

    flex-direction:column;

    gap:4px;

    position:fixed;

    top:95px;

    left:55px;

    width:260px;

    padding:14px;

    background:#101a26;

    border:1px solid rgba(255,255,255,.1);

    border-radius:16px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.5), 0 0 30px rgba(62,203,255,.1);

    z-index:999;

}

.site-nav.open{

    display:flex;

}

.site-nav a{

    padding:14px 16px;

    border-radius:12px;

    color:#c8d8e6;

    font-size:1rem;

    font-weight:600;

    text-decoration:none;

    transition:.25s;
}

.site-nav a:hover{

    background:rgba(62,203,255,.12);

    color:#ffffff;

}

/* Active Page */

.site-nav a.active{

    background:#3ecbff;

    color:#04141f;

    font-weight:700;

    box-shadow:
        0 12px 25px rgba(62,203,255,.35);

}

/* Mobile */

@media(max-width:900px){

    .site-header{

        height:78px;

        padding:0 22px;

    }

    .site-title{

        font-size:1.2rem;

    }

    .site-nav{

        top:78px;

        right:0;

        left:0;

        width:100%;

        border-radius:0;

        padding:20px;

        box-shadow:
            0 15px 35px rgba(0,0,0,.35);

    }

    .site-nav a{

        width:100%;

        padding:16px;

        border-radius:12px;

    }

}