/* Spellenclub Mechelen vzw — thema-stijlen */

:root {
  --paper:        #faf7f2;
  --paper-alt:    #f2ede4;
  --card:         #ffffff;
  --ink:          #1b2027;
  --ink-soft:     #55606e;
  --line:         #e2dbcf;
  --accent:       #b8412c;
  --accent-ink:   #ffffff;
  --accent-soft:  #fbeae5;
  --shadow:       0 1px 2px rgba(27,32,39,.06), 0 8px 24px rgba(27,32,39,.06);
  --radius:       10px;
  --wrap:         62rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #14181d;
    --paper-alt:   #1a1f26;
    --card:        #1e242c;
    --ink:         #e8e6e1;
    --ink-soft:    #a2aab5;
    --line:        #2c333c;
    --accent:      #e4765d;
    --accent-ink:  #14181d;
    --accent-soft: #2c2020;
    --shadow:      0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }
.plain { list-style: none; margin: 0; padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: .6em 1em;
}
.skip-link:focus { left: 0; }

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

/* ---------- Header ---------- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}

.header-inner {
  display: flex; align-items: center; gap: 1rem;
  padding-block: .7rem; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; margin-right: auto; }
/* Het logo is een SVG dat zijn eigen kleuren omschakelt op prefers-color-scheme;
   hier dus geen filter of achtergrond. */
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.02rem; }
.brand-text small { color: var(--ink-soft); font-size: .76rem; }

.site-nav ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  display: block; padding: .45em .8em; border-radius: 999px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .94rem;
}
.site-nav a:hover { background: var(--paper-alt); }
.site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.nav-toggle { display: none; }

@media (max-width: 41rem) {
  .nav-toggle {
    display: block; order: 2; background: none; border: 1px solid var(--line);
    border-radius: 8px; padding: .55rem .7rem; cursor: pointer; color: inherit;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 20px; height: 2px; background: currentColor; position: relative;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after  { top: 6px; }

  .site-nav { order: 3; width: 100%; display: none; padding-bottom: .5rem; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { border-radius: 8px; padding: .6em .8em; }
}

/* ---------- Hero ---------- */

.hero {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
}
.hero-inner { padding-block: clamp(2.5rem, 8vw, 4.5rem); max-width: 44rem; }

/* Met foto: altijd lichte tekst op een donkere laag, in beide thema's.
   De foto ligt vast, dus de leesbaarheid mag niet van het thema afhangen. */
.hero.has-media {
  position: relative;
  isolation: isolate;
  background: #0d1116;
  border-bottom: 0;
}

/* De foto ligt ingekaderd binnen de sectie in plaats van er helemaal tegenaan.
   Dat maakt hem kleiner, zet er een donkere rand omheen en laat hem lezen als
   achtergrond in plaats van als foto waar toevallig tekst overheen staat.
   De bron is 2048px breed, dus schermvullend op een scherm met hoge
   pixeldichtheid werd hij bovendien opgeblazen; dit scheelt daar ook in. */
.hero-media {
  position: absolute;
  inset: 1.25rem;
  z-index: -2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
/* De zaalfoto is binnen genomen en komt donker uit de camera; een lichte
   optrek maakt de spelers zichtbaar zonder dat de foto uitgewassen oogt. */
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 38% 42%;
  filter: brightness(1.08) contrast(1.02) saturate(1.03);
}

/* De donkere laag ligt binnen dezelfde kader als de foto. Links moet ze
   zwaar genoeg blijven voor witte tekst, rechts mag de foto zelf spreken. */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(9,12,16,.86) 0%, rgba(9,12,16,.74) 42%, rgba(9,12,16,.42) 100%),
    linear-gradient(to top, rgba(9,12,16,.69) 0%, rgba(9,12,16,.075) 60%);
}

@media (max-width: 41rem) {
  .hero-media { inset: .6rem; border-radius: 8px; }
}

.hero.has-media .hero-inner { padding-block: clamp(3.5rem, 11vw, 7rem); }
.hero.has-media h1 { color: #fff; text-wrap: balance; }
.hero.has-media .lead { color: rgba(255,255,255,.85); }
.hero.has-media .eyebrow { color: #f0a58e; }
.hero.has-media .btn-ghost {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.45);
  color: #fff;
}
.hero.has-media .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .09em; font-size: .78rem;
  font-weight: 700; color: var(--accent); margin-bottom: .6rem;
}
.hero h1 { margin-bottom: .35em; }
.lead { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--ink-soft); }

.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }

.btn {
  display: inline-block; padding: .68em 1.25em; border-radius: 999px;
  font-weight: 650; text-decoration: none; border: 1.5px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Aankondiging ---------- */

.announce-wrap { padding-block: clamp(2rem, 5vw, 3rem) 0; }
/* Bij meerdere berichten stapelen ze met ruimte ertussen. */
.announce-list { display: grid; gap: .8rem; }

.announce {
  display: grid; gap: .5rem .9rem; text-decoration: none; color: inherit;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.announce:hover { box-shadow: var(--shadow); }

.announce-flag {
  text-transform: uppercase; letter-spacing: .08em; font-size: .72rem;
  font-weight: 800; color: var(--accent);
}
.announce-title { display: block; font-size: 1.12rem; margin-bottom: .15rem; }
.announce-teaser { color: var(--ink-soft); font-size: .95rem; }
.announce-more { font-weight: 650; color: var(--accent); font-size: .92rem; }

/* ---------- Secties ---------- */

.section { padding-block: clamp(2.2rem, 6vw, 3.6rem); }
.section-alt { background: var(--paper-alt); border-block: 1px solid var(--line); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.section-title { margin: 0 0 1.4rem; }
.section-head .section-title { margin-bottom: 0; }
.section-note { color: var(--ink-soft); margin: 0; }
.section-link { font-weight: 650; text-decoration: none; }
.section-link:hover { text-decoration: underline; }

.prose { max-width: 42rem; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose blockquote {
  margin: 1.5em 0; padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic;
}
.prose img { border-radius: var(--radius); }

.breadcrumb { font-size: .92rem; margin-bottom: .8rem; }
.breadcrumb a { text-decoration: none; font-weight: 600; }

/* ---------- Kaarten ---------- */

.cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card-date { font-size: .82rem; color: var(--ink-soft); font-weight: 600; margin-bottom: .3em; }
.card-news h3 a { color: inherit; text-decoration: none; }
.card-news h3 a:hover { color: var(--accent); }
.card-more { font-size: .92rem; font-weight: 650; }
.card-more a { text-decoration: none; }

.pill {
  display: inline-block; margin-left: .5em; padding: .1em .6em;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}

/* ---------- Agenda ---------- */

.agenda-year {
  font-size: 1.5rem; margin: 1.8rem 0 .8rem;
  padding-bottom: .3rem; border-bottom: 2px solid var(--line);
}
.agenda-year:first-of-type { margin-top: 0; }

.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.agenda-item {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; align-items: start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1.1rem;
}

.agenda-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 8px; padding: .4rem .2rem; line-height: 1.1;
}
.agenda-day { font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.agenda-month { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.agenda-title { margin: 0 0 .2em; font-size: 1.05rem; }
.agenda-title a { color: inherit; text-decoration: none; }
.agenda-title a:hover { color: var(--accent); text-decoration: underline; }
.agenda-meta { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.agenda-meta .sep { margin-inline: .4em; }
.agenda-note { margin: .4em 0 0; font-size: .92rem; }

.agenda-past { margin-top: 2rem; }
.agenda-past summary {
  cursor: pointer; font-weight: 650; color: var(--ink-soft);
  padding: .6em 0; list-style-position: outside;
}
.agenda-past summary:hover { color: var(--accent); }
.agenda-past .agenda { margin-top: .8rem; }
.agenda-dim .agenda-item { opacity: .72; }
.agenda-dim .agenda-date { background: var(--paper-alt); color: var(--ink-soft); }

/* ---------- Nieuwslijst ---------- */

.newslist { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.newslist-item { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.newslist-item:last-child { border-bottom: 0; }
.newslist-item h2 { font-size: 1.35rem; margin-bottom: .3em; }
.newslist-item h2 a { color: inherit; text-decoration: none; }
.newslist-item h2 a:hover { color: var(--accent); }
.newslist-item p:last-child { margin-bottom: 0; color: var(--ink-soft); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--paper-alt); border-top: 1px solid var(--line);
  margin-top: 0; padding-block: 2.5rem 1.5rem;
}
.footer-grid {
  display: grid; gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.footer-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.site-footer p, .site-footer li { font-size: .92rem; }
.site-footer li { margin-bottom: .2em; }
.footer-bottom { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.footer-bottom p { margin: 0; }

/* ---------- Tabellen (in prose) ---------- */

.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .94rem; }
.prose th, .prose td { text-align: left; padding: .55em .7em; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; }