/* ==========================================================================
   Responsive overrides — tablet (<=900px) and mobile (<=600px).
   The rest of the site is built with inline styles, which beat any external
   rule of equal/lower specificity, so overrides that must win at a given
   breakpoint use !important. Elements needing an override get one of these
   classes added alongside their existing inline style (inline style is left
   otherwise untouched).
   ========================================================================== */

/* ---- shared horizontal page gutter: sections use var(--fh-gutter) for left/right padding ---- */

:root { --fh-gutter: 56px; }
@media (max-width: 600px) {
  :root { --fh-gutter: 24px; }
}

/* ---- sticky top nav (all pages): transparent over the hero, solid bar once scrolled.
   js/sticky-nav.js toggles .is-stuck (scrolled) and .is-hidden (phones/tablets only:
   slides away on scroll down, back on scroll up, so a wrapped nav never blocks the page). ---- */

.fh-nav--fixed,
.fh-nav--sticky {
  top: 0;
  z-index: 50 !important;
  transition: background-color 250ms ease, box-shadow 250ms ease, transform 300ms ease;
}
.fh-nav--fixed { position: fixed !important; left: 0; right: 0; }
.fh-nav--sticky { position: sticky !important; }
.fh-nav--fixed.is-stuck,
.fh-nav--sticky.is-stuck {
  background: rgba(23, 23, 23, 0.94);
  box-shadow: 0 1px 0 #3a4340;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* only the floating (fixed) nav gets compact; the sticky one sits in the page flow,
   so changing its height would shove the content below it */
.fh-nav--fixed.is-stuck {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
@media (max-width: 900px) {
  .fh-nav--fixed.is-hidden,
  .fh-nav--sticky.is-hidden { transform: translateY(-100%); }

  /* right-align the links and Build button (logo stays left) */
  .fh-r-nav__links { margin-left: auto; justify-content: flex-end; }

  /* compact floating bar on phones: logo + Build button on row 1, text links on row 2 */
  .fh-nav--fixed.is-stuck { column-gap: 16px; row-gap: 8px; justify-content: flex-end !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .fh-nav--fixed.is-stuck .fh-r-nav__links { display: contents !important; }
  .fh-nav--fixed.is-stuck .fh-nav-logo,
  .fh-nav--fixed.is-stuck > a:first-child { order: 1; }
  .fh-nav--fixed.is-stuck .fh-r-nav__links > a:last-child { order: 2; margin-left: auto; }
  .fh-nav--fixed.is-stuck::after { content: ""; order: 2; flex-basis: 100%; height: 0; margin-top: -8px; }
  .fh-nav--fixed.is-stuck .fh-r-nav__links > a:not(:last-child) { order: 3; }
}

/* ---- nav: wrap instead of overflowing ---- */

.fh-r-nav {
  flex-wrap: wrap;
  row-gap: 14px;
}
.fh-r-nav__links {
  flex-wrap: wrap;
  row-gap: 12px;
}

@media (max-width: 640px) {
  .fh-r-nav__links { gap: 20px !important; }
}

/* nav CTA: full label by default, short label swapped in on mobile */
.fh-cta-short { display: none; }
@media (max-width: 480px) {
  .fh-cta-full { display: none; }
  .fh-cta-short { display: inline; }
}

/* ---- grids: collapse to a single column ---- */

@media (max-width: 900px) {
  .fh-r-split,
  .fh-r-grid2,
  .fh-r-grid3 {
    grid-template-columns: 1fr !important;
  }
  .fh-r-grid-steps {
    grid-template-columns: 1fr !important;
  }
  .fh-r-grid-steps > *:first-child {
    margin-bottom: 4px;
  }
}

/* form-specific nested grids collapse a bit later, once the outer form
   grid (.fh-r-formgrid) has already gone to 1 column at 900px, so these
   only need to react to genuinely narrow (phone) widths */
@media (max-width: 640px) {
  .fh-r-grid3-tight,
  .fh-r-grid2-tight,
  .fh-r-addr-row {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Build Quote: form/summary layout ---- */

@media (max-width: 900px) {
  .fh-r-formgrid {
    grid-template-columns: 1fr !important;
  }
  .fh-r-sticky {
    position: static !important;
    top: auto !important;
  }
}

/* ---- hero min-height floors that skew badly on narrow/tall phones ---- */

@media (max-width: 600px) {
  .fh-r-hero-tall {
    height: 70vh !important;
    min-height: 420px !important;
  }
}