/* ============================================================
   HB PRO PAINTING LLC — Retro '70s Homepage Overrides
   Loaded ONLY by index.html, after style.css. Every other page
   is untouched — CSS custom properties are per-document, so
   redeclaring :root here cannot leak into any other page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Boogaloo&family=Jost:wght@300;400;500;600;700&display=swap');

/* ============================================================
   RETRO PALETTE + TYPE — overrides the shared design tokens
   ============================================================ */
:root {
  --color-bg:          #F4E3BE;  /* poster cream */
  --color-bg-alt:      #EAD19A;  /* deeper tan for alternating sections */
  --color-surface:     #FBF2DD;  /* warm paper white for cards */
  --color-primary:     #D9631E;  /* burnt orange */
  --color-primary-dark:#B84E14;
  --color-accent:      #E3A72B;  /* mustard gold */
  --color-accent-dark: #C48A1A;
  --color-accent2:     #5C4830;  /* deep warm brown (replaces navy) */
  --color-accent2-dark:#46351F;
  --color-text:        #3D2817;  /* deep brown ink */
  --color-muted:       #7A5C3E;
  --color-border:      #D8BE8A;

  --font-head: 'Righteous', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
}

h1, h2 { letter-spacing: .5px; }

/* Boogaloo for the smaller "groovy" labels/badges/numbers — Righteous
   stays reserved for headline moments so it doesn't get noisy at
   small sizes. */
.hero-badge,
.section-label,
.badge-pill,
.stat-lbl,
.testi-name,
.area-chip,
.logo em { font-family: 'Boogaloo', cursive; letter-spacing: 1px; }

.logo { font-family: 'Righteous', Georgia, serif; }

/* Hardcoded (non-variable) colors in the shared stylesheet —
   patched here so nothing renders in the old navy/blue tones. */
.site-footer { background: #2E1F12; }
.svc-card-img { background: linear-gradient(135deg, var(--color-accent2), var(--color-primary-dark)); }
.svc-card:hover { background: #FFF7E6; }

/* Header — on first load (before scroll) it's normally fully
   transparent, which relied on the hero's dark image scrim for
   contrast. That scrim is gone now, so instead of a haze over
   the image, give the header a solid bar spanning the full
   width right from the start — a clean line across the page. */
.site-header.is-transparent {
  background: var(--color-accent2);
  border-bottom: 3px solid var(--color-accent);
}

/* ============================================================
   HERO — the illustration shows full-bleed, nothing overlaid
   on top of it: no mask/vignette, no dark scrim, no grain,
   no decorative shapes drawn over the image.
   ============================================================ */
.hero::before { content: none; }

.hero-bg {
  background-image: url('../img/hero-retro.jpg');
}
.hero-bg::after { content: none; }

.hero-deco-quote, .hero-star { display: none; }

/* Text box pinned to the left instead of centered over the image. */
.hero-content { text-align: left; }

/* A contained backdrop panel sits behind the text only — the
   image itself stays completely clean/unobstructed everywhere
   outside this box. */
.hero-content .container {
  margin-left: clamp(16px, 6vw, 70px);
  margin-right: auto;
  background: rgba(46, 31, 18, .82);
  border: 3px solid var(--color-accent);
  border-radius: 24px;
  padding: 44px clamp(20px, 6vw, 48px);
  box-shadow: 7px 7px 0 rgba(0,0,0,.18);
}

.hero-badge {
  background: var(--color-accent2);
  border: 2px solid var(--color-accent);
}

.hero-content h1 {
  color: #FFF3DD;
  text-shadow: 2px 2px 0 var(--color-primary-dark), 4px 4px 0 rgba(61,40,23,.35);
}

.hero-line { background: var(--color-accent2); height: 4px; margin: 0 0 22px; }
.hero-content p { margin-left: 0; margin-right: 0; }
.hero-ctas { justify-content: flex-start; }
.hero-trust { justify-content: flex-start; }

/* Groovy scalloped wave replaces the soft cream wave */
.hero-wave svg path { fill: var(--color-bg); }
.hero-wave { filter: drop-shadow(0 -2px 0 var(--color-accent)); }

/* ============================================================
   HALFTONE TEXTURE ON ALTERNATING SECTIONS
   ============================================================ */
.section-alt {
  background-color: var(--color-bg-alt);
  background-image: radial-gradient(rgba(61,40,23,.14) 1.4px, transparent 1.4px);
  background-size: 9px 9px;
}

/* ============================================================
   CARDS — sticker/poster feel
   ============================================================ */
.svc-card, .feat-card, .testi-card, .mini-form, .info-box {
  border-width: 2px;
}
.svc-card:hover { border-left-color: var(--color-primary); }
.feat-card:hover, .svc-card:hover { box-shadow: 6px 6px 0 rgba(61,40,23,.18); }

.feat-icon { background: rgba(217,99,30,.14); }

/* ============================================================
   STATS SECTION — now warm brown instead of navy
   ============================================================ */
.section-navy { background: var(--color-accent2); }

/* ============================================================
   BUTTONS — bolder groovy outline
   ============================================================ */
.btn { border-width: 3px; font-weight: 700; }
.btn-white-outline { border-color: #FFF3DD; color: #FFF3DD; }
.btn-white-outline:hover { background: #FFF3DD; color: var(--color-accent2); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background: var(--color-primary); }
.cta-band::before { opacity: .16; }

/* ============================================================
   AMBER BAR → groovy dashed rule
   ============================================================ */
.amber-bar {
  width: 72px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--color-accent) 0 10px, var(--color-primary) 10px 20px);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}