/**
 * File: site.css
 * Purpose: Page theme for the ispecllc.com cost subdomains — the iSpec
 *          tokens from site-shell.css bridged onto Bootstrap 5 CSS variables,
 *          plus purpose-named component classes (hero, lead form card,
 *          section furniture, guide prose, cards, breadcrumb bar)
 * Author: iSpec LLC
 * Created: 2026-08-04
 * Last Modified: 2026-10-07 — scrolled-header backdrop-filter dropped at burger widths (open menu collapsed once scrolled)
 * Last Modified: 2026-10-07 — narrow-header wordmark wrap + hero gutter fix (≤560px)
 * Last Modified: 2026-10-07 — funnel-subdomain template (flooring): the CRC
 *   palette variables re-tokened onto the iSpec tokens declared in
 *   site-shell.css (--teal, --teal-deep, --teal-tint, --ink, --ink-soft,
 *   --muted, --ground, --line, --band); Inter @font-face dropped (Archivo +
 *   Source Serif 4 come from site-shell.css); CRC header, nav and footer
 *   rules removed (the ispecllc.com .site-nav / .footer in site-shell.css
 *   replace them); landing hero restyled as a dark band with the
 *   credentials row (.hero-credentials); .foot-cost-sites single-column
 *   list; header gaps tightened at 1041–1199px for long wordmarks;
 *   .glossary-link moved to guides.css (guide bodies only).
 * Last Modified: 2026-10-07 — content pass: the .hero-section comment now
 *   records the flooring hero photo's source and cut (hero-bg.jpg replaced);
 *   no rule changed.
 * Loads after vendor/bootstrap/bootstrap.min.css (5.3.8) and
 *   css/site-shell.css (tokens + webfonts + header/footer).
 */

/* ── BOOTSTRAP BRIDGE (tokens live in site-shell.css :root) ── */
:root {
  --bs-body-font-family: var(--serif);
  --bs-body-color: var(--ink-soft);
  --bs-body-bg: var(--paper);
  --bs-body-line-height: 1.65;
  --bs-heading-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-tertiary-bg: var(--ground);
  --bs-tertiary-bg-rgb: 246, 249, 248;
  --bs-link-color: var(--teal-deep);
  --bs-link-color-rgb: 42, 139, 130;
  --bs-link-hover-color: var(--ink);
  --bs-link-hover-color-rgb: 20, 32, 31;
  --bs-primary: var(--teal);
  --bs-primary-rgb: 87, 193, 182;
  --bs-secondary-color: var(--muted);
}

html { scroll-behavior: smooth; }

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }

/* Teal pill button (form submit) — the ispecllc.com button: Archivo caps,
   ink text on teal, brighter teal on hover */
.btn-primary {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--teal);
  --bs-btn-border-color: var(--teal);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--teal-bright);
  --bs-btn-hover-border-color: var(--teal-bright);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--teal-bright);
  --bs-btn-active-border-color: var(--teal-bright);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-bg: var(--line);
  --bs-btn-disabled-border-color: var(--line);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.85rem 1.45rem;
}

/* ── JS STATE HOOK ───────────────────────────────────── */
/* Scripts toggle data-state attributes, never element.style */
[data-state="hidden"] { display: none !important; }

/* Spam honeypot — must stay invisible and out of the tab/AT order */
.honeypot-field { display: none; }

/* ── LANDING HERO ────────────────────────────────────── */
/* Dark photo band like the ispecllc.com hero: hero-bg.jpg under a --band
   veil, white display type. Photo (content pass, 2026-10-07): the owner's
   own reclaimed-wood plank tabletop, nola1 archive
   "/run/media/jsmith/backup/Riah Backup/js archives/jsmith/Pictures/
   sept-oct 2016 gpa80/IMG_4120.JPG" (Canon, 5184x3456) — rotated 90 deg
   clockwise so the planks run horizontally, cropped 3396x1910 at 60,2380
   (clear of a specular highlight), GD-resampled to 1920x1080 q83, EXIF
   stripped. No face or subject at centre; checked at 1366x900, 1702x1080
   and 400x900. Also the og:image and the guides' Article image. */
.hero-section {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background: var(--band) url("../images/hero-bg.jpg") center center / cover no-repeat;
  color: rgba(255, 255, 255, 0.82);
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 25, 0.8);
}
.hero-section > .container { position: relative; }
.hero-section h1 { color: #fff; margin-bottom: 1.25rem; }
.hero-section h1 em { color: var(--teal-bright); font-style: normal; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 1.125rem;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--teal);
}
.hero-sub {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin-bottom: 0;
}

/* Credentials row — author credentials for the numbers (owner rule
   2026-09-21: the cost-site hero trust row stays). */
.hero-credentials-label {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 2.25rem 0 0.7rem;
}
.hero-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-credentials li {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(87, 193, 182, 0.5);
  border-radius: 999px;
}

/* Sub-page header photo band — hero-bg.jpg under a light --ground veil,
   paired with .guide-header on contact/estimator/faq/guides pages. */
.page-hero {
  position: relative;
  background: url("../images/hero-bg.jpg") center center / cover no-repeat;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(246, 249, 248, 0.88);
}
.page-hero > .container { position: relative; }

/* ── LEAD FORM CARD ──────────────────────────────────── */
.hero-form-card {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(10, 20, 19, 0.06);
}
.hero-form-card .card-body { padding: 2rem; }
.hero-form-card h3 { font-size: 1.25rem; margin-bottom: 0.375rem; }
.form-intro {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.hero-form-card .form-label {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.form-check-input:checked {
  background-color: var(--teal-deep);
  border-color: var(--teal-deep);
}
.form-check-input:focus {
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.consent-check {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.75rem 0 1rem;
}
.form-error { font-size: 0.9rem; }
.form-note {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin: 0.625rem 0 0;
}
.form-success { padding: 1.25rem 0; }
.form-success .success-icon {
  font-size: 2.5rem;
  color: var(--teal-deep);
  margin-bottom: 0.625rem;
}
.form-success p {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0.375rem 0 0;
}

/* ── SECTION FURNITURE ───────────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 0.625rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--teal);
}
.section-lede {
  color: var(--muted);
  max-width: 600px;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.section-note {
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 1.75rem;
  margin-bottom: 0;
}

/* ── GUIDE PROSE ─────────────────────────────────────── */
/* Text-heavy educational blocks (guides, contact, estimator copy).
   Constrained measure + list rhythm for readability. */
.guide-prose { max-width: 720px; }
.guide-prose p { margin-bottom: 1rem; }
.guide-prose ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.guide-prose li { margin-bottom: 0.5rem; }
.guide-prose li::marker { color: var(--teal-deep); }
.guide-subheading {
  font-size: 1.15rem;
  color: var(--ink);
  margin: 1.75rem 0 0.625rem;
}
.guide-prose > .guide-subheading:first-child { margin-top: 0; }

/* ── PROJECT CARDS ───────────────────────────────────── */
.project-card {
  color: var(--ink-soft);
  text-decoration: none;
  border-color: var(--line);
  transition: box-shadow 0.2s, transform 0.15s;
}
.project-card:hover {
  box-shadow: 0 8px 28px rgba(10, 20, 19, 0.1);
  transform: translateY(-3px);
  color: var(--ink-soft);
}
.project-card-img {
  height: 180px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border-bottom: 1px solid var(--line);
}
.project-card-tag {
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}
.project-card-title {
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.375rem;
}
.project-card-desc {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 0;
}

/* ── FEATURE CARDS ───────────────────────────────────── */
.feature-card { border-top: 3px solid var(--teal); }
.feature-icon {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--teal-deep);
  margin-bottom: 0.75rem;
}
.feature-title {
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.feature-desc {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 0;
}

/* ── BREADCRUMB BAR (subpages) ───────────────────────── */
.breadcrumb-bar {
  background: var(--ground);
  font-family: var(--display);
  font-size: 0.8rem;
}
.breadcrumb-bar .breadcrumb {
  --bs-breadcrumb-divider: '\203A';
  --bs-breadcrumb-divider-color: var(--muted);
  --bs-breadcrumb-item-active-color: var(--teal-deep);
  margin-bottom: 0;
}
.breadcrumb-bar .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumb-bar .breadcrumb a:hover { color: var(--teal-deep); }
.breadcrumb-bar .breadcrumb-item.active { font-weight: 600; }

/* ── HEADER FIT (1041–1199px) ────────────────────────── */
/* site-shell.css hands the menu to the burger at <=1040px. Just above that,
   a long wordmark ("Columbus Window & Door Cost") plus seven menu items
   overflows the bar, so the gaps tighten in that band only. */
@media (min-width: 1041px) and (max-width: 1199.98px) {
  .site-nav .wrap { gap: 1.25rem; }
  .site-menu { gap: 1.1rem; }
}

/* ── FOOTER ADDITION ─────────────────────────────────── */
/* The "Cost sites" column lists eight site names — one per row, unlike the
   two-up .foot-links grid in site-shell.css. */
.foot-cost-sites ul { grid-template-columns: 1fr; }

/* ── NARROW HEADER + HERO GUTTER (2026-10-07) ─────────────── */
/* The three cost-site wordmarks are long ("Columbus Window & Door Cost"):
   below 560px the nowrap .brand pushed the burger off-screen, so the
   wordmark may wrap and the burger keeps its width. Bootstrap's .row.g-5
   inside the hero overflowed the container by 12px at phone widths
   (gutter 3rem vs 12px container padding) — a 1.5rem gutter fits. */
@media (max-width: 560px) {
  .site-nav .wrap { gap: .75rem; }
  .brand { white-space: normal; line-height: 1.1; font-size: .98rem; min-width: 0; flex: 1 1 auto; }
  .brand img { flex: 0 0 auto; }
  .burger { flex: 0 0 auto; }
  .row.g-5 { --bs-gutter-x: 1.5rem; }   /* hero + contact rows: 3rem gutters overflow a 12px-padded container */
}

/* ── SCROLLED HEADER MENU (2026-10-07) ───────────────────── */
/* site-shell.css puts backdrop-filter on .site-nav.is-scrolled; a filter makes
   the header the containing block of its position:fixed .site-menu, so the open
   phone menu collapsed to the header strip once the page had scrolled (QA 10-07,
   same on ispecllc.com). At burger widths the filter is dropped — the header
   keeps its solid rgba background. */
@media (max-width: 1040px) {
  .site-nav.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }
}