/* ============================================================================
   Waystar Studio - site header
   ----------------------------------------------------------------------------
   The canonical top bar, promo marquee, mega menu and mobile drawer.
   Extracted verbatim from /get-quote/ and shared by every page so the chrome
   is identical site-wide.

   Load order on every page:
       <link rel="stylesheet" href="/assets/css/cta-buttons.css">
       <link rel="stylesheet" href="/assets/css/header.css">
       <style> ...page styles... </style>

   Colours are namespaced (--wsh-*) so the header renders identically no matter
   what a page happens to call its own palette variables.
   ========================================================================== */

:root {
  --wsh-violet:        #6D28D9;
  --wsh-violet-strong: #5B21B6;
  --wsh-lavender:      #C4B5FD;
  --wsh-violet-tint:   #F4F0FD;
  --wsh-violet-tint-2: #EDE6FB;

  --wsh-text:      #17160F;
  --wsh-text-mute: rgba(23,22,15,0.72);
  --wsh-text-dim:  rgba(23,22,15,0.55);

  --wsh-line:      rgba(23,22,15,0.10);
  --wsh-line-dark: rgba(23,22,15,0.16);

  --wsh-p-700:        #4C1D95;
  --wsh-p-200:        #C4B5FD;
  --wsh-on-card-mute: #D6C9F5;

  --wsh-gutter: clamp(20px, 4vw, 56px);
  --wsh-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* The header keeps Poppins even on pages whose body font differs (e.g. the
   Inter-based blog), so the chrome never changes between pages. */
.header-stack,
.mobile-menu {
  font-family: var(--wsh-font);
  line-height: 1.55;
  color: var(--wsh-text);
}

.header-stack a,
.mobile-menu a { text-decoration: none; }

/* Zero-specificity resets: they neutralise a page's global `a`/`img` styling
   without ever outranking a component rule. Wrapping BOTH sides in :where()
   is what keeps the specificity at 0,0,0 - a plain
   `.header-stack img { display: block }` would be 0,1,1 and would beat
   `@media (max-width:820px) { .google-review-badge { display: none } }`,
   leaving the review badge visible on mobile and pushing the hamburger
   off-screen. */
:where(.header-stack, .mobile-menu) :where(a) { color: inherit; }
:where(.header-stack, .mobile-menu) :where(img) { display: block; max-width: 100%; }

/* ==================== TOP BAR ==================== */
/* header + promo banner stick together as one unit */
.header-stack{
  position:sticky; top:0; z-index:60;
}
.topbar{
  position:static;
  background:#FFFFFF;
  border-bottom:1px solid var(--wsh-line);
}

/* ---------- promo marquee banner (below header) ---------- */
.promo-banner{
  height:34px;
  background:var(--wsh-violet);
  border-bottom:1px solid var(--wsh-violet-strong);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.promo-track{
  display:flex;
  align-items:center;
  flex-shrink:0;
  white-space:nowrap;
  animation:promo-scroll 55s linear infinite;
  will-change:transform;
}
.promo-banner:hover .promo-track{ animation-play-state:paused; }
.promo-item{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#FFFFFF;
  padding:0 30px;
  white-space:nowrap;
}
.promo-item .promo-bolt{
  width:13px; height:13px; flex-shrink:0;
  color:var(--wsh-lavender);
}
.promo-item::after{
  content:'';
  width:4px; height:4px; border-radius:50%;
  background:var(--wsh-lavender);
  margin-left:30px;
}
@keyframes promo-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media (max-width:600px){
  .promo-banner{ height:30px; }
  .promo-item{ font-size:11.5px; padding:0 20px; gap:7px; }
  .promo-item::after{ margin-left:20px; }
}
.topbar-inner{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px var(--wsh-gutter);
  gap:18px;
}
.logo img{ height:34px; width:auto; filter:brightness(0); }

/* ---- primary links ---- */
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links > a, .nav-trigger{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13.5px; font-weight:500; color:var(--wsh-text-mute);
  padding:9px 13px; border-radius:9px;
  white-space:nowrap;
  transition:color .18s ease, background .18s ease;
}
.nav-links > a:hover, .nav-trigger:hover{ color:var(--wsh-violet); background:var(--wsh-violet-tint); }
.nav-trigger .caret{ width:13px; height:13px; transition:transform .2s ease; }

/* ---- mega dropdown ---- */
.nav-item{ position:static; }
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:#FFFFFF;
  border-top:1px solid var(--wsh-line);
  border-bottom:1px solid var(--wsh-line);
  box-shadow:0 24px 50px -24px rgba(23,22,15,0.28);
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:59;
}
.nav-item:hover .mega,
.nav-item:focus-within .mega{ opacity:1; visibility:visible; transform:none; }
.nav-item:hover .nav-trigger, .nav-item:focus-within .nav-trigger{ color:var(--wsh-violet); background:var(--wsh-violet-tint); }
.nav-item:hover .caret, .nav-item:focus-within .caret{ transform:rotate(180deg); }

.mega-inner{
  display:grid;
  grid-template-columns:1.5fr 1.25fr 1.1fr 1fr;
  gap:34px;
  padding:30px var(--wsh-gutter) 34px;
  align-items:start;
}
@media (max-width:1240px){ .mega-inner{ grid-template-columns:1.4fr 1.2fr 1fr; } .mega-blog{ display:none; } }

.mega-label{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--wsh-text-dim);
  margin-bottom:14px;
}
.mega-link{
  display:flex; align-items:flex-start; gap:11px;
  padding:9px 10px; border-radius:11px;
  margin-left:-10px;
  transition:background .16s ease;
}
.mega-link:hover{ background:var(--wsh-violet-tint); }
.mega-ic{
  width:34px; height:34px; flex-shrink:0;
  border-radius:9px;
  background:var(--wsh-violet-tint);
  border:1px solid var(--wsh-violet-tint-2);
  color:var(--wsh-violet);
  display:flex; align-items:center; justify-content:center;
}
.mega-ic svg{ width:17px; height:17px; }
.mega-link:hover .mega-ic{ background:var(--wsh-violet); border-color:var(--wsh-violet); color:#FFFFFF; }
.mt-name{ display:block; font-size:13.5px; font-weight:600; color:var(--wsh-text); }
.mt-desc{ display:block; font-size:12px; color:var(--wsh-text-dim); margin-top:1px; }

.mega-area-grid{ display:grid; gap:7px; }
.mega-area{
  font-size:12.5px; color:var(--wsh-text-mute);
  transition:color .16s ease;
  cursor:pointer;
}
.mega-area:hover{ color:var(--wsh-violet); }
.mega-allposts{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--wsh-violet);
  margin-top:14px;
}
.mega-allposts .arrow-icon{ width:13px; height:13px; }
.mega-allposts:hover{ color:var(--wsh-violet-strong); }

.mega-post{
  display:block; padding:9px 0;
  border-bottom:1px solid var(--wsh-line);
}
.mega-post:last-of-type{ border-bottom:none; }
.mp-tag{
  display:inline-block;
  font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--wsh-violet); background:var(--wsh-violet-tint);
  border:1px solid var(--wsh-violet-tint-2);
  padding:2px 8px; border-radius:100px;
  margin-bottom:5px;
}
.mp-title{ display:block; font-size:12.5px; font-weight:500; color:var(--wsh-text-mute); line-height:1.45; }
.mega-post:hover .mp-title{ color:var(--wsh-violet); }

.mega-cta{
  background:var(--wsh-p-700);
  border-radius:14px;
  padding:20px;
  color:#FFFFFF;
}
.mega-cta-eyebrow{
  display:block; font-size:10.5px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--wsh-p-200); margin-bottom:8px;
}
.mega-cta h4{ font-size:15px; font-weight:700; line-height:1.35; margin-bottom:7px; }
.mega-cta p{ font-size:12px; color:var(--wsh-on-card-mute); line-height:1.55; margin-bottom:14px; }

/* ---- right side ---- */
.nav-cta{ display:flex; align-items:center; gap:14px; }
.google-review-badge{ height:34px; width:auto; display:block; flex-shrink:0; }
.nav-phone-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--wsh-text);
  white-space:nowrap;
  transition:color .18s ease;
}
.nav-phone-link svg{ width:15px; height:15px; color:var(--wsh-violet); }
.nav-phone-link:hover{ color:var(--wsh-violet); }
.nav-divider{ width:1px; height:22px; background:var(--wsh-line-dark); }

/* ---- hamburger ---- */
.mobile-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px;
  background:none; border:1px solid var(--wsh-line-dark); border-radius:10px;
  cursor:pointer; padding:0 10px;
}
.mobile-toggle span{
  display:block; height:2px; width:100%;
  background:var(--wsh-text); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
body.menu-open .mobile-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .mobile-toggle span:nth-child(2){ opacity:0; }
body.menu-open .mobile-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- responsive switch ---- */
@media (max-width:1080px){
  .nav-links{ display:none; }
  .mobile-toggle{ display:flex; }
}
@media (max-width:820px){
  .google-review-badge{ display:none; }
}
@media (max-width:560px){
  .nav-phone-link span{ display:none; }
  .nav-divider{ display:none; }
}

/* ==================== MOBILE MENU ==================== */
.mobile-overlay{
  position:fixed; inset:0; z-index:70;
  background:rgba(23,22,15,0.45);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s;
}
body.menu-open .mobile-overlay{ opacity:1; visibility:visible; }

.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(360px, 88vw);
  background:#FFFFFF;
  border-left:1px solid var(--wsh-line);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
body.menu-open .mobile-menu{ transform:none; }

.mm-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--wsh-line);
  flex-shrink:0;
}
.mm-close{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--wsh-line-dark); border-radius:10px;
  color:var(--wsh-text); cursor:pointer;
}
.mm-close svg{ width:18px; height:18px; }
.mm-close:hover{ border-color:var(--wsh-violet); color:var(--wsh-violet); }

.mm-nav{
  flex:1; overflow-y:auto;
  padding:18px 20px 24px;
  display:flex; flex-direction:column; gap:3px;
}
.mm-label{
  display:block;
  font-size:10.5px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--wsh-text-dim);
  margin:20px 0 8px;
}
.mm-link{
  display:block;
  font-size:14px; color:var(--wsh-text-mute);
  padding:9px 12px; border-radius:9px;
  transition:background .16s ease, color .16s ease;
  cursor:pointer;
}
.mm-link:hover{ background:var(--wsh-violet-tint); color:var(--wsh-violet); }
.mm-pill{ font-weight:600; color:var(--wsh-text); }
.mm-more{ font-weight:700; color:var(--wsh-violet); display:inline-flex; align-items:center; gap:6px; }
.mm-more .arrow-icon{ width:13px; height:13px; }

.mm-foot{
  flex-shrink:0;
  padding:16px 20px;
  border-top:1px solid var(--wsh-line);
  display:grid; gap:11px;
}

.mm-phone{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--wsh-text);
  padding:11px 20px;
  border:1px solid var(--wsh-line-dark); border-radius:100px;
}
.mm-phone svg{ color:var(--wsh-violet); }
.mm-phone:hover{ border-color:var(--wsh-violet); color:var(--wsh-violet); }

/* ============================================================================
   Layout reset
   ----------------------------------------------------------------------------
   The old per-page header was `position: fixed`, so pages padded their first
   section down by ~128px to clear it. This shared header is `position: sticky`
   and occupies real flow space, so those offsets are re-stated here at the
   spacing the pages actually intended (original value minus the 110px of
   header + promo banner they were clearing).

   `main.shell` (the /get-quote/ page) is excluded - it was already built
   against the sticky header and must stay pixel-identical.
   ========================================================================== */

.header-stack ~ main:not(.shell) > .crumbs { padding-top: 18px; }

/* heroes that used to clear the fixed bar themselves */
.header-stack ~ main .ab-hero   { padding-top: 68px; }
.header-stack ~ main .post-hero { padding-top: 48px; }

@media (max-width: 600px) {
  .header-stack ~ main:not(.shell) > .crumbs { padding-top: 10px; }
  .header-stack ~ main .ab-hero   { padding-top: 40px; }
  .header-stack ~ main .post-hero { padding-top: 30px; }
}

/* `.post-hero` is a <header> element inside the article - make sure it can
   never stack above the real navigation. */
.header-stack ~ main header.post-hero { position: relative; z-index: 0; }

/* links whose destination page isn't built yet */
.header-stack a.is-soon,
.mobile-menu a.is-soon { cursor: pointer; }

/* The blog reading-progress bar was pinned below the old fixed header. With a
   sticky header it must ride at the top of the viewport instead. */
.read-bar { top: 0; }