/* ---------- Design tokens ---------- */
:root {
  /* From the federation logo: the navy of the name, the blue of the swoosh,
     the gold of the stars. */
  --deep: #003474;
  --deep-dark: #00224D;
  --deep-light: #0053A7;
  --accent: #D0A878;
  --accent-light: #E8CFA8;
  --paper: #ffffff;
  /* The cream of the light piece. */
  --cream: #F8F5EF;
  --cream-dark: #EFE8DB;
  --ink: #1A2233;
  --muted: #5B6474;
  --line: #E4DFD5;
  --green: #3f7d5c;
  --white: #ffffff;
  /* Text on the dark bands and in the footer. */
  --on-dark: #CBD5E1;
  --on-dark-head: #F1F5F9;
  --on-dark-muted: #94A3B8;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(0, 52, 116, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 52, 116, 0.16);
  /* Three sizes carry a page: display for the one headline that matters,
     title for card and tile headings, body for the rest. Meta is the small
     print: dates and labels. */
  --fs-display: clamp(2rem, 3.6vw, 3rem);
  --fs-title: 1.25rem;
  --fs-body: 1rem;
  --fs-meta: 0.78rem;
  /* Playfair and Inter have no Hebrew letters; the browser takes those from
     Frank Ruhl Libre and Rubik, letter by letter. */
  --font-display: 'Playfair Display', 'Frank Ruhl Libre', Georgia, serif;
  --font-head: 'Inter', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Rubik', ui-monospace, monospace;
  /* A draughts board as texture: light squares on whatever lies below. */
  --checker: repeating-conic-gradient(rgba(255,255,255,0.07) 0 25%, transparent 0 50%) 0 0 / 56px 56px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
/* A link takes the colour of its surroundings until a component gives it one,
   so a browser-blue link can never end up on a dark band. */
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--deep);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1, .display { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.12; font-weight: 700; }
h2 { font-size: 1.6rem; }
h3 { font-size: var(--fs-title); }
p { margin: 0 0 1em; }
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.muted { color: var(--muted); }
.icon { width: 20px; height: 20px; vertical-align: -4px; margin-inline-end: 6px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

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

/* ---------- Top bar ---------- */
.topbar { background: var(--deep-dark); color: var(--on-dark); font-family: var(--font-mono); font-size: var(--fs-meta); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.5rem; }
.topbar-sep { margin-inline: 0.7em; color: var(--on-dark-muted); }
.lang-switch { display: inline-flex; gap: 0.25rem; }
.lang-switch a:link, .lang-switch a:visited { color: var(--on-dark); padding: 0.2em 0.65em; border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; }
.lang-switch a:hover, .lang-switch a:active { color: var(--on-dark-head); background: rgba(255,255,255,0.12); }
.lang-switch a.active { background: var(--accent); color: var(--deep-dark); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.75rem; }
.brand { display: flex; align-items: center; gap: 0.85rem; flex: 0 1 auto; min-width: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--font-display); font-size: var(--fs-title); color: var(--deep); transition: color 0.15s; }
.brand:hover .brand-text strong { color: var(--deep-light); }
.brand-text.light strong { color: var(--on-dark-head); }

.main-nav { display: flex; align-items: center; gap: 1.6rem; }
.main-nav a:link, .main-nav a:visited { color: var(--deep); font-weight: 500; position: relative; padding: 0.4em 0; white-space: nowrap; }
/* A gold bar under the current page, and under the one the mouse is on. */
.main-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transition: transform 0.2s ease;
}
.main-nav a:hover, .main-nav a:active { color: var(--deep-light); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.nav-cta:link, .main-nav a.nav-cta:visited { border: 2px solid var(--deep); padding: 0.45em 1.2em; border-radius: 999px; }
.main-nav a.nav-cta::after { display: none; }
.main-nav a.nav-cta:hover, .main-nav a.nav-cta:active, .main-nav a.nav-cta.active { background: var(--deep); color: #fff; }

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

/* ---------- Federation band (home) ---------- */
.band { position: relative; overflow: hidden; background: var(--deep-dark); color: var(--on-dark); padding: 5rem 0; }
.band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--checker);
  -webkit-mask-image: radial-gradient(ellipse at 85% 15%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse at 85% 15%, #000, transparent 70%);
}
[dir="rtl"] .band::before {
  -webkit-mask-image: radial-gradient(ellipse at 15% 15%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse at 15% 15%, #000, transparent 70%);
}
.band .container { position: relative; }
.band h2 { color: var(--on-dark-head); }
.hero-inner { position: relative; z-index: 2; max-width: 640px; }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-light); margin-bottom: 1em;
}
.hero-sub { color: var(--on-dark); max-width: 34rem; }
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.band-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 4rem; }
.band-tile { border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); padding: 1.5rem; background: rgba(255,255,255,0.03); }
.band-icon { color: var(--accent); margin-bottom: 1rem; }
.band-icon .icon { width: 28px; height: 28px; margin: 0; }
.band-tile h3 { color: var(--on-dark-head); }
.band-tile p { color: var(--on-dark); margin: 0; }

/* ---------- Page header (all other pages) ---------- */
.page-header { position: relative; overflow: hidden; background: var(--deep-dark); color: var(--on-dark); padding: 3.5rem 0 3rem; }
.page-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--checker);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 70%);
          mask-image: linear-gradient(to left, #000, transparent 70%);
}
[dir="rtl"] .page-header::before {
  -webkit-mask-image: linear-gradient(to right, #000, transparent 70%);
          mask-image: linear-gradient(to right, #000, transparent 70%);
}
.page-header .container { position: relative; }
.page-header h1 { color: var(--on-dark-head); max-width: 900px; margin-bottom: 0; }
.page-header .hero-sub-dark { margin: 1rem 0 0; }
.hero-sub-dark { color: var(--on-dark); max-width: 620px; }

/* ---------- Sections ---------- */
.section { padding: 4rem 0; }
.section-tight { padding-top: 1rem; }
.section-alt { background: var(--cream); }
.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; }

/* A section label: a gold piece, the name, a rule, and an optional link. */
.section-label { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.section-label h2 {
  display: flex; align-items: center; gap: 0.6em; margin: 0; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--deep);
}
.section-label h2::before { content: ""; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 3px var(--deep-dark); }
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section-label > a { order: 2; white-space: nowrap; font-size: 0.9rem; }

/* ---------- Front page: lead story and the ones beside it ---------- */
.front { padding: 2.5rem 0 3rem; }
.front-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2rem; }
.front-side { display: flex; flex-direction: column; }
.more-row { text-align: center; margin: 2.5rem 0 0; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; align-items: start; }

/* ---------- Stories (news items) ---------- */
/* The title's link covers the whole story, so the photo is clickable too. */
.story { position: relative; }
.story-title a:link, .story-title a:visited { color: inherit; }
.story-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.story-title a:focus-visible { outline: none; }
.story:has(.story-title a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }
.story:hover .story-title a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

.story-media { overflow: hidden; background: var(--deep); }
.story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.story:hover .story-media img { transform: scale(1.04); }
/* A diagram is a whole board and is shown entire. */
.story-media.is-diagram { background: var(--cream-dark); padding: 0.75rem; }
.story-media.is-diagram img { object-fit: contain; }
/* No picture: a board with a gold piece in the middle. */
.story-media.is-empty {
  display: grid; place-items: center;
  background: repeating-conic-gradient(rgba(255,255,255,0.08) 0 25%, transparent 0 50%) 0 0 / 40px 40px, var(--deep);
}
.story-media.is-empty::after {
  content: ""; width: 26%; max-width: 5rem; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0 42%, var(--deep-dark) 42% 50%, var(--accent) 50% 68%, transparent 69%);
}
.story-meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); margin: 0 0 0.5rem; }
.story-excerpt {
  color: var(--muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.story-title { overflow-wrap: break-word; }

/* In a grid */
.story-card {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.story-card .story-media { aspect-ratio: 16 / 10; }
.story-card .story-body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.story-card .story-title {
  font-size: var(--fs-title); line-height: 1.3; margin: 0 0 0.5rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* The lead: the photo fills the card, the text sits on a dark fade. */
.story-lead { display: grid; min-height: 30rem; border-radius: var(--radius); overflow: hidden; background: var(--deep); }
.story-lead .story-media { position: absolute; inset: 0; }
.story-lead .story-media.is-diagram img { object-position: top; }
.story-lead .story-body {
  position: relative; align-self: end; padding: 7rem 2rem 2rem;
  background: linear-gradient(to top, rgba(0,34,77,0.96) 0%, rgba(0,34,77,0.8) 45%, rgba(0,34,77,0) 100%);
}
.story-lead .story-meta { color: var(--accent-light); }
.story-lead .story-title { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.15; color: #fff; margin: 0 0 0.75rem; }
.story-lead .story-excerpt { color: var(--on-dark); max-width: 60ch; -webkit-line-clamp: 2; }

/* Beside the lead: small rows */
.story-side { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-block: 1.25rem; }
.story-side:first-child { padding-top: 0; }
.story-side + .story-side { border-top: 1px solid var(--line); }
.story-side .story-media { aspect-ratio: 1; border-radius: var(--radius-sm); }
.story-side .story-meta { margin-bottom: 0.25rem; }
.story-side .story-title {
  font-size: var(--fs-body); font-weight: 600; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.story-side:hover .story-title { color: var(--deep-light); }

/* ---------- 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:link, .link-arrow:visited { font-weight: 600; color: var(--deep); }
.link-arrow:hover, .link-arrow:active { color: var(--deep-light); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

.cta-band { background: var(--cream); border-top: 1px solid var(--line); }
.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 { position: relative; background: var(--deep-dark); color: var(--on-dark); padding: 4rem 0 1.5rem; }
/* One row of board squares along the top edge. */
.site-footer::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 10px;
  background: repeating-conic-gradient(var(--accent) 0 25%, var(--deep) 0 50%) 0 0 / 20px 20px;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
/* The logo has a white ground, so it sits on a white card. */
.footer-logo { display: block; width: 11rem; height: auto; background: #fff; border-radius: var(--radius); padding: 0.5rem; margin-bottom: 1.25rem; }
.footer-brand .brand-text strong { font-size: var(--fs-title); }
.site-footer h4 {
  color: var(--on-dark-head); font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1em;
}
.site-footer a:link, .site-footer a:visited { color: var(--on-dark); }
.site-footer a:hover, .site-footer a:active { color: var(--accent-light); text-decoration: underline; text-underline-offset: 0.18em; }
.site-footer p { margin: 0.4em 0; }
.site-footer .muted { color: var(--on-dark-muted); margin-top: 0.8em; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--on-dark-muted);
}
.site-footer a.admin-link:link, .site-footer a.admin-link:visited { color: var(--on-dark-muted); }
.site-footer a.admin-link:hover { color: var(--on-dark-head); }

/* ---------- 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(--paper); flex-direction: column; align-items: stretch;
    padding: 0.5rem 1.5rem 1.5rem; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    display: none; gap: 0;
  }
  .main-nav.open { display: flex; }
  .main-nav a:link, .main-nav a:visited { padding: 0.8em 0; border-bottom: 1px solid var(--line); }
  .main-nav a::after { display: none; }
  .main-nav a.active { color: var(--deep-light); box-shadow: inset 3px 0 0 var(--accent); padding-inline-start: 0.8em; }
  [dir="rtl"] .main-nav a.active { box-shadow: inset -3px 0 0 var(--accent); }
  .main-nav a.nav-cta:link, .main-nav a.nav-cta:visited { text-align: center; margin-top: 1rem; border-bottom: 2px solid var(--deep); }
}
@media (max-width: 960px) {
  .front-grid { grid-template-columns: 1fr; }
  .story-lead { min-height: 24rem; }
  .band-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-grid { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 720px) {
  .facilities-grid { grid-template-columns: 1fr; }
  .band { padding: 3.5rem 0; }
  .band-tiles { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .story-lead .story-body { padding: 5rem 1.25rem 1.25rem; }
  .page-header { padding: 2.5rem 0 2rem; }
  .section { padding: 3rem 0; }
  .section-tight { padding-top: 0.5rem; }
}

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

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.news-meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); margin: 0 0 0.7em; }

/* Links in the text of a post or page: underlined, so they read as links. */
.prose a:not(.btn):not(.link-arrow):link, .prose a:not(.btn):not(.link-arrow):visited {
  color: var(--deep-light); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 0.18em;
}
.prose a:not(.btn):not(.link-arrow):hover, .prose a:not(.btn):not(.link-arrow):active { color: var(--deep); background: rgba(208, 168, 120, 0.2); }
.article-nav a:link, .article-nav a:visited { color: var(--deep); font-weight: 500; }
.article-nav a:hover, .article-nav a:active { color: var(--deep-light); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }

/* 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: 960px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .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: 56px; }
@media (max-width: 600px) {
  .brand-mark img { height: 44px; }
}

/* ---------- 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:link, .hero-media-stelling .link-arrow:visited { color: var(--accent-light); font-size: 0.9rem; }
.hero-media-stelling .link-arrow:hover, .hero-media-stelling .link-arrow:active { 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 */
/* The board photo has a navy ground like the band, so only the corners are rounded. */
.hero-media-board img { box-shadow: var(--shadow-lg); }

@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; }
h1, .display, .story-title { text-wrap: balance; }
/* Hyphens only where a long word would not fit otherwise; at headline size a
   broken word looks like a mistake. */
@media (max-width: 600px) {
  .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; on a Hebrew page Rubik
   sets the Latin letters too, so the two never mix in one line. */
[dir="rtl"] {
  --font-body: 'Rubik', 'Segoe UI', Arial, sans-serif;
  --font-head: 'Rubik', 'Segoe UI', Arial, sans-serif;
}
/* Uppercase and letter spacing mean nothing in Hebrew. */
[dir="rtl"] .eyebrow, [dir="rtl"] .section-label h2, [dir="rtl"] .site-footer h4 { letter-spacing: 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; }

/* ---------- Photo viewer for galleries (main.js) ---------- */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(8, 14, 26, 0.94); color: #fff; overflow: hidden;
}
.lightbox::backdrop { background: rgba(8, 14, 26, 0.94); }
html.lightbox-open { overflow: hidden; }
.lightbox-figure {
  margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3.5rem 4.5rem 1.5rem; gap: 0.8rem;
}
.lightbox-figure img {
  max-width: 100%; max-height: calc(100dvh - 7rem); width: auto; height: auto; object-fit: contain;
  border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); user-select: none;
}
.lightbox-figure figcaption { color: var(--on-dark); font-size: 0.92rem; text-align: center; max-width: 60ch; }
.lightbox-count {
  position: absolute; top: 1.1rem; inset-inline-start: 1.25rem; margin: 0;
  font-family: "JetBrains Mono", monospace; font-size: 0.85rem; color: var(--on-dark-muted);
}
.lightbox-btn {
  position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lightbox-btn[hidden] { display: none; }
.lightbox-close { top: 0.75rem; inset-inline-end: 0.75rem; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { inset-inline-start: 0.75rem; }
.lightbox-next { inset-inline-end: 0.75rem; }
/* One chevron pointing right; turned around for "previous" in LTR and for
   "next" in RTL, where the order of the photos runs the other way. */
.lightbox-prev svg, [dir="rtl"] .lightbox-next svg { transform: scaleX(-1); }
[dir="rtl"] .lightbox-prev svg { transform: none; }
@media (max-width: 640px) {
  .lightbox-figure { padding: 3.5rem 0.5rem 4.5rem; }
  .lightbox-figure img { max-height: calc(100dvh - 10rem); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 0.75rem; transform: none; }
}
.post-galerij a { cursor: zoom-in; }