/* GalaxyWeb generated theme — client=dermal-camouflage-clinic */
/* Palette updated to match NEW LOGO.jpeg:
   - Logo background warm nude (#EDE0D8) → header background
   - Deeper dusty rose (#C89AAA) → buttons / brand primary
   - Soft pink accent from flower/D (#D49AAA) → labels, interactive
   - White (#FFFFFF) → body / cards / hero text (hero has photo bg)
   - All dark plum / makeup tones removed — footer is now nude, text overridden dark */
:root {
  /* Brand / accent — deeper dusty rose for buttons, soft pink for labels */
  --color-brand-primary:    #C89AAA;   /* deeper dusty rose — visible on all surfaces */
  --color-accent:           #D49AAA;   /* medium rose for interactive accents */
  --color-accent-hover:     #B07A8A;   /* deeper rose for hover / active state */

  /* Surfaces — white body, very light blush alts, logo-nude for hero/footer */
  --color-surface-light:    #ffffff;   /* body bg — white */
  --color-surface-alt:      #FBF4F1;   /* alternating sections — near-white blush */
  --color-surface-dark:     #EDE0D8;   /* hero band — matches logo background */
  --color-surface-darker:   #E2D2CA;   /* footer — slightly deeper nude */
  --color-border:           #D8C0BC;
  --color-border-light:     #EAD8D4;   /* warm blush border */

  /* Ink — dark on light surfaces, WHITE on hero (photo background makes it dark) */
  --color-ink:              #5E3A46;   /* deeper wine-rose — sits in palette, ~9.9:1 on white */
  --color-ink-muted:        #7A6065;   /* medium warm for sub-text */
  --color-ink-invert:       #ffffff;   /* WHITE — hero has a photo bg, text must be light */
  --color-ink-invert-muted: #EAD8D4;   /* warm cream — muted text on hero photo */

  --font-heading: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ── Header ─────────────────────────────────────────────────────────────
   Background matches the logo's own background colour so the circular
   emblem blends in seamlessly — no visible "card" around the logo. */
.site-header {
  background: var(--color-surface-dark) !important;
  border-bottom: 1px solid var(--color-border-light);
}
.site-logo__name {
  color: var(--color-ink);
}

/* IMPORTANT: do NOT apply filter:invert to the logo — it's pink/rose-gold
   on nude cream, inverting produces ugly cyan/teal. Renders naturally. */

/* ── Hero quote form card ────────────────────────────────────────────────
   White card lifts off the nude hero band for clear separation. */
.hero__sidebar,
.quote-form,
.quote-form-card,
form.quote-form,
#quote-form,
.quote {
  background: #ffffff !important;
  color: var(--color-ink);
}
.hero__sidebar input,
.hero__sidebar textarea,
.hero__sidebar select,
.quote-form input,
.quote-form textarea,
.quote-form select,
#quote-form input,
#quote-form textarea,
#quote-form select {
  background: #FBF4F1;
  color: var(--color-ink);
  border-color: var(--color-border-light);
}
.hero__sidebar label,
.quote-form label,
#quote-form label {
  color: var(--color-ink);
}

/* ── Contact-page form ──────────────────────────────────────────────────
   White card with a hairline blush border. */
.contact-form-card {
  background: #ffffff !important;
  color: var(--color-ink);
  border: 1px solid var(--color-border-light);
}
.contact-form-card .section-heading,
.contact-form-card label,
.contact-form-card legend,
.contact-form-card h2,
.contact-form-card h3 {
  color: var(--color-ink) !important;
}
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card select {
  background: #FBF4F1;
  color: var(--color-ink);
  border-color: var(--color-border-light);
}

/* ── Footer text — targeted overrides only ───────────────────────────────
   The footer is now a LIGHT nude surface, but styles.css was written for a
   dark footer and uses --color-ink-invert / --color-ink-invert-muted
   (white / cream) for all footer text classes. We use var(--color-ink) so
   footer text exactly matches the dark body/heading colour throughout. */
.footer-brand__blurb,
.footer-brand__licences li,
.footer-brand__licences strong,
.footer-col h4,
.footer-col li,
.footer-col a,
.footer-contact p,
.footer-contact a,
.footer-bottom,
.footer-bottom span,
.footer-bottom a {
  color: var(--color-ink) !important;
}
/* Link hover → accent rose (not white-on-nude which is invisible) */
.footer-col a:hover,
.footer-contact a:hover,
.footer-bottom a:hover {
  color: var(--color-accent-hover) !important;
}
/* Social icon buttons: swap background so dark icons are readable */
.footer-social a {
  background: var(--color-border-light) !important;
  color: var(--color-ink) !important;
}

/* ── Page-hero (About / Services / Contact banner) ───────────────────────
   .page-hero is a completely separate class from the homepage .hero —
   changing this cannot affect the homepage, hero text, buttons, or footer.
   Background → same pink as the buttons (--color-accent).
   Subtitle → hidden (contains location text not needed here). */
.page-hero {
  background: var(--color-accent) !important;
  color: #ffffff !important;
}
.page-hero__title {
  color: #ffffff !important;
}
.page-hero__subtitle {
  display: none !important;
}

/* ── Service card titles ────────────────────────────────────────────────
   Warm dark — accent would be too loud on a soft feminine palette. */
.service-card__title {
  color: var(--color-ink) !important;
}

/* ── Section labels / eyebrow text ─────────────────────────────────────
   Pink label on the hero (e.g. "See yourself again") — use the soft accent
   pink which reads against both the photo background and light sections. */
.section-label,
.hero__eyebrow,
.page-hero .section-label {
  color: var(--color-accent) !important;
}

/* ── Hero text — force white; the hero photo + dark overlay makes it dark.
   Quote form card is exempt (scoped separately above with dark ink). */
.hero__content,
.hero__content h1,
.hero__content h2,
.hero__content p,
.hero__headline,
.hero__lead,
.hero__eyebrow {
  color: #ffffff !important;
}
/* Keep the pink accent on the eyebrow label */
.hero__eyebrow {
  color: var(--color-accent) !important;
}

/* ── Button text — white on all btn-primary and btn-outline buttons ──────
   btn-outline--dark (used in body sections) keeps its dark text. */
.btn-primary,
.btn-outline {
  color: #ffffff !important;
}

/* ── Typography ─────────────────────────────────────────────────────────
   Tighter letter-spacing + softened weight on all headings.
   font-weight 600 requires Manrope:wght@600 (added to fonts_url above). */
h1, h2, h3, h4, h5, h6,
.hero__heading,
.section-heading {
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* ── Header sizing ──────────────────────────────────────────────────────
   Taller header so the circular emblem has room to breathe. */
.header-inner {
  height: 110px;
}
.site-logo img {
  height: 92px;
}

/* The full clinic name is baked into the logo artwork — hide the
   separate text span to avoid duplication. */
.site-logo__name {
  display: none;
}

/* ── Nav links on the nude header ───────────────────────────────────────
   Warm ink-muted for default, deeper rose for hover / active. */
.site-nav__links a {
  color: var(--color-ink-muted);
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  color: var(--color-accent-hover);
}