/* =========================================================
   ST7D v7.3.3 - CREATIVE NAVBAR REDESIGN
   Full desktop presentation pass built on top of v7.3.2.
   Information architecture stays intact; mobile/tablet stays intact.
   Rollback: remove this stylesheet/script or redeploy v7.3.2.
   ========================================================= */

@media (min-width:1281px){
  .header{
    height:80px!important;
    gap:12px!important;
    padding-left:clamp(18px,2.5vw,48px)!important;
    padding-right:clamp(18px,2.5vw,48px)!important;
    background:
      linear-gradient(180deg,rgba(7,7,9,.94),rgba(7,7,9,.79))!important;
    border-bottom:1px solid rgba(255,255,255,.075)!important;
    box-shadow:0 14px 40px rgba(0,0,0,.22),inset 0 -1px rgba(235,43,43,.035)!important;
    backdrop-filter:blur(22px) saturate(125%)!important;
    transition:height .22s ease,background .22s ease,box-shadow .22s ease,padding .22s ease!important;
  }

  .header:after{
    content:"";
    position:absolute;
    left:clamp(18px,2.5vw,48px);
    right:clamp(18px,2.5vw,48px);
    bottom:-1px;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(235,43,43,.16) 18%,rgba(235,43,43,.28) 50%,rgba(235,43,43,.16) 82%,transparent);
    opacity:.8;
  }

  .logo-wrap{
    width:102px!important;
    height:54px!important;
    flex:0 0 102px!important;
    transition:width .22s ease,height .22s ease,flex-basis .22s ease,filter .18s ease!important;
  }

  .logo-wrap:hover,
  .logo-wrap:focus-visible{
    filter:drop-shadow(0 0 13px rgba(235,43,43,.20));
    outline:none;
  }

  .header .primary-nav{
    justify-content:center!important;
    gap:clamp(9px,.82vw,15px)!important;
    min-width:0!important;
  }

  .header .primary-nav>.nav-primary-link,
  .header .nav-menu-toggle{
    min-height:36px;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    padding:0 4px!important;
    border-radius:8px;
    color:#aaa4a1!important;
    font-size:11.35px!important;
    font-weight:800!important;
    letter-spacing:.27px!important;
    line-height:1!important;
    transition:color .16s ease,background .16s ease,transform .16s ease!important;
  }

  .header .nav-menu-toggle{
    gap:4px!important;
  }

  .header .nav-menu-toggle svg{
    width:9px!important;
    height:9px!important;
    opacity:.68;
    transition:transform .18s ease,opacity .18s ease!important;
  }

  .header .primary-nav>.nav-primary-link:hover,
  .header .primary-nav>.nav-primary-link:focus-visible,
  .header .nav-menu-toggle:hover,
  .header .nav-menu-toggle:focus-visible,
  .header .nav-group.open>.nav-menu-toggle{
    color:#fff!important;
    background:rgba(255,255,255,.035)!important;
    outline:none;
  }

  .header .nav-group.open>.nav-menu-toggle svg{
    opacity:1;
  }

  /* Keep the navigation text clean; the active section gets a precise ST7D accent. */
  .header .primary-nav>.nav-primary-link:after,
  .header .nav-menu-toggle:after{
    left:6px!important;
    right:calc(100% - 6px)!important;
    bottom:0!important;
    height:2px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#b8161c,#ff4a4f)!important;
    box-shadow:0 0 12px rgba(235,43,43,.25);
  }

  .header .primary-nav>.nav-primary-link:hover:after,
  .header .primary-nav>.nav-primary-link:focus-visible:after,
  .header .primary-nav>.nav-primary-link.active-nav:after,
  .header .nav-menu-toggle:hover:after,
  .header .nav-menu-toggle:focus-visible:after,
  .header .nav-menu-toggle.active-nav:after,
  .header .nav-group.open>.nav-menu-toggle:after{
    right:6px!important;
  }

  .header .primary-nav>.nav-primary-link.active-nav,
  .header .nav-menu-toggle.active-nav{
    color:#fff!important;
    background:rgba(255,255,255,.024)!important;
  }

  /* Vote + Donor Shop are actions, not navigation categories. */
  .header .primary-nav>a[href="vote.html"]{
    min-height:34px!important;
    margin-left:4px;
    padding:0 11px!important;
    border:1px solid rgba(235,43,43,.22)!important;
    border-radius:9px!important;
    background:linear-gradient(180deg,rgba(145,16,22,.15),rgba(80,8,12,.10))!important;
    color:#f08d90!important;
    letter-spacing:.24px!important;
  }

  .header .primary-nav>a[href="vote.html"]:hover,
  .header .primary-nav>a[href="vote.html"]:focus-visible,
  .header .primary-nav>a[href="vote.html"].active-nav{
    border-color:rgba(235,43,43,.46)!important;
    background:linear-gradient(180deg,rgba(180,20,27,.25),rgba(95,8,13,.16))!important;
    color:#fff!important;
    box-shadow:0 8px 24px rgba(120,0,0,.12);
  }

  .header .primary-nav>.nav-donor-link{
    min-height:34px!important;
    padding:0 11px!important;
    border:1px solid rgba(226,193,98,.24)!important;
    border-radius:9px!important;
    background:linear-gradient(180deg,rgba(181,139,40,.13),rgba(78,57,12,.09))!important;
    color:#e7c978!important;
    letter-spacing:.22px!important;
  }

  .header .primary-nav>.nav-donor-link:hover,
  .header .primary-nav>.nav-donor-link:focus-visible,
  .header .primary-nav>.nav-donor-link.active-nav{
    border-color:rgba(226,193,98,.46)!important;
    background:linear-gradient(180deg,rgba(181,139,40,.22),rgba(84,60,12,.14))!important;
    color:#fff!important;
    box-shadow:0 8px 24px rgba(105,76,12,.12);
  }

  /* Action chips do not use the normal red underline. */
  .header .primary-nav>a[href="vote.html"]:after,
  .header .primary-nav>.nav-donor-link:after{
    display:none!important;
  }

  /* Utility/account controls read as their own cluster. */
  .header-account-mount{
    gap:7px!important;
    margin-left:1px!important;
    padding-left:11px;
    border-left:1px solid rgba(255,255,255,.065);
  }

  .header-account-mount .portal-theme-toggle,
  .header-account-mount .portal-chat-shortcut,
  .header-account-mount .portal-discord-shortcut,
  .header-account-mount .portal-notification-button,
  .header-account-mount .portal-account-login,
  .header-account-mount .portal-account-button,
  .header-account-mount .portal-staff-hq-shortcut{
    box-shadow:none!important;
  }

  /* Dropdowns feel like one premium system instead of unrelated floating boxes. */
  .header .nav-dropdown{
    top:calc(100% + 10px)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:14px!important;
    background:
      radial-gradient(circle at 10% 0%,rgba(153,18,23,.10),transparent 35%),
      rgba(9,9,11,.975)!important;
    box-shadow:0 26px 75px rgba(0,0,0,.62),0 0 0 1px rgba(235,43,43,.025)!important;
    backdrop-filter:blur(24px) saturate(120%)!important;
  }

  .header .nav-dropdown:after{
    content:"";
    position:absolute;
    top:-1px;
    left:18px;
    right:18px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(235,43,43,.40),transparent);
    pointer-events:none;
  }

  .header .nav-dropdown a{
    transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease!important;
  }

  .header .nav-dropdown a:hover,
  .header .nav-dropdown a:focus-visible,
  .header .nav-dropdown a.active-child{
    transform:translateX(1px);
  }

  .nav-dropdown-head{
    border-bottom-color:rgba(255,255,255,.065)!important;
  }

  .nav-dropdown-head span,
  .nav-menu-section-label{
    letter-spacing:1.05px!important;
  }

  /* Scroll compaction: keep the navigation visible but reclaim vertical space while browsing. */
  .header.header-scrolled{
    height:70px!important;
    background:rgba(7,7,9,.92)!important;
    box-shadow:0 12px 34px rgba(0,0,0,.30),inset 0 -1px rgba(235,43,43,.045)!important;
  }

  .header.header-scrolled .logo-wrap{
    width:90px!important;
    height:48px!important;
    flex-basis:90px!important;
  }

  .header.header-scrolled .primary-nav>.nav-primary-link,
  .header.header-scrolled .nav-menu-toggle{
    min-height:32px!important;
  }

  .header.header-scrolled .primary-nav>a[href="vote.html"],
  .header.header-scrolled .primary-nav>.nav-donor-link{
    min-height:32px!important;
  }
}

/* Mid-size desktop: preserve the premium hierarchy without losing future capacity. */
@media (min-width:1281px) and (max-width:1680px){
  .header{
    gap:9px!important;
    padding-left:clamp(14px,1.65vw,24px)!important;
    padding-right:clamp(14px,1.65vw,24px)!important;
  }

  .header:after{
    left:clamp(14px,1.65vw,24px);
    right:clamp(14px,1.65vw,24px);
  }

  .logo-wrap{
    width:94px!important;
    flex-basis:94px!important;
  }

  .header .primary-nav{
    gap:7px!important;
  }

  .header .primary-nav>.nav-primary-link,
  .header .nav-menu-toggle{
    font-size:10.9px!important;
    letter-spacing:.18px!important;
    padding-left:3px!important;
    padding-right:3px!important;
  }

  .header .primary-nav>a[href="vote.html"],
  .header .primary-nav>.nav-donor-link{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .header-account-mount{
    gap:6px!important;
    padding-left:9px;
  }
}

@media (min-width:1281px) and (max-width:1420px){
  .header{
    gap:7px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .header:after{left:12px;right:12px}

  .logo-wrap{
    width:88px!important;
    flex-basis:88px!important;
  }

  .header .primary-nav{
    gap:5px!important;
  }

  .header .primary-nav>.nav-primary-link,
  .header .nav-menu-toggle{
    font-size:10.6px!important;
    letter-spacing:.10px!important;
  }

  .header .primary-nav>a[href="vote.html"],
  .header .primary-nav>.nav-donor-link{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .header-account-mount{
    padding-left:7px;
    gap:5px!important;
  }
}

/* Light theme keeps the same hierarchy without turning the header into a white slab. */
@media (min-width:1281px){
  html[data-site-theme="light"] .header{
    background:linear-gradient(180deg,rgba(251,249,246,.95),rgba(247,244,240,.88))!important;
    border-bottom-color:rgba(45,37,33,.10)!important;
    box-shadow:0 12px 34px rgba(77,58,47,.09),inset 0 -1px rgba(169,45,49,.035)!important;
  }

  html[data-site-theme="light"] .header.header-scrolled{
    background:rgba(250,248,245,.94)!important;
  }

  html[data-site-theme="light"] .header .primary-nav>.nav-primary-link,
  html[data-site-theme="light"] .header .nav-menu-toggle{
    color:#655d59!important;
  }

  html[data-site-theme="light"] .header .primary-nav>.nav-primary-link:hover,
  html[data-site-theme="light"] .header .primary-nav>.nav-primary-link:focus-visible,
  html[data-site-theme="light"] .header .primary-nav>.nav-primary-link.active-nav,
  html[data-site-theme="light"] .header .nav-menu-toggle:hover,
  html[data-site-theme="light"] .header .nav-menu-toggle:focus-visible,
  html[data-site-theme="light"] .header .nav-menu-toggle.active-nav,
  html[data-site-theme="light"] .header .nav-group.open>.nav-menu-toggle{
    color:#171311!important;
    background:rgba(45,37,33,.04)!important;
  }

  html[data-site-theme="light"] .header-account-mount{
    border-left-color:rgba(45,37,33,.10);
  }

  html[data-site-theme="light"] .header .nav-dropdown{
    border-color:rgba(45,37,33,.12)!important;
    background:
      radial-gradient(circle at 10% 0%,rgba(169,45,49,.055),transparent 35%),
      rgba(252,250,248,.985)!important;
    box-shadow:0 24px 65px rgba(71,52,43,.17),0 0 0 1px rgba(169,45,49,.025)!important;
  }

  html[data-site-theme="light"] .header .primary-nav>a[href="vote.html"]{
    border-color:rgba(169,45,49,.22)!important;
    background:linear-gradient(180deg,rgba(169,45,49,.075),rgba(169,45,49,.035))!important;
    color:#a63a3d!important;
  }

  html[data-site-theme="light"] .header .primary-nav>.nav-donor-link{
    border-color:rgba(151,111,23,.22)!important;
    background:linear-gradient(180deg,rgba(183,139,39,.09),rgba(183,139,39,.035))!important;
    color:#8f6818!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .header,
  .logo-wrap,
  .header .primary-nav>.nav-primary-link,
  .header .nav-menu-toggle,
  .header .nav-menu-toggle svg,
  .header .nav-dropdown a{
    transition:none!important;
  }
}