/* ===== De 3e Kerstdag — blok-styling =====
   Laadt op de voorkant én in het editorcanvas (zie de plugin-hoofdfile).
   Design tokens staan in tokens.css en worden hier alleen gebruikt, nooit
   opnieuw gedefinieerd. */

/* ── Basis binnen de blokken ────────────────────────────────────────────────
   Het thema zet eigen marges en regelhoogtes op koppen en alinea's; het
   ontwerp uit Claude Design doet dat niet en regelt afstand met flex-gaps.
   Daarom hier een reset, bewust beperkt tot .dkd-block. */
.dkd-block,
.dkd-block *,
.dkd-block *::before,
.dkd-block *::after { box-sizing: border-box; }

.dkd-block {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  text-wrap: pretty;
}

.dkd-block h1,
.dkd-block h2,
.dkd-block h3,
.dkd-block h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--text-heading);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  margin: 0;
  text-wrap: balance;
}
.dkd-block h1 { font-size: var(--fs-display-1); }
.dkd-block h2 { font-size: var(--fs-display-2); }
.dkd-block h3 { font-size: var(--fs-display-3); }
.dkd-block h4 { font-size: var(--fs-display-4); line-height: var(--lh-display-loose); }

.dkd-block p,
.dkd-block ul,
.dkd-block ol,
.dkd-block figure { margin: 0; }
.dkd-block img { display: block; max-width: 100%; }

/* ── Gedeelde bouwstenen ───────────────────────────────────────────────── */

/* Binnenmaat van elke sectie */
.dkd-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--page-gutter);
  width: 100%;
}

/* Eyebrow / SectionLabel — Inter Medium, uppercase, ruime tracking */
.dkd-eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0;
}
.dkd-eyebrow--center { justify-content: center; }
.dkd-eyebrow--on-dark { color: var(--gold-light); }

/* Ster met haarlijnen ernaast (logo-element uit de Brand Manual) */
.dkd-ster {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold-light);
}
.dkd-ster i {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold-champagne-32);
}
.dkd-ster span { font-size: 18px; line-height: 1; font-style: normal; }

/* Knoppen — maten en varianten 1-op-1 uit het Button-component van het ontwerp */
.dkd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: var(--transition-interactive);
  border: 1px solid transparent;
}
.dkd-btn:hover { transform: var(--lift-hover); }
.dkd-btn:active { transform: scale(var(--press-scale)); }

.dkd-btn--sm { padding: 9px 18px;  font-size: 11px; letter-spacing: .16em; gap: 8px;  }
.dkd-btn--md { padding: 14px 28px; font-size: 12px; letter-spacing: .16em; gap: 10px; }
.dkd-btn--lg { padding: 18px 38px; font-size: 13px; letter-spacing: .18em; gap: 12px; }

.dkd-btn--accent {
  background: var(--action-accent-bg);
  color: var(--action-accent-text);
  border-color: var(--action-accent-bg);
}
.dkd-btn--accent:hover {
  background: var(--action-accent-bg-hover);
  border-color: var(--action-accent-bg-hover);
  color: var(--action-accent-text);
}

.dkd-btn--primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
  border-color: var(--action-primary-bg);
}
.dkd-btn--primary:hover {
  background: var(--action-primary-bg-hover);
  border-color: var(--action-primary-bg-hover);
  color: var(--action-primary-text);
}

.dkd-btn--outline {
  background: transparent;
  color: var(--action-quiet-text);
  border-color: var(--line-strong);
}
.dkd-btn--outline:hover {
  background: var(--green-christmas);
  color: var(--cream-warm);
}

.dkd-btn--outline-on-dark {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--line-on-dark);
}
.dkd-btn--outline-on-dark:hover {
  background: var(--gold-champagne);
  color: var(--text-on-gold);
  border-color: var(--gold-champagne);
}

.dkd-block a:focus-visible,
.dkd-block button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dkd-block--donker a:focus-visible,
.dkd-block--donker button:focus-visible { box-shadow: var(--focus-ring-dark); }

/* ── 01 · Hero ──────────────────────────────────────────────────────────── */
.dkd-hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  background: var(--surface-deep) center / cover no-repeat;
}
/* De sluier over de herofoto.
   Let op: NIET var(--veil-full) gebruiken — die token loopt van 30% naar 72%
   en is bovenin veel te licht, precies waar het gouden label en de titel staan.
   Het ontwerp overschrijft die token met onderstaande waarde; die is leidend. */
.dkd-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 34, 29, .74) 0%,
    rgba(12, 34, 29, .78) 45%,
    rgba(12, 34, 29, .90) 100%
  );
}
.dkd-hero-inner {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-11) var(--space-6);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}
/* Let op de prefix: de reset hierboven staat op `.dkd-block h1` (0,1,1) en
   verslaat een losse klasse. Elke kopregel die daarvan afwijkt heeft dus
   minstens dezelfde specificiteit nodig. */
.dkd-block .dkd-hero-titel {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-on-dark);
  margin: 0;
}
.dkd-hero-titel sup {
  font-size: .42em;
  letter-spacing: 0;
  vertical-align: super;
  color: var(--gold-light);
}
.dkd-hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  color: var(--gold-light);
  margin: 0;
}
.dkd-hero-tekst {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-on-dark-body);
  max-width: 54ch;
  margin: 0;
}
.dkd-hero-accent {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: var(--space-2) 0 0;
}
.dkd-hero-knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}