/* Mental Health Day in de D8-huisstijl.

   De site zelf blijft ongemoeid: achttien secties, dezelfde teksten, dezelfde
   interactie. Deze laag kantelt alleen het uiterlijk. Hun opmaak draait op
   Tailwind met shadcn-tokens, dus we herdefinieren die tokens en halen de
   ronde hoeken weg; dat is wat D8 het meest kenmerkt naast het oranje. */

:root, .dark {
  /* Deze site draait op hetzelfde tokenstelsel als Wellbeing Weekly, niet op
     shadcn. Dit zijn de tokens die werkelijk in beeld komen. */
  --ink: #141414;
  --body: rgba(20, 20, 20, .78);
  --green: #141414;
  --orange: #FF8250;
  --gold: #FF8250;
  --mauve: #5D395A;
  --blue: #5D395A;
  --cream: #F6F2EF;
  --sage: #F6F2EF;
  --border: rgba(20, 20, 20, .14);
  --border-strong: rgba(20, 20, 20, .26);
  --muted: rgba(20, 20, 20, .66);
  --radius-pill: 0;
}

:root,
.dark {
  --background: #F6F2EF;      /* Luke Warm White */
  --foreground: #141414;      /* LQTR Black */
  --card: #FFFFFF;
  --card-foreground: #141414;
  --popover: #FFFFFF;
  --popover-foreground: #141414;
  --primary: #FF8250;         /* LQTR Orange */
  --primary-foreground: #141414;
  --secondary: #141414;
  --secondary-foreground: #F6F2EF;
  --muted: #F0EAE5;
  --muted-foreground: rgba(20, 20, 20, .66);
  --accent: #5D395A;          /* D8 purple */
  --accent-foreground: #F6F2EF;
  --border: rgba(20, 20, 20, .14);
  --input: rgba(20, 20, 20, .18);
  --ring: #FF8250;
  --radius: 0px;
}

/* D8 kent geen ronde hoeken; Tailwind zet ze op tientallen plekken. */
*, *::before, *::after { border-radius: 0 !important; }

/* De typografie van D8: Inter als vervanger van Neue Haas Unica, met de
   krappe tracking en koppen op medium in plaats van black. */
body, button, input, select, textarea {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -.02em;
}
h1, h2, h3, h4 { letter-spacing: -.03em; }
h1, h2 { font-weight: 500 !important; }

/* De knoppen krijgen de tekstballonstaart uit het woordmerk. */
a[class*="bg-primary"], button[class*="bg-primary"],
a[class*="bg-\[#"], button[class*="bg-\[#"] {
  position: relative;
}
a[class*="bg-primary"]::after, button[class*="bg-primary"]::after {
  content: ''; position: absolute; left: 22px; bottom: -9px;
  width: 0; height: 0; border-style: solid; border-width: 9px 11px 0 0;
  border-color: var(--primary) transparent transparent transparent;
}

/* De pasteltinten die als losse hex in de utilities staan, naar de D8-tinten.
   Zonder dit blijven er blauwe en roze vlakken staan die niet in het palet
   voorkomen. */
[class*="bg-[#eef4fa]"], [class*="bg-[#f6ecf2]"], [class*="bg-[#eef3ee]"],
[class*="bg-[#fbf5e4]"], [class*="bg-[#fff5ec]"] {
  background-color: #F0EAE5 !important;
}
[class*="text-[#1447e6]"], [class*="text-[#a88a3a]"] { color: #5D395A !important; }


/* De echte merktokens van deze site staan als HSL-tripletten, niet als hex, en
   worden gebruikt via hsl(var(--x)). Daarom pakte de hex-vervanging ze niet.
   Hier de vertaling naar het D8-palet:
     LQTR Black  #141414  ->   0   0%  8%
     LQTR Orange #FF8250  ->  17 100% 65%
     Warm White  #F6F2EF  ->  26  27% 95%
     Purple      #5D395A  -> 305  24% 30% */
:root, .dark, body {
  --serif-green: 0 0% 8%;
  --sage-deep:   0 0% 8%;
  --sage:       17 100% 65%;
  --orange:     17 100% 65%;
  --orange-soft:17 100% 92%;
  --peach:      17 100% 88%;
  --ink:         0 0% 8%;
  --ink-soft:    0 0% 29%;
  --cream:      26 27% 95%;
  --cream-deep: 26 27% 92%;
  --plum:      305 24% 30%;
  --teal:      305 24% 30%;
  --teal-deep:   0 0% 8%;
  --slate-blue:305 24% 30%;
  --sky:        26 27% 92%;
  --sand:       26 27% 92%;
}

/* De primaire knop is nu oranje; witte tekst haalt daar 2,2:1 en is onleesbaar.
   Donkere tekst haalt 7,5:1. Plus de tekstballonstaart uit het woordmerk. */
.lq-btn-primary {
  color: #141414 !important;
  box-shadow: none !important;
  position: relative;
}
.lq-btn-primary::after {
  content: ''; position: absolute; left: 20px; bottom: -8px;
  width: 0; height: 0; border-style: solid; border-width: 8px 10px 0 0;
  border-color: #FF8250 transparent transparent transparent;
}

/* ---------- tekst op de donkere vlakken ---------- */
/* Hun palet gebruikte een warm bijna-zwart (#2A241E) voor tekst en een bosgroen
   (#38573C) voor de donkere vlakken. Allebei zijn ze naar LQTR Black gegaan, en
   daarmee viel de tekst weg op zijn eigen achtergrond: zwart op zwart, 1:1.
   Op een donker vlak hoort de tekst warm wit te zijn. */
.dark, .dark-panel, .footer, footer,
.dark p, .dark li, .dark a,
.dark-panel p, .dark-panel li, .dark-panel a, .dark-panel h2, .dark-panel h3,
.footer p, .footer a, .footer li,
footer p, footer a, footer li,
.footer-links a, .footer-links li {
  color: var(--cream) !important;
}
.dark-panel .eyebrow, .footer .eyebrow, footer .eyebrow { color: var(--orange) !important; }
.footer-links a:hover, footer a:hover { color: var(--orange) !important; }

/* ---------- prijskaarten op één lijn ---------- */
/* De vier pakketten hebben verschillend lange lijstjes, waardoor de knoppen op
   verschillende hoogtes uitkwamen. De kaart is nu een kolom en de knop wordt
   naar onderen geduwd. */
.price-card, .tier-card, [class*="price"] > .card {
  display: flex; flex-direction: column;
}
.price-card .btn, .tier-card .btn, [class*="price"] > .card .btn {
  margin-top: auto; align-self: flex-start;
}