/* ========== HostTrivia Sticky Nav — Clean Build (Consolidated) ========== */

/* Vars (JS reads --ht-nav-breakpoint, CSS uses hard-coded queries) */
:root { --ht-nav-breakpoint: 1024px; --ht-nav-z: 1000; }

/* Utility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* Bar: full-width, hidden off-canvas until .is-visible */
#sticky-nav.sticky-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  margin:0 !important; border:0;
  transform:translateY(-100%);
  background:transparent;
  box-shadow:none;
  backdrop-filter: blur(6px);
  transition:transform .18s ease, box-shadow .18s ease;
}
#sticky-nav.sticky-nav.is-visible{
  transform:translateY(0);
  background:rgba(219,234,254,.92);           /* #dbeafe */
  border-bottom:1px solid rgba(17,24,39,.06);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

/* Row layout */
#sticky-nav .ht-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 1rem; }

/* Brand (left) */
#sticky-nav .ht-brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
#sticky-nav .ht-logo img{ height:28px; width:auto; display:block; }
#sticky-nav .ht-title{ font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight:800; font-size:1.25rem; color:#0f172a; letter-spacing:.1px; }
#sticky-nav .ht-line{ margin-left:.5rem; font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight:600; font-size:.95rem; color:#1e40af; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50vw; }

/* Right cluster (menu + CTA) */
#sticky-nav .ht-right{ margin-left:auto; display:flex; align-items:center; gap:1rem; }
#sticky-nav .ht-right > div{ display:flex; align-items:center; gap:1.25rem; } /* WP wraps UL in a div */

/* Menu list reset (desktop) */
#sticky-nav .ht-right ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:1.25rem; }
#sticky-nav .ht-right li{ margin:0; padding:0; }

/* Links (desktop) */
#sticky-nav .ht-right a:not(.ht-cta){
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  font-size:14px; line-height:20px; font-weight:500;
  color:rgb(60,81,193);
  text-decoration:none; padding:.25rem .375rem; border-radius:.25rem;
  transition:color .15s ease, text-decoration-color .15s ease;
}
#sticky-nav .ht-right a:not(.ht-cta):hover{ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:2px; }
#sticky-nav .ht-right .current-menu-item > a{ color:#1e3a8a; }

/* CTA button (both views) */
#sticky-nav .ht-cta{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:14px; line-height:20px; font-weight:700;
  background:#1e3a8a; color:#fff; text-decoration:none;
  padding:.35rem .75rem; border-radius:.5rem; transition:filter .15s ease;
}
#sticky-nav .ht-cta:hover{ filter:brightness(1.05); }

/* Desktop-safe inline panel baseline */
#ht-nav-panel{
  position:static; transform:none;
  height:auto; width:auto; background:transparent; box-shadow:none; padding:0; overflow:visible;
  display:flex; align-items:center; gap:1.25rem;
}
#ht-nav-panel[hidden]{ display:flex !important; }  /* if JS added [hidden], ignore on desktop */
.ht-nav-overlay{ display:none; }                   /* overlay only used on mobile */

/* Hamburger (icon + subtle hover) */
.ht-nav-toggle{ appearance:none; border:0; background:transparent; cursor:pointer; padding:.5rem; display:none; }
#ht-nav-toggle{ background:transparent; transition:background-color .25s ease; }
#ht-nav-toggle:hover, #ht-nav-toggle:focus{ background-color:rgba(30,64,175,.08); }
.ht-burger, .ht-burger::before, .ht-burger::after{
  display:block; width:24px; height:2px; background-color:#1e40af !important; border-radius:2px;
  position:relative; transition:transform .2s ease, opacity .2s ease;
}
.ht-burger::before, .ht-burger::after{ content:""; position:absolute; left:0; }
.ht-burger::before{ top:-7px; } .ht-burger::after{ top:7px; }
.ht-nav-toggle[aria-expanded="true"] .ht-burger{ transform:rotate(45deg); }
.ht-nav-toggle[aria-expanded="true"] .ht-burger::before{ transform:rotate(90deg) translateX(-7px); }
.ht-nav-toggle[aria-expanded="true"] .ht-burger::after{ opacity:0; }

/* Small tidy-ups */
@media (max-width:640px){
  #sticky-nav .ht-line{ display:none; }
  #sticky-nav .ht-bar{ padding:.5rem .75rem; }
  #sticky-nav .ht-right ul{ gap:.75rem; }
}

/* Admin bar offset */
body.admin-bar #sticky-nav{ top:32px; }
@media (max-width:782px){ body.admin-bar #sticky-nav{ top:46px; } }

/* ========== Mobile / Tablet Drawer (≤1024px) — Consolidated ========== */
@media (max-width: 1024px) {
  /* Pin the burger on the right; good tap target */
  #sticky-nav .ht-bar { position: relative; padding-right: 56px; }
  .ht-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  #ht-nav-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; margin: 0; border-radius: 10px; z-index: 2001;
    -webkit-tap-highlight-color: transparent;
  }

  /* Keep header layout calm at this size */
  #sticky-nav .ht-right { margin-left: 0 !important; flex: 0 0 auto; }
  #sticky-nav .ht-right > div { flex-direction: column; align-items: flex-start; gap: 0; }

  /* Drawer panel: 50% width, top padding, left-aligned content */
  #ht-nav-panel {
    position: fixed; top: 0; right: 0;
    height: 100dvh; width: 50vw;
    background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,.12);
    transform: translateX(100%); transition: transform .2s ease-out;
    z-index: calc(var(--ht-nav-z) + 1);
    padding-top: 3rem; padding-bottom: 2rem; overflow-y: auto;
    display: block; text-align: left;
  }
  #ht-nav-panel[aria-hidden="false"] { transform: translateX(0%); }

  /* Overlay only when open (and under the toggle) */
  .ht-nav-overlay[aria-hidden="true"] { display: none !important; }
  .ht-nav-overlay[aria-hidden="false"] {
    position: fixed; inset: 0; background: rgba(0,0,0,.35);
    z-index: 2000; opacity: 1; transition: opacity .2s ease-out; display: block;
  }

  /* Force the drawer list to stack vertically and fill width */
  #ht-nav-panel .ht-menu-container,
  #ht-nav-panel .sticky-menu,
  #ht-nav-panel .menu {
    display: block !important; width: 100% !important;
    margin: 0; padding: 0; gap: 0 !important; align-items: stretch !important;
  }

  #ht-nav-panel .sticky-menu > li,
  #ht-nav-panel .menu > li {
    display: block !important; width: 100% !important;
    margin: 0 !important; padding: 0 !important;
  }

  /* Links = full-row tap targets, left-aligned; subtle hover */
  #ht-nav-panel .sticky-menu > li > a,
  #ht-nav-panel .menu > li > a,
  #ht-nav-panel a:not(.ht-cta) {
    display: block !important; width: 100% !important; text-align: left !important;
    padding: .85rem 1.5rem !important; line-height: 1.4;
    background: transparent !important; border-radius: 0 !important;
  }
  #ht-nav-panel .sticky-menu > li > a:hover,
  #ht-nav-panel .menu > li > a:hover,
  #ht-nav-panel a:not(.ht-cta):hover {
    background: rgba(30, 64, 175, .06) !important; text-decoration: none;
  }

  /* CTA centred with separation */
  #ht-nav-panel .ht-cta {
    display: block; margin: 2.25rem auto 0; text-align: center;
    padding: .5rem 1.25rem;
  }
}
/* FINAL KILL-SWITCH: stack drawer items no matter what */
@media (max-width: 1024px) {
  #ht-nav-panel ul {
    display: block !important;        /* override desktop flex */
    flex-direction: initial !important;
    gap: 0 !important;
    margin: 0; padding: 0;
    width: 100% !important;
  }
  #ht-nav-panel ul > li {
    display: block !important;        /* each item is its own row */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #ht-nav-panel ul > li > a {
    display: block !important;        /* link fills the row */
    width: 100% !important;
    text-align: left !important;
    padding: .85rem 1.5rem !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
}