/* Honeypot — mobile/responsive layer.
 *
 * The pages are styled almost entirely with inline style="" attributes, which no
 * stylesheet can override without !important. That is why the rules below use it
 * where they have to; each one is annotated with the inline declaration it beats.
 *
 * Loaded from every .dc.html <helmet>, and copied verbatim into dist/ by build.mjs
 * (STATIC includes `assets`). <base href="/"> makes the relative href resolve from
 * every URL depth.
 */

:root {
  /* Header horizontal padding — also used by the scroll handlers in
     SiteHeader.dc.html / Home.dc.html when they re-set the inline padding. */
  --hp-header-pad-x: clamp(20px, 5vw, 64px);
  /* Height of the header in its scrolled (compact) state — what sticky
     elements must clear so they don't hide underneath it. */
  --hp-header-h: 72px;
}

@media (max-width: 479px) {
  :root {
    --hp-header-pad-x: 16px;
    --hp-header-h: 68px;
  }
}

/* Anchors (#services) must land below the fixed header, not behind it. */
[id] { scroll-margin-top: 96px; }

/* ------------------------------------------------------------------ header */

[data-hp-header] > a:first-child,
[data-hp-burger] {
  position: relative;
  z-index: 2; /* stay above the mobile-menu overlay, which shares the header's stacking context */
}

[data-hp-burger] {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[data-hp-burger] span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .18s ease;
}

[data-hp-burger] span + span { margin-top: 5px; }

[data-hp-burger][aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-hp-burger][aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-hp-burger][aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 819px) {
  [data-hp-burger] { display: flex; }
  /* the CTA lives inside the mobile menu below 480px, where the row can't fit it */
  [data-hp-header] [data-hp-cta] { margin-left: 0; }
}

@media (max-width: 479px) {
  [data-hp-header] [data-hp-cta] { display: none; }
  [data-hp-header] .hp-logo { height: 28px !important; } /* beats the inline height:36px from the Logo component */
}

/* -------------------------------------------------------------- mobile menu */

[data-hp-mobile-menu] {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: calc(var(--hp-header-h) + 28px) var(--hp-header-pad-x) 40px;
  background: #101010;
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-hp-mobile-menu][data-open] { display: flex; }

[data-hp-mobile-menu] a {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.5rem, 7vw, 2rem);
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-hp-mobile-menu] a[data-hp-menu-cta] {
  margin-top: 28px;
  border-bottom: 0;
  align-self: flex-start;
  font-size: 1.05rem;
  color: var(--hp-anthrax);
  background: var(--hp-neon-lemon);
  border: 1.5px solid var(--hp-anthrax);
  border-radius: 14px;
  padding: 15px 26px;
}

[data-hp-mobile-menu] a[data-hp-menu-mail] {
  margin-top: 22px;
  border-bottom: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  padding: 10px 0;
}

@media (min-width: 820px) {
  [data-hp-mobile-menu] { display: none !important; }
}

/* ------------------------------------------------------------------ footer */

[data-hp-fnav] { gap: 0 !important; } /* beats the inline gap:6px — the links carry the rhythm now */

[data-hp-fnav] a,
[data-hp-flegal] a {
  display: inline-block;
  padding: 9px 0;
}

/* ------------------------------------------------- home: pinned work track */

/* Below the 760px GSAP breakpoint nothing translates the track, so it becomes a
   native horizontal scroller instead of ~2900px of unreachable, clipped cards. */
@media (max-width: 759px) {
  [data-track-panel] {
    height: auto !important;      /* beats inline height:100vh */
    padding: 64px 0 !important;
  }
  [data-track] {
    width: auto !important;       /* beats inline width:max-content */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  [data-track]::-webkit-scrollbar { display: none; }
  [data-track] > a { scroll-snap-align: center; }
}

/* ------------------------------------------------- project + book-call grids */

@media (max-width: 859px) {
  [data-proj-hero],
  [data-bc-grid] {
    grid-template-columns: 1fr !important; /* beats the inline two-column templates */
  }
  /* a sticky column inside a stacked layout would pin over the content below it */
  [data-proj-sticky],
  [data-bc-aside] {
    position: static !important;
  }
}

/* Form controls carry a large intrinsic min-content width (a <select> is as wide
   as its longest option, a datetime-local as wide as its spin fields), which the
   auto min-width of a grid/flex item would propagate up as a floor on the whole
   column. Below ~360px that floor exceeds the viewport. */
[data-bc-grid] > *,
[data-bc-grid] [style*="flex:1 1 200px"],
[data-bc-grid] [style*="flex:1 1 160px"] {
  min-width: 0;
}

[data-bc-grid] input,
[data-bc-grid] select,
[data-bc-grid] textarea {
  min-width: 0;
  max-width: 100%;
}