/* assets/css/accent.css */
/* Seduction Palette — Ivory / Nude Blush / Deep Bordeaux / Rich Cocoa.
   Base sections use Nude Blush and alternating sections use Warm Ivory, so text flips to Rich Cocoa (dark) for contrast —
   the inverse of the previous dark-bg/light-text setup. Deep Bordeaux stays the primary accent,
   since bordeaux-on-blush still clears contrast comfortably. */
:root {
  --black: #EDDFDA;        /* Champagne Blush — an additional 10% lighter */
  --dark: #F7F2EC;         /* Warm Ivory — alternating section bg */
  --dark2: #E2C4BD;        /* lighter blush, form fields/tertiary surface */
  --gold: #7A2E38;         /* Deep Bordeaux — primary accent */
  --gold-light: #5E2229;   /* darker bordeaux — hover (darker reads stronger on light bg) */
  --gold-pale: #4B342D;    /* Rich Cocoa — italic/emotional emphasis */
  --white: #4B342D;        /* Rich Cocoa — primary text, for contrast on blush */
  --white-dim: rgba(75,52,45,0.82);
  --white-muted: rgba(75,52,45,0.58);
  --border: rgba(122,46,56,0.3);
  --bordeaux: #5E2229;     /* darker bordeaux — active states, hover depth */
}

/* Champagne-blush hero with Bordeaux and Espresso typography. */
body { padding-top: 0; }
.lovergirl-logo-header { min-height: 61px; }
#hero { background: var(--dark); }
#hero .eyebrow { color: var(--white); }
#hero h1 .line1 { color: var(--gold); }
#hero .display-italic { color: var(--white); }
#hero .by { color: var(--white-dim); }

.lovergirl-quote,
.lovergirl-belief-quote,
.lovergirl-love-again,
.lovergirl-you-forgot,
.lovergirl-location-tulum,
.lovergirl-arc,
.lovergirl-experience-heading,
.lovergirl-room-holders,
.lovergirl-are-saying,
.lovergirl-change-your-life,
.lovergirl-faq-heading,
.lovergirl-inquiry-heading { color: var(--gold); }

#what-this-is .lovergirl-love-again { color: var(--gold); }

#included .text-center p + p { margin-top: 32px; }

#shape > .container.text-center p {
  color: var(--white-dim);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.room-holders-note {
  color: var(--white-dim);
  text-align: center;
  margin: 32px auto 0;
  padding: 0 32px;
}

.divider-photo.crop-top-15 {
  height: auto;
  aspect-ratio: 1066 / 1360;
}

.divider-photo.crop-top-15 img {
  height: 117.647%;
  transform: translateY(-15%);
}

/* #site-nav's background is hardcoded near-black in site.css (not a themed token) and stays
   that way here. --white is now Rich Cocoa for body text on the blush page background, but
   that's unreadable on the still-dark nav bar — so the nav text specifically gets pulled back
   to Nude Blush to contrast against its own (unchanged) dark background. */
#site-nav .nav-logo-text,
#site-nav .nav-toggle { color: #B59458; }
#site-nav .nav-links a { color: #D8B2AA; }

/* nav-toggle inherits var(--border), which this palette repurposed to a bordeaux tint —
   muddy against the dark bar. Pin it back to site.css's original default gold border
   (rgba(184,152,42,0.25)) so it matches the same MENU box used sitewide on every other page. */
#site-nav .nav-toggle { border-color: #B59458; }

/* Match the shared translucent navigation treatment on the Lovergirl palette. */
#site-nav,
#site-nav .nav-links {
  background: rgba(13,13,13,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 900px) {
  #site-nav .nav-links {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Gold navigation feedback remains legible on the dark menu surface. */
#site-nav .nav-links a:hover,
#site-nav .nav-links a.active { color: #B69152; }

/* Match the offer-page button interaction: Deep Bordeaux shifts to its darker shade. */
.btn:hover,
.btn:focus-visible,
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #F7F2EC;
}

/* Match the Lovergirl offer-page footer. */
footer {
  background: #DED6CB;
  padding: 48px 32px;
  border-top-color: var(--border);
}

footer .logo {
  color: var(--gold);
  font-size: 28px;
}

footer .sub {
  color: var(--white);
  margin-bottom: 24px;
}

footer .copy {
  color: var(--white);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
}

footer .copy a { color: var(--gold); }

footer .footer-links a { color: var(--white); }