/* ============================================
   MAIN CSS — De Blaoskaffers
   ============================================ */

/* ─── Custom Properties ───────────────────── */
:root {
  --kleur-zwart:  #231F20;
  --kleur-rood:   #FF3131;
  --kleur-geel:   #FFF200;
  --kleur-creme:  #F5F0E8;
  --kleur-wit:    #FFFFFF;
  --kleur-grijs:  #888888;
  --kleur-donker-grijs: #3a3536;

  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-body:    'Inter', Arial, sans-serif;
  --font-merk:    'Univers LT Std', 'Arial Black', Impact, sans-serif;

  --sectie-padding: clamp(64px, 9vw, 128px);
  --container-max:  1240px;
  --container-pad:  clamp(20px, 5vw, 80px);
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-quart:  cubic-bezier(0.76, 0, 0.24, 1);

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.12);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.18);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.28);
  --shadow-rood: 0 4px 24px rgba(255,49,49,0.35);
}

/* ─── Reset & Base ────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--kleur-creme);
  color: var(--kleur-zwart);
  line-height: 1.6;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; }

/* ─── Layout Helpers ──────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.sectie-creme {
  background: var(--kleur-creme);
  padding: var(--sectie-padding) 0;
}

.sectie-zwart {
  background: var(--kleur-zwart);
  padding: var(--sectie-padding) 0;
}

/* ─── Typography ──────────────────────────── */
.bebas {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.bandnaam {
  font-family: var(--font-merk);
  font-weight: 900;
  color: var(--kleur-rood);
  -webkit-text-stroke: 2px var(--kleur-geel);
  text-stroke: 2px var(--kleur-geel);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.92;
}

/* ─── Buttons ─────────────────────────────── */
.btn-rood {
  display: inline-block;
  background: var(--kleur-rood);
  color: var(--kleur-wit);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: 0.08em;
  padding: 14px 36px;
  border: 2px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.22s ease, color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-rood:hover {
  background: var(--kleur-geel);
  color: var(--kleur-zwart);
  transform: translateY(-2px);
  box-shadow: var(--shadow-rood);
}

.btn-rood:focus-visible {
  background: var(--kleur-geel);
  color: var(--kleur-zwart);
  transform: translateY(-2px);
  box-shadow: var(--shadow-rood);
  outline: 2px solid var(--kleur-geel);
  outline-offset: 3px;
}

.btn-geel-outline {
  display: inline-block;
  background: transparent;
  color: var(--kleur-geel);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: 0.08em;
  padding: 12px 36px;
  border: 2px solid var(--kleur-geel);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.22s ease, color 0.22s ease, transform 0.18s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-geel-outline:hover {
  background: var(--kleur-geel);
  color: var(--kleur-zwart);
  transform: translateY(-2px);
}

.btn-geel-outline:focus-visible {
  background: var(--kleur-geel);
  color: var(--kleur-zwart);
  transform: translateY(-2px);
  outline: 2px solid var(--kleur-geel);
  outline-offset: 3px;
}

.btn-wit-outline {
  display: inline-block;
  background: transparent;
  color: var(--kleur-wit);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: 0.08em;
  padding: 12px 36px;
  border: 2px solid rgba(255,255,255,0.4);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.18s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-wit-outline:hover {
  background: var(--kleur-wit);
  color: var(--kleur-zwart);
  border-color: var(--kleur-wit);
  transform: translateY(-2px);
}

/* ─── Sectie Headers ──────────────────────── */
.sectie-header {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.sectie-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kleur-rood);
  display: block;
  margin-bottom: 12px;
}

.sectie-titel {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sectie-subtitel {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.65;
  color: var(--kleur-grijs);
  margin-top: 16px;
  max-width: 560px;
}

/* ─── Decorative Line ─────────────────────── */
.deco-lijn {
  width: 60px;
  height: 3px;
  background: var(--kleur-rood);
  margin-bottom: 24px;
}

/* ─── Grain overlay ───────────────────────── */
.grain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* ─── Skip Link ───────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--kleur-rood);
  color: var(--kleur-wit);
  padding: 8px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ─── Rood accent tekst ───────────────────── */
.accent-rood { color: var(--kleur-rood); }
.accent-geel { color: var(--kleur-geel); }

/* ─── Divider ─────────────────────────────── */
.divider-rood {
  width: 100%;
  height: 4px;
  background: var(--kleur-rood);
}