/* ============================================================
   Bloei — Colors & Type
   Soft, warm, natural. Pastel rose · beige · sage.
   ============================================================ */

/* ---------- Fonts ----------
   Lato                  = brand sans         (brand-supplied)
   Cormorant Garamond    = brand display      (brand-supplied)
   Caveat                = signature accent   (Google Fonts substitute)
   ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap');

/* --- Cormorant Garamond (brand display — variable font) --- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; src: url("fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; src: url("fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype"); font-display: swap; }

/* --- Lato (brand sans) --- */
@font-face { font-family: "Lato"; font-style: normal;  font-weight: 100; src: url("fonts/Lato-Thin.ttf")        format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic;  font-weight: 100; src: url("fonts/Lato-ThinItalic.ttf")  format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal;  font-weight: 300; src: url("fonts/Lato-Light.ttf")       format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic;  font-weight: 300; src: url("fonts/Lato-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal;  font-weight: 400; src: url("fonts/Lato-Regular.ttf")     format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic;  font-weight: 400; src: url("fonts/Lato-Italic.ttf")      format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal;  font-weight: 700; src: url("fonts/Lato-Bold.ttf")        format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic;  font-weight: 700; src: url("fonts/Lato-BoldItalic.ttf")  format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal;  font-weight: 900; src: url("fonts/Lato-Black.ttf")       format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic;  font-weight: 900; src: url("fonts/Lato-BlackItalic.ttf") format("truetype"); font-display: swap; }

:root {
  /* ---------------------------------------------------------- */
  /* CORE PALETTE — natural, warm, soft                         */
  /* ---------------------------------------------------------- */

  /* ---------------------------------------------------------- */
  /* CORE PALETTE — sage (primary) + blush (secondary) + camel  */
  /* Anchors picked by Bloei: --sage-500  = #5A7A4A             */
  /*                          --camel-400 = #C8A882             */
  /* ---------------------------------------------------------- */

  /* Sage — primary brand. Deep verdant green, leafy & calm.    */
  --sage-50:   #F0F3EB;
  --sage-100:  #DBE2CC;
  --sage-200:  #B9C8A0;
  --sage-300:  #92AC73;
  --sage-400:  #739055;
  --sage-500:  #5A7A4A;   /* ★ anchor — primary brand */
  --sage-600:  #44603A;
  --sage-700:  #2F4528;

  /* Blush — secondary accent. Soft pastel rose, gentle warmth. */
  --blush-50:  #FBF1ED;
  --blush-100: #F6E1D8;
  --blush-200: #EFCDBF;
  --blush-300: #E6B5A2;   /* secondary accent */
  --blush-400: #D8957D;
  --blush-500: #C57760;
  --blush-600: #A65A45;

  /* Camel — warm tertiary. Sandy beige, ceramics & linen.      */
  --camel-50:  #F9F2E8;
  --camel-100: #F1E4CF;
  --camel-200: #E5CFAD;
  --camel-300: #D7BC92;
  --camel-400: #C8A882;   /* ★ anchor */
  --camel-500: #B08D63;
  --camel-600: #8C6E47;

  /* Legacy aliases for old --verde-* references (deprecated).  */
  --verde-50:  var(--sage-50);
  --verde-100: var(--sage-100);
  --verde-200: var(--sage-200);
  --verde-300: var(--sage-300);
  --verde-400: var(--sage-400);
  --verde-500: var(--sage-500);
  --verde-600: var(--sage-600);
  --verde-700: var(--sage-700);

  /* Sand — paper / cream bg tones, unchanged */
  --sand-50:   #FBF7F0;
  --sand-100:  #F4ECDD;
  --sand-200:  #ECDFC8;
  --sand-300:  #DDC9A8;
  --sand-400:  #C2A87E;
  --sand-500:  #A28960;

  /* Clay — deepest brand neutral, used for body copy */
  --clay-50:   #F6F1EA;
  --clay-100:  #E8DFD0;
  --clay-300:  #9A8B79;
  --clay-500:  #5E5246;
  --clay-700:  #3B342C;
  --clay-900:  #25201B;   /* primary text */

  /* Pure */
  --cream:     #FCFAF6;
  --ink:       #25201B;

  /* ---------------------------------------------------------- */
  /* SEMANTIC COLORS                                            */
  /* ---------------------------------------------------------- */
  --bg:           var(--sand-50);
  --bg-elevated:  var(--cream);
  --bg-sunken:    var(--sand-100);
  --bg-accent:    var(--sage-50);     /* primary tinted band */
  --bg-leaf:      var(--blush-50);    /* secondary tinted band */

  --fg:           var(--clay-900);
  --fg-muted:     var(--clay-500);
  --fg-subtle:    var(--clay-300);
  --fg-on-dark:   var(--cream);
  --fg-on-blush:  var(--blush-600);
  --fg-on-sage:   var(--sage-600);

  --border:       rgba(94, 82, 70, 0.14);
  --border-soft:  rgba(94, 82, 70, 0.08);
  --border-strong:rgba(94, 82, 70, 0.28);

  --brand:        var(--sage-500);    /* PRIMARY — the brand color */
  --brand-deep:   var(--sage-700);
  --brand-soft:   var(--blush-300);   /* SECONDARY accent */
  --brand-leaf:   var(--camel-400);   /* tertiary warm */

  --success:      var(--sage-500);
  --warning:      #D89A4B;
  --danger:       #B85C4F;

  /* ---------------------------------------------------------- */
  /* TYPOGRAPHY                                                 */
  /* ---------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;  /* Bloei brand display */
  --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;          /* Bloei brand sans    */
  --font-hand:    "Caveat", "Snell Roundhand", cursive;                 /* signature accents only */

  /* Type scale (1.250 — Major Third, with display jumps) */
  --text-xs:      12px;
  --text-sm:      14px;
  --text-base:    16px;
  --text-md:      18px;
  --text-lg:      22px;
  --text-xl:      28px;
  --text-2xl:     36px;
  --text-3xl:     48px;
  --text-4xl:     64px;
  --text-5xl:     84px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-widest: 0.22em;     /* small-caps eyebrows */

  /* ---------------------------------------------------------- */
  /* RADII — generous, soft. Round shapes are core to brand.    */
  /* ---------------------------------------------------------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  36px;
  --r-2xl: 56px;
  --r-pill: 999px;

  /* ---------------------------------------------------------- */
  /* SPACING — 4px base, with a generous outer rhythm           */
  /* ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------------------------------------------------------- */
  /* SHADOWS — diffuse, warm, never sharp                        */
  /* ---------------------------------------------------------- */
  --shadow-xs:    0 1px 2px rgba(94, 82, 70, 0.06);
  --shadow-sm:    0 2px 8px rgba(94, 82, 70, 0.06), 0 1px 2px rgba(94, 82, 70, 0.04);
  --shadow-md:    0 8px 24px rgba(94, 82, 70, 0.08), 0 2px 6px rgba(94, 82, 70, 0.04);
  --shadow-lg:    0 20px 48px rgba(94, 82, 70, 0.12), 0 4px 12px rgba(94, 82, 70, 0.05);
  --shadow-xl:    0 32px 80px rgba(94, 82, 70, 0.16), 0 8px 20px rgba(94, 82, 70, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(94, 82, 70, 0.06);
  --ring-focus:   0 0 0 3px rgba(90, 122, 74, 0.32);   /* verde focus ring */

  /* ---------------------------------------------------------- */
  /* MOTION                                                     */
  /* ---------------------------------------------------------- */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-petal:  cubic-bezier(0.34, 1.4, 0.64, 1);   /* gentle overshoot */
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    480ms;
}

/* ============================================================
   SEMANTIC TYPE — drop-in text styles
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size:   var(--text-base);
  line-height: var(--leading-normal);
  color:       var(--fg);
  background:  var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg);
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  font-weight: 500;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: 500;
}

.h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--leading-snug);
}

.p {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg);
}

.p-lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--fg-muted);
}

.p-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.signature {
  font-family: var(--font-hand);
  font-size: var(--text-xl);
  color: var(--blush-500);
  font-weight: 500;
}

.caption {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: 0.02em;
}

/* ============================================================
   NAV — sticky pill navbar, één definitie voor alle pagina's
   ============================================================ */
.bloei-nav {
  position: sticky; top: 16px; z-index: 100;
  max-width: 1120px; margin: 16px auto 0;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(252, 250, 246, 0.96); backdrop-filter: blur(16px);
  border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 14px 18px 14px 30px; gap: 48px; box-shadow: var(--shadow-sm);
}
.bloei-nav .brand { display: flex; align-items: center; flex-shrink: 0; }
.bloei-nav .brand img { width: 200px; height: auto; }
.bloei-nav .links { display: flex; gap: 24px; align-items: center; }
.bloei-nav .links a { font-size: 14px; font-weight: 500; color: var(--fg); transition: color 160ms; white-space: nowrap; }
.bloei-nav .links a:hover { color: var(--sage-500); }
.bloei-nav .links a.active { color: var(--sage-600); font-weight: 600; }
.nav-dropdown { position: relative; }
.nav-drop-trigger { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--fg); cursor: pointer; white-space: nowrap; transition: color 160ms; }
.nav-dropdown:hover .nav-drop-trigger { color: var(--sage-500); }
.nav-drop-menu { display: none; position: absolute; top: 100%; left: -16px; padding-top: 6px; z-index: 200; min-width: 200px; box-shadow: var(--shadow-lg); border-radius: 14px; overflow: hidden; border: 1px solid var(--border-soft); }
.nav-dropdown:hover .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--fg); background: var(--cream); transition: background 140ms; white-space: nowrap; }
.nav-drop-menu a:first-child { border-radius: 12px 12px 4px 4px; }
.nav-drop-menu a:last-child { border-radius: 4px 4px 12px 12px; }
.nav-drop-menu a:hover { background: var(--sage-50); color: var(--sage-700); }
.bloei-nav .cta { background: var(--sage-500); color: var(--cream); font-size: 13px; font-weight: 700; padding: 12px 22px; border-radius: 999px; margin-left: 12px; white-space: nowrap; transition: all 200ms var(--ease-soft); }
.bloei-nav .cta:hover { background: var(--sage-600); }
.bloei-nav .menu-toggle { display: none; background: transparent; border: none; cursor: pointer; color: var(--fg); padding: 6px; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.cta-ghost { background: transparent; color: var(--sage-600); font-size: 13px; font-weight: 700; padding: 12px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); white-space: nowrap; transition: all 200ms var(--ease-soft); }
.cta-ghost:hover { background: var(--sage-50); border-color: var(--sage-500); }
.mobile-menu { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: var(--cream); border-radius: 24px; padding: 12px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-lg); z-index: 200; animation: menuIn 200ms var(--ease-soft) both; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mobile-menu a { font-size: 15px; font-weight: 500; color: var(--fg); padding: 11px 14px; border-radius: 12px; transition: background 140ms; }
.mobile-menu a:hover { background: var(--sand-100); }
.mobile-menu .cta { background: var(--sage-500); color: var(--cream); text-align: center; margin-top: 8px; border-radius: 999px; }
.mobile-menu .cta:hover { background: var(--sage-600); }
.nav-backdrop { position: fixed; inset: 0; z-index: 99; }
@media (max-width: 960px) { .bloei-nav .links, .nav-actions { display: none; } .bloei-nav .menu-toggle { display: flex; } }

/* ============================================================
   PAGE HERO — groene banner bovenaan (behandelingen, cadeaubon, etc.)
   ============================================================ */
.page-hero { background: var(--sage-700); padding: 96px 24px 80px; text-align: center; }
.page-hero .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--sage-200); margin-bottom: 16px; }
.page-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 7vw, 80px); line-height: 1; letter-spacing: -0.02em; color: var(--cream); margin: 0 0 20px; }
.page-hero p { font-size: 18px; line-height: 1.65; color: rgba(252,250,246,0.78); margin: 0 auto; max-width: 520px; }