/* hts-runtime.css — state-driven styles for the vanilla runtime (hts-runtime.js).
 *
 * These rules replace the visual effects that static export Interactions (IX2) used
 * to drive with inline styles: burger-to-X morph, mobile menu slide, backdrop
 * fade, dropdown icon rotation + border emphasis, tab fade-in, logo marquee,
 * and the mobile hero slide grow effect.
 *
 * Everything here is keyed off classes toggled by hts-runtime.js
 * (.is-open / .is-open / .hts-active / .hts-dd-open), so the file is safe to
 * load on every page — rules simply never match where a component is absent.
 *
 * Golden rule 3 applies: this file exists because the minified static export CSS is
 * SRI-hashed and must never be edited. Additions for chrome behavior belong
 * here (or in page-level <style id="hts-..."> blocks for page-specific work).
 */

/* Mobile first-paint guard. Keep the page inside the viewport while the main
   stylesheet is loading on slow mobile connections; the full responsive
   layout remains owned by hts-core.css below. `clip` (not `hidden`) is what
   actually ships on modern browsers: an `overflow-x: hidden` scroll container
   ancestor silently disables `position: sticky` pinning for the whole page —
   the header stopped sticking when scrolled (#343). Browsers without `clip`
   fall back to the `hidden` line above it. */
html,
body {
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
}

@media (max-width: 991px) {
  .page-wrapper,
  .nav_component,
  main,
  footer {
    max-width: 100%;
    overflow-x: clip;
  }

  .nav_content-wrapper,
  .nav_content,
  .nav_logo-link {
    min-width: 0;
  }

  /* `.nav_logo` is on the <img> itself. Logo sizing (height 4rem, 3.25rem on
     phones) is owned by hts-core.css; this block only guards against the
     image overflowing its flex parent. An earlier attempt let a
     `max-width: 180px` + `height: auto` pair from the mobile-critical inline
     block scale the logo on phones, which rendered the stacked 438×380 logo
     at 180×156px — hts-core.css's height rules are the design intent. */
  .nav_logo {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------- burger X */
/* IX2 a-6/a-7: on open, top/bottom bars shrink to width 0 while the middle
   bar rotates 45deg and the (initially display:none) middle-bottom bar
   appears rotated 90deg, forming an X. */
.nav_burger-bar-top,
.nav_burger-bar-bottom {
  transition: width 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.nav_burger-bar-middle,
.nav_burger-middle-bottom {
  transition: transform 0.35s cubic-bezier(0.86, 0, 0.07, 1);
}
.nav_burger.is-open .nav_burger-bar-top,
.nav_burger.is-open .nav_burger-bar-bottom {
  width: 0;
}
.nav_burger.is-open .nav_burger-bar-middle {
  transform: rotate(45deg);
}
.nav_burger.is-open .nav_burger-middle-bottom {
  display: block;
  transform: rotate(90deg);
}

/* ------------------------------------------------------- mobile menu slide */
/* IX2 a-8/a-9: menu drops in from -100% Y over 500ms; JS toggles display
   (base rule is display:none) and then .is-open for the transform. */
.nav_mobile-menu {
  transform: translate3d(0, -100%, 0);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.nav_mobile-menu.is-open {
  transform: translate3d(0, 0, 0);
}

/* While the menu is open, pin the whole nav to the viewport top. The menu is
   position:fixed and lays its content out from the viewport top (its 65px top
   pad is exactly the header's height), so the header strip (logo + X) must sit
   at y=0. The announcement banner otherwise pushes the sticky header ~9rem
   down the page and it floats over the menu links. */
#navigation.hts-menu-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Backdrop blur fade (IX2: opacity 0 -> 1 over 750ms). */
.nav_bg-blur {
  transition: opacity 0.5s ease;
}
.nav_bg-blur.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------------------------------------------------------- dropdown polish */
/* Chevron rotation for nav dropdowns (IX2 a-15/16/18/19). */
.nav_mobile-menu-drop-icon {
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}
.hts-dropdown-toggle.is-open .nav_mobile-menu-drop-icon {
  transform: rotate(180deg);
}

/* Benefits / FAQ accordion chevrons (IX2 a-33..36 / a-20/21). */
.benefits_drop-top-icon,
.faqs_faq-icon {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.benefits_drop-top.is-open .benefits_drop-top-icon,
.faqs_faq-top.is-open .faqs_faq-icon,
.faqs_faq-toggle.is-open .faqs_faq-icon {
  transform: rotate(180deg);
}

/* Open benefits rows switch their bottom border to the dark brand color
   (IX2 STYLE_BORDER rgb(25,29,38); closed is the neutral-300 default). */
.benefits_drop-component.hts-dd-open {
  border-bottom-color: #191d26;
}

/* -------------------------------------------------------------- tabs fade */
/* static export tabs faded panes in over data-duration-in="300". */
.hts-tab-pane.hts--tab-active {
  animation: hts-tab-in 0.3s ease;
}
@keyframes hts-tab-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ------------------------------------------------------------ logo marquee */
/* IX2 a-17 (PAGE_FINISH, loop): .logos_content scrolls 0 -> -200% over 45s.
   Two copies of the track sit side by side, so -200% loops seamlessly. */
@keyframes hts-logos-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-200%, 0, 0);
  }
}
.logos_content {
  animation: hts-logos-scroll 45s linear infinite;
}

/* Override the static export-minified CSS's `justify-content: space-between`
 * on `.logos_wrapper` and the ≤991px mobile override of
 * `justify-content: flex-start` on `.logos_content`. The mobile
 * override combined with `min-width: 100%` creates a ~150-200px
 * trailing empty band at the end of each track — visible as a "gap"
 * between the last logo of track 1 and the first logo of track 2,
 * and again between track 2 and the duplicate of track 1. The
 * user-reported "weird space from axia and espn and then salvation
 * army and showboat" was this trailing band, not a within-track gap
 * (the within-track gap was 4rem in PR #241 and looked fine).
 *
 * `space-around` distributes the free space (wrapper-width − content
 * width) as equal half-margins around each logo. The end half-margin
 * of track 1 + the start half-margin of track 2 = 2 × half-margin =
 * the within-track gap, so the boundary gap matches the within-track
 * gap and no empty band is visible. Each track still fills the
 * wrapper (because `min-width: 100%` from the minified CSS remains
 * active), so the `-200%` animation still translates by exactly
 * 2 wrapper-widths and the loop stays seamless (track 1 and track 3
 * are byte-identical, so visible content at 0% matches visible at
 * 100%). The gap size scales with the wrapper width (larger screens
 * get larger gaps), which is the original static export design intent.
 *
 * Sits after the SRI-hashed minified CSS in <head>, so the cascade
 * picks up this override (see golden rule 3 in AGENTS.md). */
.logos_content {
  justify-content: space-around !important;
}
.logos_wrapper {
  justify-content: flex-start !important;
}

/* --------------------------------------------- mobile hero slide emphasis */
/* IX2 a-28/29 (SLIDER_ACTIVE/INACTIVE, small/tiny): the active slide's
   content card grows from 16.5625rem to 18.75rem. Base rules + the 0.25s
   transition already live in the minified CSS; this only restores the
   active-slide size. hts-runtime.js toggles .hts-active on the live slide. */
@media (max-width: 767px) {
  .hero_slider-slide.hts-active .hero_slide-content {
    height: 18.75rem;
  }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logos_content {
    animation: none;
  }
  .nav_mobile-menu,
  .nav_bg-blur,
  .nav_burger-bar-top,
  .nav_burger-bar-bottom,
  .nav_burger-bar-middle,
  .nav_burger-middle-bottom,
  .nav_mobile-menu-drop-icon,
  .benefits_drop-top-icon,
  .faqs_faq-icon {
    transition: none;
  }
  .hts-tab-pane.hts--tab-active {
    animation: none;
  }
}

/* (The .location_cards-row.is-grid column count is driven from JS — see
   initLocationGrid in hts-runtime.js — because the static export export pins
   each card to an explicit grid-row / grid-column, and the cards' 4-col
   base rule wins the cascade. CSS-only fixes can't clear those.) */
.industry_tabs-controls-link:is(button) {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
}