/*
Theme Name: The Flyers
Theme URI: https://theflyers.nl
Author: On The Rocks Media
Description: Hoofdthema voor Handbalvereniging The Flyers. Dynamisch beheer van teams, wedstrijden/scores, evenementen, sponsoren en nieuws.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: theflyers
*/

/* ==========================================================================
   Design tokens (uit Figma)
   ========================================================================== */
:root {
  /* Kleuren (exact uit Figma) */
  --tf-blue:        #06659E;  /* primair blauw */
  --tf-blue-dark:   #05547f;
  --tf-orange:      #F98437;  /* primair oranje */
  --tf-orange-dark: #e26f24;
  --tf-ink:         #111827;
  --tf-night:       #010a12;  /* Background3 */
  --tf-gray:        #5b5f64;  /* Text */
  --tf-gray-light:  #c9cecd;
  --tf-bg:          #ffffff;
  --tf-white:       #fefffe;
  /* Exacte Figma-kleuren (Evenementen e.a.) */
  --tf-cerulean:    #0771b4;  /* Deep Cerulean — Figma-blauw blokken */
  --tf-venice:      #437494;  /* Venice/grijsblauw — banners & notes */
  --tf-azure-pale:  #e9f2f8;  /* lichtblauw blok-achtergrond */
  --tf-deco-dark:   #02436b;  /* donkerblauw schuin deco-blok */

  /* Fonts (exact uit Figma) — Varela Round = enige body font, Barlow Condensed = titels */
  --tf-font:    "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif; /* body (overal) */
  --tf-display: "Barlow Condensed", "Varela Round", sans-serif;  /* h1/h2/h3 + titels */
  --tf-eyebrow: "Varela Round", system-ui, sans-serif;      /* eyebrow / body-variant */
  --tf-nav:     "Roboto", "Inter", sans-serif;            /* navigatie */
  --tf-caption: "Urbanist", "Inter", sans-serif;          /* topbar */

  --tf-container: 1440px;
  --tf-radius:    10px;
  --tf-radius-lg: 16px;
  --tf-shadow:    0 4px 20px rgba(1, 10, 18, 0.08);
  --tf-shadow-lg: 0 10px 40px rgba(1, 10, 18, 0.15);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; max-width: 100%; width: 100%; }
html { box-sizing: border-box; }
/* full-bleed secties: volle breedte, geen horizontale overflow */
.tf-social, .tf-fb, .tf-hero, .tf-page-hero, .tf-sponsors, .tf-newsletter, .tf-pupil, .tf-matches, .tf-teams, .tf-volunteer, .tf-conduct {
  width: 100%; max-width: 100%; margin-left: 0; margin-right: 0;
}
body {
  margin: 0;
  font-family: var(--tf-font); /* Varela Round — enige body font */
  font-variant-numeric: lining-nums proportional-nums ordinal;
  font-feature-settings: 'liga' off, 'clig' off;
  color: var(--tf-ink);
  background: var(--tf-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* bg-foto's altijd volledig vullend (cover, hele breedte+hoogte) */
.tf-hero__bg img, .tf-page-hero__bg img, .tf-social__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center;
}
a { color: var(--tf-blue); text-decoration: none; }
a:hover { color: var(--tf-blue-dark); }
h1, h2, h3 { font-family: var(--tf-display); font-weight: 700; line-height: 1; margin: 0 0 .3em; color: var(--tf-ink); text-transform: uppercase; letter-spacing: -0.5px; }
h4 { font-family: var(--tf-font); font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: clamp(3rem, 7vw, 6.875rem); }   /* 110px */
h2 { font-size: clamp(2rem, 4vw, 3.375rem); }   /* 54px */
h3 { font-size: clamp(1.6rem, 2.5vw, 2rem); }
p { margin: 0 0 1rem; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.tf-container { width: 100%; max-width: var(--tf-container); margin-inline: auto; padding-inline: 24px; }
.tf-section { padding-block: clamp(56px, 7vw, 100px); }
.tf-section--blue { background: var(--tf-blue); color: var(--tf-white); }
.tf-section--blue h2, .tf-section--blue h3 { color: var(--tf-white); }
.tf-grid { display: grid; gap: 24px; }
.tf-eyebrow { font-family: var(--tf-eyebrow); text-transform: uppercase; letter-spacing: .04em; font-weight: 400; font-size: 1.125rem; color: var(--tf-white); margin: 0 0 .6rem; }
.tf-accent-blue { color: var(--tf-blue); }
.tf-accent-orange { color: var(--tf-orange); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.tf-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 12px 24px; border-radius: 15px;
  font-family: var(--tf-display); font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: .02em; line-height: 24px;
  cursor: pointer; border: 2px solid transparent; transition: .15s ease;
}
.tf-btn--primary { background: var(--tf-orange); color: #fff; }
.tf-btn--primary:hover { background: var(--tf-orange-dark); color: #fff; }
.tf-btn--blue { background: var(--tf-blue); color: #fff; }
.tf-btn--blue:hover { background: var(--tf-blue-dark); color: #fff; }
.tf-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.tf-btn--outline:hover { background: #fff; color: var(--tf-blue); }

/* ==========================================================================
   Topbar (donkere balk boven nav)
   ========================================================================== */
.tf-topbar { background: var(--tf-night); color: #fff; font-family: var(--tf-caption); font-size: 12px; }
.tf-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 33px; gap: 24px; }
.tf-topbar__item { display: inline-flex; align-items: center; gap: 8px; line-height: 21px; }
.tf-topbar__item--bold { font-weight: 700; text-transform: uppercase; line-height: 14px; }
.tf-topbar svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   Header / nav  — clean herbouw (desktop dropdown + mobiel accordeon)
   ========================================================================== */
.tf-header { position: sticky; top: 0; z-index: 200; background: var(--tf-blue); box-shadow: var(--tf-shadow); overflow: visible; }
.tf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 110px; }
/* Logo groter dan de header → steekt onderaan uit en 'zweeft' over de content/hero */
.tf-logo { display: inline-flex; align-items: center; flex: 0 0 auto; position: relative; z-index: 210; }
.tf-logo img { height: 150px; width: auto; display: block; filter: drop-shadow(0 6px 14px rgba(1,10,18,.25)); margin-bottom: -56px; }

/* --- gedeelde lijsten --- */
.tf-nav ul { list-style: none; margin: 0; padding: 0; }
.tf-nav > ul { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 22px); }
.tf-nav li { position: relative; }

/* --- top-level links (desktop) --- */
.tf-nav > ul > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--tf-nav); font-weight: 900; font-size: clamp(15px, 1.15vw, 18px);
  color: #fff; white-space: nowrap; padding: 8px 2px; border-radius: 6px;
  transition: opacity .15s ease;
}
.tf-nav > ul > li > a:hover { color: #fff; opacity: .82; }
.tf-nav .current-menu-item > a, .tf-nav .current_page_item > a { position: relative; }
.tf-nav .current-menu-item > a::after, .tf-nav .current_page_item > a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: -2px; height: 3px;
  background: var(--tf-orange); border-radius: 2px;
}

/* chevron op items met submenu */
.tf-has-sub > a .tf-caret { width: 12px; height: 12px; fill: currentColor; transition: transform .2s ease; flex: 0 0 auto; }
.tf-has-sub:hover > a .tf-caret, .tf-has-sub:focus-within > a .tf-caret { transform: rotate(180deg); }

/* --- desktop dropdown --- */
.tf-sub {
  position: absolute; top: calc(100% + 14px); left: 0; min-width: 250px; max-width: 320px;
  background: #fff; border-radius: 14px; box-shadow: var(--tf-shadow-lg);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60;
}
/* onzichtbare hover-brug tussen item en dropdown */
.tf-sub::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.tf-has-sub:hover > .tf-sub, .tf-has-sub:focus-within > .tf-sub { opacity: 1; visibility: visible; transform: translateY(0); }
/* dropdowns rechts uitlijnen voor de laatste menu-items (binnen viewport houden) */
.tf-nav > ul > li:nth-last-child(-n+2) > .tf-sub { left: auto; right: 0; }
.tf-sub a {
  display: block; font-family: var(--tf-font); font-weight: 600; font-size: 15px; line-height: 1.35;
  color: var(--tf-ink); padding: 12px 16px; border-radius: 9px; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.tf-sub a:hover { background: var(--tf-azure-pale); color: var(--tf-cerulean); }

/* --- hamburger-knop --- */
.tf-nav-toggle {
  display: none; flex: 0 0 auto; width: 46px; height: 46px; padding: 0;
  background: rgba(255,255,255,.12); border: 0; border-radius: 10px; cursor: pointer;
  align-items: center; justify-content: center;
}
.tf-nav-toggle:hover { background: rgba(255,255,255,.2); }
.tf-nav-toggle__bars { position: relative; width: 22px; height: 16px; }
.tf-nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2.5px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.tf-nav-toggle__bars span:nth-child(1) { top: 0; }
.tf-nav-toggle__bars span:nth-child(2) { top: 7px; }
.tf-nav-toggle__bars span:nth-child(3) { top: 14px; }
/* X-staat wanneer open */
.tf-nav-toggle[aria-expanded="true"] .tf-nav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.tf-nav-toggle[aria-expanded="true"] .tf-nav-toggle__bars span:nth-child(2) { opacity: 0; }
.tf-nav-toggle[aria-expanded="true"] .tf-nav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ==========================================================================
   Nav — mobiel / tablet (≤ 1080px)
   ========================================================================== */
@media (max-width: 1080px) {
  .tf-header__inner { height: 84px; }
  .tf-logo img { height: 104px; margin-bottom: -38px; }
  .tf-nav-toggle { display: inline-flex; }

  /* paneel onder de header — top = onderkant header (JS-var, fallback 117px = topbar+header).
     Begint nooit over de header (anders dan voorheen). */
  .tf-nav {
    position: fixed; left: 0; right: 0;
    top: var(--tf-header-h, 117px); bottom: 0;
    background: var(--tf-blue); display: none; z-index: 150;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: var(--tf-shadow-lg); padding: 4px 0 40px;
  }
  .tf-nav.is-open { display: block; }
  .tf-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }

  .tf-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.10); }
  .tf-nav > ul > li > a {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 17px; padding: 16px 22px; white-space: normal; border-radius: 0;
  }
  .tf-nav .current-menu-item > a::after, .tf-nav .current_page_item > a::after { display: none; }
  .tf-has-sub > a .tf-caret { width: 16px; height: 16px; }
  .tf-has-sub.is-open > a .tf-caret { transform: rotate(180deg); }

  /* submenu = accordeon: standaard dicht, opent via .is-open */
  .tf-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: var(--tf-blue-dark); border-radius: 0;
    min-width: 0; max-width: none; padding: 0; gap: 0;
    overflow: hidden; max-height: 0; transition: max-height .28s ease;
  }
  .tf-sub::before { display: none; }
  .tf-has-sub.is-open > .tf-sub { max-height: 520px; }
  /* op touch nooit op hover openen */
  .tf-has-sub:hover > .tf-sub, .tf-has-sub:focus-within > .tf-sub { max-height: 0; }
  .tf-has-sub.is-open:hover > .tf-sub { max-height: 520px; }
  .tf-sub a {
    color: rgba(255,255,255,.92); font-weight: 600; font-size: 15.5px;
    padding: 14px 22px 14px 42px; border-radius: 0; white-space: normal;
  }
  .tf-sub li + li a { border-top: 1px solid rgba(255,255,255,.07); }
  .tf-sub a:hover, .tf-sub a:active { background: rgba(255,255,255,.10); color: #fff; }
}

/* voorkom scroll van de pagina-body als het mobiele menu open is */
body.tf-nav-open { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.tf-hero { position: relative; color: #fff; overflow: hidden; background: var(--tf-blue); min-height: 800px; display: flex; align-items: center; }
.tf-hero__bg { position: absolute; inset: 0; z-index: 0; }
/* blauwe overlay zoals Figma Rectangle1319 */
.tf-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,101,158,.88) 0%, rgba(6,101,158,.55) 45%, rgba(6,101,158,.25) 100%); }
.tf-hero .tf-container { position: relative; z-index: 2; width: 100%; }
.tf-hero__inner { max-width: 560px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.tf-hero__eyebrow { font-family: var(--tf-eyebrow); font-size: 18px; line-height: 24px; text-transform: uppercase; margin: 0 0 16px; }
.tf-hero h1 { color: #fff; font-family: var(--tf-display); font-weight: 700; font-size: clamp(3.5rem, 7vw, 6.875rem); line-height: .87; letter-spacing: 3px; margin: 0; text-transform: uppercase; }
.tf-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* stats = glas-badge rechtsonder */
.tf-hero__stats { position: absolute; z-index: 2; right: clamp(24px, 5vw, 90px); bottom: clamp(40px, 8vh, 110px); display: inline-flex; gap: 0; align-items: center;
  background: rgba(255,255,255,.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 15px; padding: 23px 24px; color: #fff; font-family: var(--tf-eyebrow); font-size: 18px; line-height: 24px; white-space: nowrap; }
@media (max-width: 800px) { .tf-hero__stats { position: static; margin-top: 24px; white-space: normal; } }

/* ==========================================================================
   Cards
   ========================================================================== */
.tf-card { background: #fff; border-radius: var(--tf-radius-lg); overflow: hidden; box-shadow: var(--tf-shadow); transition: .2s ease; }
.tf-card:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-lg); }
.tf-card__media { aspect-ratio: 16/10; background: var(--tf-gray-light); }
.tf-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tf-card__body { padding: 20px; }
.tf-card__meta { font-size: .8rem; color: var(--tf-gray); text-transform: uppercase; letter-spacing: .05em; }
.tf-card__title { font-size: 1.2rem; margin: .35rem 0 .5rem; }

/* ==========================================================================
   Scorebord / wedstrijden
   ========================================================================== */
.tf-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; background: #fff; border-radius: var(--tf-radius); padding: 18px 22px; box-shadow: var(--tf-shadow); }
.tf-score__team { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.tf-score__team--away { justify-content: flex-end; }
.tf-score__num { font-size: 2rem; font-weight: 800; color: var(--tf-blue); background: var(--tf-bg); border-radius: 8px; padding: 6px 16px; min-width: 56px; text-align: center; }
.tf-score__vs { color: var(--tf-gray); font-weight: 700; }
.tf-score__date { grid-column: 1 / -1; text-align: center; font-size: .8rem; color: var(--tf-gray); }

/* ==========================================================================
   Footer
   ========================================================================== */
.tf-footer { background: var(--tf-night); color: #fff; padding-block: 72px 33px; font-family: var(--tf-font); }
.tf-footer a { color: #fff; opacity: .75; }
.tf-footer a:hover { opacity: 1; }
.tf-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; }
.tf-footer__brand img { height: 90px; width: auto; margin-bottom: 1rem; }
.tf-footer__brand p { font-size: 14px; line-height: 22.75px; opacity: .75; max-width: 280px; margin-bottom: 20px; }
.tf-footer__social { display: flex; gap: 12px; }
.tf-footer__social a { width: 42px; height: 42px; border-radius: 50%; background: var(--tf-cerulean); display: inline-flex; align-items: center; justify-content: center; opacity: 1; transition: background .15s ease, transform .15s ease; }
.tf-footer__social a:hover { background: var(--tf-venice); transform: translateY(-2px); }
.tf-footer__social svg { width: 20px; height: 20px; fill: #fff; }
.tf-footer h4 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 1.5rem; font-family: var(--tf-font); text-transform: none; letter-spacing: 0; }
.tf-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 14px; line-height: 1.4; }
.tf-footer__list li { opacity: .75; }
.tf-footer__list li a { opacity: 1; }
.tf-footer__bottom { margin-top: 48px; padding-top: 33px; border-top: 1px solid rgba(255,255,255,.2); font-size: 14px; opacity: .9; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.tf-footer__legal { display: flex; gap: 24px; }
@media (max-width: 900px) { .tf-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tf-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Intro-blok (ONTDEK HET HANDBAL IN WIJCHEN)
   ========================================================================== */
/* intro: witte achtergrond blijft op z'n plek; de sectie ligt BOVEN de FB-band
   (z-index) zodat items over de blauwe band vallen. De foto rechts steekt apart
   omhoog over de hero (zie .tf-intro__photo--side). */
/* intro omhoog over de hero: hele sectie negatief, witte achtergrond start LAGER
   (via een pseudo-element) zodat het wit de hero niet afdekt maar de foto's wél
   bovenop de hero zweven. */
.tf-intro { position: relative; background: transparent; padding-bottom: 0; z-index: 3;
  margin-top: clamp(-200px, -14vw, -130px); padding-top: clamp(200px, 20vw, 290px); }
/* witte achtergrond: start lager (hero niet afdekken) en eindigt met een SCHUINE
   onderrand die parallel loopt aan de blauwe FB-band eronder. Daardoor komt de
   blauwe schuine band tevoorschijn en zweven de foto's + oranje vak eroverheen. */
.tf-intro::before { content: ""; position: absolute; left: 0; right: 0;
  top: clamp(130px, 14vw, 200px); bottom: 0; background: #fff; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(60px, 8vw, 130px)), 0 100%); }
.tf-intro .tf-container { position: relative; z-index: 2; }
.tf-intro__grid { display: grid; grid-template-columns: minmax(0, 592px) minmax(0, 1fr); gap: 56px; align-items: start; }
.tf-intro__left { position: relative; max-width: 592px; }

/* titel-blok */
.tf-intro__head { position: relative; padding-top: 30px; }
.tf-intro__ball { position: absolute; z-index: 1; width: 142px; height: 142px; left: -10px; top: -28px; pointer-events: none; }
.tf-intro__title { position: relative; z-index: 2; font-family: var(--tf-display); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 0; color: var(--tf-ink); }
.tf-intro__title span { display: block; font-size: clamp(2.6rem, 4.5vw, 3.75rem); line-height: 0.9; }    /* 60px/54px = 0.9, schaalt mee met font-size */
.tf-intro__title em { font-style: normal; display: inline-block; transform: skewX(-6deg); }
.tf-intro__rule { display: block; width: 49px; height: 4px; background: var(--tf-blue); border-radius: 2px; margin-top: 18px; position: relative; z-index: 2; }

.tf-intro__lead { color: var(--tf-gray); font-size: 1rem; max-width: 592px; margin-top: 20px; }

/* getilte foto's */
.tf-intro__photo { border: 8px solid #fff; box-shadow: var(--tf-shadow-lg); border-radius: 4px; overflow: hidden; }
.tf-intro__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* team-foto links, onder de tekst */
.tf-intro__photo--main { margin-top: 32px; max-width: 500px; aspect-ratio: 585/640; transform: rotate(-4deg); }

/* rechter kolom: ZW-foto trekt omhoog over de hero, CTA eronder */
.tf-intro__right { position: relative; }
.tf-intro__photo--side { aspect-ratio: 796/854; max-width: 500px; margin-top: clamp(-200px, -15vw, -140px); margin-left: auto; transform: rotate(4deg); filter: grayscale(1); position: relative; z-index: 6; }

@media (max-width: 900px) {
  /* op mobiel geen hero-overlap → normale, kleinere ruimte boven de titel */
  .tf-intro { margin-top: 0; padding-top: clamp(40px, 9vw, 64px); }
  .tf-intro::before { top: 0; }
  .tf-intro__grid { grid-template-columns: 1fr; gap: 24px; }
  .tf-intro__ball { width: 100px; height: 100px; left: -6px; top: -18px; }
  .tf-intro__photo--main { transform: none; margin: 20px auto 0; max-width: 100%; }
  .tf-intro__photo--side { transform: none; margin: 24px auto 0; max-width: 100%; }
}

/* blur achtergrond-elementen (decoratief) */
.tf-blur { position: absolute; border-radius: 9999px; filter: blur(32px); pointer-events: none; z-index: 0; }
.tf-blur--blue   { background: rgba(6,101,158,.2); }
.tf-blur--orange { background: rgba(249,132,55,.2); }
.tf-blur--white  { background: rgba(255,255,255,.1); }

/* ==========================================================================
   Oranje CTA-blok (SCHRIJF JE IN)
   ========================================================================== */
.tf-cta { background: var(--tf-orange); color: #fff; border-radius: var(--tf-radius-lg); padding: 40px; width: 100%; margin-top: 40px; position: relative; overflow: hidden; box-shadow: var(--tf-shadow-lg); z-index: 11; }
.tf-cta h2 { color: #fff; position: relative; z-index: 2; }
.tf-cta p { opacity: .95; max-width: 420px; position: relative; z-index: 2; }
.tf-cta .tf-btn { margin-top: 8px; position: relative; z-index: 2; }
.tf-cta__watermark { position: absolute; right: -16px; bottom: -16px; width: 170px; height: 170px; opacity: .3; filter: brightness(0) invert(1); pointer-events: none; z-index: 1; }

/* ==========================================================================
   Diagonale sectie-overgangen (schuine randen via geskewde pseudo-element,
   GEEN clip-path — die gaf een grijs gat rechts)
   ========================================================================== */
:root { --tf-diagonal: 3.5deg; }
/* schuine BOVENrand: pseudo-element in de sectiekleur, omhoog geskewd.
   De sectie zelf clipt de overflow van de skew weg. */
.tf-diagonal-top { position: relative; }
/* schuine bovenrand wordt nu via clip-path op de sectie zelf gedaan (zie .tf-fb).
   De oude skewY-::before is uitgeschakeld (gaf grijs gat + dubbele rand). */
.tf-diagonal-top > * { position: relative; z-index: 1; }
.tf-diagonal-bottom { }

/* ==========================================================================
   Facebook nieuws-feed sectie
   ========================================================================== */
.tf-fb { background: var(--tf-blue); color: #fff; padding-bottom: clamp(60px, 6vw, 100px); position: relative; z-index: 0;
  margin-top: clamp(-320px, -22vw, -220px); padding-top: clamp(360px, 30vw, 520px);
  /* schuine BOVENrand parallel aan de witte intro-onderrand (links lager, rechts hoger) */
  clip-path: polygon(0 clamp(60px, 8vw, 130px), 100% 0, 100% 100%, 0 100%); }
.tf-fb__head { text-align: center; margin-bottom: 40px; }
.tf-fb__head h2 { color: #fff; }
.tf-fb__head p { opacity: .9; }
/* 2 koloms: FB-feed links (vaste max 500px), nieuws-kolom rechts vult de rest */
.tf-fb__grid { display: grid; grid-template-columns: 500px 1fr; gap: 40px; align-items: start; max-width: 1100px; margin: 0 auto; }
.tf-fb__feed { width: 500px; max-width: 100%; }
.tf-fb__feed .fb-page, .tf-fb__feed .fb-page span, .tf-fb__feed iframe { width: 100% !important; max-width: 100% !important; border-radius: var(--tf-radius); overflow: hidden; background: #fff; }
.tf-fb__feed img { width: 100%; border-radius: var(--tf-radius); display: block; box-shadow: 0 10px 40px rgba(0,0,0,.25); }

/* nieuws-kolom rechts */
.tf-fb__news { display: flex; flex-direction: column; gap: 14px; }
.tf-fb__news-title { color: #fff; font-family: var(--tf-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: .5px; margin: 0 0 6px; }
.tf-fb-news-card { display: block; background: #fff; border-left: 4px solid var(--tf-orange); border-radius: 8px; padding: 16px 20px; box-shadow: var(--tf-shadow); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.tf-fb-news-card:hover { transform: translateY(-3px); box-shadow: var(--tf-shadow-lg); }
.tf-fb-news-card__date { display: block; font-family: var(--tf-font); font-size: 13px; color: #6b7280; margin-bottom: 4px; }
.tf-fb-news-card__title { display: block; font-family: var(--tf-font); font-weight: 700; font-size: 16px; line-height: 1.35; color: #1f2937; }
.tf-fb__news-all { align-self: flex-start; margin-top: 6px; color: #fff; font-family: var(--tf-display); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .5px; text-decoration: none; border-bottom: 2px solid var(--tf-orange); padding-bottom: 2px; }
.tf-fb__news-all:hover { color: var(--tf-orange); }

@media (max-width: 980px) {
  .tf-fb__grid { grid-template-columns: 1fr; max-width: 500px; }
  .tf-fb__feed { width: 100%; }
}

/* ==========================================================================
   Social media sectie (foto + zwarte overlay, overlapt omhoog over FB-embed)
   ========================================================================== */
.tf-social {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  width: 100%;
  max-width: 100%;
  min-height: clamp(320px, 30vw, 460px);
  padding: clamp(110px, 11vw, 160px) 20px clamp(70px, 7vw, 110px);
  /* trekt de sectie omhoog over de FB-embed */
  margin-top: clamp(-460px, -32vw, -300px);
  /* schuine bovenrand via clip-path op de sectie zelf — boven de diagonaal is
     TRANSPARANT (geen blauw vlak), zodat de embed eronder doorschemert */
  clip-path: polygon(0 clamp(60px, 8vw, 130px), 100% 0, 100% 100%, 0 100%);
}
.tf-social__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.tf-social__bg img { display: none; }
.tf-social__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .55);
}
.tf-social__inner { position: relative; z-index: 3; }
.tf-social h2 { color: #fff; margin: 0 0 22px; }
.tf-social__icons { display: flex; gap: 16px; justify-content: center; }
.tf-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--tf-blue);
  color: #fff;
  transition: .15s ease;
}
.tf-social__icon:hover { background: var(--tf-orange); color: #fff; }
.tf-social__icon svg { width: 22px; height: 22px; fill: currentColor; }

/* ==========================================================================
   Contact sectie (3 kaarten)
   ========================================================================== */
.tf-contact { background: #fff; text-align: center; }
.tf-contact__lead { color: var(--tf-gray); max-width: 560px; margin: 0 auto 40px; }
.tf-contact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.tf-contact-card { border: 1px solid var(--tf-gray-light); border-radius: var(--tf-radius); padding: 24px 28px; }
.tf-contact-card__title { display: flex; align-items: center; gap: 8px; font-family: var(--tf-display); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; margin-bottom: 12px; color: var(--tf-ink); }
.tf-contact-card__title svg { width: 20px; height: 20px; fill: var(--tf-ink); }
.tf-contact-card p { color: var(--tf-gray); font-size: .95rem; margin: 0; line-height: 1.5; }
.tf-contact-card a { color: var(--tf-blue); text-decoration: underline; }
@media (max-width: 800px) { .tf-contact__grid { grid-template-columns: 1fr; } }

/* sponsor placeholder */
.tf-sponsor-ph { display: flex; align-items: center; justify-content: center; height: 90px; background: var(--tf-bg); border: 1px dashed var(--tf-gray-light); border-radius: var(--tf-radius); color: var(--tf-gray); font-weight: 700; font-size: .9rem; }

/* utility */
.tf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.tf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.tf-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .tf-cols-3, .tf-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tf-cols-2, .tf-cols-3, .tf-cols-4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pagina-hero (subpagina kop-strip)
   ========================================================================== */
.tf-page-hero { position: relative; color: #fff; overflow: hidden; min-height: 358px; display: flex; align-items: center; background: var(--tf-night); }
.tf-page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.tf-page-hero__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(1,10,18,.55); }
.tf-page-hero .tf-container { position: relative; z-index: 2; }
.tf-page-hero__eyebrow { font-family: var(--tf-eyebrow); font-size: 18px; line-height: 24px; text-transform: uppercase; margin: 0 0 16px; color: #fff; }
.tf-page-hero h1 { color: #fff; font-family: var(--tf-display); font-weight: 700; font-size: clamp(3.5rem, 7vw, 6.875rem); line-height: .87; text-transform: uppercase; letter-spacing: -.5px; margin: 0; }

/* ==========================================================================
   Team-grid (CPT team archief)
   ========================================================================== */
.tf-teams { background: #fff; }
.tf-teams__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.tf-team-card { background: #fff; border-radius: var(--tf-radius-lg); overflow: hidden; box-shadow: var(--tf-shadow); transition: .2s ease; }
.tf-team-card:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-lg); }
.tf-team-card__head { background: var(--tf-blue); color: #fff; padding: 24px; }
.tf-team-card__title { font-family: var(--tf-display); font-weight: 700; font-size: clamp(1.6rem, 2.2vw, 2.25rem); line-height: 1.05; text-transform: uppercase; letter-spacing: .5px; margin: 0; color: #fff; }
.tf-team-card__meta { font-family: var(--tf-font); font-size: 1rem; opacity: .9; margin: 6px 0 0; }
.tf-team-card__media { padding: 24px; }
.tf-team-card__media-inner { aspect-ratio: 626/417; border-radius: var(--tf-radius); overflow: hidden; background: var(--tf-gray-light); }
.tf-team-card__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .tf-teams__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Wedstrijden & standen (Vereniging) — CPT wedstrijd
   ========================================================================== */
.tf-matches { background: #fff; text-align: center; }
.tf-matches__eyebrow { font-family: var(--tf-display); font-weight: 700; font-size: 20px; color: var(--tf-blue); letter-spacing: -.5px; margin: 0 0 8px; }
.tf-matches h2 { color: var(--tf-blue); }
.tf-matches__sub { font-family: var(--tf-eyebrow); font-size: 18px; color: #374151; margin: 0 auto 48px; max-width: 768px; }
.tf-matches__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; position: relative; max-width: 1216px; margin-inline: auto; }
.tf-matchcard { background: #e9f2f8; border-radius: 18px; padding: 4px; overflow: hidden; }
.tf-matchcard--results { background: rgba(7,113,180,.09); }
.tf-matchcard__head { background: var(--tf-blue); border-bottom: 4px solid var(--tf-orange); border-radius: 15px; padding: 24px 24px 28px; text-align: left; }
.tf-matchcard__head h3 { font-family: var(--tf-display); font-weight: 700; font-size: 45px; line-height: 1; letter-spacing: -.5px; color: #fff; text-transform: uppercase; margin: 0; }
.tf-matchcard__head p { font-family: var(--tf-eyebrow); font-size: 18px; color: #fff; margin: 6px 0 0; }
.tf-matchcard__body { display: flex; flex-direction: column; gap: 16px; padding: 24px; position: relative; }

/* INGEKLAPT: toon ~3 rijen, wazig (geblurd). Klik op 'Bekijk alle wedstrijden'
   reveal't alles: blur weg + uitklappen naar alle wedstrijden. */
.tf-matchcard__body { transition: filter .35s ease; }
.tf-matches.is-collapsed .tf-matchcard__body {
  max-height: 430px;      /* ~3 rijen */
  overflow: hidden;
  filter: blur(6px);
  pointer-events: none;   /* wazige rijen niet klikbaar/selecteerbaar */
  user-select: none;
}
.tf-matches:not(.is-collapsed) .tf-matchcard__body { max-height: none; filter: none; }

/* losse wedstrijd-rij */
.tf-match { background: linear-gradient(to right, #f0fdf4, #fff); border-left: 4px solid var(--tf-blue); padding: 16px; text-align: left; }
.tf-match--alt { border-left-color: var(--tf-orange); background: linear-gradient(to right, #f3f4f6, #fff); }
.tf-match--win { border-left-color: #22c55e; }
.tf-match--loss { border-left-color: #ef4444; }
.tf-match__date { font-family: var(--tf-font); font-weight: 700; font-size: 14px; line-height: 20px; color: #4b5563; }
.tf-match__teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.tf-match__team { font-family: var(--tf-font); font-weight: 900; font-size: 18px; line-height: 28px; color: #000; }
.tf-match__vs { font-family: var(--tf-font); font-weight: 700; font-size: 16px; color: #767676; }
.tf-match__score { font-family: var(--tf-font); font-weight: 900; font-size: 24px; line-height: 32px; white-space: nowrap; }
.tf-match__score--win { color: #16a34a; }
.tf-match__score--loss { color: #dc2626; }
.tf-match__loc { font-family: var(--tf-font); font-weight: 700; font-size: 14px; line-height: 20px; color: #4b5563; margin-top: 8px; }
.tf-match__badge { display: inline-block; margin-top: 8px; font-family: var(--tf-font); font-weight: 900; font-size: 14px; line-height: 20px; color: #fff; padding: 4px 12px; }
.tf-match__badge--win { background: #16a34a; }
.tf-match__badge--loss { background: #dc2626; }
.tf-matches__btn { margin-top: 40px; }
@media (max-width: 800px) { .tf-matches__grid { grid-template-columns: 1fr; } .tf-matchcard__head h3 { font-size: 34px; } }

/* ==========================================================================
   Pupil van de week (Vereniging) — CPT pupil
   ========================================================================== */
.tf-pupil { background: var(--tf-blue); }
.tf-pupil__grid { display: grid; grid-template-columns: 584px 1fr; gap: 120px; align-items: center; }
.tf-pupil h2 { color: #fff; }
.tf-pupil__card { background: #fff; border-radius: 15px; padding: 44px 36px 36px; box-shadow: var(--tf-shadow-lg); }
.tf-pupil__week { font-family: var(--tf-font); font-weight: 700; font-size: 14px; line-height: 20px; color: #4b5563; }
.tf-pupil__name { font-family: var(--tf-display); font-weight: 700; font-size: 45px; line-height: 1; letter-spacing: -.5px; color: var(--tf-ink); margin: 4px 0; text-transform: none; }
.tf-pupil__team { font-family: var(--tf-font); font-weight: 700; font-size: 18px; line-height: 28px; color: var(--tf-blue); }
.tf-pupil__text { font-family: var(--tf-eyebrow); font-size: 18px; line-height: 24px; color: #374151; margin: 23px 0; }
.tf-pupil__congrats { background: #398dc3; border-radius: 15px; padding: 16px; text-align: center; font-family: var(--tf-display); font-weight: 700; font-size: 18px; text-transform: uppercase; color: #fff; }
.tf-pupil__info { backdrop-filter: blur(6px); background: rgba(255,255,255,.2); border-radius: 15px; padding: 24px 28px; margin-top: 23px; text-align: center; font-family: var(--tf-eyebrow); font-size: 18px; line-height: 24px; color: #fff; }
.tf-pupil__info a { color: #fff; text-decoration: underline; }
.tf-pupil__photowrap { position: relative; display: flex; justify-content: center; }
.tf-pupil__photo { background: #fff; padding: 16px; border-radius: 15px; box-shadow: var(--tf-shadow-lg); transform: rotate(4.15deg); max-width: 555px; }
.tf-pupil__photo img { width: 100%; aspect-ratio: 523/683; object-fit: cover; border-radius: 4px; display: block; }
.tf-pupil__badge { position: absolute; top: -20px; right: 0; transform: rotate(-13.58deg); background: #fff; border-radius: 15px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); width: 128px; height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tf-pupil__badge img { width: 42px; height: 42px; object-fit: contain; }
.tf-pupil__badge span { font-family: var(--tf-eyebrow); font-size: 14px; line-height: 18px; color: var(--tf-ink); text-align: center; }
@media (max-width: 900px) { .tf-pupil__grid { grid-template-columns: 1fr; gap: 60px; } .tf-pupil__photo { transform: none; } }

/* ==========================================================================
   Word vrijwilliger (Vereniging)
   ========================================================================== */
.tf-volunteer { background: #fff; text-align: center; }
.tf-volunteer h2 { color: var(--tf-blue); }
.tf-volunteer__sub { font-family: var(--tf-font); font-weight: 700; font-size: 24px; line-height: 32px; color: #374151; margin: 0 auto 48px; }
.tf-volunteer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 48px; }
.tf-vcard { background: #fff; border: 4px solid var(--tf-blue); border-radius: 15px; overflow: hidden; text-align: left; }
.tf-vcard__head { background: var(--tf-blue); color: #fff; padding: 22px 24px; }
.tf-vcard__icon { width: auto; height: 48px; max-width: 56px; object-fit: contain; margin-bottom: 12px; filter: brightness(0) invert(1); }
.tf-vcard__head h3 { font-family: var(--tf-display); font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: -.5px; color: #fff; text-transform: none; margin: 0; }
.tf-vcard__head p { font-family: var(--tf-eyebrow); font-size: 18px; color: #fff; margin: 6px 0 0; }
.tf-vcard__body { padding: 24px; }
.tf-vcard__list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; font-family: var(--tf-eyebrow); font-size: 18px; line-height: 24px; color: #374151; }
.tf-vcard__hours { background: var(--tf-blue); border-radius: 15px; padding: 8px 16px; text-align: center; font-family: var(--tf-font); font-weight: 900; font-size: 16px; line-height: 24px; color: #fff; }
.tf-volunteer__cta { background: linear-gradient(167deg, var(--tf-blue) 0%, var(--tf-blue-dark) 100%); border-radius: 15px; padding: 48px clamp(24px,8vw,160px); color: #fff; }
.tf-volunteer__cta h3 { font-family: var(--tf-display); font-weight: 700; font-size: 45px; line-height: 1; letter-spacing: -.5px; color: #fff; text-transform: uppercase; margin: 0 0 16px; }
.tf-volunteer__cta p { font-family: var(--tf-eyebrow); font-size: 18px; line-height: 24px; margin: 0 0 24px; }
.tf-volunteer__cta-btns { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 900px) { .tf-volunteer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Bedankt sponsoren — loop-carousel (CPT sponsor)
   ========================================================================== */
.tf-sponsors { background: var(--tf-blue); overflow: hidden; }
.tf-sponsors h2 { color: #fff; text-align: center; margin-bottom: 48px; }
.tf-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tf-marquee + .tf-marquee { margin-top: 24px; }
.tf-marquee__track { display: flex; gap: 24px; width: max-content; animation: tf-scroll 40s linear infinite; }
.tf-marquee--rev .tf-marquee__track { animation-direction: reverse; }
.tf-marquee:hover .tf-marquee__track { animation-play-state: paused; }
@keyframes tf-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tf-sponsor-card { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--tf-radius); min-width: 280px; height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 33px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.tf-sponsor-card__name { font-family: var(--tf-font); font-weight: 900; font-size: 20px; line-height: 28px; color: #1f2937; text-align: center; }
.tf-sponsor-card__type { font-family: var(--tf-font); font-weight: 700; font-size: 14px; line-height: 20px; color: #4b5563; text-align: center; }
@media (prefers-reduced-motion: reduce) { .tf-marquee__track { animation: none; } }

/* ==========================================================================
   Gedragscode (Vereniging)
   ========================================================================== */
.tf-conduct { background: #fff; }
.tf-conduct__head { text-align: center; margin-bottom: 48px; }
.tf-conduct__head h2 { color: var(--tf-blue); }
.tf-conduct__head p { font-family: var(--tf-eyebrow); font-size: 18px; color: #4b5563; margin: 0; }
.tf-conduct__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.tf-conduct__rules { display: grid; gap: 16px; }
.tf-rule { background: #f3f6fa; border-left: 4px solid var(--tf-blue); border-radius: var(--tf-radius); padding: 20px 24px; display: flex; gap: 16px; }
.tf-rule__icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px; background: var(--tf-blue); display: flex; align-items: center; justify-content: center; }
.tf-rule__icon svg { width: 26px; height: 26px; fill: #fff; }
.tf-rule h3 { font-family: var(--tf-font); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--tf-ink); text-transform: none; letter-spacing: 0; margin: 0 0 4px; }
.tf-rule p { font-family: var(--tf-eyebrow); font-size: 15px; line-height: 22px; color: #4b5563; margin: 0; }
.tf-conduct__side { display: grid; gap: 24px; }
.tf-conduct__pdf { background: var(--tf-blue); border-radius: 15px; padding: 32px; color: #fff; }
.tf-conduct__pdf-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.tf-conduct__pdf-head svg { width: 40px; height: 40px; fill: #fff; flex: 0 0 40px; }
.tf-conduct__pdf h3 { font-family: var(--tf-display); font-weight: 700; font-size: 32px; color: #fff; text-transform: uppercase; margin: 0; line-height: 1; }
.tf-conduct__pdf-head span { font-family: var(--tf-eyebrow); font-size: 15px; opacity: .9; }
.tf-conduct__pdf p { font-family: var(--tf-eyebrow); font-size: 16px; margin: 0 0 20px; opacity: .95; }
.tf-conduct__trust { background: #fff; border: 2px solid var(--tf-blue); border-radius: 15px; padding: 28px 32px; }
.tf-conduct__trust-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tf-conduct__trust-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--tf-orange); display: flex; align-items: center; justify-content: center; }
.tf-conduct__trust-icon svg { width: 24px; height: 24px; fill: #fff; }
.tf-conduct__trust h3 { font-family: var(--tf-display); font-weight: 700; font-size: 28px; color: var(--tf-ink); text-transform: none; margin: 0; }
.tf-conduct__trust > p { font-family: var(--tf-eyebrow); font-size: 15px; color: #4b5563; margin: 0 0 16px; }
.tf-person { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tf-person__info strong { display: block; font-family: var(--tf-font); font-weight: 700; font-size: 15px; color: var(--tf-ink); }
.tf-person__info a { font-family: var(--tf-eyebrow); font-size: 14px; color: var(--tf-blue); }
.tf-person img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; order: 2; margin-left: auto; }
.tf-conduct__bottom { margin-top: 48px; background: #3a5a72; border-radius: var(--tf-radius); padding: 22px; text-align: center; font-family: var(--tf-display); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .3px; color: #fff; }
@media (max-width: 900px) { .tf-conduct__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Nieuwsbrief (Vereniging) — Gravity Forms slot
   ========================================================================== */
.tf-newsletter { background: var(--tf-blue); }
.tf-newsletter__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.tf-newsletter h2 { color: #fff; }
.tf-newsletter__sub { font-family: var(--tf-eyebrow); font-size: 18px; color: #fff; margin: 0 0 32px; opacity: .95; }
.tf-newsletter__card { background: #fff; border-radius: 15px; padding: 40px; box-shadow: var(--tf-shadow-lg); text-align: left; }
.tf-social-follow { margin-top: 32px; text-align: center; color: #fff; }
.tf-social-follow p { font-family: var(--tf-font); font-weight: 700; font-size: 14px; margin: 0 0 12px; }
.tf-social-follow__icons { display: flex; gap: 12px; justify-content: center; }
.tf-social-follow__icons a { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tf-social-follow__icons a svg { width: 20px; height: 20px; fill: currentColor; }
.tf-social-follow__icons .ig { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.tf-social-follow__icons .fb { background: #1877f2; }
.tf-nf { display: grid; gap: 20px; }
.tf-nf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tf-nf label { display: block; font-family: var(--tf-font); font-weight: 700; font-size: 14px; color: var(--tf-ink); margin-bottom: 8px; }
.tf-nf input[type=text], .tf-nf input[type=email] { width: 100%; padding: 12px 14px; border: 1px solid var(--tf-gray-light); border-radius: 8px; font-family: var(--tf-font); font-size: 15px; }
.tf-nf__check { display: flex; gap: 10px; align-items: flex-start; font-family: var(--tf-eyebrow); font-size: 14px; color: #4b5563; }
.tf-nf__submit { background: var(--tf-orange); color: #fff; border: 0; border-radius: 15px; padding: 14px; font-family: var(--tf-display); font-weight: 700; font-size: 18px; text-transform: uppercase; cursor: pointer; }
.tf-nf__note { font-family: var(--tf-eyebrow); font-size: 14px; color: #6b7280; border-top: 1px solid #eee; padding-top: 16px; margin: 4px 0 0; }
@media (max-width: 600px) { .tf-nf__row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Evenementen-pagina — exacte Figma-kleuren + schuine deco-blokken
   ========================================================================== */
.tf-ev-wrap { position: relative; overflow: hidden; }

.tf-ev { position: relative; }
.tf-ev__title { font-size: clamp(2.2rem, 4.5vw, 3.75rem); margin-bottom: 32px; }   /* 60px */
.tf-ev__intro { max-width: 900px; font-size: 18px; color: var(--tf-gray); margin: 0 0 40px; }

/* secties met een schuine gekleurde container-achtergrond (Figma Rectangle 1314/1315).
   De achtergrond zit ALS pseudo-element BINNEN de sectie en vult de hele hoogte,
   met een schuine boven- en onderrand. Zo valt witte tekst nooit naast z'n achtergrond. */
/* full-bleed schuine band via clip-path (schuin boven + onder), overlapt buren */
.tf-ev--on-deco {
  position: relative; background: var(--tf-cerulean);
  padding-block: clamp(100px, 12vw, 150px);
  margin-block: clamp(-30px, -2.5vw, -16px);
  clip-path: polygon(0 48px, 100% 0, 100% calc(100% - 48px), 0 100%);
}
.tf-ev--on-deco > .tf-container { position: relative; z-index: 1; }
.tf-ev--on-deco .tf-ev__title, .tf-ev--on-deco .tf-ev__intro { color: #fff; }

/* laatste sectie (Kledinginzameling): donker, schuine BOVENrand, onderkant recht
   tegen de footer (geen schuine onderrand). */
.tf-ev--on-deco-dark {
  background: linear-gradient(115deg, var(--tf-deco-dark), var(--tf-cerulean));
  margin-bottom: 0; padding-bottom: clamp(80px, 9vw, 120px);
  clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%);
}

/* --- Grote Clubactie: 3 verschillend gekleurde stap-blokken --- */
.tf-ev-club__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.tf-ev-club__steps { display: grid; gap: 24px; }
.tf-ev-step { border-radius: 15px; padding: 28px 32px; box-shadow: var(--tf-shadow); }
.tf-ev-step h3 { margin: 0 0 12px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.tf-ev-step p { margin: 0 0 14px; font-size: 16px; line-height: 1.55; }
.tf-ev-step p:last-child { margin-bottom: 0; }
/* blok 1: licht, blauwe titel */
.tf-ev-step--pale { background: var(--tf-azure-pale); }
.tf-ev-step--pale h3 { color: var(--tf-cerulean); }
.tf-ev-step--pale p { color: var(--tf-ink); }
/* blok 2: blauw, witte tekst */
.tf-ev-step--blue { background: var(--tf-cerulean); }
.tf-ev-step--blue h3, .tf-ev-step--blue p { color: #fff; }
/* blok 3: oranje + blauwe linkerrand, witte tekst */
.tf-ev-step--orange { background: var(--tf-orange); border-left: 8px solid var(--tf-cerulean); }
.tf-ev-step--orange h3, .tf-ev-step--orange p { color: #fff; }
.tf-ev-step__btn {
  display: inline-block; margin-top: 16px; background: #fff; color: var(--tf-cerulean);
  border-radius: 12px; padding: 10px 18px; font-family: var(--tf-display); font-weight: 700;
  text-transform: uppercase; font-size: 15px;
}
.tf-ev-step__btn:hover { background: var(--tf-ink); color: #fff; }

.tf-ev-club__right { display: grid; gap: 24px; }
.tf-ev-club__banner { background: var(--tf-venice); color: #fff; border-radius: 15px; padding: 24px; box-shadow: var(--tf-shadow); text-align: center; }
.tf-ev-club__banner p { margin: 0; font-family: var(--tf-display); font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 1.35; }
/* certificaat-foto: niet tot de randen; overlapt met negatieve marge over de spelregels eronder */
.tf-ev-club__card { width: 86%; margin: 0 0 -56px auto; border-radius: 15px; overflow: hidden; box-shadow: var(--tf-shadow-lg); position: relative; z-index: 2; }
.tf-ev-club__card img { width: 100%; height: auto; }
/* spelregels: licht blok + blauwe linkerrand, zwarte titel; lopende alinea's (GEEN bullets) */
.tf-ev-club__rules { background: var(--tf-azure-pale); border-left: 8px solid var(--tf-cerulean); border-radius: 15px; padding: 72px 32px 32px; box-shadow: var(--tf-shadow); position: relative; z-index: 1; }
.tf-ev-club__rules h3 { margin: 0 0 16px; color: #000; }
/* bullets — Figma Varela Round 18px, regelafstand 24px */
.tf-ev-bullets { margin: 0; padding-left: 24px; display: grid; gap: 14px; list-style: disc; }
.tf-ev-bullets li { font-family: var(--tf-eyebrow); font-size: 16px; line-height: 1.5; color: var(--tf-ink); }
.tf-ev-bullets--light li { color: #fff; }   /* op gekleurde (oranje) container */

/* --- gedeelde Evenementen-kaart (icoon-kop + body) --- */
.tf-evcard { border-radius: 15px; padding: 24px 24px 24px 32px; box-shadow: var(--tf-shadow); }
.tf-evcard__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.tf-evcard__head h3 { margin: 0; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; }
.tf-evcard__head .tf-evcard__sub { font-family: var(--tf-font); font-weight: 700; font-size: 16px; margin: 4px 0 0; }
.tf-evcard__ico { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; }
.tf-evcard__ico svg { width: 38px; height: 38px; }
.tf-evcard__ico--pale { background: var(--tf-azure-pale); }
.tf-evcard__ico--pale svg { fill: var(--tf-cerulean); }
.tf-evcard__ico--blue { background: var(--tf-cerulean); color: #fff; font-family: var(--tf-display); font-weight: 700; font-size: 44px; line-height: 1; }
.tf-evcard__ico--blue svg { fill: #fff; }
.tf-evcard__ico--white { background: #fff; }
.tf-evcard__ico--white svg { fill: var(--tf-cerulean); }
.tf-evcard p { font-family: var(--tf-eyebrow); font-size: 17px; line-height: 1.45; margin: 0; }
.tf-evcard p + p { margin-top: 1em; }
/* kaartvarianten */
.tf-evcard--pale { background: var(--tf-azure-pale); }
.tf-evcard--pale h3 { color: var(--tf-ink); }
.tf-evcard--pale p { color: #374151; }
.tf-evcard--blue { background: var(--tf-cerulean); }
.tf-evcard--blue h3, .tf-evcard--blue p, .tf-evcard--blue .tf-evcard__sub { color: #fff; }
.tf-evcard--venice { background: var(--tf-venice); }
.tf-evcard--venice h3, .tf-evcard--venice p, .tf-evcard--venice .tf-evcard__sub { color: #fff; }
.tf-evcard--white { background: #fff; }
.tf-evcard--white h3 { color: var(--tf-ink); }
.tf-evcard--white p { color: #374151; }

/* knop met pijl (CONTACT →, AANMELDEN →, WEBSITE →) — oranje */
.tf-ev-btn {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 18px;
  background: var(--tf-orange); color: #fff; border-radius: 15px; padding: 15px 24px;
  font-family: var(--tf-display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .02em;
}
.tf-ev-btn span { transition: transform .15s ease; }
.tf-ev-btn:hover { background: var(--tf-orange-dark); color: #fff; }
.tf-ev-btn:hover span { transform: translateX(4px); }

/* --- Schoolhandbaltoernooi --- */
.tf-ev-school__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: start; }
.tf-ev-school__aside { display: grid; gap: 24px; }
.tf-ev-school__photo { margin: 0; border-radius: 15px; overflow: hidden; box-shadow: var(--tf-shadow-lg); aspect-ratio: 16/10; }
.tf-ev-school__photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- Familiedag --- */
.tf-ev-fam__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.tf-ev-fam__photo { grid-row: span 2; margin: 0; border-radius: 15px; overflow: hidden; box-shadow: var(--tf-shadow-lg); height: 100%; min-height: 320px; }
.tf-ev-fam__photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- Kledinginzamelingsactie: WITTE kaarten, Inter Black titels --- */
.tf-ev-kleding__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.tf-ev-kleding__col { display: grid; gap: 20px; }
.tf-ev-kleding__card .tf-evcard__head h3 { font-family: var(--tf-font); font-weight: 900; font-size: 20px; text-transform: uppercase; line-height: 1.4; }
.tf-ev-kleding__list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.tf-ev-kleding__list li { font-family: var(--tf-eyebrow); font-size: 17px; color: #374151; }
.tf-ev-kleding__note { background: var(--tf-venice); color: #fff; border-radius: 15px; padding: 24px; box-shadow: var(--tf-shadow); }
.tf-ev-kleding__note p { margin: 0; font-family: var(--tf-display); font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 1.3; text-align: center; }

/* --- Vierdaagse --- */
.tf-ev-vier__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tf-ev-vier__card { background: var(--tf-azure-pale); border-radius: 15px; padding: 40px; box-shadow: var(--tf-shadow); }
.tf-ev-vier__card .tf-ev__title { margin-bottom: 4px; color: #000; }
.tf-ev-vier__sub { font-family: var(--tf-font); font-weight: 700; font-size: 16px; color: var(--tf-ink); margin: 0 0 24px; }
.tf-ev-vier__card p { color: var(--tf-ink); font-family: var(--tf-eyebrow); font-size: 17px; line-height: 1.45; }
.tf-ev-vier__photo { margin: 0; border-radius: 15px; overflow: hidden; box-shadow: var(--tf-shadow-lg); aspect-ratio: 4/3; }
.tf-ev-vier__photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- Evenementen responsive --- */
@media (max-width: 960px) {
  .tf-ev-club__grid, .tf-ev-school__grid, .tf-ev-fam__grid, .tf-ev-kleding__grid, .tf-ev-vier__grid { grid-template-columns: 1fr; }
  .tf-ev-fam__photo { grid-row: auto; min-height: 260px; }
}

/* ==========================================================================
   Trainingstijden-pagina
   ========================================================================== */
.tf-tt { background: #fff; }
.tf-tt__title { text-align: center; font-size: clamp(2rem, 4vw, 3.375rem); margin: 0 0 20px; }
.tf-tt__intro { max-width: 760px; margin: 0 auto 16px; text-align: center; color: var(--tf-gray); font-size: 16px; }
.tf-tt__loc { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 48px; font-family: var(--tf-font); font-weight: 700; font-size: 16px; color: var(--tf-ink); }
.tf-tt__loc svg { width: 18px; height: 18px; fill: var(--tf-orange); }

.tf-tt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.tf-tt-card { background: #fff; border: 1px solid #b3e5fc; border-radius: var(--tf-radius-lg); overflow: hidden; box-shadow: var(--tf-shadow); }
.tf-tt-card__head { background: var(--tf-blue); color: #fff; padding: 22px 24px; }
.tf-tt-card__head h3 { color: #fff; margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; }
.tf-tt-card__sub { font-family: var(--tf-eyebrow); font-size: 18px; opacity: .9; margin: 4px 0 0; }
.tf-tt-card__body { padding: 18px 24px 8px; display: grid; gap: 8px; }
.tf-tt-card__row { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 16px; color: #666; line-height: 1.4; }
.tf-tt-card__row strong { color: #222; font-weight: 700; }
.tf-tt-card__row .tf-tt-card__ico { flex: 0 0 18px; width: 18px; height: 20px; fill: var(--tf-ink); margin-top: 1px; }
.tf-tt-card__row--sm { font-size: 14px; }
.tf-tt-card__row--sm .tf-tt-card__ico { width: 15px; height: 16px; flex-basis: 15px; }
.tf-tt-card__foot { border-top: 1px solid #b3e5fc; padding: 16px 24px 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tf-tt-card__people { display: grid; gap: 6px; }
.tf-tt-card__loc { align-self: flex-start; }
.tf-tt-card__loc strong { color: #222; }

@media (max-width: 820px) {
  .tf-tt__grid { grid-template-columns: 1fr; }
  .tf-tt-card__foot { flex-direction: column; }
}

/* ==========================================================================
   Beker van Kees — zigzag-tijdlijn (CPT beker_van_kees)
   ========================================================================== */
.tf-bvk { background: #fff; }
.tf-bvk__panel { background: var(--tf-azure-pale); border-radius: var(--tf-radius-lg); padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 64px) clamp(40px, 6vw, 80px); position: relative; }

/* intro met trofee-bolletje gecentreerd bovenaan */
.tf-bvk__intro { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.tf-bvk__trofee { width: 80px; height: 80px; border-radius: 50%; background: var(--tf-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 28px; box-shadow: var(--tf-shadow); }
.tf-bvk__trofee svg { width: 42px; height: 42px; fill: #fff; }
.tf-bvk__intro p { font-family: var(--tf-eyebrow); font-size: 18px; line-height: 1.6; color: var(--tf-gray); margin: 0; }

/* tijdlijn met verticale middenlijn */
.tf-bvk__timeline { position: relative; }
.tf-bvk__timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; transform: translateX(-50%); background: linear-gradient(var(--tf-cerulean), var(--tf-venice)); border-radius: 2px; }

.tf-bvk-item { position: relative; width: 50%; box-sizing: border-box; margin-bottom: 24px; }
.tf-bvk-item--left  { left: 0; padding-right: 64px; }
.tf-bvk-item--right { left: 50%; padding-left: 64px; }

/* witte kaart, gekleurde rand aan de lijn-kant */
.tf-bvk-card { background: #fff; border-radius: 16px; padding: 32px; box-shadow: var(--tf-shadow); position: relative; }
.tf-bvk-item--left  .tf-bvk-card { border-right: 4px solid var(--tf-cerulean); text-align: right; }
.tf-bvk-item--right .tf-bvk-card { border-left: 4px solid var(--tf-cerulean); text-align: left; }

/* jaar-badge: pill, gradient blauw, aan de lijn-kant */
.tf-bvk-card__year { display: inline-block; background: linear-gradient(90deg, var(--tf-cerulean), var(--tf-venice)); color: #fff; font-family: var(--tf-font); font-weight: 700; font-size: 14px; padding: 8px 18px; border-radius: 9999px; box-shadow: var(--tf-shadow); margin-bottom: 16px; }
.tf-bvk-card__name { font-family: var(--tf-font); font-weight: 700; font-size: 24px; line-height: 1.3; color: #222; text-transform: none; letter-spacing: 0; margin: 0 0 12px; }
.tf-bvk-card__text { font-family: var(--tf-font); font-size: 16px; line-height: 1.6; color: #666; margin: 0; }

/* connector-dot op de middenlijn */
.tf-bvk-item__dot { position: absolute; top: 64px; width: 48px; height: 48px; border-radius: 50%; background: var(--tf-cerulean); display: flex; align-items: center; justify-content: center; box-shadow: var(--tf-shadow); z-index: 2; }
.tf-bvk-item__dot svg { width: 22px; height: 22px; fill: #fff; }
.tf-bvk-item--left  .tf-bvk-item__dot { right: -24px; }
.tf-bvk-item--right .tf-bvk-item__dot { left: -24px; }

@media (max-width: 820px) {
  .tf-bvk__timeline::before { left: 20px; }
  .tf-bvk-item, .tf-bvk-item--left, .tf-bvk-item--right { width: 100%; left: 0; padding-left: 56px; padding-right: 0; }
  .tf-bvk-item--left .tf-bvk-card, .tf-bvk-item--right .tf-bvk-card { text-align: left; border-right: 0; border-left: 4px solid var(--tf-cerulean); }
  .tf-bvk-item--left .tf-bvk-item__dot, .tf-bvk-item--right .tf-bvk-item__dot { left: -4px; right: auto; }
}

/* ==========================================================================
   Sponsoren-pagina
   ========================================================================== */
/* Sectie 1: Onze sponsoren — blauwe band met schuine boven- en onderrand */
/* Schuine blauwe band die de aangrenzende (witte) secties OVERLAPT:
   het geskewde vlak steekt boven + onder uit de sectie, dus de diagonale
   punten lopen door in de buren — dat is het design-element. */
/* Full-bleed schuine band via clip-path — loopt van rand tot rand, geen afsnijding.
   De diagonale boven- en onderrand lopen door tot beide schermranden. */
.tf-sponsors--band {
  position: relative; background: var(--tf-cerulean);
  padding-block: clamp(100px, 12vw, 160px);
  margin-top: clamp(-70px, -5vw, -40px);   /* trek de band OMHOOG over de hero */
  margin-bottom: 0;                        /* onder netjes aansluiten, geen hap */
  clip-path: polygon(0 48px, 100% 0, 100% calc(100% - 48px), 0 100%);
}
.tf-sponsors--band > .tf-container { position: relative; z-index: 1; }
.tf-sponsors__title { text-align: center; color: #fff; font-size: clamp(2.2rem, 4.5vw, 3.375rem); margin: 0 0 48px; }
.tf-sponsors__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tf-sponsor-logo { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--tf-radius); min-height: 143px; display: flex; align-items: center; justify-content: center; padding: 32px; box-shadow: var(--tf-shadow); }
.tf-sponsor-logo img { max-width: 100%; max-height: 80px; width: auto; object-fit: contain; }
.tf-sponsor-logo__name { font-family: var(--tf-display); font-weight: 700; font-size: 22px; color: var(--tf-cerulean); text-transform: uppercase; text-align: center; line-height: 1.1; }

/* Sectie 2: Word ook sponsor — prijslijst-kaarten */
.tf-become { background: #fff; position: relative; }
.tf-become__title { text-align: center; font-size: clamp(2.2rem, 4.5vw, 3.375rem); margin: 0 0 48px; }
.tf-become__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.tf-become-card { background: var(--tf-azure-pale); border-left: 8px solid var(--tf-cerulean); border-radius: 15px; padding: 24px 24px 24px 20px; display: flex; gap: 16px; box-shadow: var(--tf-shadow); }
.tf-become-card__ico { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 15px; background: var(--tf-cerulean); display: inline-flex; align-items: center; justify-content: center; }
.tf-become-card__ico svg { width: 36px; height: 36px; fill: #fff; }
.tf-become-card__body h3 { font-family: var(--tf-font); font-weight: 900; font-size: 20px; line-height: 1.4; color: var(--tf-ink); text-transform: none; letter-spacing: 0; margin: 0 0 8px; }
.tf-become-card__body p { font-family: var(--tf-eyebrow); font-size: 17px; line-height: 1.45; color: #374151; margin: 0; }
.tf-become__shirt { margin-top: 32px; max-width: 495px; }
.tf-become__shirt img { width: 100%; height: auto; border-radius: var(--tf-radius); }

@media (max-width: 960px) { .tf-sponsors__grid { grid-template-columns: repeat(2, 1fr); } .tf-become__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .tf-sponsors__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Nieuws archief — blauwe band + 3-koloms kaarten-grid (WP posts)
   ========================================================================== */
.tf-news { background: var(--tf-cerulean); }
.tf-news__intro { max-width: 760px; margin: 0 auto 48px; text-align: center; color: #fff; font-family: var(--tf-eyebrow); font-size: 18px; line-height: 1.6; }
.tf-news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tf-news-card { background: #fff; border-left: 4px solid var(--tf-cerulean); border-radius: 8px; padding: 22px 24px; box-shadow: var(--tf-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.tf-news-card:hover { transform: translateY(-3px); box-shadow: var(--tf-shadow-lg); }
.tf-news-card__title { font-family: var(--tf-font); font-weight: 700; font-size: 16px; line-height: 1.4; color: #222; text-transform: none; letter-spacing: 0; margin: 0 0 6px; }
.tf-news-card__date { font-family: var(--tf-font); font-size: 14px; color: #666; margin: 0 0 10px; }
.tf-news-card__link { font-family: var(--tf-font); font-weight: 700; font-size: 14px; color: var(--tf-cerulean); }
.tf-news-card__link:hover { color: var(--tf-venice); text-decoration: underline; }
@media (max-width: 900px) { .tf-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tf-news__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Over ons-pagina
   ========================================================================== */
/* --- Verenigingsinfo --- */
.tf-about { background: #fff; }
.tf-about__eyebrow { font-family: var(--tf-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.75rem); color: var(--tf-ink); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 16px; line-height: 1; }
.tf-about__title { font-family: var(--tf-font); font-weight: 700; font-size: clamp(2rem, 3.5vw, 3rem); color: #000; text-transform: none; letter-spacing: 0; margin: 0 0 8px; }
.tf-about__sub { font-size: 18px; color: var(--tf-gray); margin: 0 0 40px; max-width: 768px; }
.tf-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tf-about__photo { margin: 0; border-radius: 15px; overflow: hidden; box-shadow: var(--tf-shadow-lg); aspect-ratio: 3/2; }
.tf-about__photo img { width: 100%; height: 100%; object-fit: cover; }
.tf-about__text p { font-size: 16px; line-height: 1.6; color: var(--tf-ink); margin: 0 0 16px; }
.tf-about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.tf-stat { background: var(--tf-cerulean); border-radius: 8px; padding: 16px; text-align: center; }
.tf-stat__num { display: block; font-family: var(--tf-display); font-weight: 700; font-size: 36px; line-height: 1; color: var(--tf-orange); }
.tf-stat__label { display: block; font-size: 14px; color: #fff; margin-top: 4px; }

/* --- Geschiedenis (tijdlijn) --- */
.tf-history { background: #fff; }
.tf-history__title { font-family: var(--tf-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.75rem); color: var(--tf-ink); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 40px; }
.tf-history__grid { display: grid; grid-template-columns: 1fr 507px; gap: 48px; align-items: start; }
.tf-history__timeline { position: relative; border-left: 2px solid var(--tf-orange); padding-left: 28px; display: grid; gap: 24px; }
.tf-hist { position: relative; }
.tf-hist__dot { position: absolute; left: -37px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--tf-orange); box-shadow: 0 0 0 4px #fff; }
.tf-hist__card { background: #06649e; border-radius: 15px; padding: 32px; }
.tf-hist__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; text-transform: none; letter-spacing: 0; }
.tf-hist__year { font-family: var(--tf-font); font-weight: 700; font-size: 30px; color: var(--tf-orange); line-height: 1; }
.tf-hist__sep { color: #fff; opacity: .8; }
.tf-hist__name { font-family: var(--tf-font); font-weight: 700; font-size: 16px; color: #fff; }
.tf-hist__card > p { font-family: var(--tf-eyebrow); font-size: 18px; line-height: 1.45; color: #fff; margin: 0 0 14px; }
.tf-hist__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tf-hist__badges span { background: #055a8c; color: #fff; font-size: 14px; padding: 5px 14px; border-radius: 9999px; }
.tf-hist__note { background: #055a8c; border-radius: 10px; padding: 16px 20px; margin-top: 16px; }
.tf-hist__note strong { display: block; color: #fff; font-size: 16px; margin-bottom: 6px; }
.tf-hist__note p { font-family: var(--tf-eyebrow); font-size: 15px; color: #fff; margin: 0; line-height: 1.4; }
.tf-history__photos { display: grid; gap: 24px; }
.tf-history__photos figure { margin: 0; border-radius: 15px; overflow: hidden; box-shadow: var(--tf-shadow-lg); aspect-ratio: 507/551; }
.tf-history__photos img { width: 100%; height: 100%; object-fit: cover; }

/* --- Foto's (FB-galerij embed) --- */
.tf-about-fotos { background: #fff; }
.tf-about-fotos__title { font-family: var(--tf-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.75rem); color: var(--tf-ink); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 32px; }
.tf-about-fotos__feed { border-radius: 15px; overflow: hidden; box-shadow: var(--tf-shadow-lg); }
.tf-about-fotos__feed img { width: 100%; height: auto; display: block; }

@media (max-width: 960px) {
  .tf-about__grid { grid-template-columns: 1fr; }
  .tf-history__grid { grid-template-columns: 1fr; }
  .tf-about__stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) { .tf-about__stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   The Flyers in de media — blauw paneel + media-galerij-grid (CPT media_item)
   ========================================================================== */
.tf-media { background: #fff; }
.tf-media__intro { max-width: 760px; margin: 0 auto 40px; text-align: center; color: var(--tf-gray); font-size: 18px; line-height: 1.5; }
.tf-media__panel { background: var(--tf-cerulean); border-radius: var(--tf-radius-lg); padding: clamp(24px, 4vw, 48px); }
.tf-media__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tf-media-item { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--tf-shadow); background: #021f33; }
.tf-media-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.tf-media-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,31,51,0) 40%, rgba(2,31,51,.55)); opacity: .9; transition: opacity .2s ease; }
.tf-media-item__overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.tf-media-item__overlay svg { width: 30px; height: 30px; fill: #fff; }
a.tf-media-item { cursor: pointer; }
a.tf-media-item:hover img { transform: scale(1.06); }
a.tf-media-item:hover .tf-media-item__overlay { opacity: 1; }
a.tf-media-item:hover::after { opacity: 1; }
@media (max-width: 1000px) { .tf-media__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .tf-media__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .tf-media__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Contributie-pagina
   ========================================================================== */
.tf-contrib { background: #fff; }
.tf-contrib__title { text-align: center; font-size: clamp(2rem, 4vw, 3.375rem); margin: 0 0 16px; }
.tf-contrib__intro { max-width: 720px; margin: 0 auto 48px; text-align: center; color: var(--tf-gray); font-size: 18px; }
.tf-contrib__info { border-left: 4px solid var(--tf-cerulean); padding: 0 0 0 24px; margin: 0 0 40px; }
.tf-contrib__info h3 { font-family: var(--tf-display); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--tf-ink); margin: 0 0 16px; }
.tf-contrib__info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tf-contrib__info li { font-family: var(--tf-eyebrow); font-size: 18px; color: #666; }
.tf-contrib__info li strong { color: #222; }
.tf-contrib__card { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--tf-radius-lg); box-shadow: var(--tf-shadow); overflow: hidden; margin-bottom: 32px; }
.tf-contrib__card-head { background: var(--tf-cerulean); padding: 22px 32px; text-align: center; }
.tf-contrib__card-head h3 { color: #fff; font-family: var(--tf-font); font-weight: 700; font-size: 26px; text-transform: none; margin: 0; }
.tf-contrib__table-wrap { padding: 32px; overflow-x: auto; }
.tf-contrib-table { width: 100%; border-collapse: collapse; }
.tf-contrib-table th { text-align: left; font-family: var(--tf-font); font-weight: 700; font-size: 14px; color: #222; padding: 0 16px 16px; border-bottom: 2px solid #e5e7eb; }
.tf-contrib-table th:nth-child(3), .tf-contrib-table th:nth-child(4) { text-align: right; }
.tf-contrib-table td { padding: 18px 16px; border-bottom: 1px solid #eef1f4; font-family: var(--tf-font); font-size: 15px; color: #555; }
.tf-contrib-table tr:last-child td { border-bottom: 0; }
.tf-contrib-table__cat { font-family: var(--tf-display) !important; font-weight: 700; font-size: 22px !important; color: #222 !important; text-transform: uppercase; }
.tf-contrib-table__price { text-align: right; font-weight: 700; color: var(--tf-cerulean) !important; font-size: 18px !important; }
.tf-contrib-table__alt { text-align: right; color: #888 !important; }
.tf-contrib__card-pad { padding: 32px; }
.tf-contrib__sub { font-family: var(--tf-display); font-weight: 700; font-size: 28px; text-transform: uppercase; color: var(--tf-ink); margin: 0 0 12px; }
.tf-contrib__lead { font-family: var(--tf-eyebrow); font-size: 16px; color: #555; margin: 0 0 24px; }
.tf-contrib__split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tf-contrib__box { background: var(--tf-azure-pale); border: 1px solid #d6e6f3; border-radius: 10px; padding: 22px 24px; }
.tf-contrib__box h4 { font-family: var(--tf-font); font-weight: 700; font-size: 18px; color: var(--tf-ink); margin: 0 0 8px; }
.tf-contrib__box p { font-family: var(--tf-eyebrow); font-size: 15px; color: #555; margin: 0; line-height: 1.45; }
.tf-contrib__note { border-left: 3px solid var(--tf-cerulean); padding-left: 16px; margin: 24px 0 0; font-family: var(--tf-eyebrow); font-size: 14px; color: #777; }
@media (max-width: 700px) { .tf-contrib__split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Bestuur en commissies-pagina
   ========================================================================== */
.tf-board { background: #fff; }
.tf-board__intro { max-width: 720px; margin: 0 auto 40px; text-align: center; color: var(--tf-gray); font-size: 18px; }
.tf-board__structure { max-width: 1040px; margin: 0 auto 40px; background: #fff; border: 1px solid #e5e7eb; border-radius: var(--tf-radius-lg); box-shadow: var(--tf-shadow); overflow: hidden; }
.tf-board__structure-head { background: var(--tf-cerulean); padding: 24px 32px; }
.tf-board__structure-head h3 { color: #fff; font-family: var(--tf-display); font-weight: 700; font-size: 28px; text-transform: uppercase; margin: 0; }
.tf-board__structure-body { padding: 28px 32px; }
.tf-board__structure-body p { font-size: 16px; line-height: 1.6; color: #444; margin: 0 0 16px; }
.tf-board__nhv { display: flex; align-items: center; gap: 12px; background: var(--tf-azure-pale); border-radius: 10px; padding: 16px 18px; margin: 8px 0 0 !important; }
.tf-board__nhv-ico { flex: 0 0 28px; }
.tf-board__nhv-ico svg { width: 26px; height: 26px; fill: var(--tf-cerulean); }
.tf-board__nhv a { font-weight: 700; }

.tf-board__grid { max-width: 1040px; margin: 0 auto 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tf-board-card { border-radius: var(--tf-radius-lg); padding: 28px; box-shadow: var(--tf-shadow); }
.tf-board-card--blue { background: var(--tf-cerulean); }
.tf-board-card--orange { background: var(--tf-orange); }
.tf-board-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.tf-board-card__ico { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 15px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; }
.tf-board-card__ico svg { width: 32px; height: 32px; fill: #fff; }
.tf-board-card__head h3 { color: #fff; font-family: var(--tf-display); font-weight: 700; font-size: 28px; text-transform: uppercase; margin: 0; }
.tf-board-card p { color: #fff; font-family: var(--tf-eyebrow); font-size: 16px; line-height: 1.5; margin: 0; opacity: .97; }

.tf-board__contacts { max-width: 1040px; margin: 0 auto; background: #fff; border: 1px solid #e5e7eb; border-radius: var(--tf-radius-lg); box-shadow: var(--tf-shadow); overflow: hidden; }
.tf-board__contacts-head { background: var(--tf-cerulean); padding: 24px 32px; }
.tf-board__contacts-head h3 { color: #fff; font-family: var(--tf-display); font-weight: 700; font-size: 28px; text-transform: uppercase; margin: 0; }
.tf-board__table-wrap { padding: 16px 32px 24px; overflow-x: auto; }
.tf-board-table { width: 100%; border-collapse: collapse; }
.tf-board-table th { text-align: left; font-family: var(--tf-font); font-weight: 700; font-size: 14px; color: #222; padding: 16px 12px; border-bottom: 2px solid #e5e7eb; }
.tf-board-table td { padding: 16px 12px; border-bottom: 1px solid #eef1f4; font-family: var(--tf-font); font-size: 15px; color: #555; }
.tf-board-table tr:last-child td { border-bottom: 0; }
.tf-board-table__name { font-weight: 700; color: #222 !important; }
.tf-board-table a { color: var(--tf-cerulean); }
.tf-board-table a:hover { text-decoration: underline; }
@media (max-width: 820px) { .tf-board__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Herbruikbaar formulier (Contact, Lid worden, Afmelden) — GF-fallback
   ========================================================================== */
.tf-form { display: grid; gap: 18px; }
.tf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tf-form label { display: block; font-family: var(--tf-font); font-weight: 700; font-size: 15px; color: var(--tf-ink); margin-bottom: 8px; }
.tf-form input[type=text], .tf-form input[type=email], .tf-form input[type=tel], .tf-form input[type=date], .tf-form input[type=number], .tf-form select, .tf-form textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--tf-gray-light); border-radius: 10px;
  font-family: var(--tf-font); font-size: 15px; color: var(--tf-ink); background: #fff;
}
.tf-form input:focus, .tf-form select:focus, .tf-form textarea:focus { outline: none; border-color: var(--tf-cerulean); box-shadow: 0 0 0 3px rgba(7,113,180,.12); }
.tf-form textarea { resize: vertical; min-height: 140px; }
.tf-form__check { display: flex; align-items: flex-start; gap: 10px; font-family: var(--tf-eyebrow); font-weight: 400; font-size: 14px; color: #4b5563; margin: 0; }
.tf-form__check input { margin-top: 3px; flex: 0 0 auto; }
.tf-form__submit { background: var(--tf-orange); color: #fff; border: 0; border-radius: 12px; padding: 15px; font-family: var(--tf-display); font-weight: 700; font-size: 18px; text-transform: uppercase; cursor: pointer; transition: background .15s ease; }
.tf-form__submit:hover { background: var(--tf-orange-dark); }
.tf-form__note { font-family: var(--tf-eyebrow); font-size: 14px; color: #6b7280; border-top: 1px solid #eee; padding-top: 16px; margin: 4px 0 0; }
@media (max-width: 600px) { .tf-form__row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Contact-pagina
   ========================================================================== */
/* blauwe band met schuin blok — overlapt de witte sectie eronder */
/* full-bleed band, schuine ONDERrand (sluit recht aan op hero erboven) */
.tf-contact-top { position: relative; background: var(--tf-cerulean); padding-block: clamp(80px, 10vw, 130px); margin-bottom: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); }
.tf-contact-top > .tf-container { position: relative; z-index: 1; }
.tf-contact-top > .tf-container { position: relative; z-index: 1; }
.tf-contact-top__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.tf-contact-why__title { color: #fff; font-size: clamp(2rem, 3.5vw, 3rem); margin: 0 0 16px; }
.tf-contact-why__lead { color: #fff; opacity: .95; font-size: 16px; line-height: 1.6; margin: 0 0 28px; max-width: 460px; }
.tf-contact-feature { display: flex; gap: 16px; background: rgba(255,255,255,.10); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.tf-contact-feature__ico { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background: var(--tf-orange); display: inline-flex; align-items: center; justify-content: center; }
.tf-contact-feature__ico svg { width: 26px; height: 26px; fill: #fff; }
.tf-contact-feature h3 { color: #fff; font-family: var(--tf-display); font-weight: 700; font-size: 22px; text-transform: uppercase; margin: 0 0 4px; }
.tf-contact-feature p { color: #fff; opacity: .9; font-family: var(--tf-eyebrow); font-size: 15px; margin: 0; line-height: 1.4; }
.tf-contact-form__title { color: #fff; font-size: clamp(2rem, 3.5vw, 3rem); margin: 0 0 8px; }
.tf-contact-form__intro { color: #fff; opacity: .95; font-family: var(--tf-eyebrow); font-size: 15px; margin: 0 0 20px; }
.tf-contact-form__intro a { color: #fff; text-decoration: underline; }
.tf-contact-form__card { background: #fff; border-radius: var(--tf-radius-lg); padding: 40px; box-shadow: var(--tf-shadow-lg); }

/* contact-kaarten */
.tf-contact-cards { background: #fff; }
.tf-contact-cards__lead { text-align: center; max-width: 760px; margin: 0 auto 40px; color: var(--tf-gray); font-size: 18px; }
.tf-contact-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tf-contact-card { border: 1px solid #e5e7eb; border-radius: var(--tf-radius-lg); padding: 32px; text-align: center; box-shadow: var(--tf-shadow); }
.tf-contact-card__ico { width: 56px; height: 56px; border-radius: 14px; background: var(--tf-azure-pale); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tf-contact-card__ico svg { width: 28px; height: 28px; fill: var(--tf-cerulean); }
.tf-contact-card h3 { font-family: var(--tf-display); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--tf-ink); margin: 0 0 8px; }
.tf-contact-card p { font-family: var(--tf-eyebrow); font-size: 15px; color: #555; margin: 0; line-height: 1.5; }
.tf-contact-card a { color: var(--tf-cerulean); }

/* locatie */
.tf-contact-loc { background: #fff; }
.tf-contact-loc__title { text-align: center; font-size: clamp(2rem, 4vw, 3.375rem); margin: 0 0 8px; }
.tf-contact-loc__sub { text-align: center; color: var(--tf-gray); font-size: 16px; margin: 0 0 32px; }
.tf-contact-loc__map { border-radius: var(--tf-radius-lg); overflow: hidden; box-shadow: var(--tf-shadow-lg); margin-bottom: 32px; }
.tf-contact-loc__map iframe { width: 100%; height: 500px; border: 0; display: block; }
.tf-contact-loc__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tf-travel { border: 1px solid #e5e7eb; border-radius: var(--tf-radius-lg); padding: 28px; text-align: center; box-shadow: var(--tf-shadow); }
.tf-travel__ico { width: 56px; height: 56px; border-radius: 14px; background: var(--tf-azure-pale); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.tf-travel__ico svg { width: 30px; height: 30px; fill: var(--tf-cerulean); }
.tf-travel h3 { font-family: var(--tf-display); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--tf-ink); margin: 0 0 8px; }
.tf-travel p { font-family: var(--tf-eyebrow); font-size: 15px; color: #555; margin: 0; line-height: 1.4; }

@media (max-width: 900px) {
  .tf-contact-top__grid { grid-template-columns: 1fr; }
  .tf-contact-cards__grid, .tf-contact-loc__info { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Lid worden-pagina
   ========================================================================== */
.tf-join { background: #fff; }
.tf-join__title { text-align: center; font-size: clamp(2rem, 4vw, 3.375rem); margin: 0 0 16px; }
.tf-join__intro { max-width: 760px; margin: 0 auto 40px; text-align: center; color: var(--tf-gray); font-size: 18px; }
.tf-join__card { max-width: 1040px; margin: 0 auto; background: #fff; border: 1px solid #e5e7eb; border-radius: var(--tf-radius-lg); box-shadow: var(--tf-shadow); padding: clamp(28px, 4vw, 48px); }
.tf-join-block { margin-bottom: 32px; }
.tf-join-block:last-child { margin-bottom: 0; }
.tf-join-block__head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.tf-join-block__ico { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; background: var(--tf-cerulean); display: inline-flex; align-items: center; justify-content: center; }
.tf-join-block__ico svg { width: 30px; height: 30px; fill: #fff; }
.tf-join-block__head h3 { font-family: var(--tf-display); font-weight: 700; font-size: 28px; text-transform: uppercase; color: var(--tf-ink); margin: 0; }
.tf-join-block > p { font-size: 16px; line-height: 1.6; color: #444; margin: 0 0 16px; }
.tf-join-block__note { background: var(--tf-azure-pale); border-radius: 10px; padding: 14px 18px; font-family: var(--tf-eyebrow); font-size: 15px; color: #555; margin: 0 0 12px !important; }
.tf-join-block__note a { font-weight: 700; }
.tf-join-info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 20px; }
.tf-join-info__box { background: var(--tf-azure-pale); border: 1px solid #d6e6f3; border-radius: 12px; padding: 24px; }
.tf-join-info__box--wide { margin-bottom: 20px; }
.tf-join-info__box h4 { font-family: var(--tf-display); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--tf-cerulean); margin: 0 0 12px; }
.tf-join-info__box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tf-join-info__box li { position: relative; padding-left: 22px; font-family: var(--tf-eyebrow); font-size: 15px; color: #444; }
.tf-join-info__box li::before { content: "✓"; position: absolute; left: 0; color: var(--tf-cerulean); font-weight: 700; }
.tf-join-info__cols { grid-template-columns: 1fr 1fr; }

/* formulier op blauwe band */
.tf-join-form { background: var(--tf-cerulean); }
.tf-join-form__title { text-align: center; color: #fff; font-size: clamp(2rem, 4vw, 3.375rem); margin: 0 0 16px; }
.tf-join-form__intro { max-width: 760px; margin: 0 auto 40px; text-align: center; color: #fff; opacity: .95; font-family: var(--tf-eyebrow); font-size: 16px; line-height: 1.5; }
.tf-join-form__card { max-width: 1040px; margin: 0 auto; background: #fff; border-radius: var(--tf-radius-lg); box-shadow: var(--tf-shadow-lg); padding: clamp(28px, 4vw, 48px); }
.tf-form__radio { display: flex; gap: 24px; margin-top: 4px; }
@media (max-width: 700px) { .tf-join-info, .tf-join-info__cols { grid-template-columns: 1fr; } }

/* ==========================================================================
   Prose (tekstpagina's: Jouw speeltijd, Informatie voor leden body)
   ========================================================================== */
.tf-prose { max-width: 880px; }
.tf-prose p { font-size: 17px; line-height: 1.7; color: #374151; margin: 0 0 18px; }
.tf-prose ul { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 14px; }
.tf-prose li { font-size: 17px; line-height: 1.6; color: #374151; }
.tf-prose h2, .tf-prose h3 { color: var(--tf-ink); margin: 28px 0 12px; }

/* ==========================================================================
   Webshop (externe redirect)
   ========================================================================== */
.tf-webshop { background: #fff; }
.tf-webshop__inner { text-align: center; padding: clamp(40px, 8vw, 100px) 0; }
.tf-webshop__title { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 16px; }
.tf-webshop__sub { color: var(--tf-gray); font-size: 18px; margin: 0 0 28px; }

/* ==========================================================================
   Afmelden (formulier op blauwe band)
   ========================================================================== */
.tf-afmelden { background: var(--tf-cerulean); }
.tf-afmelden__intro { max-width: 760px; margin: 0 auto 40px; text-align: center; color: #fff; opacity: .95; font-family: var(--tf-eyebrow); font-size: 16px; line-height: 1.5; }
.tf-afmelden__card { max-width: 900px; margin: 0 auto; background: #fff; border-radius: var(--tf-radius-lg); box-shadow: var(--tf-shadow-lg); padding: clamp(28px, 4vw, 48px); }

/* ==========================================================================
   Informatie voor leden (link-grid)
   ========================================================================== */
.tf-infoleden { background: #fff; }
.tf-infoleden__intro { max-width: 760px; margin: 0 auto 40px; text-align: center; color: var(--tf-gray); font-size: 18px; }
.tf-infoleden__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tf-info-card { display: block; border: 1px solid #e5e7eb; border-radius: var(--tf-radius-lg); padding: 28px; box-shadow: var(--tf-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.tf-info-card:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-lg); }
.tf-info-card__ico { width: 56px; height: 56px; border-radius: 14px; background: var(--tf-cerulean); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tf-info-card__ico svg { width: 28px; height: 28px; fill: #fff; }
.tf-info-card h3 { font-family: var(--tf-display); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--tf-ink); margin: 0 0 8px; line-height: 1.05; }
.tf-info-card p { font-family: var(--tf-eyebrow); font-size: 15px; color: #555; margin: 0; line-height: 1.45; }
.tf-infoleden__foot { margin-top: 40px; background: var(--tf-azure-pale); border-radius: var(--tf-radius); padding: 18px; text-align: center; font-family: var(--tf-eyebrow); font-size: 15px; color: #555; }
.tf-infoleden__foot a { font-weight: 700; }
@media (max-width: 900px) { .tf-infoleden__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tf-infoleden__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Zaal & tafeldiensten (rooster-tabel, CSV-import)
   ========================================================================== */
.tf-duties { background: #fff; }
.tf-duties__intro { max-width: 900px; margin: 0 auto 16px; text-align: center; }
.tf-duties__intro h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 12px; }
.tf-duties__intro p { color: var(--tf-gray); font-size: 16px; line-height: 1.55; margin: 0 0 8px; }
.tf-duties__panel { background: var(--tf-cerulean); border-radius: var(--tf-radius-lg); padding: clamp(20px, 3vw, 36px); margin-top: 32px; box-shadow: var(--tf-shadow-lg); }
.tf-duties__panel-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tf-duties__panel-head h3 { color: #fff; font-family: var(--tf-font); font-weight: 700; font-size: 22px; text-transform: none; margin: 0; }
.tf-duties__table-wrap { background: #fff; border-radius: var(--tf-radius); overflow: auto; max-height: 640px; }
.tf-duties-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.tf-duties-table thead th { position: sticky; top: 0; background: #eef4fb; text-align: left; font-family: var(--tf-font); font-weight: 700; font-size: 13px; color: #222; padding: 14px 16px; border-bottom: 2px solid #d6e6f3; white-space: nowrap; }
.tf-duties-table td { padding: 12px 16px; border-bottom: 1px solid #eef1f4; font-family: var(--tf-font); font-size: 14px; color: #555; white-space: nowrap; }
.tf-duties-table tr:nth-child(even) td { background: #fafcfe; }
.tf-duties__note { font-family: var(--tf-eyebrow); font-size: 14px; color: #fff; opacity: .9; margin: 16px 0 0; }

/* ==========================================================================
   Single nieuwsbericht (single.php)
   ========================================================================== */
.tf-single .tf-container { max-width: 880px; }
.tf-single__back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tf-font); font-weight: 700; font-size: 15px; color: var(--tf-cerulean); margin-bottom: 28px; }
.tf-single__back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tf-single__back:hover { color: var(--tf-venice); }
.tf-single__body { max-width: 100%; }
/* rijke content die de klant in de WP-editor typt */
.tf-single__body h2 { font-family: var(--tf-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); text-transform: uppercase; color: var(--tf-ink); margin: 32px 0 14px; }
.tf-single__body h3 { font-family: var(--tf-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; color: var(--tf-ink); margin: 26px 0 12px; }
.tf-single__body a { color: var(--tf-cerulean); text-decoration: underline; }
.tf-single__body img { border-radius: var(--tf-radius-lg); margin: 24px 0; box-shadow: var(--tf-shadow); }
.tf-single__body ul, .tf-single__body ol { margin: 0 0 18px; padding-left: 24px; display: grid; gap: 10px; }
.tf-single__body blockquote { margin: 24px 0; padding: 16px 24px; border-left: 4px solid var(--tf-cerulean); background: var(--tf-azure-pale); border-radius: 0 10px 10px 0; font-style: italic; color: #374151; }
.tf-single__body figure { margin: 24px 0; }
.tf-single__body figcaption { font-family: var(--tf-eyebrow); font-size: 14px; color: #6b7280; margin-top: 8px; text-align: center; }
/* "Meer nieuws"-blok onderaan */
.tf-single__more { margin-top: 56px; padding-top: 40px; border-top: 1px solid #e5e7eb; }
.tf-single__more h2 { font-family: var(--tf-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); text-transform: uppercase; color: var(--tf-ink); margin: 0 0 24px; }

/* ==========================================================================
   Achtergrond-decoratie (blur-cirkels + handbal-outline) — site-breed
   Subtiele sfeer achter content-secties. Zet .tf-deco op een <section>.
   ========================================================================== */
.tf-deco { position: relative; overflow: hidden; isolation: isolate; }
.tf-deco > * { position: relative; z-index: 1; }
/* decoratie-items als losse spans/divs in de sectie (aria-hidden) */
.tf-deco-blob, .tf-deco-ball {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
}
/* zachte lichtblauwe blur-cirkel */
.tf-deco-blob {
  width: 320px; height: 320px;
  background: url("assets/img/deco-blur.png") center/contain no-repeat;
  opacity: .8;
}
.tf-deco-blob--sm { width: 220px; height: 220px; }
.tf-deco-blob--lg { width: 460px; height: 460px; }
/* handbal-outline schets */
.tf-deco-ball {
  width: 150px; height: 150px;
  background: url("assets/img/deco-bal.png") center/contain no-repeat;
  opacity: .5;
}
.tf-deco-ball--lg { width: 220px; height: 220px; }

/* posities — BLURS blijven ruim BINNEN de sectie (anders snijdt overflow ze
   af tot een lelijke rechte rand). Ze vloeien zacht uit binnen de sectie.
   De handbal-outline (scherpe vorm) mag wél deels buiten de rand. */
/* blur-cirkels: binnen veilige marges, deels achter content (z-index 0) */
.tf-deco-tl  { top: 20px;  left: 24px; }
.tf-deco-tr  { top: 30px;  right: 24px; }
.tf-deco-bl  { bottom: 24px; left: 30px; }
.tf-deco-br  { bottom: 30px; right: 24px; }
.tf-deco-ml  { top: 30%; left: 20px; }
.tf-deco-mr  { top: 22%; right: 20px; }
.tf-deco-mc  { top: 40%; left: 35%; }          /* midden, achter content */
.tf-deco-tc  { top: 24px; left: 42%; }
.tf-deco-bc  { bottom: 24px; left: 38%; }
/* handbal-outline: random verspreid, mag half achter een blok / over de rand */
.tf-deco-ball-tr { top: 80px;  right: 4%; }
.tf-deco-ball-tl { top: 140px; left: 3%; }
.tf-deco-ball-mr { top: 46%; right: -50px; }
.tf-deco-ball-ml { top: 40%; left: -45px; }
.tf-deco-ball-br { bottom: 90px; right: 6%; }
.tf-deco-ball-bl { bottom: 70px; left: 4%; }
.tf-deco-ball-r  { top: 120px; right: -55px; }
/* roteer-varianten voor extra variatie */
.tf-deco-rot1 { transform: rotate(18deg); }
.tf-deco-rot2 { transform: rotate(-22deg); }
.tf-deco-rot3 { transform: rotate(40deg); }

/* Deco hoort ALLEEN op rustige WITTE secties. Op blauwe/gekleurde/schuine
   secties valt de blur raar (lichter vierkant) → daar volledig verbergen. */
.tf-sponsors--band .tf-deco-blob, .tf-sponsors--band .tf-deco-ball,
.tf-contact-top .tf-deco-blob,    .tf-contact-top .tf-deco-ball,
.tf-ev--on-deco .tf-deco-blob,    .tf-ev--on-deco .tf-deco-ball,
.tf-news .tf-deco-blob,           .tf-news .tf-deco-ball,
.tf-media .tf-deco-blob,          .tf-media .tf-deco-ball,
.tf-join-form .tf-deco-blob,      .tf-join-form .tf-deco-ball,
.tf-afmelden .tf-deco-blob,       .tf-afmelden .tf-deco-ball,
.tf-section--blue .tf-deco-blob,  .tf-section--blue .tf-deco-ball { display: none; }

/* Deco UIT op mobiel/tablet — daar is geen ruimte voor sfeer-decoratie en
   het oogt rommelig achter de content. */
@media (max-width: 900px) {
  .tf-deco-blob, .tf-deco-ball { display: none !important; }
}