/* ==========================================================================
   FUSION CNC — HEADER, MEGA MENU, MOBILE DRAWER

   Always solid brand red, per client direction — reviewed against the
   reference site chaosheng-cnc.com and matched explicitly: the header does
   not sit transparently over the hero/slider (it never obscures it — see
   the .hero padding-top note in home.css), and its background is the brand
   colour rather than white or near-black. Text/icons stay white in every
   state since the background no longer changes color, only height/shadow
   change on scroll. It never uses backdrop-filter/blur — the brand style
   guide bans glassmorphism and decorative translucent layers.
   ========================================================================== */

.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: #434343;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  transition: box-shadow var(--dur-2) var(--ease-io),
              transform var(--dur-2) var(--ease);
}

/* Auto-hide: site.js adds this when scrolling down past the fold and removes
   it the moment the visitor scrolls up. Never applied while a menu or the
   mobile drawer is open. */
.site-header--hidden{ transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce){
  .site-header--hidden{ transform: none; }
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: var(--header-h);
  transition: height var(--dur-2) var(--ease-io);
}

/* Compact height + a stronger shadow once scrolled — background stays the
   same brand red in every state, so nothing else needs to change here. */
.site-header--scrolled,
.site-header--solid{
  box-shadow: var(--shadow-md);
}
.site-header--scrolled .site-header__inner{ height: var(--header-h-sm); }

/* --- Logo ----------------------------------------------------------------
   The official logo.png is used as-is and never recreated or recoloured.
   Its own colours (orange mark, grey wordmark) don't hold up against the
   red header background, so it always sits on a white plaque — the same
   treatment the footer logo already uses on the dark footer. */
.brand{ display: inline-flex; align-items: center; flex: none; }
/* Recoloured white via filter (client direction) rather than a background
   plaque — brightness(0) crushes the mark to black first so invert(1) lands
   on a clean white, regardless of the source PNG's own orange/grey. Alpha
   is untouched, so this only recolours the logo's own pixels. */
.brand img{
  width: 70%;
  /* filter: brightness(0) invert(1); */
  transition: width var(--dur-2) var(--ease-io);
}
.site-header--scrolled .brand img{ width: 50%; }

/* --- Primary nav ---------------------------------------------------------- */
.nav{ display: flex; align-items: center; gap: var(--s-1); }
.nav__item{ position: relative; }
.nav__link{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  font-weight: 600;
  color: #fff;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-io);
}
.nav__link:hover{ background: rgba(255,255,255,0.14); }

/* Underline that sweeps out from the left on hover and stays put for the
   current page. White, not brand — the header background is the brand
   colour now, so a brand-coloured underline would disappear into it. */
.nav__link::after{
  content: "";
  position: absolute;
  left: var(--s-4); right: var(--s-4);
  bottom: 6px;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease);
}
.nav__link:hover::after,
.nav__item--has-menu[data-open] .nav__link::after,
.nav__link[aria-current="page"]::after{ transform: scaleX(1); }

.nav__caret{ width: 13px; height: 13px; transition: transform var(--dur-2) var(--ease-io); }
.nav__item--has-menu[data-open] .nav__caret{ transform: rotate(180deg); }

/* --- Mega menu ------------------------------------------------------------
   Opens on hover for pointers and on click/Enter for keyboard and touch.
   nav.js sets data-open on the parent .nav__item. */
.mega{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(880px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-io),
              transform var(--dur-2) var(--ease),
              visibility var(--dur-2);
}
.nav__item--has-menu[data-open] .mega{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.mega__col{
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--dur-2) var(--ease-io),
              background var(--dur-2) var(--ease-io),
              transform var(--dur-2) var(--ease),
              box-shadow var(--dur-3) var(--ease);
}
.mega__col:hover{
  border-color: var(--brand);
  background: var(--brand-wash);
  transform: translateY(-3px);
  box-shadow: var(--glow-soft);
}
.mega__thumb{
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: var(--s-4);
}
.mega__thumb img{ width: 100%; height: 100%; object-fit: contain; padding: var(--s-2); }
.mega__title{
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
.mega__count{
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--brand-ink);
  font-weight: 600;
}
.mega__desc{ margin-top: var(--s-2); font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }
.mega__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* --- Header actions ------------------------------------------------------- */
.header-actions{ display: flex; align-items: center; gap: var(--s-3); flex: none; }
/* .btn--primary is brand-red by default, which would disappear into the
   header's own red background — inverted to a white pill here instead. */
.site-header .btn--primary{
  background: #fff;
  color: var(--brand-hover);
  box-shadow: none;
}
.site-header .btn--primary:hover{
  background: var(--ink);
  color: #fff;
  box-shadow: none;
  transform: translateY(-2px);
}
.header-phone{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
/* White, not brand — the icon sits directly on the brand-red header. */
.header-phone svg{ width: 16px; height: 16px; color: #fff; }
.header-phone:hover{ color: rgba(255,255,255,0.8); }

/* --- Burger --------------------------------------------------------------- */
.burger{
  display: none;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,0.36);
  border-radius: var(--r-sm);
  color: #fff;
}
.burger svg{ width: 22px; height: 22px; }
.burger__close{ display: none; }
.burger[aria-expanded="true"] .burger__open{ display: none; }
.burger[aria-expanded="true"] .burger__close{ display: block; }

/* --- Mobile drawer -------------------------------------------------------- */
.drawer{
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 88vw);
  z-index: var(--z-drawer);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-2) var(--ease), visibility var(--dur-3);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[data-open]{ transform: translateX(0); visibility: visible; }

.drawer__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: var(--surface);
}
.drawer__head img{ height: 32px; width: auto; }
.drawer__body{ padding: var(--s-5); flex: 1; }
.drawer__link{
  display: block;
  padding: var(--s-4) var(--s-2);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.drawer__link[aria-current="page"]{ color: var(--brand-ink); }
.drawer__group{ border-bottom: 1px solid var(--line); }
.drawer__toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--s-4) var(--s-2);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.drawer__toggle svg{ width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-io); }
.drawer__toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
.drawer__sub{ display: none; padding: 0 var(--s-2) var(--s-4); }
.drawer__toggle[aria-expanded="true"] + .drawer__sub{ display: block; }
.drawer__sub a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-3);
  border-radius: var(--r-sm);
}
.drawer__sub a:hover{ background: var(--surface-2); color: var(--ink); }
.drawer__sub .badge{ font-size: 0.625rem; }
.drawer__foot{
  padding: var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.drawer__foot .btn{ width: 100%; }
.drawer__foot .btn + .btn{ margin-top: var(--s-3); }

.scrim{
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(17,17,17,0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-io), visibility var(--dur-3);
}
.scrim[data-open]{ opacity: 1; visibility: visible; }

/* Lock scroll behind the drawer. */
body[data-drawer-open]{ overflow: hidden; }

/* --- Breakpoint ----------------------------------------------------------- */
@media (max-width: 1060px){
  .nav,
  .header-phone{ display: none; }
  .burger{ display: grid; }
}