/* ------------------------------------------------------------------
   Lettertypes — zelf gehost (src/assets/fonts), niet via Google Fonts.
   Scheelt een externe verbinding voor de eerste paint en voorkomt dat
   het IP-adres van de bezoeker naar Google gaat (zie privacybeleid).
   Beide families zijn variabel: één bestand per subset dekt alle
   gewichten, vandaar een gewichtsbereik in plaats van losse regels.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-condensed-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-condensed-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------
   Volic Putten — richting "Meteoor"
   Zwarte kop met de vlammende bal, oranje alleen voor dingen die je
   kunt aanklikken, daglicht voor alle inhoud daaronder.
   ------------------------------------------------------------------ */

:root {
  /* Donker — exact zwart, want de foto heeft een zwarte achtergrond.
     Alles wat net geen zwart is, tekent zich af als een rechthoek. */
  --black: #000;
  --black-2: #0e0e0f;
  --line-dark: #242425;
  --on-black: #bfb8ae;

  --orange: #ec4613;
  --orange-hover: #ff5f2e;
  --ember: #ff8a3c;

  /* Licht */
  --bg: #f4f2ef;
  --surface: #fff;
  --ink: #16140f;
  --ink-2: #45403a;
  --muted: #6e675b;
  --line: #e4e0d9;

  --heading: "Roboto Condensed", "Arial Narrow", sans-serif;
  --shell: min(1140px, 100% - 32px);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.7 "Open Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--orange); }
a:hover { color: var(--orange-hover); }

h1, h2, h3, h4 {
  font-family: var(--heading);
  color: var(--ink);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .02em;
}

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.container { width: var(--shell); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--orange); color: #fff; padding: 12px 20px;
  font: 700 15px var(--heading); text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-block;
  font: 700 15px/1 var(--heading);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  padding: 13px 22px;
  border: 2px solid transparent;
  border-radius: 99px;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-cta { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-cta:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: #fff; }
.btn-ghost { color: #fff; border-color: #4a4a4c; }
.btn-ghost:hover { color: #fff; border-color: #fff; }

/* ------------------------------------------------------------------
   Kop
   ------------------------------------------------------------------ */

/* Stapelvolgorde van de kop, van onder naar boven:
   foto 0 · verloop 1 · paginatitel 2 · inhoudskaart 2 · menubalk 3.
   De kaart moet boven het verloop liggen, het uitklapmenu boven de kaart. */
.site-header { background: var(--black); color: #fff; position: relative; }

/* Binnenpagina's krijgen de sporthalfoto achter menu en titel; de homepage
   houdt de vlammende bal. Een verloop eroverheen houdt de titel leesbaar. */
/* De foto zelf is bijna zwart, daar overheen een licht verloop dat alleen onderin dichtloopt. */
.site-header:not(.site-header--hero)::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("/assets/img/header.jpg") center / cover no-repeat;
}
.site-header:not(.site-header--hero)::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgb(0 0 0 / .18) 0%, rgb(0 0 0 / .42) 58%, var(--black) 100%);
}

.header-bar { position: relative; z-index: 3; }
.header-inner {
  display: flex; align-items: center; gap: 24px;
  padding-block: 16px;
  position: relative;
}
.logo { margin-right: auto; }
.logo img { display: block; width: 150px; }

/* Op de homepage zweeft de balk over de foto; een verloop houdt het menu leesbaar. */
.site-header--hero .header-bar {
  background: linear-gradient(var(--black) 24%, rgb(0 0 0 / .62) 62%, rgb(0 0 0 / 0));
  padding-bottom: 36px;
  margin-bottom: -36px;
}

.main-nav > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-nav li { position: relative; }
.main-nav a, .nav-label {
  display: block; padding: 10px 14px;
  color: #ede9e3; text-decoration: none; cursor: pointer;
  font: 700 15px/1 var(--heading); text-transform: uppercase; letter-spacing: .05em;
}
.main-nav a:hover, .nav-label:hover { color: var(--ember); }
.main-nav a[aria-current="page"] { color: var(--orange); }
.has-children > a::after, .has-children > .nav-label::after { content: " ▾"; font-size: .8em; }

.submenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 10;
  min-width: 220px; list-style: none; margin: 0; padding: 8px 0;
  background: var(--black-2); border-top: 3px solid var(--orange);
  box-shadow: 0 8px 24px rgb(0 0 0 / .5);
}
.has-children:hover > .submenu, .has-children:focus-within > .submenu { display: block; }
.submenu a { padding: 10px 18px; font-size: 14px; }

.header-cta { padding: 11px 20px; font-size: 14px; }
.menu-toggle { display: none; }

/* ---------- Homepage: de foto is de kop ---------- */
.hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(380px, 46vw, 520px);
  padding: 50px 0 56px;
  background: var(--black) url("/assets/img/flaming-ball.jpg") 76% 48% / cover no-repeat;
}
/* Links donker voor de kop, onderaan uitlopend in zwart zodat de foto
   oplost in de pagina in plaats van op een harde rand te eindigen. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(94deg, var(--black) 8%, rgb(0 0 0 / .72) 34%, rgb(0 0 0 / 0) 62%);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 1;
  background: linear-gradient(rgb(0 0 0 / 0), var(--black) 90%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-kicker, .hero-title, .hero-actions { max-width: 620px; }

.hero-kicker {
  margin: 0 0 18px;
  font: 700 14px/1 var(--heading);
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--ember);
}
.hero-title {
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 8vw, 86px);
  line-height: .88;
  letter-spacing: -.01em;
}
.hero-title span { color: var(--orange); }
.hero-sub {
  margin: 22px 0 0;
  max-width: 34ch;
  color: var(--on-black);
  font-size: 17px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

/* ---------- Binnenpagina's: zwarte band, geen foto ---------- */
.page-title { padding: 56px 0 64px; text-align: center; position: relative; z-index: 2; }
.page-title h1 { margin: 0; color: #fff; font-size: clamp(30px, 5vw, 48px); }
.page-title h1::after {
  content: ""; display: block; width: 56px; height: 4px;
  margin: 18px auto 0; background: var(--orange);
}
.page-title .subtitle { margin: 16px 0 0; color: var(--on-black); }

/* ---------- Strook met de eerstvolgende trainingen ---------- */
.strip { background: var(--black-2); border-top: 1px solid var(--line-dark); }
.strip-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 20px;
}
.strip-list {
  display: flex; flex-wrap: wrap; gap: 14px 44px;
  list-style: none; margin: 0; padding: 0;
}
.strip-list li { display: grid; gap: 4px; min-width: 0; }
.strip-list b {
  font: 700 19px/1 var(--heading); color: var(--orange);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.strip-list i {
  font-style: normal; font-size: 13px; color: #8a847c;
  text-transform: uppercase; letter-spacing: .06em;
}
.strip-all {
  font: 700 14px/1 var(--heading); text-transform: uppercase; letter-spacing: .06em;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.strip-all::after { content: " →"; }
.strip-all:hover { color: var(--ember); }

/* ------------------------------------------------------------------
   Inhoud
   ------------------------------------------------------------------ */

.content {
  background: var(--surface);
  margin-bottom: 56px;
  padding: 48px clamp(16px, 5vw, 56px);
  position: relative;
  /* Boven het verloop van de kop (1), onder de menubalk (3) zodat het
     uitklapmenu op mobiel over de kaart heen valt. */
  z-index: 2;
  border-radius: 4px;
  box-shadow: 0 2px 14px rgb(0 0 0 / .07);
}
/* Op binnenpagina's schuift de witte kaart over de zwarte band heen. */
.site-header:not(.site-header--hero) + .content { margin-top: -28px; }
.strip + .content { margin-top: 48px; }

.prose { max-width: 820px; margin-inline: auto; }
.prose h2 { font-size: 24px; margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose h2::after {
  content: ""; display: block; width: 44px; height: 3px;
  margin-top: 12px; background: var(--orange);
}
.prose h3 { font-size: 18px; margin-top: 1.8em; }
.prose table {
  width: 100%; border-collapse: collapse; margin: 1.5em 0;
  font-size: 15px; display: block; overflow-x: auto;
}
.prose th, .prose td {
  text-align: left; padding: 11px 12px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.prose th {
  font-family: var(--heading); text-transform: uppercase;
  color: var(--ink); border-bottom: 2px solid var(--orange);
}
.prose td img { max-width: 140px; }
.meta { color: var(--muted); font-size: 14px; }

/* ---------- Trainingstijden ---------- */
.schedule { list-style: none; padding: 0; margin: 0 0 2em; }
.schedule li {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.schedule .day { font-weight: 700; color: var(--ink); }
.schedule .time {
  font-weight: 700; color: var(--orange); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Teams ---------- */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px; margin: 32px 0;
}
.team-card {
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); padding: 22px 24px;
  transition: border-color .15s, box-shadow .15s;
}
.team-card:hover { border-color: #d6cfc4; box-shadow: 0 4px 16px rgb(0 0 0 / .06); }
.team-card h2 { font-size: 21px; margin: 0; }
.team-card h2::after {
  content: ""; display: block; width: 40px; height: 3px;
  margin-top: 10px; background: var(--orange);
}
.team-voor { margin: 14px 0 0; color: var(--ink); font-weight: 600; }
.team-tekst { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.team-card .schedule { margin: 16px 0 0; }
.team-card .schedule li { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; }
.team-card .schedule li:last-child { border-bottom: 0; padding-bottom: 0; }
.team-card .schedule .place { grid-column: 1 / -1; grid-row: 2; color: var(--muted); font-size: 14px; }

/* ---------- Sponsors ---------- */
.sponsor-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px; margin-top: 32px;
}
.sponsor { border: 1px solid var(--line); border-radius: 4px; padding: 20px; text-align: center; }
.sponsor h2 { font-size: 18px; margin: 0 0 16px; }
.sponsor img {
  display: block; max-height: 140px; width: auto;
  margin: 0 auto 12px; object-fit: contain;
}

/* ------------------------------------------------------------------
   Voet
   ------------------------------------------------------------------ */

.site-footer { background: var(--black); color: #948e86; padding-top: 56px; font-size: 15px; }
.site-footer h2 { color: #fff; font-size: 18px; margin-top: 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--ember); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 4px 0; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.copyright {
  border-top: 1px solid var(--line-dark);
  margin-top: 44px; padding: 22px 0; font-size: 13px;
}

/* ------------------------------------------------------------------
   Smal scherm
   ------------------------------------------------------------------ */

@media (max-width: 920px) {
  .header-inner { gap: 12px; }
  .logo img { width: 130px; }

  .menu-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 2px solid #4a4a4c; color: #fff; border-radius: 99px;
    padding: 10px 16px; font: 700 14px var(--heading);
    text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
  }
  .menu-toggle span {
    width: 16px; height: 2px; background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }
  .menu-toggle[aria-expanded="true"] { border-color: #fff; }

  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    background: var(--black-2); border-top: 1px solid var(--line-dark); padding: 8px 0;
  }
  .nav-open .main-nav { display: block; }
  .main-nav > ul { flex-direction: column; }
  .submenu {
    display: block; position: static; box-shadow: none;
    border: 0; padding: 0 0 0 16px; background: none;
  }
  .has-children > a::after, .has-children > .nav-label::after { content: none; }

  .header-cta { display: none; }

  /* Smal scherm: de tekst staat ónder de foto in plaats van ernaast, zodat
     de bal zichtbaar blijft. De bal zit rechtsonder in het bestand, dus het
     kader schuift mee om hem in het bovenste deel te houden. */
  .hero {
    min-height: clamp(440px, 104vw, 580px);
    padding: 96px 0 40px;
    background-position: 70% 14%;
  }
  .hero::before {
    background: linear-gradient(
      rgb(0 0 0 / .4) 0%, rgb(0 0 0 / .08) 18%, rgb(0 0 0 / .58) 40%,
      rgb(0 0 0 / .92) 60%, var(--black) 78%);
  }

  /* align-items: flex-start zou de lijst op max-content zetten, waardoor de
     hele pagina breder wordt dan het scherm. Stretch houdt hem binnen de rand. */
  .hero::after { height: 28%; }

  .strip-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .strip-list { gap: 14px 32px; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .schedule li { grid-template-columns: 1fr auto; }
  .schedule .place { grid-column: 1; grid-row: 2; color: var(--muted); }
}

@media (max-width: 540px) {
  .hero { background-position: 68% 12%; padding-top: 88px; }
  .hero-sub { font-size: 16px; }
  .strip-list { gap: 12px 26px; }
  .strip-list b { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Lokvink in afgeschermde e-mailadressen: alleen zichtbaar voor robots die
   de HTML uitlezen, niet voor bezoekers. Zie verhul-mail in eleventy.config.js. */
.mail-lok {
  display: none;
}