/* ===============================================================
   HCBI components
   Buttons, dropdowns, mobile panel, cards, forms, accordions.
   Depends on tokens in main.css.
   =============================================================== */

/* ---------------------------------------------------------------
   SHARED SECTION HELPERS
   Section heads, alternating backgrounds, and centered section
   CTAs. Used across the homepage and every content page type, so
   they live here as a single source of truth.
--------------------------------------------------------------- */
.section-head {
  max-width: 760px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.section-head h2 {
  margin-bottom: var(--space-sm);
}

.section-head p {
  color: var(--text-muted);
  font-size: 1.1rem;
}

.alt-bg {
  background: var(--light-gray);
}

.section-cta {
  text-align: center;
  margin-top: var(--space-lg);
}

.section-cta a {
  font-family: var(--font-heading);
  font-weight: 700;
}

.section-cta a::after {
  content: " \2192";
}

/* ---------------------------------------------------------------
   BREADCRUMBS
   Shown on every deep page type (hub, solution, industry, state),
   so it lives here as a single source of truth.
--------------------------------------------------------------- */
.breadcrumbs {
  background: var(--light-gray);
  border-bottom: 1px solid var(--border-gray);
  font-size: var(--fs-small);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-sm) 0;
  list-style: none;
}

.breadcrumbs__list li {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.breadcrumbs__list li + li::before {
  content: "\203A";
  margin-right: 0.5rem;
  color: var(--text-muted);
}

.breadcrumbs__list a {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
}

.breadcrumbs__list a:hover {
  color: var(--green-dark);
}

.breadcrumbs__list li[aria-current="page"] {
  font-family: var(--font-heading);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary {
  /* --sk-green-cta, not --green: white on --green is 3.36:1. */
  background: var(--sk-green-cta);
  color: var(--white);
  border-color: var(--sk-green-cta);
}

.btn--primary:hover {
  background: var(--sk-green-cta-hover);
  border-color: var(--sk-green-cta-hover);
  color: var(--white);
}

.btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.btn--secondary:hover {
  background: var(--navy);
  color: var(--white);
}

.btn--block {
  width: 100%;
}

/* ---------------------------------------------------------------
   DESKTOP MEGA MENUS
   Full-width panels under the nav. Revealed on hover of the parent
   item and on click via aria-expanded (JS). The .site-header needs
   position relative so the full-width panel anchors to it.
--------------------------------------------------------------- */
.site-header {
  position: sticky;
}

.primary-nav__item.has-mega {
  position: static;
}

.primary-nav__mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: var(--white);
  border-top: 1px solid var(--border-gray);
  box-shadow: 0 20px 50px rgba(11, 11, 69, 0.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.primary-nav__item.has-mega:hover .primary-nav__mega,
.primary-nav__toggle[aria-expanded="true"] + .primary-nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav__item.has-mega:hover .primary-nav__caret,
.primary-nav__toggle[aria-expanded="true"] .primary-nav__caret {
  transform: rotate(180deg);
}

.primary-nav__mega-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--container-pad) var(--space-xl);
  display: flex;
  gap: var(--space-2xl);
}

.primary-nav__mega-head {
  flex: 0 0 220px;
}

.primary-nav__mega-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--navy);
  margin-bottom: var(--space-xs);
  line-height: 1.25;
}

.primary-nav__mega-all {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--green-dark);
}

.primary-nav__mega-all::after {
  content: " \2192";
}

.primary-nav__cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-lg);
  align-content: start;
}

.primary-nav__cols .primary-nav__sublink {
  display: block;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--navy);
  border-bottom: 1px solid var(--border-gray);
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.primary-nav__cols .primary-nav__sublink:hover {
  background: var(--light-gray);
  color: var(--green-dark);
}

/* States mega: 3-column popular grid + picker */
.primary-nav__states-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--space-md);
  align-content: start;
}

.primary-nav__states-cols a {
  display: block;
  padding: 0.45rem 0.6rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--navy);
  border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease;
}

.primary-nav__states-cols a:hover {
  background: var(--light-gray);
  color: var(--green-dark);
}

.primary-nav__picker {
  flex: 0 0 260px;
}

.primary-nav__picker label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.primary-nav__picker-select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  cursor: pointer;
}

.primary-nav__picker p {
  margin-top: var(--space-xs);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   MOBILE NAV PANEL
   Hidden offscreen by default. JS adds .is-open on .mobile-nav
   (or toggles body class) to slide it in.
--------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  /* Above every other layer on the page. The highest thing otherwise is
     the skip link at 1000, then the sticky header at 100. */
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
}

.mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  opacity: 0;
  transition: opacity var(--transition);
}

.mobile-nav.is-open .mobile-nav__overlay {
  opacity: 1;
}

.mobile-nav__panel {
  /* FULL SCREEN. The panel used to be min(88%, 380px) wide, which left a
     strip of the page showing down the left-hand side. It now covers the
     viewport completely.

     height is declared twice on purpose. 100dvh is the dynamic viewport
     height, which excludes the mobile browser chrome that shows and hides
     as you scroll; 100vh is the static fallback for browsers that do not
     know dvh. The second declaration wins where it is supported and is
     ignored where it is not, so both cases get the right answer. */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  z-index: 2;
  background: var(--white);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;

  /* The panel itself never scrolls. Its nav region does, so the actions
     block below stays pinned in view. See .mobile-nav__nav. */
  overflow: hidden;

  transform: translateX(100%);
  transition: transform var(--transition);
}

.mobile-nav.is-open .mobile-nav__panel {
  transform: translateX(0);
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-gray);
  flex: 0 0 auto;
}

.mobile-nav__logo img {
  height: 36px;
  width: auto;
}

.mobile-nav__close {
  font-size: 2rem;
  line-height: 1;
  color: var(--navy);
  width: 44px;
  height: 44px;
}

.mobile-nav__nav {
  /* The one scrolling region. min-height:0 is load-bearing: without it a
     flex item refuses to shrink below its content height, overflow-y
     never engages, and a long menu would push the actions off screen
     instead of scrolling. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-sm) 0;
}

.mobile-nav__link,
.mobile-nav__section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--navy);
  text-align: left;
  border-bottom: 1px solid var(--border-gray);
}

.mobile-nav__section-caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--navy);
  transition: transform var(--transition);
}

.mobile-nav__section-toggle[aria-expanded="true"] .mobile-nav__section-caret {
  transform: rotate(180deg);
}

.mobile-nav__section[hidden] {
  display: none;
}

.mobile-nav__sublist {
  background: var(--light-gray);
}

.mobile-nav__sublink {
  display: block;
  padding: 0.75rem var(--space-md) 0.75rem var(--space-lg);
  font-size: var(--fs-small);
  color: var(--text-dark);
  border-bottom: 1px solid var(--border-gray);
}

.mobile-nav__sublink--hub {
  font-weight: 700;
  color: var(--navy);
}

.mobile-nav__actions {
  /* Pinned to the bottom of the panel so the phone number, the hours and
     both buttons are always reachable without scrolling. env() keeps them
     clear of the iPhone home indicator. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-gray);
}

.mobile-nav__phone {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--navy);
  text-align: center;
}

.mobile-nav__hours {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------------
   HERO BUTTON PAIR ON MOBILE

   The hero CTAs are a pair: a quote button and a call button. Their
   wrappers are flex with flex-wrap:wrap, and at full desktop sizing the
   two are 193px and 215px. A 390px phone gives the hero 310px of content
   width between its 40px gutters, so 408px of buttons wrapped onto two
   rows and each one stretched to full width, which reads as a stacked
   pair rather than a pair.

   Rather than accept the stack, the pair is kept on one row and sized
   down to fit: nowrap, a tighter gap, less horizontal padding and a
   smaller label. Measured label widths at 13px are 107px and 125px, so
   232px of text plus 48px of padding plus a 10px gap is 290px, inside
   the 310px available at 390px and the 350px available at 430px.

   Three wrappers, one rule, because home, solution and hub heroes each
   define their own class but all want the same behaviour here.
--------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Selectors are deliberately (0,3,0). The pair sits in files that load
     after this one, and .page-home .btn in pages.css sets font-size and
     padding at (0,2,0), so a rule written as .hero__actions > .btn ties
     on specificity and loses on order. Naming the hero ancestor beats it
     outright and keeps working wherever these files end up in the
     cascade. */
  .hero .hero__actions,
  .solution-hero .solution-hero__actions,
  .hub-hero .hub-hero__actions {
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch;
  }

  .hero .hero__actions > .btn,
  .solution-hero .solution-hero__actions > .btn,
  .hub-hero .hub-hero__actions > .btn {
    /* Shrink to content, never stretch to fill the row. */
    flex: 0 1 auto;
    min-width: 0;
    padding: 0.85rem 12px;
    font-size: 13px;
    /* The label must not wrap inside the button; the point of shrinking
       the type is to keep each one on a single line. */
    white-space: nowrap;
  }
}

/* Below this the pair genuinely cannot sit side by side. Measured by
   narrowing until a label starts to clip: the homepage hero, which has
   the widest gutters, holds one row down to 325px, and the state,
   solution, industry, hub and about heroes hold to 285px. Under that,
   flex-shrink starts eating into the labels, so wrapping is restored and
   the pair stacks. 340px is chosen over 325px to keep a margin and to
   cover 320px devices cleanly.

   This is the only width at which stacking is accepted. Everywhere from
   340px up, including every current phone, the pair stays on one row. */
@media (max-width: 340px) {
  .hero .hero__actions,
  .solution-hero .solution-hero__actions,
  .hub-hero .hub-hero__actions {
    flex-wrap: wrap;
  }

  .hero .hero__actions > .btn,
  .solution-hero .solution-hero__actions > .btn,
  .hub-hero .hub-hero__actions > .btn {
    /* No shrinking once wrapped, so labels are never clipped. */
    flex: 0 0 auto;
    min-width: auto;
  }
}

/* Lock body scroll when the panel is open.
   The .mobile-nav-open class is added and removed by main.js; the hook is
   unchanged. touch-action and overscroll-behavior stop a touch drag from
   chaining through to the page underneath on mobile Safari and Chrome,
   which overflow:hidden alone does not always prevent. */
body.mobile-nav-open {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* overflow:hidden on <body> alone does not reliably stop the document
   scrolling, because the scrolling box is the root element, not the body.
   Locking <html> as well is what actually holds the page still. :has() is
   used so main.js keeps its single body-class hook and needs no change;
   a browser without :has() still gets the body rule above. */
html:has(> body.mobile-nav-open) {
  overflow: hidden;
  overscroll-behavior: none;
}

/* The panel is the exception: it must still accept touch scrolling while
   the body is locked. */
body.mobile-nav-open .mobile-nav__nav {
  touch-action: pan-y;
}

/* ---------------------------------------------------------------
   CARDS
--------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  text-align: left;
}

.card__title {
  font-size: var(--fs-h4);
}

.card__text {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.card__link {
  margin-top: auto;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

/* ---------------------------------------------------------------
   ICON TILES
   Reusable tinted tiles for card icons. Markup added later.
--------------------------------------------------------------- */
.icon-tile {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.icon-tile--blue {
  background: var(--blue-tile-bg);
  color: var(--blue-tile-fg);
}

.icon-tile--green {
  background: var(--green-tile-bg);
  color: var(--green-tile-fg);
}

/* ---------------------------------------------------------------
   FORMS
--------------------------------------------------------------- */
.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--navy);
}

.form-control {
  width: 100%;
  padding: 0.75rem var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  line-height: var(--lh-ui);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(108, 153, 52, 0.18);
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230B0B45' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  padding-right: var(--space-lg);
}

/* Fieldset wrapper for a checkbox group: strip the native border and
   legend chrome so the legend reads as a normal field label above the
   grid. */
.form-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.form-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

/* Each checkbox option is a full selectable card. The whole label is
   the click target; the native checkbox is hidden but focusable. */
.form-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-card);
  font-size: var(--fs-small);
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition);
}

.form-check:hover {
  border-color: var(--blue-card-border);
  box-shadow: var(--shadow-card);
}

/* Native checkbox: visually hidden but still in the tab order so
   keyboard users can toggle it and focus-visible can style the box. */
.form-check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Custom checkbox box. */
.form-check__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-gray);
  border-radius: 6px;
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  transition: background-color var(--transition), border-color var(--transition);
}

.form-check__text {
  line-height: var(--lh-ui);
}

/* Checked: navy box with a white checkmark revealed (sibling selector). */
.form-check__input:checked + .form-check__box {
  background-color: var(--navy);
  border-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.4l2.4 2.4L9.5 3.4'/%3E%3C/svg%3E");
}

/* Checked card fill state (:has on the label). */
.form-check:has(.form-check__input:checked) {
  background-color: var(--blue-card-bg);
  border-color: var(--blue-card-border);
  color: var(--blue-card-title);
}

/* Keyboard focus must stay visible: outline the custom box. */
.form-check__input:focus-visible + .form-check__box {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.form-error {
  display: block;
  margin-top: 0.3rem;
  color: #b3261e;
  font-size: var(--fs-small);
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-message {
  padding: var(--space-md);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
}

.form-message--success {
  background: rgba(108, 153, 52, 0.12);
  color: var(--green-dark);
  border: 1px solid var(--green);
}

.form-message--error {
  background: rgba(179, 38, 30, 0.08);
  color: #b3261e;
  border: 1px solid #b3261e;
}

/* ---------------------------------------------------------------
   CONTENT ACCORDION (page sections, e.g. state pages)
--------------------------------------------------------------- */
.accordion {
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  overflow: hidden;
}

.accordion__item + .accordion__item {
  border-top: 1px solid var(--border-gray);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--navy);
  text-align: left;
  background: var(--white);
}

.accordion__trigger:hover {
  background: var(--light-gray);
}

.accordion__icon {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--green);
  transition: transform var(--transition);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__panel {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--text-dark);
}

.accordion__panel[hidden] {
  display: none;
}