/**
 * Design tokens — dark editorial / refined hospitality (NL fanshop).
 * Inspiratie: editorial impact (Paput), rustige luxe (Da Maria), stille verfijning (Disantino).
 */

:root {
  /* Surfaces — diep, warm, niet plat zwart */
  --wiegelaar-bg: #0a0a0b;
  --wiegelaar-bg-elevated: #141416;
  --wiegelaar-bg-soft: #1c1c20;
  --wiegelaar-bg-warm: #181816;

  /* Tekst — WCAG-vriendelijker op donker (body / secundair) */
  --wiegelaar-text: #faf6f0;
  --wiegelaar-text-muted: #d8d0c6;
  --wiegelaar-text-subtle: #b0a69c;

  /* Links op donker — iets helderder dan alleen accent voor 4.5:1+ */
  --wiegelaar-link: #f0b896;
  --wiegelaar-link-hover: #fff2e8;

  /* Accent — terracotta / koper (eten + premium) */
  --wiegelaar-accent: #c96d45;
  --wiegelaar-accent-hover: #f0a070;
  --wiegelaar-accent-muted: rgba(201, 109, 69, 0.28);

  /* Ondersteunend — iets zichtbaardere scheiding */
  --wiegelaar-border: rgba(255, 255, 255, 0.1);
  --wiegelaar-border-strong: rgba(255, 255, 255, 0.18);
  --wiegelaar-danger: #e85d5d;
  --wiegelaar-success: #6ecf8e;

  /* Typografie — editorial display + heldere UI */
  --wiegelaar-font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --wiegelaar-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale (8px grid) */
  --wiegelaar-space-1: 0.25rem;
  --wiegelaar-space-2: 0.5rem;
  --wiegelaar-space-3: 0.75rem;
  --wiegelaar-space-4: 1rem;
  --wiegelaar-space-5: 1.5rem;
  --wiegelaar-space-6: 2rem;
  --wiegelaar-space-7: 2.5rem;
  --wiegelaar-space-8: 3rem;
  --wiegelaar-space-10: 4rem;

  --wiegelaar-radius-sm: 10px;
  --wiegelaar-radius-md: 16px;
  --wiegelaar-radius-lg: 24px;
  --wiegelaar-radius-full: 9999px;

  --wiegelaar-shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.45);
  --wiegelaar-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --wiegelaar-shadow-glow: 0 0 60px rgba(201, 109, 69, 0.12);

  --wiegelaar-max-width: 72rem;
  --wiegelaar-content-width: 40rem;

  /* Verticale ritme tussen homepage-secties / Vertical rhythm between homepage sections */
  --wiegelaar-section-gap: clamp(2rem, 4.5vw, 3rem);
  /* Eerste sectie onder hero: iets strakker dan section-gap / First block after hero: slightly tighter */
  --wiegelaar-section-gap-after-hero: clamp(var(--wiegelaar-space-5), 3vw, var(--wiegelaar-space-6));

  /* Horizontale “kolom”-marge: header = content = footer / Horizontal page gutter */
  --wiegelaar-layout-gutter: var(--wiegelaar-space-4);
  /* Onderkant main content (boven footer) / Bottom padding of main shell */
  --wiegelaar-content-pad-bottom: clamp(var(--wiegelaar-space-8), 5vw, var(--wiegelaar-space-10));
  /* Ruimte onder vaste header naar eerste content / Space below sticky header into content */
  --wiegelaar-content-pad-top: var(--wiegelaar-space-4);

  --wiegelaar-transition-fast: 160ms ease;
  --wiegelaar-transition-base: 240ms ease;
  --wiegelaar-focus-ring: 0 0 0 2px var(--wiegelaar-bg), 0 0 0 5px var(--wiegelaar-link);
}

/* Skip link — eerste tab-stop, zichtbaar bij focus */
.wiegelaar-skip-link {
  background: var(--wiegelaar-accent);
  border-radius: var(--wiegelaar-radius-sm);
  color: #0a0a0b;
  font-family: var(--wiegelaar-font-body);
  font-weight: 700;
  left: var(--wiegelaar-layout-gutter);
  padding: var(--wiegelaar-space-3) var(--wiegelaar-layout-gutter);
  position: absolute;
  text-decoration: none;
  top: -100px;
  transition: top var(--wiegelaar-transition-fast), box-shadow var(--wiegelaar-transition-fast);
  z-index: 100000;
}

.wiegelaar-skip-link:focus {
  outline: none;
}

.wiegelaar-skip-link:focus-visible {
  box-shadow: var(--wiegelaar-focus-ring);
  top: var(--wiegelaar-layout-gutter);
}

body.wiegelaar-dark-premium {
  background-color: var(--wiegelaar-bg);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(201, 109, 69, 0.14), transparent 55%),
    radial-gradient(ellipse 90% 60% at 100% 0%, rgba(255, 255, 255, 0.04), transparent 45%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(201, 109, 69, 0.06), transparent 50%);
  color: var(--wiegelaar-text);
  font-family: var(--wiegelaar-font-body);
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.0625rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.wiegelaar-dark-premium h1,
body.wiegelaar-dark-premium h2,
body.wiegelaar-dark-premium h3,
body.wiegelaar-dark-premium h4,
body.wiegelaar-dark-premium h5,
body.wiegelaar-dark-premium h6 {
  color: var(--wiegelaar-text);
  font-family: var(--wiegelaar-font-display);
  font-optical-sizing: auto;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.14;
  text-wrap: balance;
}

body.wiegelaar-dark-premium p {
  text-wrap: pretty;
}

body.wiegelaar-dark-premium a {
  color: var(--wiegelaar-link);
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.18em;
  transition: color var(--wiegelaar-transition-fast);
}

body.wiegelaar-dark-premium a:hover {
  color: var(--wiegelaar-link-hover);
}

/* NL/EN: primaire knoppen zijn <a>; overschrijf linkkleur voor voldoende contrast op oranje. */
body.wiegelaar-dark-premium a.wiegelaar-button--primary:link,
body.wiegelaar-dark-premium a.wiegelaar-button--primary:visited,
body.wiegelaar-dark-premium a.wiegelaar-button--primary:hover,
body.wiegelaar-dark-premium a.wiegelaar-button--primary:active {
  color: #050506;
}

body.wiegelaar-dark-premium a.wiegelaar-button--secondary:link,
body.wiegelaar-dark-premium a.wiegelaar-button--secondary:visited,
body.wiegelaar-dark-premium a.wiegelaar-button--secondary:hover,
body.wiegelaar-dark-premium a.wiegelaar-button--secondary:active {
  color: var(--wiegelaar-text);
}

body.wiegelaar-dark-premium a:focus-visible {
  border-radius: 2px;
  box-shadow: var(--wiegelaar-focus-ring);
  outline: none;
}

body.wiegelaar-dark-premium ::selection {
  background: var(--wiegelaar-accent-muted);
  color: var(--wiegelaar-text);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

#main-content:focus {
  outline: none;
}

/* Screen reader only — / Alleen voor schermlezers */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: var(--wiegelaar-bg-elevated);
  clip: auto !important;
  clip-path: none;
  color: var(--wiegelaar-text);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: var(--wiegelaar-layout-gutter);
  line-height: normal;
  padding: var(--wiegelaar-space-3) var(--wiegelaar-layout-gutter);
  text-decoration: none;
  top: var(--wiegelaar-layout-gutter);
  width: auto;
  z-index: 100001;
}

@media (max-width: 480px) {
  :root {
    --wiegelaar-layout-gutter: var(--wiegelaar-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}