/* Wellbeing Weekly in de D8-huisstijl.

   De pagina zelf blijft ongemoeid: dezelfde secties, dezelfde volgorde,
   dezelfde teksten en dezelfde interactie. Alleen het uiterlijk kantelt naar
   D8. Dat kan omdat hun stylesheet met tokens werkt; we herdefinieren die en
   voegen de paar dingen toe die D8 kenmerken: rechte hoeken, het oranje, de
   typografie en de tekstballonstaart onder de knoppen. */

:root {
  --ink: #141414;          /* LQTR Black */
  --body: rgba(20, 20, 20, .78);
  --green: #141414;        /* de primaire knop wordt zwart met oranje tekst */
  --orange: #FF8250;       /* LQTR Orange */
  --gold: #FF8250;
  --mauve: #5D395A;        /* D8 purple */
  --blue: #5D395A;
  --cream: #F6F2EF;        /* Luke Warm White */
  --sage: #F6F2EF;
  --white: #FFFFFF;
  --border: rgba(20, 20, 20, .14);
  --border-strong: rgba(20, 20, 20, .26);
  --muted: rgba(20, 20, 20, .66);

  /* D8 kent geen ronde hoeken. */
  --radius-pill: 0;
}

/* ---------- typografie ---------- */
body,
.btn,
input, select, textarea {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -.02em;
}
h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;              /* D8 zet koppen op medium, niet op black */
  letter-spacing: -.03em;
}

/* Rechte hoeken over de hele pagina; hun stylesheet zet er op 31 plekken een
   radius op en die horen hier allemaal weg. */
*, *::before, *::after { border-radius: 0 !important; }

/* ---------- knoppen met de staart ---------- */
.btn {
  position: relative;
  font-weight: 500;
  letter-spacing: -.01em;
}
.btn-primary { background: var(--orange); color: #141414; }
.btn-primary::after,
.btn-outline::after {
  content: ''; position: absolute; left: 22px; bottom: -9px;
  width: 0; height: 0; border-style: solid;
  border-width: 9px 11px 0 0;
}
.btn-primary::after { border-color: var(--orange) transparent transparent transparent; }
.btn-outline {
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
}
.btn-outline::after { border-color: var(--ink) transparent transparent transparent; }
.btn:hover { opacity: 1; }
.btn-primary:hover { background: #141414; color: var(--orange); }
.btn-primary:hover::after { border-top-color: #141414; }

/* ---------- vlakken ---------- */
.dark, .dark-panel, .footer, footer {
  background: #141414 !important;
  color: var(--cream) !important;
}
.dark h1, .dark h2, .dark h3,
.dark-panel h1, .dark-panel h2, .dark-panel h3 { color: var(--cream); }

/* De eyebrow is in D8 klein, wijd gespatieerd en in kapitalen. */
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange);
}

/* Kaders in plaats van schaduwen: D8 werkt met haarlijnen. */
.card, .faq-item, .cost-card, .deliver-card, .ceo-welcome-card, .price-card {
  box-shadow: none !important;
  border: 1px solid var(--border);
}

/* De programmakalender houdt zijn opzet, maar in de D8-kleuren. */
.cal-cell { border-color: var(--border) !important; }
.cal-wk { color: var(--orange) !important; }
.cal-cat-chip { background: var(--orange) !important; color: #141414 !important; }

/* Het merkblok linksboven: de tagline eronder net als op leqture.com. */
.brand .brand-text .name { font-weight: 500; letter-spacing: -.02em; }

/* ---------- 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;
}