/*
 * ================================================================
 *  Ästhetikpraxis Theme v2 — Designer Palette
 *  Ästhetikpraxis Musterstadt
 * ----------------------------------------------------------------
 *  Matte Copper / Muted Gold / Mineral Turquoise
 *  Designed by: color consultant
 *  Applied by:  theme-gold.css override layer
 *
 *  ROLLBACK INSTRUCTIONS
 *  ─────────────────────
 *  Option A (instant): remove the one <link> from every HTML file:
 *      <link rel="stylesheet" href="theme-gold.css">
 *  Option B (full restore from backup):
 *      cp -r website-v1-backup/* website/
 * ================================================================
 */


/* ══════════════════════════════════════════════════════════════════
   TOKEN LAYER
   All `:root` overrides come first.
   Because this <link> is injected at the end of <head>, it wins
   the source-order cascade over the inline <style> blocks.
══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Base surfaces ──────────────────────────────────────── */
  --color-bg:       #F6F0E6;   /* Warm Ivory — page background       */
  --color-surface:  #FFF9F1;   /* Porcelain Surface — cards, forms    */
  --color-surface2: #EDE4D2;   /* Warm Sand Deep — hover, dividers    */

  /* ── Typography ─────────────────────────────────────────── */
  --color-dark:     #12393B;   /* Deep Mineral Teal — headings + dark BG */
  --color-mid:      #1C2224;   /* Charcoal Text — body copy           */
  --color-muted:    #7A817E;   /* Muted Stone — captions, meta        */

  /* ── Borders ────────────────────────────────────────────── */
  --color-border:   #D8CCBA;   /* Warm Border                         */

  /* ── Copper (secondary accent — cards, tags, warm details) ─ */
  --color-accent:      #B66A3C;  /* Matte Copper                      */
  --color-accent-d:    #8B4520;  /* Copper deep — hover               */
  --color-accent-text: #8B4520;  /* Copper text on ivory — 5.2:1 AA ✓ */
  --color-copper:      #B66A3C;
  --color-copper-soft: #C98A63;

  /* ── Gold (premium badges, dividers, highlights) ────────── */
  --color-gold:      #C9A65A;   /* Muted Gold                         */
  --color-gold-soft: #E2C985;   /* Champagne Gold                     */

  /* ── Turquoise (primary actions, links, labels, lines) ───── */
  --color-teal:           #3FAFA8;  /* Mineral Turquoise               */
  --color-teal-dark:      #1F7F7A;  /* Dark Turquoise — CTAs, hover    */
  --color-teal-deep:      #12393B;  /* Deep Mineral Teal — hero, footer */
  --color-teal-text:      #1a6d69;  /* Turquoise text on ivory 5.4:1 AA ✓ */
  --color-teal-pale:      #D6F2F0;  /* Very light tint                 */
  /* backward-compat aliases */
  --color-turquoise:      #3FAFA8;
  --color-turquoise-dark: #1F7F7A;

  /* ── Repurpose existing slots ────────────────────────────── */
  --color-sage:  #3FAFA8;   /* was sage-green → now turquoise    */
  --color-rose:  #C98A63;   /* was dusty-rose → now soft copper  */

  /* ── Gradient shorthands ─────────────────────────────────── */
  --grad-gold-line:
    linear-gradient(
      90deg,
      transparent   0%,
      #A88040      16%,
      #C9A65A      34%,
      #E8D098      50%,
      #C9A65A      66%,
      #A88040      84%,
      transparent 100%
    );

  --grad-gold-text:
    linear-gradient(
      90deg,
      #8A6530   0%,
      #C9A65A  28%,
      #E8D498  52%,
      #C9A65A  76%,
      #8A6530 100%
    );

  --grad-gold-fill:
    linear-gradient(
      135deg,
      #EDD898   0%,
      #C9A65A  30%,
      #A88040  58%,
      #C9A65A  80%,
      #E8D498 100%
    );

  --grad-teal-line:
    linear-gradient(
      90deg,
      transparent        0%,
      #1F7F7A           18%,
      #3FAFA8           36%,
      rgba(180,240,236,0.8) 50%,
      #3FAFA8           64%,
      #1F7F7A           82%,
      transparent       100%
    );

  /* ── Designer brand gradient (sparingly on ornaments) ─────── */
  --grad-brand:
    linear-gradient(135deg, #3FAFA8 0%, #B66A3C 55%, #C9A65A 100%);

  --grad-brand-soft:
    linear-gradient(
      135deg,
      rgba(63,175,168,0.16)  0%,
      rgba(182,106,60,0.14)  50%,
      rgba(201,166,90,0.16) 100%
    );
}


/* ══════════════════════════════════════════════════════════════════
   BASE OVERRIDES
══════════════════════════════════════════════════════════════════ */

/* Body text → Charcoal (not deep teal which --color-dark now is) */
body {
  background: var(--color-bg);
  color: var(--color-mid);
}

/* Paragraphs, lists, secondary text inherit charcoal */
p, li, td, th {
  color: var(--color-mid);
}

/* Primary headings — Deep Mineral Teal */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-dark);
}

/* Borders site-wide */
hr,
.hero-trust,
.t-card,
.nav-dropdown-menu {
  border-color: var(--color-border) !important;
}


/* ══════════════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════════════ */

/* Nav link hover underline → turquoise */
.nav-link:hover {
  color: var(--color-dark) !important;
  border-bottom-color: var(--color-teal) !important;
}

/* Nav CTA → Dark Turquoise + white */
a.nav-cta,
.nav-cta {
  background: var(--color-teal-dark) !important;
  color: #ffffff !important;
  border: none !important;
}
a.nav-cta:hover,
.nav-cta:hover {
  background: var(--color-teal) !important;
  color: #ffffff !important;
}


/* ══════════════════════════════════════════════════════════════════
   BUTTONS — flat surfaces, liquid-glass ready
══════════════════════════════════════════════════════════════════ */

/* All buttons: reset box-shadow, no emboss */
.btn {
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn:focus-visible {
  outline-color: var(--color-teal) !important;
}

/* Primary → Dark Turquoise + white text */
.btn-primary {
  background: var(--color-teal-dark) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background: var(--color-teal) !important;
  color: #ffffff !important;
}

/* Outline → Copper border + copper text */
.btn-outline {
  border: 1.5px solid var(--color-copper) !important;
  color: var(--color-copper) !important;
  background: transparent !important;
}
.btn-outline:hover {
  background: rgba(182,106,60,0.08) !important;
  color: var(--color-accent-d) !important;
}

/* Outline-light (on dark sections) stays white — unchanged */

/* Ghost link → hover turquoise */
.btn-ghost:hover {
  border-bottom-color: var(--color-teal) !important;
  color: var(--color-teal-text) !important;
}


/* ══════════════════════════════════════════════════════════════════
   HERO SECTION (homepage)
══════════════════════════════════════════════════════════════════ */

/* Hero kicker bar → thin turquoise line */
.hero-kicker-bar {
  background: var(--grad-teal-line) !important;
  width: 48px;
  height: 1.5px;
}

/* Hero headline italic accent → gold */
.hero-headline em {
  font-style: italic;
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Hero card dot (was sage) → turquoise */
.hero-card-icon {
  background: var(--color-teal-pale) !important;
}
.hero-card-icon svg,
.hero-card-icon i {
  color: var(--color-teal-dark);
}


/* ══════════════════════════════════════════════════════════════════
   SECTION LABELS / TAGLINES
══════════════════════════════════════════════════════════════════ */

/* Eyebrow labels on ivory/light surfaces → turquoise text */
.label {
  color: var(--color-teal-text) !important;
}

/* On dark sections: pale teal tint */
.stats-section .label,
.page-hero .label {
  color: var(--color-teal-pale) !important;
}

/* CTA section label → gold gradient */
.cta-section .label {
  background: var(--grad-gold-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE — floating trust card: slower animation + larger text
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Re-declare with 5.5s float period instead of 3s.
     theme-gold.css loads after inline <style> blocks so cascade wins. */
  .hero-card {
    animation: fadeUp 0.65s ease 0.8s both,
               cardFloat 5.5s ease-in-out 1.5s infinite;
    /* Tighten position on narrow screens */
    left: 0.75rem;
    bottom: 1rem;
    max-width: 230px;
    padding: 0.7rem 0.9rem;
    gap: 0.6rem;
  }
  /* Slightly larger, more readable text */
  .hero-card-text strong {
    font-size: 0.92rem;
    letter-spacing: 0.01em;
  }
  .hero-card-text span {
    font-size: 0.79rem;
    line-height: 1.35;
  }
  /* Scale icon down a touch */
  .hero-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
}

/* Respect reduced-motion: kill the float entirely */
@media (prefers-reduced-motion: reduce) {
  .hero-card {
    animation: fadeUp 0.65s ease 0.8s both !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   STICKY MOBILE CTA BAR — body padding so bar doesn't overlap content
   (bar itself is injected by booking-modal.js)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Give the footer breathing room above the bar */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}
