/* ============================================================================
   CONCEPT 1 — "The Move" : faithful dark editorial replica of Tracy's live site.
   Her real Wix site is dark, immersive and moody: near-black backgrounds, warm cream/gold
   text, thin letter-spaced capitals, full-bleed photography, her cream lotus-monogram
   wordmark, Cormorant Garamond display type. This variant moves that look over as-is.
   Layered LAST over style.css. 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.
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* !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;
  --heading-font: 'Cormorant Garamond', Didot, 'Playfair Display', Georgia, serif !important;
}

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

/* Editorial serif display, sized up a touch (Cormorant runs small) */
h1, h2, h3 { font-weight: 500; }
.hero h1 { font-size: 52px; letter-spacing: .5px; }
.quote blockquote { font-size: 30px; }

/* 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, .shop h2, .shop-title { color: #f2ecde; }
a { color: var(--ink); }

/* Editorial typography: airy, letter-spaced capitals for nav + kickers */
.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, .shop-tag { color: var(--accent); }

/* Logo: show her cream 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, .shop { background: transparent; }

/* Light cards -> subtle raised dark cards */
.card, .review, .delivery-item, .step, .tile-card, .post-card, .shop-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, .shop-desc {
  color: #c8bfad;
}

/* Buttons: gold with dark text (elegant, high-contrast) */
.btn, .shop-btn { background: var(--accent); color: #16120e; }
.btn:hover, .shop-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; }
.nav-cta { background: var(--accent); color: #16120e !important; }
.nav-cta:hover { background: #ddc079; }

/* 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); }

/* Shop: price in cream, "example" badge in gold, on the dark cards */
.shop-price { color: #f2ecde; }
.shop-note { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); color: #c8bfad; }
.shop-badge { background: rgba(201,162,74,.9); color: #16120e; }

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

@media (max-width: 640px) { .hero h1 { font-size: 38px; } }