/* ==========================================================================
   THEME FIXES  —  loaded after the original stylesheet
   --------------------------------------------------------------------------
   The original build had several white sections with dark text on them. Those
   sections are now dark (you didn't want the white), which left the dark text
   invisible. Rather than editing 15 spots in a minified bundle, this file
   retunes the handful of light-theme utilities the build uses so they read
   correctly on the dark background.

   Same specificity as the originals + loaded later == these win.
   ========================================================================== */

:root {
  --fix-ink: #f2ebda;        /* primary text on dark   */
  --fix-ink-dim: #c3bba6;    /* secondary / body copy  */
  --fix-ink-faint: #9a9384;  /* captions, timestamps   */
  --fix-gold: #d4af5a;       /* accent (was #3B0918 on white) */
  --fix-gold-hi: #e8c97e;
  --fix-panel: #2a0611;      /* was bg-gray-50 */
  --fix-line: rgba(212, 175, 90, .16);
}

/* ---------- headings & body copy that were written for white ---------- */
.text-gray-900 { color: var(--fix-ink); }
.text-gray-800 { color: var(--fix-ink); }
.text-gray-700 { color: var(--fix-ink-dim); }
.text-gray-600 { color: var(--fix-ink-dim); }
.text-gray-500 { color: var(--fix-ink-faint); }
.text-gray-400 { color: var(--fix-ink-faint); }
.text-gray-300 { color: var(--fix-ink-dim); }
.text-black    { color: var(--fix-ink); }

/* the brand burgundy was an accent on white — on dark it must be the gold */
.text-\[\#3B0918\] { color: var(--fix-gold); }
.text-\[\#1a040b\] { color: var(--fix-gold); }
.text-\[\#2A0611\] { color: var(--fix-gold); }

/* hover / group-hover variants (higher specificity, matched exactly) */
.hover\:text-\[\#3B0918\]:hover { color: var(--fix-gold-hi); }
.group:hover .group-hover\:text-\[\#3B0918\] { color: var(--fix-gold-hi); }
.hover\:text-gray-900:hover { color: var(--fix-ink); }
.group:hover .group-hover\:text-gray-900 { color: var(--fix-ink); }

/* ---------- light surfaces that survived ---------- */
.bg-gray-50  { background-color: var(--fix-panel); }
.bg-gray-100 { background-color: var(--fix-panel); }

/* ---------- hairlines drawn for a white page ---------- */
.border-gray-100 { border-color: var(--fix-line); }
.border-gray-200 { border-color: var(--fix-line); }
.divide-gray-100 > * + * { border-color: var(--fix-line); }

/* ---------- muted-foreground is a touch dim over the burgundy ---------- */
.text-muted-foreground { color: var(--fix-ink-dim); }

/* ---------- prose blocks (privacy policy etc.) ---------- */
.prose :is(h1, h2, h3, h4, strong) { color: var(--fix-ink); }
.prose :is(p, li, td) { color: var(--fix-ink-dim); }
.prose a { color: var(--fix-gold); }

/* ---------- gold buttons need dark text, not white ---------- */
.bg-primary { color: #1a040b; }
.bg-primary :is(span, svg, p) { color: inherit; }

/* ---------- form fields ---------- */
input, textarea, select { color: var(--fix-ink); }
input::placeholder, textarea::placeholder { color: var(--fix-ink-faint); }

/* ==========================================================================
   LEGIBILITY — low-opacity white text
   The original design leaned on very transparent white (down to 25%) for
   captions, footer links and step descriptions. Over the burgundy that lands
   at ~2:1 contrast, which is unreadable. Each step is lifted to clear WCAG AA
   (4.5:1 for body, 3:1 for large text) while keeping the intended hierarchy.
   ========================================================================== */
.text-white\/25 { color: rgba(255, 255, 255, .62); }
.text-white\/40 { color: rgba(255, 255, 255, .68); }
.text-white\/45 { color: rgba(255, 255, 255, .72); }
.text-white\/55 { color: rgba(255, 255, 255, .78); }
.text-white\/60 { color: rgba(255, 255, 255, .80); }
.text-white\/65 { color: rgba(255, 255, 255, .84); }
.text-white\/70 { color: rgba(255, 255, 255, .86); }
.text-white\/75 { color: rgba(255, 255, 255, .88); }
.text-white\/80 { color: rgba(255, 255, 255, .90); }
.text-white\/90 { color: rgba(255, 255, 255, .95); }

/* inherited variants used on links/footers */
.hover\:text-primary:hover { color: var(--fix-gold-hi); }

/* gold chips ("AFTER" badge, pills) — white on gold is only 3:1, use dark ink */
.bg-primary\/90, .bg-primary\/80, .bg-primary\/95, .bg-primary { color: #17040a; }
.bg-primary\/90.text-white, .bg-primary\/80.text-white,
.bg-primary\/95.text-white, .bg-primary.text-white { color: #17040a; }

/* ==========================================================================
   MOBILE LAYOUT — grid/flex blowout
   "bbnjproconstruction@gmail.com" is a single unbreakable 291px word. Inside a
   grid item (min-width:auto == min-content) it forced the track to 419px on a
   375px screen, cutting the contact form and info cards off at the right edge.
   ========================================================================== */
a[href^="mailto:"], a[href^="tel:"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Standard blowout guard: let grid and flex children shrink below min-content
   instead of pushing their track wider than the viewport. */
.grid > *, .flex > * { min-width: 0; }

/* Long CTA labels ("Get a Free Waterproofing Estimate") are set to
   whitespace-nowrap and overflow a 375px screen. Let them wrap and grow
   instead of being clipped — height must go auto or the second line is cut. */
@media (max-width: 520px) {
  .inline-flex.whitespace-nowrap {
    white-space: normal;
    max-width: 100%;
    height: auto;
    min-height: 2.75rem;
    padding-top: .7rem;
    padding-bottom: .7rem;
    line-height: 1.25;
  }
}

/* ==========================================================================
   REMOVED: white wave dividers
   Six <svg viewBox="0 0 1200 120"> curves with a fill-white path sat at the
   bottom of sections, cutting a big white wave across the dark page.
   ========================================================================== */
svg[viewBox="0 0 1200 120"] { display: none !important; }
div:has(> svg[viewBox="0 0 1200 120"]) { display: none !important; }

/* fallback for engines without :has() — kill the wave's fill instead */
svg[viewBox="0 0 1200 120"] path { fill: transparent !important; }