/* Dark editorial variant — a faithful "move it as-is" treatment for brands whose current site is
   dark, immersive and moody (e.g. Tracy Rowbottom Design): near-black backgrounds, cream/gold text,
   thin letter-spaced capitals, full-bleed photography. Layered LAST over style.css, so it overrides.
   The base overloads --dark (used as BOTH heading text and dark backgrounds), so headings are set to
   cream explicitly and the genuinely-dark bands are pushed to a deeper black. */

/* !important on the custom properties: build.py injects the brand :root inline AFTER this stylesheet,
   so without !important these would be clobbered back to the light brand palette. */
:root {
  --light: #16120e !important;      /* page background: warm near-black */
  --ink: #ece5d7 !important;        /* body text: warm cream */
  --muted: #a99f8c !important;      /* secondary text */
  --accent: #c9a24a !important;     /* gold, to match her cream/gold wordmark */
  --accent-strong: #c9a24a !important;
  --line: rgba(255, 255, 255, .12) !important;
}

body { background: var(--light); color: var(--ink); }

/* Headings + logo + links (base uses var(--dark) for these) -> cream */
h1, h2, h3,
.hero h1, .intro h2, .services h2, .gallery h2, .card h3, .feature-text h2, .contact h2,
.reviews h2, .delivery h2, .occasions h2, .hours h2, .stats h2, .steps h2, .tiles-sec h2,
.founder-text h2, .callout-text, .article-wrap h1, .article-wrap h2, .article-wrap h3,
.blog-index h2, .quote blockquote { color: #f2ecde; font-weight: 500; }
a { color: var(--ink); }

/* Editorial typography: airy, letter-spaced capitals for nav + kickers */
.hero h1 { letter-spacing: .5px; }
.nav a { text-transform: uppercase; letter-spacing: 1.6px; font-size: 12.5px; color: #d8d0be; }
.nav a:hover, .nav a.active { color: var(--accent); }
.kicker, .quote cite { color: var(--accent); }

/* Logo: show her wordmark image, sized for the header */
.logo.logo-img img { height: 60px; width: auto; display: block; }
.site-header { padding: 24px; }

/* Genuinely-dark bands (base set these to var(--dark)) -> a deeper black so they still read as darker */
.site-footer, .cta-band, .stats-band, .hero.bg-dark, .occasion-card, .step.step-hl { background: #0d0a07; }

/* Sections that were white -> inherit the dark page */
.services, .reviews { background: transparent; }

/* Light cards -> subtle raised dark cards */
.card, .review, .delivery-item, .step, .tile-card, .post-card {
  background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .12);
}
.card p, .review blockquote, .delivery-item p, .step p, .tile-body p, .post-card p,
.founder-text p, .feature-text p, .intro p, .section-sub, .contact p { color: #c8bfad; }

/* Buttons: gold with dark text (elegant, high-contrast) */
.btn { background: var(--accent); color: #16120e; }
.btn:hover { background: #ddc079; color: #16120e; }
.cta-band .btn:hover { background: #fff; color: #16120e; }
.btn-ghost { color: #f2ecde; border-color: rgba(255, 255, 255, .55); }
.btn-ghost:hover { background: #f2ecde; color: #16120e; border-color: #f2ecde; }

/* Full-bleed heroes: deeper, moodier overlay */
.hero.has-image::before { background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.7) 100%); }

/* Footer text (base uses var(--light), now near-black) -> cream */
.site-footer, .site-footer .fmeta, .site-footer .fcontact { color: #c8bfad; }
.site-footer .fname { color: #f2ecde; }
.site-footer .fnav a { color: #c8bfad; }

/* Contact details + card underlines in gold */
.contact .details, .contact .details a { color: var(--ink); }
.card h3::after { background: var(--accent); }

/* Gallery + feature imagery a touch richer on dark */
.tile, .feature-media img { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }