/* ---------- Design tokens ---------- */
:root {
  --deep: #0D2B5E;
  --deep-dark: #081C3F;
  --deep-light: #1F4A8A;
  --accent: #E0A526;
  --accent-light: #F2C45A;
  --cream: #F6F7FA;
  --cream-dark: #E8EDF5;
  --ink: #232323;
  --muted: #6b7280;
  --line: #DCE3EE;
  --green: #3f7d5c;
  --white: #ffffff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(13, 43, 94, 0.08);
  --shadow-lg: 0 20px 50px rgba(13, 43, 94, 0.16);
  --font-head: 'Rubik', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--deep); text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--deep);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.muted { color: var(--muted); }
.icon { width: 20px; height: 20px; vertical-align: -4px; margin-inline-end: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--deep-dark); box-shadow: 0 6px 16px rgba(224, 165, 38, 0.35); }
.btn-primary:hover { background: var(--accent-light); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-invert { background: var(--deep-dark); color: #fff; }
.btn-invert:hover { background: var(--deep); }
.btn-sm { padding: 0.6em 1.2em; font-size: 0.85rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 247, 250, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.5rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--deep); white-space: nowrap; }
.brand-text small { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.06em; }
.brand-text.light strong { color: #fff; }

.main-nav { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; justify-content: flex-end; }
.header-row { gap: 1rem; }
.brand { flex: 0 1 auto; min-width: 0; }
.main-nav a { font-weight: 500; font-size: 0.95rem; color: var(--deep); position: relative; padding: 0.3em 0; white-space: nowrap; }
.main-nav a.active, .main-nav a:hover { color: var(--accent); }
.main-nav a.nav-cta {
  background: var(--deep); color: #fff; padding: 0.55em 1.3em; border-radius: 999px;
}
.main-nav a.nav-cta:hover { background: var(--deep-light); color: #fff; }

/* The bar may be a little wider than the text below it. Under 1100px the menu button takes over. */
@media (min-width: 1101px) {
  .site-header .container { max-width: 1200px; }
  .header-row { gap: 1rem; }
  .main-nav { gap: 0.9rem; flex-wrap: nowrap; }
  .main-nav a { font-size: 0.88rem; }
  .main-nav a.nav-cta { margin-inline-start: 0.4rem; padding: 0.55em 1.2em; }
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--deep); border-radius: 2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--deep) 0%, var(--deep-dark) 100%);
  color: #fff;
  padding: 5.5rem 0 6rem;
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; max-width: 640px; }
.hero-pattern { position: absolute; inset: 0; opacity: 0.5; z-index: 1; pointer-events: none; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
  color: var(--accent-light); font-weight: 600; margin-bottom: 1em;
}
.hero h1 { color: #fff; }
.hero-sub { font-size: 1.15rem; color: rgba(255,255,255,0.85); max-width: 520px; }
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

.page-header {
  background: var(--deep);
  color: #fff;
  padding: 3.5rem 0 3rem;
}
.page-header h1 { color: #fff; }
.hero-sub-dark { color: rgba(255,255,255,0.8); max-width: 620px; font-size: 1.05rem; }

/* ---------- Sections ---------- */
.section { padding: 4rem 0; }
.section-alt { background: var(--cream-dark); }
.section-head { max-width: 640px; margin-bottom: 1rem; }
.lead { font-size: 1.1rem; color: var(--ink); max-width: 720px; }
.two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
.prose p { color: #3a3a3a; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(13,43,94,0.06);
}
.highlight-card { background: linear-gradient(135deg, #fff, var(--cream-dark)); border: 1px solid var(--line); }
.highlight-card.wide { text-align: center; padding: 3rem; }

.facilities-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.facility-card {
  background: #fff; border-radius: var(--radius); padding: 1.8rem;
  box-shadow: var(--shadow); text-align: start;
}
.facility-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--cream-dark);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--deep);
}
.facility-icon .icon { margin: 0; width: 22px; height: 22px; }

.club-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.club-list li { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0; border-bottom: 1px dashed var(--line); }
.club-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.link-arrow { font-weight: 600; color: var(--deep); }
.link-arrow:hover { color: var(--accent); }

.cta-band { background: var(--cream-dark); }
.cta-inner { text-align: center; max-width: 620px; margin: 0 auto; }

/* ---------- Schedule / agenda ---------- */
.schedule-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.schedule-card { position: relative; }
.badge {
  display: inline-block; background: var(--deep); color: #fff; font-size: 0.75rem;
  font-weight: 600; padding: 0.3em 0.9em; border-radius: 999px; margin-bottom: 0.8em;
}
.badge-accent { background: var(--accent); color: var(--deep-dark); }
.time-list { list-style: none; padding: 0; margin: 0.8em 0; }
.time-list li { display: flex; align-items: center; padding: 0.3em 0; color: #3a3a3a; font-size: 0.95rem; }
.card-contact { border-top: 1px solid var(--line); margin-top: 1em; padding-top: 1em; font-size: 0.9rem; }
.card-contact p { display: flex; align-items: center; margin: 0.3em 0; color: var(--muted); }

/* ---------- Tabs (cursussen) ---------- */
.tabs { display: flex; gap: 0.6rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.tab-btn {
  background: #fff; border: 1px solid var(--line); padding: 0.7em 1.6em; border-radius: 999px;
  font-weight: 600; cursor: pointer; color: var(--deep); font-size: 0.95rem;
}
.tab-btn.active { background: var(--deep); color: #fff; border-color: var(--deep); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.course-card dl { margin: 1em 0; }
.course-card dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 0.7em; }
.course-card dd { margin: 0.15em 0 0; }
.price { font-weight: 700; color: var(--green); font-size: 1.05rem; }
.info-box { background: var(--cream-dark); border-radius: var(--radius); padding: 1.5rem; margin-top: 1.5rem; }

/* ---------- Activiteiten ---------- */
/* Eén kaart per activiteit; de knop staat onderaan uitgelijnd, ook als de ene
   kaart meer tekst heeft dan de andere. */
.activity-card { display: flex; flex-direction: column; }
.activity-card .badge { align-self: flex-start; }
.activity-card h3 { margin: 0 0 0.5em; font-size: 1.2rem; }
.activity-card dl { flex: 1 0 auto; }
.activity-card .btn { align-self: flex-start; margin-top: 1.2rem; }

.contact-line { margin: 0; }
.resource-list { padding-inline-start: 1.2em; }

/* ---------- Location ---------- */
.address-card h3 { display: flex; align-items: center; }
.address { font-size: 1.05rem; font-weight: 600; }
.note { font-style: italic; color: var(--muted); }
.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }

/* ---------- Results ---------- */
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.result-card {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; color: var(--deep); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.result-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.result-card.disabled { color: var(--muted); cursor: default; }
.result-card .arrow { color: var(--accent); font-size: 1.2rem; }
.result-card .soon { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; padding: 0; }
.contact-list li { display: flex; flex-direction: column; padding: 0.8em 0; border-bottom: 1px dashed var(--line); }
.contact-list a { color: var(--deep); font-size: 0.9rem; }
.form-card h2 { margin-bottom: 1rem; }
.stacked-form { display: flex; flex-direction: column; gap: 1.1rem; }
.stacked-form label { display: flex; flex-direction: column; gap: 0.4em; font-weight: 600; font-size: 0.9rem; color: var(--deep); }
.stacked-form input, .stacked-form textarea {
  font-family: var(--font-body); font-size: 1rem; padding: 0.7em 0.9em;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream);
}
.stacked-form input:focus, .stacked-form textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.alert { padding: 1em 1.2em; border-radius: var(--radius-sm); margin-bottom: 1rem; font-weight: 500; }
.alert-success { background: #e4f3ea; color: var(--green); border: 1px solid #bfe3cd; }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep-dark); color: rgba(255,255,255,0.75); padding: 3.5rem 0 1.5rem; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.8em; }
.site-footer a { color: rgba(255,255,255,0.75); }
.site-footer a:hover { color: var(--accent-light); }
.site-footer p { margin: 0.3em 0; font-size: 0.92rem; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem;
}
.admin-link { opacity: 0.6; }
.admin-link:hover { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
  .facilities-grid { grid-template-columns: repeat(2, 1fr); }
  .schedule-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute; top: 100%; inset-inline: 0;
    background: var(--cream); flex-direction: column; align-items: stretch;
    padding: 1rem 1.5rem 1.5rem; border-bottom: 1px solid var(--line);
    display: none; gap: 0.2rem;
  }
  .main-nav.open { display: flex; }
  .main-nav { flex-wrap: nowrap; }
  .main-nav a { padding: 0.7em 0; }
  .main-nav a.nav-cta { text-align: center; margin-top: 0.5em; }
}
@media (max-width: 720px) {
  .facilities-grid { grid-template-columns: 1fr; }
  .hero { padding: 3.5rem 0 4rem; }
}

/* ================================================================
   Additional components
   ================================================================ */

/* ---------- Nieuws / puzzels ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.news-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.news-card .news-diagram {
  background: var(--cream-dark); padding: 1.4rem; display: flex; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.news-card .news-diagram img { width: 100%; max-width: min(240px, 100%); border-radius: var(--radius-sm); }
.news-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.news-body h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.01em; }
.news-meta { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.7em; }
.news-excerpt { color: #3a3a3a; font-size: 0.95rem; flex: 1; }
.news-card .link-arrow { margin-top: 0.8em; font-size: 0.9rem; }

/* Losse nieuwspagina */
.article { max-width: 760px; margin: 0 auto; }
.article .news-meta { margin-bottom: 1.5em; }
.diagram-figure {
  margin: 2rem 0; padding: 1.8rem; background: var(--cream-dark);
  border-radius: var(--radius); text-align: center; border: 1px solid var(--line);
}
.diagram-figure img { margin: 0 auto; max-width: min(340px, 100%); border-radius: var(--radius-sm); }
.diagram-figure figcaption {
  margin-top: 1rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; font-size: 0.88rem; color: var(--deep);
}
.article-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.9rem; }

/* ---------- Dambord-hero ---------- */

/* ---------- Lijsten met opsommingsstijl ---------- */
.check-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.check-list li { position: relative; padding-block: 0.45em; padding-inline: 1.8em 0; border-bottom: 1px dashed var(--line); color: #3a3a3a; }
.check-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.95em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 0.4em 0; border-bottom: 1px dashed var(--line); }
.plain-list li:last-child { border-bottom: none; }

/* ---------- Bestuur / personen ---------- */
.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.person { background: #fff; border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow); }
.person .role { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.person .name { font-family: var(--font-head); font-size: 1.1rem; color: var(--deep); margin: 0.2em 0 0.1em; }
.person a { font-size: 0.88rem; color: var(--deep-light); }

/* ---------- Prijzen / contributie ---------- */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.price-card { background: #fff; border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); border-top: 4px solid var(--accent); }
.price-card .amount { font-family: var(--font-head); font-size: 2rem; color: var(--deep); line-height: 1; margin: 0.3em 0 0.2em; }
.price-card .per { color: var(--muted); font-size: 0.85rem; }

/* ---------- Externe links / logo's ---------- */
.linkrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.linkrow a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8em;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.9em 1.2em; font-weight: 600; color: var(--deep); font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.linkrow a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.linkrow .arrow { color: var(--accent); }

/* ---------- Embeds (kalender, standen) ---------- */
.embed-frame {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: #fff; border: 1px solid var(--line);
}
.embed-frame iframe { display: block; width: 100%; border: 0; }
.embed-fallback { padding: 2.5rem; text-align: center; }

/* ---------- Sectie-anker navigatie ---------- */
.anchor-nav { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.8rem; }
.anchor-nav a {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28);
  color: #fff; padding: 0.5em 1.2em; border-radius: 999px; font-size: 0.88rem; font-weight: 500;
}
.anchor-nav a:hover { background: rgba(255,255,255,0.22); color: #fff; }
.section [id] { scroll-margin-top: 90px; }

/* ---------- Teamlijst ---------- */
.team-list { columns: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0 0 1.2rem; }
.team-list li { padding: 0.35em 0; break-inside: avoid; }

@media (max-width: 860px) {
  .news-grid { grid-template-columns: 1fr; }
  .team-list { columns: 1; }
}

/* ---------- Berichtinhoud (geïmporteerde blokken) ---------- */
/* auto: een afbeelding met een maat maar zonder plaats staat in het midden, net als in de bewerker. */
.post-figure { margin: 2rem auto; }
.post-figure img { border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 auto; }
.post-figure figcaption { margin-top: 0.7em; font-size: 0.88rem; color: var(--muted); text-align: center; }
.post-quote {
  margin: 2rem 0; padding: 1.2rem 1.6rem; border-inline-start: 4px solid var(--accent);
  background: var(--cream-dark); border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm);
  font-style: italic; color: #3a3a3a;
}
.table-wrap { overflow-x: auto; margin: 1.8rem 0; }
.post-table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
.post-table th, .post-table td { padding: 0.6em 0.9em; border-bottom: 1px solid var(--line); text-align: start; }
.post-table th { background: var(--cream-dark); font-family: var(--font-head); color: var(--deep); }
/* Photo galleries and tables inside formatted text, both from the old WordPress site. */
.post-galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 30%), 1fr)); gap: 0.5rem; margin: 2rem 0; clear: both; }
.post-galerij a { display: block; }
.article .post-galerij img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); margin: 0; }
.rich-blok table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
.rich-blok th, .rich-blok td { padding: 0.45em 0.7em; border-bottom: 1px solid var(--line); text-align: start; }
.rich-blok thead td, .rich-blok th { background: var(--cream-dark); }
.post-audio { width: 100%; max-width: 420px; margin: 1.5rem 0; height: 40px; }
.post-embed { margin: 2rem 0; }
.article .check-list { margin: 1.2rem 0; }

/* Tekst met opmaak uit de bewerker. Quill zet uitlijning in een klasse, dus
   zonder deze regels staat gecentreerde tekst gewoon links. */
.article .ql-align-center { text-align: center; }
.article .ql-align-right { text-align: end; }
.article .ql-align-justify { text-align: justify; }
.article ul, .article ol { padding-inline-start: 1.4em; margin: 1.2rem 0; }
.article ul li, .article ol li { margin: 0.3em 0; color: #3a3a3a; }
.article pre { background: var(--cream-dark); padding: 1rem 1.2rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: 0.9rem; }
.article img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1.5rem auto; }
.article table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.article table th, .article table td { border: 1px solid var(--line); padding: 0.5em 0.7em; text-align: start; }
.article table th { background: var(--cream-dark); font-weight: 600; }

/* ---------- Jaarfilter en paginering ---------- */
.year-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.year-filter a {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.45em 1.1em; font-size: 0.88rem; font-weight: 600; color: var(--deep);
}
.year-filter a:hover { border-color: var(--accent); }
.year-filter a.active { background: var(--deep); color: #fff; border-color: var(--deep); }
.year-filter .count { opacity: 0.55; font-weight: 400; font-size: 0.8em; }

.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center; margin-top: 2.5rem; }
.pagination a {
  min-width: 40px; text-align: center; padding: 0.5em 0.9em; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 0.9rem; color: var(--deep);
}
.pagination a:hover { border-color: var(--accent); }
.pagination a.active { background: var(--accent); border-color: var(--accent); color: var(--deep-dark); }
.pagination .gap { color: var(--muted); padding: 0 0.2rem; }

/* Clublogo in de menubalk: staand wapenschild, hoogte bepaalt de maat */
.brand-mark { flex: none; display: flex; align-items: center; }
.brand-mark img { width: auto; height: 46px; }
@media (max-width: 600px) {
  .brand-mark img { height: 40px; }
}

/* ---------- Zeer smalle schermen (vanaf ~320px) ----------
   Rasteronderdelen krijgen standaard min-width:auto; een lang, ondeelbaar
   woord (zoals een e-mailadres) duwt de kolom dan breder dan het scherm.
   Daarom expliciet min-width:0, en lange adressen mogen afbreken.          */
.two-col > *, .news-grid > *, .course-grid > *, .people-grid > *,
.price-grid > *, .linkrow > *, .schedule-grid > *, .facilities-grid > *,
.results-grid > *, .footer-grid > * { min-width: 0; }

a[href^="mailto:"], a[href^="tel:"], .contact-list a, .person a,
.card-contact a, .site-footer a, .linkrow a { overflow-wrap: anywhere; }

/* ---------- Hero met beeld ---------- */
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem;
  align-items: center; position: relative; z-index: 2;
}
.hero-grid > * { min-width: 0; }
.hero-grid .hero-inner { max-width: none; }

.hero-media { margin: 0; position: relative; }
.hero-media img, .hero-media video, .hero-media iframe {
  width: 100%; display: block; border-radius: var(--radius);
  background: rgba(0,0,0,0.15);
}
.hero-media video { height: auto; }

/* Stelling van de week */
.hero-media-stelling {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius); padding: 1.2rem; backdrop-filter: blur(4px);
}
.hero-media-stelling img { max-width: 320px; margin: 0 auto 1rem; background: #fff; padding: 6px; }
.hero-media-stelling figcaption { display: flex; flex-direction: column; gap: 0.3rem; text-align: center; }
.hero-media-tag {
  align-self: center; background: var(--accent); color: var(--deep-dark);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25em 0.8em; border-radius: 999px;
}
.hero-media-stelling strong { font-family: var(--font-head); font-size: 1.1rem; color: #fff; }
.hero-media-sub { color: rgba(255,255,255,0.75); font-size: 0.85rem; }
.hero-media-stelling .link-arrow { color: var(--accent-light); font-size: 0.9rem; }
.hero-media-stelling .link-arrow:hover { color: #fff; }

/* Diavoorstelling met foto's */
.hero-slideshow .slides { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-slideshow .slides img {
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0;
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease;
}
.hero-slideshow .slides img:first-child { position: relative; }
.hero-slideshow .slides img.active { opacity: 1; }
.slide-dots { display: flex; gap: 0.4rem; justify-content: center; margin-top: 0.9rem; }
.slide-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: none; background: rgba(255,255,255,0.35);
}
.slide-dots button.active { background: var(--accent); transform: scale(1.25); }
.slide-caption { color: rgba(255,255,255,0.75); font-size: 0.85rem; text-align: center; margin-top: 0.7rem; }

/* Video en ingesloten applet */
.hero-video video { box-shadow: var(--shadow-lg); }
.hero-embed iframe { border: 0; box-shadow: var(--shadow-lg); }
.hero-embed.is-wide iframe { aspect-ratio: 16 / 9; }
.hero-embed.is-square iframe { aspect-ratio: 1 / 1; }

/* Terugval: het dambordpatroon */
.hero-media-board { opacity: 0.9; }
.hero-media-board svg { max-width: 340px; margin: 0 auto; display: block; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-media { max-width: 460px; }
  .hero-media-stelling { max-width: 400px; }
}

/* Lange titels (eigen pagina's, berichten) mogen nooit het scherm openduwen. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
.page-header h1, .article h1 { hyphens: auto; }

/* ---------- Afbeeldingen met een maat en een plaats ---------- */
/* Gezet in de blokbewerker of in de tekstbewerker; de waarden staan in
   includes/html_filter.php. De maat is een deel van de tekstkolom, geen
   pixels, zodat het op een telefoon net zo uitkomt als op een groot scherm. */
img[data-grootte="klein"],  figure[data-grootte="klein"]  { width: 33%; }
img[data-grootte="middel"], figure[data-grootte="middel"] { width: 50%; }
img[data-grootte="groot"],  figure[data-grootte="groot"]  { width: 75%; }
img[data-grootte="vol"],    figure[data-grootte="vol"]    { width: 100%; }
figure[data-grootte] img { width: 100%; }

img[data-plaats="midden"], figure[data-plaats="midden"] { margin-inline: auto; }
img[data-plaats="links"],  figure[data-plaats="links"]  { margin-inline: 0 auto; }
img[data-plaats="rechts"], figure[data-plaats="rechts"] { margin-inline: auto 0; }
img[data-plaats="tekst-links"],  figure[data-plaats="tekst-links"]  { float: inline-start; margin-block: 0.4rem 1rem; margin-inline: 0 1.6rem; }
img[data-plaats="tekst-rechts"], figure[data-plaats="tekst-rechts"] { float: inline-end; margin-block: 0.4rem 1rem; margin-inline: 1.6rem 0; }
/* Tekst ernaast zonder gekozen maat: dan niet de hele breedte, anders past er niets naast. */
img[data-plaats^="tekst-"]:not([data-grootte]),
figure[data-plaats^="tekst-"]:not([data-grootte]) { width: 40%; }

.rich-blok::after, .article::after { content: ""; display: table; clear: both; }

/* Op een telefoon is naast elkaar te krap: dan de afbeelding erboven, iets breder. */
@media (max-width: 600px) {
  img[data-plaats^="tekst-"], figure[data-plaats^="tekst-"] { float: none; margin: 1.2rem auto; }
  img[data-grootte="klein"],  figure[data-grootte="klein"],
  img[data-grootte="middel"], figure[data-grootte="middel"],
  img[data-plaats^="tekst-"]:not([data-grootte]),
  figure[data-plaats^="tekst-"]:not([data-grootte]) { width: 70%; }
}

/* Een nieuwe afbeelding begint onder een eerdere zwevende afbeelding. Zonder dit
   schuift een afbeelding zonder tekst ernaast over de vorige heen, en komen twee
   zwevende afbeeldingen naast elkaar klem te zitten. */
.post-figure, .rich-blok img { clear: both; }
/* Staat er in opgemaakte tekst een afbeelding met tekst ernaast, dan begint het
   hele blok onder de vorige zwevende afbeelding. Anders wordt de eerste regel
   tussen die twee in geperst en staat er één woord op. */
.rich-blok:has(img[data-plaats^="tekst-"]) { clear: both; }

/* ---------- Video ---------- */
.post-video video {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); background: #000; box-shadow: var(--shadow);
}
/* Een iframe heeft geen eigen verhouding; het kader houdt hem 16:9 op elke breedte. */
.video-kader {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow);
}
/* Een YouTube Short is staand gefilmd. */
.video-kader.staand { aspect-ratio: 9 / 16; max-width: 22rem; margin: 0 auto; }
.video-kader iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Een afbeeldingsblok met eigen tekst begint onder een eerdere zwevende
   afbeelding, net als opgemaakte tekst met een afbeelding erin. */
.beeld-met-tekst { clear: both; }

/* De afbeelding in een figuur hoort geen eigen marge boven en onder te hebben:
   de figuur heeft die al. ".article img" hierboven, bedoeld voor afbeeldingen in
   opgemaakte tekst, won van ".post-figure img" omdat hij later staat. Daardoor
   begon een afbeelding met tekst ernaast lager dan de eerste regel tekst. */
.post-figure img { margin-top: 0; margin-bottom: 0; }

/* ---------- Geluid ---------- */
/* De speler is bewust compact en links uitgelijnd (zie .post-audio hierboven).
   Het bijschrift hoort daar dan onder te staan, niet midden in de kolom; en de
   figuur heeft zijn eigen marge al, dus de speler niet nog eens. */
.post-geluid .post-audio { display: block; margin: 0; }
.post-geluid figcaption { text-align: start; max-width: 420px; }

/* ---------- Uitklapblok ---------- */
.uitklap {
  clear: both; margin: 1.5rem 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.uitklap > summary {
  cursor: pointer; list-style: none; padding: 0.9rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 600; color: var(--deep);
}
.uitklap > summary::-webkit-details-marker { display: none; }
/* Een pijltje dat omdraait als het blok open is. */
.uitklap > summary::after {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-top: -0.25rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s;
}
.uitklap[open] > summary::after { transform: rotate(-135deg); margin-top: 0.25rem; }
.uitklap > summary:hover { color: var(--accent); }
.uitklap > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.uitklap-inhoud { padding: 1rem 1.1rem 1.1rem; border-top: 1px solid var(--line); }
.uitklap-inhoud > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .uitklap > summary::after { transition: none; } }

/* ---------- Concept en verborgen pagina ---------- */
/* Alleen te zien voor wie is ingelogd; moet opvallen, zodat niemand denkt dat het al openbaar is. */
.concept-melding {
  background: #fdf3ec; border: 1px solid #f0d2bf; color: #7a3d1c;
  border-radius: var(--radius-sm); padding: 0.8rem 1rem; margin: 0 0 1.5rem; font-size: 0.92rem;
}


/* ================================================================
   israel.fmjd.org: languages
   ================================================================ */

/* Hebrew: Rubik has Hebrew letters, Inter does not. */
[dir="rtl"] { --font-body: 'Rubik', 'Segoe UI', Arial, sans-serif; }
/* Uppercase and letter spacing mean nothing in Hebrew and spoil Cyrillic less. */
[dir="rtl"] .eyebrow, [dir="rtl"] .news-meta, [dir="rtl"] .site-footer h4 { letter-spacing: 0; }
.news-body h3 { text-transform: none; }
/* The board pattern and arrows in the hero do not mirror. */
.hero-media-board svg { direction: ltr; }

.lang-switch { display: inline-flex; gap: 0.15rem; margin-inline-start: 0.4rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem; }
.main-nav .lang-switch a { font-size: 0.78rem; font-weight: 600; padding: 0.25em 0.6em; border-radius: 999px; color: var(--muted); }
.main-nav .lang-switch a.active { background: var(--deep); color: #fff; }
.main-nav .lang-switch a:hover:not(.active) { color: var(--deep); }
@media (max-width: 1100px) {
  .lang-switch { align-self: flex-start; margin: 0.8rem 0 0; }
}

/* Shown when a text is displayed in another language than the page. */
.lang-note {
  background: var(--cream-dark); border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-sm); padding: 0.7rem 1rem; margin: 0 0 1.5rem; font-size: 0.9rem; color: var(--ink);
}
.lang-badge {
  display: inline-block; background: var(--cream-dark); color: var(--deep); border-radius: 4px;
  padding: 0 0.4em; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; margin-inline-start: 0.3em;
}
.alert-error { background: #fdeceb; color: #a33; border: 1px solid #f3c9c6; }
.contact-list .role { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; }
.contact-line { display: flex; align-items: center; gap: 0.2rem; margin: 0.3em 0; }
.article-nav { max-width: 760px; margin-inline: auto; }

/* Quill's own classes for text direction and alignment, also on the site. */
.article .ql-direction-rtl { direction: rtl; text-align: right; }
[dir="rtl"] .article .ql-direction-rtl { direction: ltr; text-align: left; }