/* ============================================================
   File: assets/css/site.css
   Purpose: Brand layer over Bootstrap 5.3 for columbusconstructioncost.com.
            iSpec teal palette bridged onto --bs-* CSS vars, plus the
            purpose classes Bootstrap does not cover. Replaces the
            cPanel-era style.css (Bootstrap now owns grid/forms/tables).
   Brand:   iSpec LLC teal #57c1b6 / dark #1a1a1a
   Fonts:   Inter (self-hosted woff2, assets/fonts/), system fallback
   Author:  iSpec LLC
   Created: 2026-08-04
   History: 2026-08-11 — fixed-billboard pass: .hero parked
            (background-attachment: fixed), new .billboard band +
            .billboard-panel(-dark) opaque cards reuse hero-bg.jpg on
            the new-construction/home-additions mid-sections, lead-form
            band, and blog/glossary heroes (iOS fallback to scroll)
   Last Modified: 2026-09-26 — .footer-links h5 rule became
            .footer-col-title (footer column titles are now <p>, so
            heading levels never skip); guides-specific rules live in
            assets/css/guides.css, not here
   ============================================================ */

/* ── SELF-HOSTED FONTS ───────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}

/* ── BRAND TOKENS + BOOTSTRAP BRIDGE ─────────────────────── */
:root {
  /* palette (unchanged from the original site) */
  --ccc-teal:          #57c1b6;
  --ccc-teal-dark:     #3da89e;
  --ccc-ink:           #1a1a1a;  /* primary dark surface */
  --ccc-ink-soft:      #2e2e2e;  /* trust strip surface */
  --ccc-ink-deep:      #111111;  /* footer surface */
  --ccc-surface:       #f5f5f3;  /* alt section / light card surface */
  --ccc-callout-tint:  #f0fafa;
  --ccc-body-soft:     #374151;  /* secondary body copy on light */
  --ccc-muted:         #6b7280;  /* muted copy on light */
  --ccc-border:        #e5e7eb;
  --ccc-red-text:      #c82333;  /* "not included" heading — AA on white */

  /* text on dark surfaces */
  --ccc-on-dark:       #ffffff;
  --ccc-on-dark-soft:  #b0b8c4;  /* ledes / paragraphs on dark */
  --ccc-on-dark-label: #888888;  /* small uppercase labels on #1a1a1a (AA at that size) */
  --ccc-on-dark-muted: #9aa3ad;  /* AA-passing lift of the old #666/#555/#444 on dark */

  --ccc-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                   'Helvetica Neue', Arial, sans-serif;

  /* Bootstrap bridge — the framework reads these everywhere */
  --bs-body-font-family: var(--ccc-font-sans);
  --bs-body-font-size: 1.0625rem;      /* 17px, as the original build */
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--ccc-ink);
  --bs-body-bg: #ffffff;
  --bs-border-color: var(--ccc-border);
  --bs-link-color: var(--ccc-teal);
  --bs-link-hover-color: var(--ccc-teal-dark);
}

html { scroll-behavior: smooth; }

/* Original site style: links underline on hover only */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ccc-font-sans);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.4rem; }
strong { font-weight: 600; }

/* Original 1100px shell — Bootstrap's wider caps overridden site-wide */
.container {
  max-width: 1100px;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── SKIP LINK ───────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1100;
  background: var(--ccc-teal);
  color: var(--ccc-ink);
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
}

/* ── SITE HEADER ─────────────────────────────────────────── */
.site-header {
  background: var(--ccc-ink);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid var(--ccc-teal);
}
.site-header .navbar { padding: 14px 0; }
.site-logo {
  font-family: var(--ccc-font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ccc-on-dark);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}
.site-logo:hover, .site-logo:focus { color: var(--ccc-on-dark); text-decoration: none; }
/* Brand mark beside the wordmark (2026-09-26): the owner's crane-and-tower
   line drawing, white on the dark header/footer surfaces. */
.site-logo { display: inline-flex; align-items: center; gap: 0.7em; }
.site-logo-mark { height: 2.6em; width: auto; flex: none; }
.site-logo-text { display: block; }
.site-logo small {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--ccc-on-dark-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.header-cta {
  --bs-btn-bg: var(--ccc-teal);
  --bs-btn-border-color: var(--ccc-teal);
  --bs-btn-color: var(--ccc-ink);
  --bs-btn-hover-bg: var(--ccc-teal-dark);
  --bs-btn-hover-border-color: var(--ccc-teal-dark);
  --bs-btn-hover-color: var(--ccc-on-dark);
  --bs-btn-active-bg: var(--ccc-teal-dark);
  --bs-btn-active-border-color: var(--ccc-teal-dark);
  --bs-btn-active-color: var(--ccc-on-dark);
  --bs-btn-font-size: 0.85rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 3px;
  --bs-btn-padding-y: 9px;
  --bs-btn-padding-x: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── HEADER PAGE NAV ─────────────────────────────────────── */
/* Bootstrap navbar-expand-lg collapse; toggle button below lg. */
.header-nav { justify-content: flex-end; gap: 18px; }
.header-nav-list { gap: 4px; }
.header-nav-link {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ccc-on-dark-muted);
  transition: color 0.15s;
}
.header-nav-link:hover, .header-nav-link:focus { color: var(--ccc-teal); }
.header-nav-toggle {
  border: 1px solid var(--ccc-on-dark-label);
  color: var(--ccc-on-dark);
  font-size: 1rem;
  padding: 6px 10px;
}
.header-nav-toggle:focus { box-shadow: 0 0 0 2px var(--ccc-teal); }
@media (max-width: 991.98px) {
  .header-nav { padding-top: 12px; }
  .header-nav .header-cta { margin-top: 10px; display: inline-block; }
}

/* ── BREADCRUMB BAR ──────────────────────────────────────── */
.breadcrumb-bar {
  background: var(--ccc-ink);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.breadcrumb-bar .breadcrumb {
  --bs-breadcrumb-divider: '\203A';
  --bs-breadcrumb-divider-color: var(--ccc-on-dark-muted);
  --bs-breadcrumb-item-active-color: var(--ccc-teal);
  margin-bottom: 0;
  font-size: 13px;
}
.breadcrumb-bar .breadcrumb a { color: var(--ccc-on-dark-muted); }
.breadcrumb-bar .breadcrumb a:hover { color: var(--ccc-teal); text-decoration: none; }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  background: var(--ccc-ink) url("../images/hero-bg.jpg") center center / cover no-repeat;
  background-attachment: fixed;
  color: var(--ccc-on-dark);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(26, 26, 26, 0.72), rgba(26, 26, 26, 0.72)),
    repeating-linear-gradient(
    90deg,
    transparent,
    transparent 80px,
    rgba(87, 193, 182, 0.04) 80px,
    rgba(87, 193, 182, 0.04) 81px
  );
  pointer-events: none;
}
.hero .container { position: relative; }
.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ccc-teal);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--ccc-teal);
}
.hero h1 { color: var(--ccc-on-dark); margin-bottom: 20px; }
.hero h1 em { color: var(--ccc-teal); font-style: normal; }
.hero-sub {
  font-size: 1.1rem;
  color: var(--ccc-on-dark-soft);
  max-width: 580px;
  margin-bottom: 36px;
}
.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-stat-num {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--ccc-teal);
  line-height: 1;
}
.hero-stat-label {
  font-size: 0.8rem;
  color: var(--ccc-on-dark-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* ── SECTIONS ────────────────────────────────────────────── */
.section { padding: 64px 0; }
.section-alt { background: var(--ccc-surface); }
.section-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ccc-teal);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ccc-teal);
}
.section-intro {
  color: var(--ccc-muted);
  max-width: 580px;
  margin-top: 8px;
}

/* ── PAGE NAV CARDS (index guide grid) ───────────────────── */
.page-nav-grid { margin-top: 32px; }
.page-nav-card {
  --bs-card-border-color: var(--ccc-border);
  --bs-card-border-radius: 6px;
  color: var(--ccc-ink);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.page-nav-card:hover {
  border-color: var(--ccc-teal);
  box-shadow: 0 4px 16px rgba(87, 193, 182, 0.15);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--ccc-ink);
}
.page-nav-card .card-body { padding: 24px 20px; }
.page-nav-icon { font-size: 1.6rem; margin-bottom: 10px; line-height: 1; }
.page-nav-title { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.page-nav-range { font-size: 1.1rem; font-weight: 600; color: var(--ccc-teal); }
.page-nav-note { font-size: 13px; color: var(--ccc-muted); margin-top: 4px; }

/* ── INSIGHT COLUMNS (index "why this data") ─────────────── */
.insight-grid { margin-top: 32px; }
.insight-title { font-size: 1.15rem; color: var(--ccc-teal); margin-bottom: 8px; }
.insight-copy { font-size: 15px; color: var(--ccc-body-soft); }

/* ── COST RANGE CARDS ────────────────────────────────────── */
.cost-grid { margin-top: 32px; }
.cost-card {
  --bs-card-border-color: var(--ccc-border);
  --bs-card-border-radius: 6px;
  transition: background 0.15s;
}
.cost-card:hover { background: #fafffe; }
.cost-card .card-body { padding: 28px 24px; }
.cost-card-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ccc-muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.cost-card-range {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ccc-ink);
  line-height: 1.1;
}
.cost-card-range em {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ccc-muted);
  font-style: normal;
}
.cost-card-note { font-size: 13px; color: var(--ccc-muted); margin-top: 6px; }

/* ── FACTORS TABLE ───────────────────────────────────────── */
.factors-scroll { margin-top: 24px; }
.factors-table {
  --bs-table-hover-bg: var(--ccc-surface);
  font-size: 15px;
  margin-bottom: 0;
}
.factors-table th {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ccc-muted);
  padding: 10px 16px;
  border-bottom: 2px solid var(--ccc-border);
}
.factors-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ccc-border);
  vertical-align: top;
}
.factors-table tr:last-child td { border-bottom: none; }
.impact-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.impact-tag[data-impact="high"] { background: #fee2e2; color: #991b1b; }
.impact-tag[data-impact="med"]  { background: #fef3c7; color: #92400e; }
.impact-tag[data-impact="low"]  { background: #d1fae5; color: #065f46; }

/* ── TIER DETAIL CARDS (what each tier includes) ─────────── */
.tier-detail-grid { margin-top: 28px; }
.tier-detail-card {
  --bs-card-border-color: var(--ccc-border);
  --bs-card-border-radius: 6px;
  border-top: 3px solid var(--ccc-teal);
}
.tier-detail-card .card-body { padding: 22px; }
.tier-detail-title { font-size: 1.15rem; }
.tier-detail-copy {
  font-size: 14px;
  color: var(--ccc-muted);
  margin-top: 6px;
  margin-bottom: 0;
}

/* ── INCLUDE / EXCLUDE COLUMNS (new-construction) ────────── */
.include-columns { margin-top: 24px; }
.include-heading { font-size: 1.15rem; color: var(--ccc-teal); margin-bottom: 10px; }
.exclude-heading { font-size: 1.15rem; color: var(--ccc-red-text); margin-bottom: 10px; }
.include-list {
  font-size: 15px;
  color: var(--ccc-body-soft);
  padding-left: 18px;
  line-height: 2;
  margin-bottom: 0;
}

/* ── CALLOUT BOX ─────────────────────────────────────────── */
.callout {
  border-left: 3px solid var(--ccc-teal);
  background: var(--ccc-callout-tint);
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
  margin: 24px 0;
  font-size: 15px;
}
.callout strong { color: var(--ccc-teal-dark); }

/* ── LEAD FORM SECTION ───────────────────────────────────── */
.lead-section {
  background: var(--ccc-ink);
  color: var(--ccc-on-dark);
  padding: 64px 0;
}
.lead-inner {
  max-width: 640px;
  text-align: center;
}
.lead-inner h2 { color: var(--ccc-on-dark); margin-bottom: 10px; }
.lead-inner h2 em { color: var(--ccc-teal); font-style: normal; }
.lead-inner > p { color: var(--ccc-on-dark-soft); margin-bottom: 32px; }
.lead-form {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 32px;
  text-align: left;
}

/* Bootstrap form controls re-skinned for the dark panel */
.lead-form .form-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ccc-on-dark-label);
  font-weight: 600;
  margin-bottom: 5px;
}
.lead-form .form-control,
.lead-form .form-select {
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 11px 14px;
  color: var(--ccc-on-dark);
  font-size: 15px;
  transition: border-color 0.2s;
}
.lead-form .form-control::placeholder { color: var(--ccc-on-dark-muted); }
.lead-form .form-control:focus,
.lead-form .form-select:focus {
  background-color: rgba(87, 193, 182, 0.06);
  border-color: var(--ccc-teal);
  box-shadow: none;
  color: var(--ccc-on-dark);
}
.lead-form .form-select {
  /* keep Bootstrap's chevron visible on the dark panel */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa3ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.lead-form .form-select option { background: var(--ccc-ink); color: var(--ccc-on-dark); }
.lead-form textarea.form-control { resize: vertical; min-height: 90px; }

.consent-row {
  margin: 14px 0;
  font-size: 13px;
  color: var(--ccc-on-dark-label);
}
.consent-row .form-check-input {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.3);
}
.consent-row .form-check-input:checked {
  background-color: var(--ccc-teal);
  border-color: var(--ccc-teal);
}
.consent-row .form-check-label { color: var(--ccc-on-dark-label); }

.form-submit {
  --bs-btn-bg: var(--ccc-teal);
  --bs-btn-border-color: var(--ccc-teal);
  --bs-btn-color: var(--ccc-ink);
  --bs-btn-hover-bg: var(--ccc-teal-dark);
  --bs-btn-hover-border-color: var(--ccc-teal-dark);
  --bs-btn-hover-color: var(--ccc-ink);
  --bs-btn-active-bg: var(--ccc-teal-dark);
  --bs-btn-active-border-color: var(--ccc-teal-dark);
  --bs-btn-active-color: var(--ccc-ink);
  --bs-btn-disabled-bg: #444444;
  --bs-btn-disabled-border-color: #444444;
  --bs-btn-disabled-color: var(--ccc-on-dark-muted);
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 4px;
  --bs-btn-padding-y: 14px;
  --bs-btn-padding-x: 24px;
  width: 100%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 8px;
}
.form-note {
  font-size: 12px;
  color: var(--ccc-on-dark-muted);
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
}

/* Form state — toggled by form.js via data-state, never element.style */
.form-error {
  display: none;
  background: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 14px;
  color: #f87171;
  margin-bottom: 12px;
}
.form-error[data-state="visible"] { display: block; }
.lead-capture-form[data-state="hidden"] { display: none; }
.form-success {
  display: none;
  text-align: center;
  padding: 24px;
  color: var(--ccc-on-dark);
}
.form-success[data-state="visible"] { display: block; }
.form-success .success-icon { font-size: 2.5rem; margin-bottom: 12px; }
.form-success h3 { color: var(--ccc-teal); font-size: 1.4rem; }
.form-success p { color: var(--ccc-on-dark-soft); margin-top: 8px; margin-bottom: 0; }
.form-success a { color: var(--ccc-teal); }

/* Honeypot — must stay in the POST but never render (server fakes success on fill) */
.honeypot-field { display: none; }

/* ── FIXED BILLBOARD BANDS ───────────────────────────────────
   The hero photo doubles as a parked full-contrast background on
   the new-construction / home-additions mid-sections and the
   sitewide lead-form band (owner call: landing keeps plain
   mid-sections — only its form band gets the photo); content sits in
   opaque .billboard-panel(-dark) cards so the photo reads clean
   around them, and background-attachment: fixed makes every band
   reveal the same parked image as the page scrolls. Declared after
   .section-alt and .lead-section so the background here wins the
   cascade when a section carries both classes. iOS Safari never
   paints fixed backgrounds correctly — the media query falls back
   to scroll on touch/no-hover devices (same fallback as .hero). */
.billboard {
  background: var(--ccc-ink) url("../images/hero-bg.jpg") center center / cover no-repeat;
  background-attachment: fixed;
}
.billboard-panel,
.billboard-panel-dark {
  border-radius: 8px;
  padding: 48px 40px;
}
.billboard-panel { background: var(--bs-body-bg); }
.billboard-panel-dark { background: var(--ccc-ink); }
@media (hover: none), (max-width: 768px) {
  .hero,
  .billboard { background-attachment: scroll; }
}
@media (max-width: 640px) {
  .billboard-panel,
  .billboard-panel-dark { padding: 32px 20px; }
}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  background: var(--ccc-ink-deep);
  color: var(--ccc-on-dark-muted);
  padding: 40px 24px 24px;
  border-top: 2px solid var(--ccc-teal);
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto 28px;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer-brand p {
  font-size: 13px;
  color: var(--ccc-on-dark-muted);
  margin-top: 8px;
  max-width: 240px;
}
/* Column titles are <p class="footer-col-title">, not <h5> — a footer
   heading after page content produced an h3 -> h5 jump on every page
   (2026-09-26 SEO closure). The look is unchanged; font-weight is now
   explicit because <p> does not inherit the heading weight. */
.footer-col-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ccc-on-dark-label);
  margin-bottom: 10px;
}
.footer-links a {
  display: block;
  font-size: 13px;
  color: var(--ccc-on-dark-muted);
  margin-bottom: 6px;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--ccc-teal); text-decoration: none; }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid #222222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--ccc-on-dark-muted);
}

/* ── SMALL SCREENS ───────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding: 48px 0 40px; }
  .section { padding: 48px 0; }
  .hero-stats { gap: 24px; }
  .lead-form { padding: 20px; }
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}