/* ===== Top bar ===== */
.nav {
    z-index: 50; margin:29px auto 0 auto; font-family: 'sniglet';
    background: #F5FCDB; font-size: 24px; position:absolute;
    max-width:1200px; width:calc(100% - 80px); border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); 
    left: 50%; transform: translateX(-50%);
}
.nav__row {
    max-width: 1200px; margin: 0 auto; height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; width:calc(100% - 100px);
}
.nav-logo { margin:4px -60px 0 -40px; }
.nav-logo-drawer { margin:118px 0 0 30px; } 
.nav-label { font-weight:normal; color:var(--ui-blue); }
.nav-label:hover { color:white; }

/* desktop menu */
.menu {display:flex; align-items:center;  margin:auto; gap:3vw; }
.menu > li {position: relative; list-style: none; height:50px; line-height:50px; }
.menu > li:last-child { position:absolute; right:10px; }

.menu > li > a,
.menu > li > button {
    display:inline-flex; align-items:center; gap:.5rem;
    padding: 0 12px; border:0; background:none; color:var(--ui-blue);
    cursor:pointer; font:inherit;
}
.menu > li > a:hover,
.menu > li > button:hover { background:var(--ui-blue); color:white; }
.subnav-toggle { border-radius: 0; }
.subnav-toggle:hover { color:white }

/* chevron */
.chev{display:inline-block; transition: transform var(--dur) var(--e); transform: translateY(1px);}
    [aria-expanded="true"] .chev{ transform: rotate(90deg) translateY(1px); }

/* ===== Submenu (desktop) ===== */
.submenu {
    position:absolute; top: calc(100% + var(--submenu-offset)); left: 0;
    min-width: 240px; padding: 0px;
    background: white; border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(8px); opacity: 0; pointer-events: none;
    transition: transform var(--dur) var(--e), opacity var(--dur) var(--e); }
.submenu li {list-style:none}
.submenu a { display:block; padding:10px 16px 10px 16px; color:var(--ui-blue); }
.submenu a:hover{ background: var(--ui-blue); color:white; }
/* open state */
.has-subnav[data-open="true"] > .submenu { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* ===== Mobile ===== */
.hamburger {
    display: inline-flex; align-items:center; justify-content:center;
    width: 42px; height: 42px; border-radius: 10px; border:1px solid var(--border);
    background: url('../imgs/mobile-thumb.png') no-repeat center center; cursor:pointer; }
.hamburger:hover{ opacity:0.7; }
.hamburger-x { background-image: url('../imgs/mobile-thumb-x.png'); margin:68px 24px 0 0; }

/* Drawer */
.drawer {
    position: fixed; inset: 0 0 0 auto; /* right side */
    width: 100%; background: url('../imgs/hamburger-bg.png') no-repeat top left;
    background-size:100% 100%; font-family: 'sniglet'; font-size:36px;
    border-left:1px solid var(--border); transform: translateY(-100%);
    transition: transform var(--dur) var(--e); z-index: 60;
    display: flex; flex-direction: column;
}
.drawer__head {height: var(--nav-h); display:flex; align-items:center; padding:0 16px; border-bottom:1px solid var(--border);}
.drawer__menu {padding: 10px 10px 20px; margin:100px auto 0 auto; }
.drawer__menu details {border-bottom:1px solid var(--border); padding: 4px 0;}
.drawer__menu a, .drawer__menu summary {
    display:block; padding: 12px; border-radius:8px; color:var(--ui-blue);
    cursor:pointer; list-style:none; outline: none;
}
.drawer__menu a:hover, .drawer__menu summary:hover{ background: rgba(255,255,255,.06); }
.drawer[data-open="true"] { transform: translateY(0); }

.nav-mobile-link { font-weight:normal; }
.nav-mobile-link:hover { font-weight:bold; }
.nav-mobile-link-indent { margin-left:50px; }
.nav-mobile-dropdown { transform:rotate(90deg); display:inline-block; }

/* Overlay for drawer */
.scrim {
    position: fixed; inset:0; background: rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition: opacity var(--dur) var(--e); z-index: 55;
}
.scrim[data-open="true"]{ opacity:1; pointer-events:auto; }

/* Responsive: hide desktop menu under 768px */
@media (max-width: 768px){ .menu{ display:none; } 
    .hamburger{ display:inline-flex; } 
}
@media (min-width: 769px){ 
    .hamburger{ display:none; }
    .hamburger-x { display:inline-flex; }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
    .submenu, .drawer, .scrim { transition: none; }
}