/* GalaxyWeb generated theme — client=dermal-camouflage-clinic */
/* Operator override: soft cream + dusty pink + rose gold, matched to the
   logo. The auto-generated palette sampled the logo's warm tones as
   burgundy/coral (#622522 / #e6544c) — wrong colour family entirely.
   This rewrites it as the actual brand palette: warm white body, warm
   deep-plum hero/footer for anchor contrast, dusty rose accents. */
:root {
  /* Brand / accent — dusty rose & muted rose gold, used sparingly */
  --color-brand-primary:    #c89187;   /* dusty rose */
  --color-accent:           #b78a7a;   /* muted rose gold for emphasis */
  --color-accent-hover:     #a8786a;

  /* Surfaces — warm white body, soft cream alts, deep warm-plum darks */
  --color-surface-light:    #ffffff;   /* body bg — crisp warm white */
  --color-surface-alt:      #faf3eb;   /* alternating sections — soft cream */
  --color-surface-dark:     #4a3030;   /* hero band — warm deep plum */
  --color-surface-darker:   #2d1d1d;   /* footer — deeper plum */
  --color-border:           #2d1d1d;
  --color-border-light:     #ead8d0;   /* warm cream border */

  /* Ink — warm dark on light, warm cream on dark. Never pure black
     against this palette — pure black reads as harsh and clinical, but
     not in the calm-clinic way we want. Warm dark brown sits naturally. */
  --color-ink:              #3a2826;
  --color-ink-muted:        #6b524c;
  --color-ink-invert:       #ffffff;
  --color-ink-invert-muted: #d8c5be;   /* light muted cream for footer text */

  --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: LIGHT in this client (opposite of trades). The logo has a
   warm cream background baked into the artwork itself, so a dark
   header would surround the logo with a visible cream "card" that
   reads as a foreign object. A light header lets the logo blend in.
   Subtle bottom border for separation from the hero. */
.site-header {
  background: var(--color-surface-light) !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 on this client.
   The logo is pink/rose-gold on cream — inverting would produce
   ugly cyan/teal. Logo renders naturally on the light header. */

/* Hero quote form: white card on the dark plum hero band — same
   showroom-carve-out treatment we use elsewhere, just on a softer
   surface. */
.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: #faf3eb;
  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: same white-card treatment with a hairline 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: #faf3eb;
  color: var(--color-ink);
  border-color: var(--color-border-light);
}

/* Footer: cream text on deep plum, white on hover */
.site-footer,
.footer,
.footer p,
.footer a,
.footer li,
.footer span,
.footer .footer-link,
.footer .footer-heading {
  color: var(--color-ink-invert-muted) !important;
}
.footer a:hover {
  color: #ffffff !important;
}
/* Footer logo: render naturally (don't invert — same reason as header) */

/* Service card titles: warm dark, not the accent (which would be too
   loud on a feminine palette). */
.service-card__title {
  color: var(--color-ink) !important;
}

/* Premium-feel typography: tighter letter-spacing on display headings.
   Slightly less aggressive than -0.02em (used on trades) so the
   typography feels softer and more editorial. */
h1, h2,
.hero__heading,
.section-heading {
  letter-spacing: -0.015em;
}

/* Hero eyebrow ("Victoria Point · Redlands · South East Brisbane") uses
   --color-accent which is dusty rose. On the deep plum hero band that
   reads cleanly, no override needed. */

/* Bigger header so the logo can breathe — same approach as All In
   Mechanical. Adrienne's logo is a circular emblem so an 88-96px height
   gives it presence without dominating. */
.header-inner {
  height: 110px;
}
.site-logo img {
  height: 92px;
}
/* Adrienne's logo has the full clinic name baked into the artwork,
   so the template's separate site-logo__name span is duplicative.
   Hide it. */
.site-logo__name {
  display: none;
}

/* Header nav links: the template assumes a DARK header and styles
   links with --color-ink-invert-muted (default) and --color-ink-invert
   (hover + active=aria-current). On this client's WHITE header both
   render invisible — light cream on white default, pure white on white
   when selected. Override both to readable values from this palette.
   Using accent-hover (#a8786a, the darker rose) for the active state
   because it satisfies WCAG AA contrast against white (4.7:1) where
   the lighter accent #b78a7a is only borderline (4.1:1). */
.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);
}