/* ==========================================================
   HEADER
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink-900);
  border-bottom: 1px solid var(--line-light);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--paper-0);
  margin-right: auto;
}
.logo span { color: var(--gold-500); }
.logo--light { color: var(--paper-0); }

.main-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 26px;
}
/* .nav-links wraps the actual Trips/Routes/etc links (see mobile slide-in
   panel below) — needs its own flex+gap on desktop, since .main-nav's gap
   only spaces .nav-links apart from .nav-footer, not the links inside it */
.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
}
.main-nav a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.94rem;
  font-weight: 500;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--gold-400); }

.header-phone {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

@media (max-width:991px){

    .header-inner{
        position:relative;
        justify-content:space-between;
        align-items:center;
    }

    /* Center the logo regardless of the hamburger's width, so it's not
       thrown off-center by the toggle button sitting only on the right.
       Scoped to .site-header — .logo is shared with the footer brand mark. */
    .site-header .logo{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        margin-right:0;
    }

    /* Hamburger */

    .menu-toggle{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        width:42px;
        height:42px;
        margin-left:auto;
        cursor:pointer;
        background:none;
        border:none;
        z-index:1001;
    }

    .menu-toggle span{
        width:24px;
        height:2px;
        background:#fff;
        margin:3px 0;
        border-radius:2px;
        transition:transform .35s cubic-bezier(.4,0,.2,1),
                   opacity .25s ease;
    }

    .menu-toggle.active span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }
    .menu-toggle.active span:nth-child(2){
        opacity:0;
        transform:scaleX(0);
    }
    .menu-toggle.active span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    /* Hide desktop buttons */

    .header-phone,
    .header-inner > .btn-primary{
        display:none;
    }

    /* Backdrop */

    .nav-backdrop{
        position:fixed;
        inset:0;
        height:100vh;
        height:100dvh;
        background:rgba(0,0,0,.55);
        backdrop-filter:blur(4px);
        -webkit-backdrop-filter:blur(4px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .35s ease;
        z-index:999;
    }

    .nav-backdrop.active{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    /* Full-height slide-in panel */

    .main-nav{
        position:fixed;
        top:0;
        right:0;
        height:100vh;
        height:100dvh;
        width:min(85vw, 360px);

        background:linear-gradient(180deg, #141414 0%, #0c0c0c 100%);
        border-left:1px solid rgba(255,255,255,.08);
        box-shadow:-24px 0 60px rgba(0,0,0,.5);

        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
        justify-content:space-between;
        padding:100px 0 32px;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;

        transform:translateX(100%);
        transition:transform .45s cubic-bezier(.16,1,.3,1);
        z-index:1000;
    }

    .main-nav.active{
        transform:translateX(0);
    }

    .nav-links{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:0 36px;
        counter-reset:nav-count;
    }

    .nav-links a{
        position:relative;
        display:block;
        padding:20px 0;
        color:rgba(255,255,255,.85);
        text-decoration:none;
        font-size:1.15rem;
        font-weight:500;
        letter-spacing:.01em;
        border-bottom:1px solid rgba(255,255,255,.07);

        opacity:0;
        transform:translateX(24px);
        transition:opacity .4s ease, transform .4s ease, color .25s ease;
    }

    .nav-links a:last-child{
        border-bottom:none;
    }

    .nav-links a::before{
        content:"";
        position:absolute;
        left:0;
        bottom:-1px;
        width:0;
        height:2px;
        background:var(--gold-500);
        transition:width .3s ease;
    }

    .nav-links a:hover{
        color:var(--gold-400);
        padding-left:8px;
    }
    .nav-links a:hover::before{
        width:28px;
    }

    .nav-links a span::before{
        content:counter(nav-count) "  ";
        counter-increment:nav-count;
        color:var(--gold-500);
        font-family:var(--font-mono);
        font-size:.8rem;
        margin-right:6px;
        opacity:.7;
    }

    .main-nav.active .nav-links a{
        opacity:1;
        transform:translateX(0);
    }
    .main-nav.active .nav-links a:nth-child(1){ transition-delay:.08s; }
    .main-nav.active .nav-links a:nth-child(2){ transition-delay:.14s; }
    .main-nav.active .nav-links a:nth-child(3){ transition-delay:.2s; }
    .main-nav.active .nav-links a:nth-child(4){ transition-delay:.26s; }
    .main-nav.active .nav-links a:nth-child(5){ transition-delay:.32s; }

    .nav-footer{
        display:flex;
        flex-direction:column;
        gap:14px;
        padding:24px 36px 0;
        border-top:1px solid rgba(255,255,255,.08);

        opacity:0;
        transform:translateY(16px);
        transition:opacity .4s ease .38s, transform .4s ease .38s;
    }

    .main-nav.active .nav-footer{
        opacity:1;
        transform:translateY(0);
    }

    .nav-phone{
        color:rgba(255,255,255,.75);
        font-family:var(--font-mono);
        font-size:.95rem;
        letter-spacing:.02em;
        text-decoration:none;
    }
    .nav-phone:hover{
        color:var(--gold-400);
    }

    .nav-book{
        display:inline-flex;
        text-align:center;
        justify-content:center;
        width:100%;
    }
}

@media (min-width:992px){

    .menu-toggle{
        display:none;
    }

    .nav-backdrop{
        display:none;
    }

    .nav-footer{
        display:none;
    }
}