/*
Theme Name: Zwembad De Waterman
Theme URI: https://zwembadwaterman.nl
Author: Lomero Media
Author URI: https://lomero.nl
Description: Maatwerk WordPress thema voor Openluchtzwembad De Waterman in Wateringen. Gebouwd zonder page builders, volledig op maat.
Version: 3.11.1
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waterman
Tags: custom-menu, custom-logo, featured-images, translation-ready
*/

#wm-content-start {
    scroll-margin-top: 80px;
}

/* Voorkom horizontaal scrollen */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Verberg scrollbar overlay (voor smooth scroll) */
.wm-overlay {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.wm-overlay::-webkit-scrollbar {
    display: none;
}

/* ═══════════════════════════════════
   CSS VARIABLES
   ═══════════════════════════════════ */
:root {
    --wm-dark-blue: #003b5c;
    --wm-water-gradient: linear-gradient(180deg, #D4EEF6 0%, #A8D8EA 100%);
    --wm-water-text: #1a4a5e;
    --wm-water-text-soft: rgba(26, 74, 94, 0.6);
    --wm-mid-blue: #005a7a;
    --wm-teal: #00a0b0;
    --wm-teal-light: #00b8c5;
    --wm-teal-pale: #e6f7f9;
    --wm-green: #5cc8e0;
    --wm-green-dark: #3aafcc;
    --wm-orange: #e8913a;
    --wm-orange-hover: #d4802e;
    --wm-yellow: #f5c842;
    --wm-white: #ffffff;
    --wm-light-bg: #f0f4f5;
    --wm-text: #1a2a3a;
    --wm-text-body: #4a5568;
    --wm-text-light: rgba(255, 255, 255, 0.7);
    --wm-border: #e2e6e9;
    --wm-radius: 12px;
    --wm-radius-lg: 16px;
    --wm-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --wm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--wm-text);
    background: #D4EEF6;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

.wm-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ═══════════════════════════════════
   FLOATING GLASS HEADER
   ═══════════════════════════════════ */
.wm-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    padding: 16px 0;
    transition: padding 0.3s ease, background 0.3s ease;
}

.wm-header.is-scrolled {
    padding: 8px 0;
    background: rgba(212, 238, 246, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 2px 20px rgba(0, 60, 90, 0.08);
}

.wm-header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Logo */
.wm-header__brand {
    flex-shrink: 0;
    z-index: 1102;
    position: relative;
}

/* Dual logo wrapper */
.wm-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.wm-logo-default,
.wm-logo-scrolled {
    transition: opacity 0.4s ease;
}

.wm-logo-default {
    display: flex;
    align-items: center;
}

.wm-logo-scrolled {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

.wm-logo-scrolled img {
    height: 42px !important;
    width: auto !important;
    max-height: 42px !important;
    object-fit: contain;
    display: block;
}

/* Bij scrollen: crossfade */
.wm-header.is-scrolled .wm-logo-default {
    opacity: 0;
    pointer-events: none;
}

.wm-header.is-scrolled .wm-logo-scrolled {
    opacity: 1;
    pointer-events: auto;
}

.custom-logo-link,
.wm-logo {
    display: flex;
    align-items: center;
    line-height: 0;
}

.custom-logo-link img,
.custom-logo,
.wm-logo img {
    height: 56px !important;
    width: auto !important;
    max-width: 220px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    display: block;
    transition: all 0.3s ease;
}

.wm-header.is-scrolled .custom-logo-link img,
.wm-header.is-scrolled .custom-logo,
.wm-header.is-scrolled .wm-logo img {
    height: 42px !important;
    max-height: 42px !important;
}

.wm-logo__svg {
    height: 46px;
    width: auto;
}

/* Glass Navigation Pill */
.wm-glass-nav {
    background: rgba(230, 245, 250, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: var(--wm-radius-full, 50px);
    padding: 12px 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 24px rgba(0, 60, 90, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.wm-header.is-scrolled .wm-glass-nav {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 24px rgba(0, 60, 90, 0.06);
}

.wm-header.is-scrolled .wm-glass-nav__menu > li > a {
    color: var(--wm-water-text);
}

.wm-header.is-scrolled .wm-glass-nav__menu > li > a:hover,
.wm-header.is-scrolled .wm-glass-nav__menu > li.current-menu-item > a {
    background: rgba(0, 160, 176, 0.1);
    color: var(--wm-teal);
}

.wm-header.is-scrolled .wm-header__extra-toggle {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

.wm-header.is-scrolled .wm-header__extra-toggle:hover {
    background: rgba(255, 255, 255, 0.8);
}

.wm-header.is-scrolled .wm-header__extra-toggle span {
    background: var(--wm-water-text);
}

.wm-glass-nav__menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-glass-nav__menu > li {
    position: relative;
}

.wm-glass-nav__menu > li > a {
    color: var(--wm-dark-blue);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.wm-glass-nav__menu > li > a:hover,
.wm-glass-nav__menu > li.current-menu-item > a,
.wm-glass-nav__menu > li.current_page_item > a {
    background: rgba(0, 160, 176, 0.12);
    color: var(--wm-teal);
}

/* Dropdown indicator */
.wm-glass-nav__menu > li.menu-item-has-children > a::after {
    content: '';
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.4;
    margin-left: 2px;
}

/* Sub-menu */
.wm-glass-nav__menu .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--wm-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    min-width: 200px;
    padding: 8px;
    list-style: none;
    z-index: 200;
    border: 1px solid rgba(0, 160, 176, 0.08);
}

.wm-glass-nav__menu > li.menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.wm-glass-nav__menu li:hover > .sub-menu { display: block; }

.wm-glass-nav__menu .sub-menu a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wm-text);
    border-radius: 8px;
    transition: background 0.2s;
}

.wm-glass-nav__menu .sub-menu a:hover {
    background: rgba(0, 160, 176, 0.08);
    color: var(--wm-dark-blue);
}

/* ── Rechts: CTA + Hamburger ── */
.wm-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* CTA Button */
.wm-header__cta {
    background: var(--wm-teal);
    color: var(--wm-white);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.wm-header__cta:hover {
    background: var(--wm-teal-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 160, 176, 0.3);
}

/* Hamburger toggle — pill-stijl, matcht glass nav */
.wm-header__extra-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    background: rgba(230, 245, 250, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s;
    box-shadow: 0 4px 24px rgba(0, 60, 90, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.wm-header__extra-toggle:hover {
    background: rgba(220, 240, 248, 0.8);
}

.wm-header__extra-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--wm-dark-blue);
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* Active: X + wit op donkere overlay */
.wm-header__extra-toggle.is-active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

.wm-header__extra-toggle.is-active span {
    background: white;
}

.wm-header__extra-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.wm-header__extra-toggle.is-active span:nth-child(2) {
    opacity: 0;
    width: 0;
}
.wm-header__extra-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Overlay open → header aanpassingen */
body.wm-overlay-open .wm-header {
    opacity: 0;
    pointer-events: none;
    background: transparent !important;
    box-shadow: none !important;
}
body.wm-overlay-open .wm-glass-nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
body.wm-overlay-open .wm-header__cta {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* ── Fullscreen Overlay (TNS-stijl) ── */
/* ══════════════════════════════════════════════════════
   OVERLAY MENU — video achtergrond
   ══════════════════════════════════════════════════════ */

.wm-overlay {
    position: fixed;
    inset: 0;
    background: #001828;
    z-index: 1200;
    transform: translateY(-100%);
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wm-overlay.is-open   { transform: translateY(0); }
.wm-overlay.is-closing { transform: translateY(-100%); transition-duration: .45s; }

/* ── Video achtergrond ── */
.wm-overlay__video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.wm-overlay__video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    will-change: transform;
}

/* Gradient over video: links donkerder voor leesbaarheid nav */
.wm-overlay__video-wrap::after {
    opacity: 0.9;
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(0,24,40,.82) 0%, rgba(0,24,40,.55) 50%, rgba(0,15,30,.25) 100%),
        linear-gradient(to top, rgba(0,10,20,.6) 0%, transparent 50%);
}

/* ── Topbalk ── */
.wm-overlay__topbar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 48px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,18,32,.4);
    backdrop-filter: blur(6px);
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .4s ease .05s, transform .4s ease .05s;
}
.wm-overlay.is-open .wm-overlay__topbar { opacity: 1; transform: translateY(0); }

.wm-overlay__tb-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.wm-overlay__tb-logo img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
}
.wm-overlay__tb-logo svg { width: 38px; height: 24px; }
.wm-overlay__tb-logo span {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    font-family: 'Syne', 'Nunito', 'Montserrat', sans-serif;
}

.wm-overlay__tb-close {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 7px 16px;
    cursor: pointer;
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: all .15s;
}
.wm-overlay__tb-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.wm-overlay__tb-close svg { width: 12px; height: 12px; stroke: currentColor; }

/* ── Inner grid ── */
.wm-overlay__inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Linkerkolom ── */
.wm-overlay__left {
    padding: 48px 10% 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Navigatielinks */
.wm-overlay__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-overlay__links > li {
    border-bottom: 1px solid rgba(255,255,255,.06);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .35s ease, transform .35s ease;
}
.wm-overlay__links > li:first-child { border-top: 1px solid rgba(255,255,255,.06); }
.wm-overlay.is-open .wm-overlay__links > li { opacity: 1; transform: translateY(0); }
.wm-overlay.is-open .wm-overlay__links > li:nth-child(1) { transition-delay: .08s; }
.wm-overlay.is-open .wm-overlay__links > li:nth-child(2) { transition-delay: .13s; }
.wm-overlay.is-open .wm-overlay__links > li:nth-child(3) { transition-delay: .18s; }
.wm-overlay.is-open .wm-overlay__links > li:nth-child(4) { transition-delay: .23s; }
.wm-overlay.is-open .wm-overlay__links > li:nth-child(5) { transition-delay: .28s; }
.wm-overlay.is-open .wm-overlay__links > li:nth-child(6) { transition-delay: .33s; }
.wm-overlay.is-open .wm-overlay__links > li:nth-child(7) { transition-delay: .38s; }
.wm-overlay.is-open .wm-overlay__links > li:nth-child(8) { transition-delay: .43s; }
.wm-overlay:not(.is-open) .wm-overlay__links > li { transition-delay: 0s; }

.wm-overlay__links > li > a {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Syne', 'Nunito', 'Montserrat', sans-serif;
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 800;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    padding: 10px 0;
    letter-spacing: -.025em;
    line-height: 1.1;
    transition: color .2s, gap .2s;
}
.wm-overlay__links > li:hover > a { color: #5cc8e0; gap: 22px; }
.wm-overlay__links .current-menu-item > a,
.wm-overlay__links .current_page_item > a { color: #5cc8e0; }

.wm-ov-num {
    font-size: 11px;
    font-weight: 600;
    color: #0a8eac;
    min-width: 20px;
    font-family: 'Segoe UI', monospace, sans-serif;
    opacity: .7;
    flex-shrink: 0;
    align-self: center;
}

/* Sub-menu */
.wm-overlay__links .sub-menu { list-style:none; padding: 0 0 8px 36px; }
.wm-overlay__links .sub-menu li { border:none; opacity:1 !important; transform:none !important; }
.wm-overlay__links .sub-menu a { font-size:14px; font-weight:500; color:rgba(255,255,255,.45); font-family:'Segoe UI',sans-serif; padding:3px 0; }
.wm-overlay__links .sub-menu a:hover { color:#fff; }
.wm-overlay__links .sub-menu a::before,
.wm-overlay__links .sub-menu a::after { display:none !important; }

/* Footer links */
.wm-overlay__foot-links {
    display: flex;
    gap: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 4px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease .42s, transform .4s ease .42s;
}
.wm-overlay.is-open .wm-overlay__foot-links { opacity: 1; transform: translateY(0); }
.wm-overlay:not(.is-open) .wm-overlay__foot-links { transition-delay: 0s; }

.wm-overlay__foot-links a {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255,255,255,.32);
    text-decoration: none;
    transition: color .15s;
}
.wm-overlay__foot-links a:hover { color: rgba(255,255,255,.8); }

/* ── Rechterkolom ── */
.wm-overlay__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 40px 32px 48px;
    border-left: 1px solid rgba(255,255,255,.05);
    overflow-y: auto;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease .3s, transform .45s ease .3s;
}
.wm-overlay.is-open .wm-overlay__right { opacity: 1; transform: translateY(0); }

/* Status */
.wm-overlay__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    width: fit-content;
}
.wm-overlay__status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wm-overlay__status--open        { color: #4ddb72; }
.wm-overlay__status--open .wm-overlay__status-dot     { background: #4ddb72; animation: wm-pulse 2s infinite; }
.wm-overlay__status--dicht       { color: #ff7070; }
.wm-overlay__status--dicht .wm-overlay__status-dot    { background: #ff7070; }
.wm-overlay__status--binnenkort  { color: #ffd060; }
.wm-overlay__status--binnenkort .wm-overlay__status-dot { background: #ffd060; }

@keyframes wm-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(77,219,114,.5); }
    50%      { box-shadow: 0 0 0 5px rgba(77,219,114,0); }
}

/* Info kaart */
.wm-overlay__card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.wm-overlay__card-tag {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: #0a8eac;
}
.wm-overlay__card-title {
    font-family: 'Syne', 'Nunito', 'Montserrat', sans-serif;
    font-size: 17px; font-weight: 800;
    color: #fff; line-height: 1.2; margin: 0;
}
.wm-overlay__card-sub {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 11.5px; color: rgba(255,255,255,.45); margin: 0;
}
.wm-overlay__card-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; padding: 10px 18px;
    background: #0a8eac; color: #fff;
    border-radius: 8px; font-size: 12.5px; font-weight: 600;
    text-decoration: none; width: fit-content;
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: background .15s;
}
.wm-overlay__card-btn:hover { background: #078099; color: #fff; }
.wm-overlay__card-btn svg { width: 13px; height: 13px; stroke: #fff; }

/* Snellinks */
.wm-overlay__quick { display: flex; flex-direction: column; gap: 0; }
.wm-overlay__quick-label {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: rgba(255,255,255,.2); margin-bottom: 6px;
}
.wm-overlay__quick a {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,.32); text-decoration: none;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    display: flex; justify-content: space-between; align-items: center;
    transition: color .12s;
}
.wm-overlay__quick a:last-child { border-bottom: none; }
.wm-overlay__quick a:hover { color: rgba(255,255,255,.8); }
.wm-overlay__quick a::after { content: '→'; font-size: 10px; opacity: .35; }

/* Header verbergen als overlay open */
body.wm-overlay-open .wm-header {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

/* ── Responsive ── */
@media (max-width: 760px) {
    .wm-overlay__inner  { grid-template-columns: 1fr; }
    .wm-overlay__right  { border-left: none; border-top: 1px solid rgba(255,255,255,.06); padding: 24px 28px 36px; }
    .wm-overlay__left   { padding: 28px 28px 24px; }
    .wm-overlay__topbar { padding: 16px 24px; }
    .wm-overlay__links > li > a { font-size: clamp(20px, 2.2vw, 30px); }
    .wm-overlay__video-wrap video { opacity: 1; }
}
@media (max-width: 480px) {
    .wm-overlay__links > li > a { font-size: clamp(20px, 2.2vw, 30px); }
}


/* ═══════════════════════════════════
   HERO
   ═══════════════════════════════════ */
.wm-hero {
    position: relative;
    overflow: visible;
}

.wm-hero__photo {
    width: 100%;
    height: 78vh;
    min-height: 480px;
    max-height: 700px;
    position: relative;
    background: var(--wm-dark-blue);
}

.wm-hero__photo img,
.wm-hero__photo .wm-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

/* Image wrapper (sits on top of video) */
.wm-hero__img-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.wm-hero__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wm-hero__img-wrap--has-video {
    transition: opacity 1.5s ease;
}

.wm-hero__img-wrap--has-video.is-faded {
    opacity: 0;
    pointer-events: none;
}

/* Background video */
.wm-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.wm-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 0 24px;
    z-index: 4; /* boven de wave (z-index: 3) zodat buttons klikbaar blijven */
    text-align: center;
}

.wm-hero__subtitel {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 2px;
}

@media (max-width: 600px) {
    .wm-hero__subtitel {
        font-size: 11px;
        padding: 4px 12px;
        letter-spacing: .08em;
        margin-bottom: 2px;
    }
	.center {
  margin: auto !important;
  padding: 0 20px;
}
}
	.center {
  margin: auto !important;
}
.wm-hero__title {
    color: var(--wm-white);
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 800;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
    letter-spacing: -0.5px;
}

/* Scroll-down indicator (TNS-stijl cirkel) — net boven de golven */
.wm-hero__scroll {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5; /* boven wave (3) én overlay (4) */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(230, 245, 250, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 4px 24px rgba(0, 60, 90, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    display: grid;
    place-items: center;
    animation: wm-bounce 2.5s ease-in-out infinite;
    transition: border-color 0.2s;
    cursor: pointer;
}

.wm-hero__scroll:hover {
    background: rgba(240, 250, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.wm-hero__scroll svg {
    opacity: 0.7;
    color: var(--wm-dark-blue);
}

@keyframes wm-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* Wave that sits ON TOP of the hero photo */
.wm-hero__wave {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    z-index: 3;
    line-height: 0;
    pointer-events: none; /* decoratief — mag nooit clicks blokkeren */
}

.wm-hero__wave svg {
    display: block;
    width: 100%;
    height: 200px;
}

/* Haarlijn onder de golf wegwerken.
   De browser tekent de onderste pixelrij van een SVG met halve dekking.
   Op schermen met een gebroken pixelverhouding, wat vrijwel elke telefoon
   is, valt die rij tussen twee fysieke pixels in en schemert het donkerblauw
   van de hero erdoorheen als een dun streepje.
   Deze strook legt de eindkleur van de golf massief over die naad heen. De
   golf is daar over de volle breedte toch al effen, dus er verandert visueel
   niets, ook niet op desktop. Wijkt de eindkleur ergens af, dan kun je
   --wm-wave-end op dat element zetten. */

.wm-hero__wave::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 6px;
    background: var(--wm-wave-end, #D4EEF6);
    pointer-events: none;
}

/* Buttons — pill/capsule style */
.wm-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.wm-btn--orange {
    background: var(--wm-orange);
    color: var(--wm-white);
}

.wm-btn--orange:hover {
    background: var(--wm-orange-hover);
    transform: translateY(-1px);
}

.wm-btn--teal {
    background: var(--wm-teal);
    color: var(--wm-white);
}

.wm-btn--teal:hover {
    background: var(--wm-teal-light);
}

.wm-btn--outline {
    background: transparent;
    color: var(--wm-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.wm-btn--outline:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════
   WAVE DIVIDERS (multi-layer, realistic)
   ═══════════════════════════════════ */
.wm-wave {
    display: block;
    width: 100%;
    line-height: 0;
    margin-top: -1px;
    margin-bottom: -1px;
}

.wm-wave svg {
    display: block;
    width: 100%;
    height: 160px;
}

.wm-wave--overlap {
    position: relative;
    z-index: 4;
    margin-top: -60px;
}

/* ═══════════════════════════════════
   ICON ROW (Quick Access)
   ═══════════════════════════════════ */
.wm-icons {
    padding: 24px 0 28px;
    background: var(--wm-water-gradient);
    position: relative;
    z-index: 2;
}

.wm-icons__grid {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.wm-icon-item {
    text-align: center;
    flex: 1;
    transition: transform 0.2s;
}

.wm-icon-item:hover {
    transform: translateY(-4px);
}

.wm-icon-item__circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.7);
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    transition: all 0.3s;
}

.wm-icon-item:hover .wm-icon-item__circle {
    background: var(--wm-teal);
    border-color: var(--wm-teal);
}

.wm-icon-item__circle svg {
    width: 40px;
    height: 40px;
    stroke: var(--wm-water-text);
    fill: none;
    stroke-width: 1.6;
}

.wm-icon-item:hover .wm-icon-item__circle svg {
    stroke: white;
}

.wm-icon-item__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--wm-water-text);
}

/* ═══════════════════════════════════
   CTA BANNERS (wave section)
   ═══════════════════════════════════ */
.wm-cta-wave {
    position: relative;
    z-index: 2;
    padding: 95px 0 0 0;
    background: #00a0b0;
}

.wm-cta-wave__grid {
    display: flex;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.wm-cta-box {
    flex: 1;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    color: var(--wm-white);
    transition: all 0.25s;
    display: block;
}

.wm-cta-box:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.wm-cta-box__title {
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 4px;
}

.wm-cta-box__desc {
    font-size: 15px;
    font-weight: 600;
    opacity: 0.85;
}


/* ── CTA Wave: quote modus ── */
.wm-cta-quote {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 40px 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.wm-cta-quote__mark {
    font-size: 100px;
    line-height: .6;
    color: rgba(255,255,255,.2);
    font-family: Georgia, serif;
    margin-bottom: -8px;
    user-select: none;
}

.wm-cta-quote__text {
    font-size: clamp(20px, 2.8vw, 28px);
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
    letter-spacing: -.01em;
}

.wm-cta-quote__auteur {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    font-style: normal;
    font-weight: 500;
}
.wm-cta-quote__auteur::before { content: '— '; }

@media (max-width: 600px) {
    .wm-cta-quote { padding: 0 24px 60px; }
    .wm-cta-quote__mark { font-size: 72px; }
}

/* ═══════════════════════════════════
   ABOUT / OVER ONS (circle photo mosaic)
   ═══════════════════════════════════ */
.wm-about {
    padding: 80px 0;
    background: var(--wm-white);
    position: relative;
    z-index: 2;
}

.wm-about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Photo circles layout - matching surf school reference */
.wm-about__photos {
    position: relative;
    height: 500px;
    width: 100%;
}

/* Gutenberg columns: gedraag je als onze grid */
.wm-about .wp-block-columns.wm-about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Gutenberg photos column: geen eigen padding/gap */
.wm-about__photos-col {
    flex-basis: unset !important;
}

/* Gutenberg group als photos wrapper */
.wm-about__photos.wp-block-group {
    position: relative;
    height: 500px;
    width: 100%;
}

.wm-about__circle {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    margin: 0;
}

/* Reset Gutenberg figure defaults */
figure.wm-about__circle {
    margin: 0;
    padding: 0;
}

.wm-about__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cirkel 1: groot links-boven */
.wm-about__circle--lg {
    width: 260px;
    height: 260px;
    top: 30px;
    left: 0;
}

/* Cirkel 2: klein rechtsboven */
.wm-about__circle--sm.wm-about__circle--top {
    width: 120px;
    height: 120px;
    top: 0;
    left: 280px;
}

/* Cirkel 3: groot rechts-midden (de dominante, overlapt anderen) */
.wm-about__circle--md {
    width: 280px;
    height: 280px;
    top: 180px;
    left: 160px;
    z-index: 2;
}

/* Cirkel 4: klein linksonder */
.wm-about__circle--sm.wm-about__circle--bottom {
    width: 130px;
    height: 130px;
    top: 350px;
    left: 10px;
}

/* Placeholder in circles */
.wm-about__circle-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #e8f4f8, #d0e8ef);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--wm-teal);
    text-align: center;
}

.wm-about__circle-placeholder span {
    font-size: 11px;
    font-weight: 600;
}

/* Right content */
.wm-about__content {
    max-width: 480px;
}

/* Gutenberg column als content wrapper */
.wp-block-column.wm-about__content {
    max-width: 480px;
    flex-basis: unset !important;
}

/* Gutenberg button teal pill stijl */
/* Wrapper div moet ook pill-vorm hebben */
.wp-block-button,
.wp-block-button.is-style-fill {
    border-radius: 50px !important;
    overflow: hidden;
}

.wp-block-button__link,
.wp-block-button .wp-block-button__link,
.wp-element-button {
    border-radius: 50px !important;
}

.wm-btn--teal .wp-block-button__link,
.wp-block-button.wm-btn--teal .wp-block-button__link,
.wm-page-content .wp-block-button.wm-btn--teal .wp-block-button__link,
.wm-about .wp-block-button .wp-block-button__link,
.wm-page-content .wp-block-button .wp-block-button__link,
.wm-about .wp-block-button__link,
.wm-page-content .wp-block-button__link,
div.wm-btn--teal a.wp-block-button__link,
a.wp-block-button__link.has-wm-teal-background-color {
    background-color: var(--wm-teal) !important;
    border-radius: 50px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 32px !important;
    transition: background 0.2s;
    border: none !important;
}

.wm-btn--teal .wp-block-button__link:hover,
.wp-block-button.wm-btn--teal .wp-block-button__link:hover,
.wm-about .wp-block-button .wp-block-button__link:hover,
a.wp-block-button__link.has-wm-teal-background-color:hover {
    background-color: var(--wm-teal-light) !important;
}

.wm-about__eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--wm-teal);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-style: italic;
    margin-bottom: 12px;
}

.wm-about__title {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 900;
    color: var(--wm-dark-blue);
    line-height: 1.1;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.wm-about__content p {
    font-size: 15px;
    color: var(--wm-text-body);
    line-height: 1.8;
    margin-bottom: 14px;
}

/* Responsive */
@media (max-width: 900px) {
    .wm-about__inner,
    .wm-about .wp-block-columns.wm-about__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        display: grid;
    }
    .wm-about__photos,
    .wm-about__photos.wp-block-group {
        height: 380px;
        max-width: 420px;
        margin: 0 auto;
    }
    .wm-about__circle--lg { width: 190px; height: 190px; top: 20px; left: 0; }
    .wm-about__circle--sm.wm-about__circle--top { width: 90px; height: 90px; top: 0; left: 200px; }
    .wm-about__circle--md { width: 210px; height: 210px; top: 140px; left: 110px; }
    .wm-about__circle--sm.wm-about__circle--bottom { width: 100px; height: 100px; top: 270px; left: 0; }
    .wm-about__content,
    .wp-block-column.wm-about__content { text-align: center; max-width: 100%; }
}

/* ═══════════════════════════════════
   CARDS SECTION
   ═══════════════════════════════════ */
.wm-cards {
    background: var(--wm-water-gradient);
    padding: 72px 0;
    position: relative;
    z-index: 2;
}

.wm-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.wm-card {
    background: var(--wm-white);
    border-radius: var(--wm-radius-lg);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.wm-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.wm-card__img {
    height: 180px;
    overflow: hidden;
    position: relative;
}

.wm-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.wm-card:hover .wm-card__img img {
    transform: scale(1.05);
}

/* Card as link */
a.wm-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Angled bottom */
.wm-card__img::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 30px;
    background: var(--wm-white);
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 70%);
}

/* Photo placeholder (shown when no image uploaded) */
.wm-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, rgba(0, 160, 176, 0.15), rgba(0, 90, 122, 0.3));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    padding: 20px;
}

.wm-card__placeholder svg {
    opacity: 0.5;
}

.wm-card__placeholder span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    max-width: 160px;
}

.wm-card__body {
    padding: 16px 20px 24px;
    text-align: center;
}

.wm-card__title {
    color: var(--wm-water-text);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
}

.wm-card__desc {
    color: var(--wm-water-text-soft);
    font-size: 13px;
    margin-bottom: 16px;
}

.wm-card__btn {
    display: inline-block;
    background: var(--wm-teal);
    color: var(--wm-white);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 50px;
    transition: background 0.2s;
}

.wm-card__btn:hover {
    background: var(--wm-teal-light);
}

/* ═══════════════════════════════════
   ROOSTER / SCHEDULE
   ═══════════════════════════════════ */
.wm-rooster {
    padding: 32px 0 48px;
    background: var(--wm-white);
}

.wm-rooster__header {
    text-align: center;
    margin-bottom: 24px;
}

.wm-rooster__subtitle {
    font-size: 14px;
    color: var(--wm-teal);
    font-weight: 600;
    margin-bottom: 4px;
}

.wm-rooster__subtitle a {
    color: var(--wm-teal);
    font-weight: 700;
    text-decoration: underline;
}

.wm-rooster__title {
    font-size: 28px;
    font-weight: 800;
    color: var(--wm-dark-blue);
}

.wm-rooster__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 2px solid var(--wm-dark-blue);
    margin-bottom: 4px;
}

.wm-rooster__nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wm-rooster__nav-btn {
    background: var(--wm-dark-blue);
    color: var(--wm-white);
    border: none;
    padding: 7px 18px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.wm-rooster__nav-btn:hover {
    background: var(--wm-mid-blue);
}

.wm-rooster__week {
    font-size: 14px;
    font-weight: 700;
    color: var(--wm-dark-blue);
}

.wm-rooster__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--wm-border);
    border: 1px solid var(--wm-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.wm-rooster__day {
    background: var(--wm-white);
    padding: 12px;
    min-height: 190px;
}

.wm-rooster__day-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wm-border);
}

.wm-rooster__day-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wm-dark-blue);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.wm-rooster__day-icon svg {
    width: 14px;
    height: 14px;
    fill: white;
}

.wm-rooster__day-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--wm-dark-blue);
    line-height: 1;
}

.wm-rooster__day-name {
    font-size: 11px;
    color: var(--wm-text-body);
    font-weight: 600;
}

.wm-rooster__event {
    background: var(--wm-dark-blue);
    color: var(--wm-white);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.wm-rooster__event--teal { background: var(--wm-teal); }
.wm-rooster__event--blue { background: #2a7ab5; }
.wm-rooster__event--light { background: #3a6090; }

.wm-rooster__event small {
    display: block;
    opacity: 0.7;
    font-weight: 400;
    font-size: 10px;
}

.wm-rooster__more {
    font-size: 11px;
    color: var(--wm-teal);
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
}

/* ═══════════════════════════════════
   NIEUWS SLIDER
   ═══════════════════════════════════ */
.wm-news-slider {
    padding: 40px 0 48px;
    background: var(--wm-water-gradient);
    position: relative;
    overflow: hidden;
}

/* Header: titel links, filters rechts */
.wm-news-slider__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.wm-news-slider__header .wm-section-header__eyebrow {
    text-align: left;
}

.wm-news-slider__header .wm-section-header__title {
    margin-bottom: 0;
    color: var(--wm-water-text);
}

/* Rechterkolom: filters + "alle berichten" link */
.wm-news-slider__header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.wm-news-slider__all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wm-teal);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}

.wm-news-slider__all-link:hover {
    color: var(--wm-water-text);
    gap: 10px;
}

.wm-news-slider__all-link svg {
    transition: transform 0.3s ease;
}

.wm-news-slider__all-link:hover svg {
    transform: translateX(3px);
}

/* Pill filter buttons */
.wm-news-slider__filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wm-pill-filter {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 50px;
    border: 2px solid rgba(26, 74, 94, 0.2);
    background: transparent;
    color: var(--wm-water-text-soft);
    cursor: pointer;
    transition: all 0.2s;
}

.wm-pill-filter:hover {
    border-color: var(--wm-teal);
    color: var(--wm-water-text);
}

.wm-pill-filter.is-active {
    background: var(--wm-teal);
    border-color: var(--wm-teal);
    color: var(--wm-white);
}

/* Wrapper: full width, scrollbaar, GEEN padding-left (spacer doet dat) */
.wm-news-slider__wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 10px;
    margin-top: -10px;
    padding-right: 48px;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    cursor: grab;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wm-news-slider__wrapper::-webkit-scrollbar {
    display: none;
}

.wm-news-slider__wrapper:active {
    cursor: grabbing;
}

/* Track: flex row met spacer als eerste element */
.wm-news-slider__track {
    display: flex;
    gap: 20px;
    width: max-content;
}

/* Spacer: onzichtbaar element dat eerste kaart naar container-edge duwt */
.wm-news-slider__spacer {
    flex-shrink: 0;
    width: var(--wm-slider-offset, 24px);
    scroll-snap-align: start;
}

/* Dots */
.wm-news-slider__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.wm-news-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(26, 74, 94, 0.2);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.wm-news-slider__dot.is-active {
    background: var(--wm-teal);
    width: 24px;
    border-radius: 4px;
}

/* Individual slide card */
.wm-news-slide {
    flex: 0 0 320px;
    scroll-snap-align: start;
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1;
}

.wm-news-slide.is-hidden {
    display: none;
}

.wm-news-slide.is-fading-out {
    opacity: 0;
    transform: scale(0.96);
}

.wm-news-slide.is-fading-in {
    opacity: 0;
    transform: translateY(8px);
}

.wm-news-slide__link {
    display: flex;
    flex-direction: column;
    background: var(--wm-white);
    border-radius: var(--wm-radius-lg);
    overflow: hidden;
    border: 1px solid var(--wm-border);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.wm-news-slide__link:hover {
    transform: translateY(-4px);
    box-shadow: var(--wm-shadow);
}

.wm-news-slide__img {
    height: 180px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.wm-news-slide__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wm-news-slide__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--wm-teal), var(--wm-dark-blue));
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.3);
}

.wm-news-slide__date {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--wm-white);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    color: var(--wm-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wm-news-slide__body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Categorie label */
.wm-news-slide__cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wm-teal);
    margin-bottom: 6px;
}

.wm-news-slide__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--wm-text);
    margin-bottom: 6px;
    line-height: 1.35;
    /* Clamp op 2 regels */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wm-news-slide__excerpt {
    font-size: 13px;
    color: var(--wm-text-body);
    line-height: 1.6;
    margin-bottom: 12px;
    /* Clamp op 3 regels */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.wm-news-slide__btn {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--wm-teal);
    transition: gap 0.2s;
    margin-top: auto;
}

/* CTA afsluiter-kaart */
.wm-news-slide--cta {
    flex: 0 0 280px;
}

.wm-news-slide__link--cta {
    background: linear-gradient(135deg, var(--wm-teal), var(--wm-mid-blue)) !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wm-news-slide__link--cta:hover {
    background: linear-gradient(135deg, #00b8c8, var(--wm-teal)) !important;
}

.wm-news-slide__cta-inner {
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.wm-news-slide__cta-inner svg {
    color: var(--wm-white);
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.wm-news-slide__link--cta:hover .wm-news-slide__cta-inner svg {
    transform: translateX(6px);
    opacity: 1;
}

.wm-news-slide__cta-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--wm-white);
    line-height: 1.3;
}

.wm-news-slide__cta-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

/* ═══════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════ */
.wm-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.wm-section-header__eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--wm-teal);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.wm-section-header__title {
    font-size: 30px;
    font-weight: 800;
    color: var(--wm-dark-blue);
    margin-bottom: 8px;
}

.wm-section-header__desc {
    font-size: 15px;
    color: var(--wm-text-body);
    max-width: 560px;
    margin: 0 auto;
}

/* Water-bg variant */
.wm-section-header--light .wm-section-header__title {
    color: var(--wm-water-text);
}

.wm-section-header--light .wm-section-header__desc {
    color: var(--wm-water-text-soft);
}

/* ═══════════════════════════════════
   DONATE CTA
   ═══════════════════════════════════ */
.wm-donate {
    padding: 72px 0;
    background: var(--wm-white);
    position: relative;
    z-index: 2;
}

.wm-donate__banner {
    background: var(--wm-water-gradient);
    border-radius: var(--wm-radius-lg);
    padding: 56px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

.wm-donate__banner::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(0, 160, 176, 0.08);
}

.wm-donate__title {
    font-size: 28px;
    font-weight: 800;
    color: var(--wm-water-text);
    margin-bottom: 8px;
}

.wm-donate__desc {
    font-size: 15px;
    color: var(--wm-water-text-soft);
    max-width: 480px;
    line-height: 1.7;
}

.wm-donate__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════
   CONTACT CTA
   ═══════════════════════════════════ */
.wm-contact-cta {
    padding: 60px 0;
    text-align: center;
}

.wm-contact-cta__icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wm-teal), var(--wm-green));
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    font-size: 42px;
}

.wm-contact-cta__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--wm-dark-blue);
    font-style: italic;
    margin-bottom: 12px;
}

.wm-contact-cta p {
    font-size: 15px;
    color: var(--wm-text-body);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.wm-contact-cta p a {
    color: var(--wm-teal);
    font-weight: 700;
}

/* ═══════════════════════════════════
   FOOTER
   ═══════════════════════════════════ */
.wm-footer {
    background: var(--wm-dark-blue);
    color: var(--wm-white);
}

.wm-footer__top {
    display: flex;
    gap: 64px;
    padding: 64px 0 48px;
}

/* Brand kolom */
.wm-footer__brand {
    flex: 0 0 280px;
}

.wm-footer__logo img {
    height: 48px !important;
    width: auto !important;
    max-height: 48px !important;
    object-fit: contain;
    filter: brightness(0) invert(1);
    margin-bottom: 12px;
}

.wm-footer__logo-text {
    font-size: 22px;
    font-weight: 800;
    color: white;
    display: block;
    margin-bottom: 12px;
}

.wm-footer__name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 4px 0 2px;
    line-height: 1.2;
}

.wm-footer__tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Social icons */
.wm-footer__social {
    display: flex;
    gap: 8px;
}

.wm-footer__social a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s;
}

.wm-footer__social a:hover {
    background: rgba(0, 160, 176, 0.2);
    color: var(--wm-teal-light);
}

/* Menu kolommen */
.wm-footer__menus {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.wm-footer__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wm-white);
    margin-bottom: 16px;
}

.wm-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wm-footer__links li a,
.wm-footer__col a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.2s;
    line-height: 1.6;
}

.wm-footer__links li a:hover,
.wm-footer__col a:hover {
    color: var(--wm-teal-light);
}

/* Copyright bar */
.wm-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wm-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.wm-footer__bottom p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

.wm-footer__bottom a {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
}

.wm-footer__bottom a:hover {
    color: var(--wm-teal-light);
}

/* ═══════════════════════════════════
   WHATSAPP FLOAT
   ═══════════════════════════════════ */
.wm-whatsapp {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    z-index: 200;
    transition: transform 0.2s;
}

.wm-whatsapp:hover {
    transform: scale(1.08);
}

.wm-whatsapp svg {
    width: 28px;
    height: 28px;
    fill: white;
}

/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */
@media (max-width: 1024px) {
    .wm-cards__grid { grid-template-columns: repeat(2, 1fr); }
    .wm-rooster__grid { grid-template-columns: repeat(4, 1fr); }
    .wm-news__grid { grid-template-columns: repeat(2, 1fr); }
    .wm-donate__banner { flex-direction: column; text-align: center; padding: 40px 32px; }
}

@media (max-width: 768px) {
    /* Header mobiel */
    .wm-glass-nav { display: none; }
    .wm-header__cta { display: none; }
    .wm-header__right { margin-left: auto; }
    .custom-logo-link img,
    .custom-logo,
    .wm-logo img {
        height: 40px !important;
        max-height: 40px !important;
    }
    .wm-logo-scrolled img {
        height: 34px !important;
        max-height: 34px !important;
    }

    /* Overlay mobiel: kleiner font */
    .wm-overlay__links a {
        font-size: 22px;
        padding: 16px 0;
    }
    .wm-overlay__footer {
        flex-direction: column;
        gap: 24px;
    }

    /* Hero: compacter */
    .wm-hero__photo { height: 70vh; min-height: 400px; }
    .wm-hero__title { font-size: 28px; }
    .wm-hero__scroll { bottom: 36px; width: 40px; height: 40px; }

    /* Golven mobiel */
    .wm-hero__wave svg { height: 60px; }
    .wm-wave svg { height: 50px; }

    /* Iconen: 3+2 grid */
    .wm-icons { padding: 24px 0 28px; }
    .wm-icons__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 12px;
        justify-items: center;
    }
    .wm-icon-item { min-width: unset; flex: unset; }
    .wm-icon-item__circle { width: 64px; height: 64px; }
    .wm-icon-item__circle svg { width: 28px; height: 28px; }
    .wm-icon-item__label { font-size: 11px; }

    /* CTA boxen */
    .wm-cta-wave__grid { flex-direction: column; padding: 0 16px; }

    /* Cards */
    .wm-cards__grid { grid-template-columns: 1fr; }

    /* Rooster */
    .wm-rooster__grid { grid-template-columns: repeat(2, 1fr); }

    /* Over ons cirkels */
    .wm-about { padding: 48px 0; }
    .wm-about__inner { gap: 32px; }

    /* Nieuws / Footer */
    .wm-news__grid { grid-template-columns: 1fr; }

    /* News slider mobiel */
    .wm-news-slider__header { flex-direction: column; align-items: flex-start; }
    .wm-news-slider__header-right { align-items: flex-start; width: 100%; }
    .wm-news-slider__filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .wm-pill-filter { white-space: nowrap; flex-shrink: 0; }
    .wm-news-slide { flex: 0 0 280px; }
    .wm-news-slider__wrapper { padding-right: 16px; }
    .wm-footer__top { flex-direction: column; gap: 40px; padding: 48px 0 40px; }
    .wm-footer__brand { flex: unset; }
    .wm-footer__menus { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .wm-footer__bottom-inner { flex-direction: column; gap: 4px; text-align: center; }
    .wm-donate__actions { flex-direction: column; width: 100%; }
}

/* Extra small screens */
@media (max-width: 480px) {
    .wm-hero__wave svg { height: 45px; }
    .wm-wave svg { height: 35px; }
    .wm-hero__title { font-size: 24px; }
    .wm-hero__scroll { bottom: 28px; width: 36px; height: 36px; }
    .wm-icons__grid { grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
    .wm-icon-item__circle { width: 56px; height: 56px; }
    .wm-icon-item__circle svg { width: 24px; height: 24px; }
    .wm-icon-item__label { font-size: 10px; }
}

/* ═══════════════════════════════════
   GUTENBERG PAGE CONTENT (frontpage)
   ═══════════════════════════════════ */
.wm-page-content {
    /* Clean wrapper — Gutenberg blocks bepalen hun eigen padding/achtergrond */
}

.wm-page-content > .wm-about {
    /* Behoud exact dezelfde styling als het hardcoded template */
}

/* ═══════════════════════════════════
   WORDPRESS DEFAULTS (images, alignments, etc.)
   ═══════════════════════════════════ */
.alignleft { float: left; margin-right: 20px; margin-bottom: 10px; }
.alignright { float: right; margin-left: 20px; margin-bottom: 10px; }
.aligncenter { display: block; margin: 0 auto; }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--wm-text-body); text-align: center; padding: 6px 0; }

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Page / Post content */
.wm-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 24px;
}

.wm-content h1,
.wm-content h2,
.wm-content h3 {
    color: var(--wm-dark-blue);
    margin-bottom: 16px;
}

.wm-content p {
    color: var(--wm-text-body);
    line-height: 1.8;
    margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════
   OPENINGSTIJDEN BLOCK
   CSS is gebaseerd op / identiek aan waterman-rooster plugin stijlen.
   ═══════════════════════════════════════════════════════════ */

/* Sectie-achtergrond */
.wm-openingstijden {
    background: var(--wm-water-gradient);
    padding: 40px 0 0;
}

/* Header */
.wm-openingstijden__header {
    text-align: center;
    margin-bottom: 28px;
}

.wm-openingstijden__title {
    font-family: 'Nunito', 'Montserrat', sans-serif;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: var(--wm-dark-blue);
    margin: 8px 0 14px;
    line-height: 1.2;
}

.wm-openingstijden__intro {
    color: var(--wm-water-text);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 15px;
}

/* Seizoen notice */
.wm-seizoen-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(10,142,172,0.2);
    border-left: 4px solid #0a8eac;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 28px;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: .9em;
}

.wm-seizoen-notice__icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: #0a8eac;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.wm-seizoen-notice__icon svg {
    width: 15px;
    height: 15px;
    stroke: white;
}

.wm-seizoen-notice strong {
    display: block;
    color: var(--wm-dark-blue);
    font-weight: 700;
    margin-bottom: 3px;
}

.wm-seizoen-notice p {
    margin: 0;
    color: #0a6e8a;
    font-size: .9em;
    line-height: 1.5;
}

/* ── Weekgrid wrapper: zelfde als plugin .wm-week-grid ── */
.wm-openingstijden__week-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
    align-items: start;
    margin-bottom: 20px;
}

/* ── Dag header: IDENTIEK aan plugin .wm-dag-header ── */
.wm-openingstijden__week-grid .wm-dag-header {
    text-align: center;
    padding: 6px 4px 5px;
    background: #0a8eac;
    color: #fff;
    border-radius: 8px 8px 0 0;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-openingstijden__week-grid .wm-dag-header.wm-dag-weekend {
    background: #076e87;
}

/* Dag naam groot, afkorting klein eronder — omgekeerd van plugin (dag nummer vs naam) */
.wm-openingstijden__week-grid .wm-dag-num {
    display: block;
    font-size: 1.15em;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
}

/* ── Dag body: IDENTIEK aan plugin .wm-dag-body ── */
.wm-openingstijden__week-grid .wm-dag-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px 0 0;
}

/* ── Kaartjes: IDENTIEK aan plugin .wm-kaart ── */
.wm-openingstijden__week-grid .wm-kaart {
    background: #fff;
    border: 1.5px solid #ddeef5;
    border-radius: 8px;
    padding: 8px 9px;
    font-size: .78em;
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: box-shadow .15s;
}

.wm-openingstijden__week-grid .wm-kaart:hover {
    box-shadow: 0 3px 12px rgba(10,110,138,.13);
}

/* Kleur links-border per type — identiek aan plugin .wm-open / .wm-wachtrij / .wm-vol */
.wm-openingstijden__week-grid .wm-kaart-open { }

.wm-openingstijden__week-grid .wm-kaart-les { }

.wm-openingstijden__week-grid .wm-kaart-avond { }

.wm-openingstijden__week-grid .wm-kaart-gesloten {
    border: 1.5px dashed #c8e4f0;
    background: transparent;
    text-align: center;
    padding: 14px 9px;
}

/* Tijd + naam: IDENTIEK aan plugin .wm-k-tijd / .wm-k-naam */
.wm-openingstijden__week-grid .wm-k-tijd {
    font-weight: 800;
    font-size: 1.05em;
    color: #1a2a3a;
    line-height: 1.2;
}

.wm-openingstijden__week-grid .wm-k-naam {
    color: #345;
    margin-top: 2px;
    line-height: 1.3;
    font-weight: 500;
}

.wm-openingstijden__week-grid .wm-kaart-gesloten .wm-k-naam {
    color: #89a;
    font-style: italic;
    font-size: .9em;
}

/* Footer */
.wm-openingstijden__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 0 16px;
}

.wm-openingstijden__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.wm-openingstijden__legenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--wm-water-text);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-openingstijden__legenda-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Reserveer knop: zelfde als plugin .wm-btn */
.wm-openingstijden__reserve-btn {
    background: #0a8eac;
    color: #fff !important;
    border: none;
    border-radius: 7px;
    padding: 8px 16px;
    font-size: .85em;
    font-weight: 600;
    transition: background .15s;
    white-space: nowrap;
    display: inline-block;
}

.wm-openingstijden__reserve-btn:hover {
    background: #076e87;
    color: #fff !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .wm-openingstijden__week-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
    .wm-openingstijden__week-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 440px) {
    .wm-openingstijden__week-grid { grid-template-columns: repeat(2, 1fr); }
    .wm-openingstijden__footer { flex-direction: column; align-items: flex-start; }
    .wm-openingstijden__reserve-btn { width: 100%; text-align: center; }
}




/* ═══════════════════════════════════════════════════════════
   TARIEVEN BLOCK  (variant B — kaartje per categorie)
   ═══════════════════════════════════════════════════════════ */

.wm-tarieven {
    background: var(--wm-water-gradient);
    padding: 40px 0 0;
}

.wm-tarieven__header {
    text-align: center;
    margin-bottom: 28px;
}

.wm-tarieven__title {
    font-family: 'Nunito', 'Montserrat', sans-serif;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: var(--wm-dark-blue);
    margin: 8px 0 14px;
    line-height: 1.2;
}

.wm-tarieven__intro {
    color: var(--wm-water-text);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 15px;
}

/* ── Kaartje per categorie ── */
.wm-tarieven__card {
    background: #fff;
    border: 1.5px solid #ddeef5;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-tarieven__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0a8eac;
    color: #fff;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 14px;
}

.wm-tarieven__card-head svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #fff;
}

/* Kolom-header rij */
/* Hoofdtabel: leeftijdsgroepen */
.wm-tarieven__ghead,
.wm-tarieven__grow {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    align-items: center;
}

.wm-tarieven__ghead {
    background: #f0f7fb;
    border-bottom: 1.5px solid #ddeef5;
}

.wm-tarieven__ghead span {
    padding: 8px 14px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #0a6e8a;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wm-tarieven__ghead span small {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #6a99aa;
}

.wm-tarieven__grow {
    border-bottom: 1px solid #eef4f7;
    transition: background .12s;
}

.wm-tarieven__grow:last-child { border-bottom: none; }
.wm-tarieven__grow:nth-child(even) { background: #fafcff; }
.wm-tarieven__grow:hover { background: #f0f7fb; }

.wm-tarieven__gcell {
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #1a2a3a;
    line-height: 1.4;
}

.wm-tarieven__gcell--label { font-weight: 600; font-size: 13px; }

.wm-tarieven__gcell--muted {
    font-weight: 400;
    font-size: 12.5px;
    color: #678;
    font-style: italic;
}

/* Overige tarieven */
.wm-tarieven__lrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 11px 14px;
    border-bottom: 1px solid #eef4f7;
}

.wm-tarieven__lrow:last-child { border-bottom: none; }
.wm-tarieven__lrow:nth-child(even) { background: #fafcff; }

.wm-tarieven__lname { font-size: 13.5px; color: #1a2a3a; font-weight: 600; }
.wm-tarieven__lname small { display: block; font-size: 11.5px; color: #678; font-weight: 400; }
.wm-tarieven__lprijs { font-size: 14px; font-weight: 700; color: #1a2a3a; white-space: nowrap; }

/* Gezinskorting */
.wm-tarieven__notice {
    background: #f0f7fb;
    border: 1.5px solid #ddeef5;
    border-radius: var(--wm-radius);
    padding: 14px 18px;
    font-size: 13px;
    color: #1a4a5e;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Footer */
.wm-tarieven__footer {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0 40px;
}

.wm-tarieven__btn {
    background: #0a8eac;
    color: #fff !important;
    border-radius: 7px;
    padding: 10px 20px;
    font-size: .88em;
    font-weight: 600;
    transition: background .15s;
    display: inline-block;
}

.wm-tarieven__btn:hover {
    background: #076e87;
    color: #fff !important;
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .wm-tarieven__ghead { display: none; }
    .wm-tarieven__grow {
        grid-template-columns: 1fr 1fr;
        gap: 0 8px;
        padding: 8px 0;
    }
    .wm-tarieven__gcell--label { grid-column: 1 / -1; padding-bottom: 2px; }
    .wm-tarieven__gcell { padding: 4px 14px; font-size: 13.5px; }
    .wm-tarieven__gcell[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        font-weight: 600;
        color: #9ab;
    }
    .wm-tarieven__gcell--muted { grid-column: 1 / -1 !important; }
}

@media (max-width: 520px) {
    .wm-tarieven__grow { grid-template-columns: 1fr; }
    .wm-tarieven__footer { justify-content: stretch; }
    .wm-tarieven__btn { width: 100%; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════
   OVER ONS BLOCK
   ═══════════════════════════════════════════════════════════ */

.wm-over-ons--water {
    background: var(--wm-water-gradient);
    padding: 64px 0 24px;
}

.wm-over-ons--white {
    background: white;
    padding: 64px 0 24px;
}

/* Split layout: tekst + foto naast elkaar */
.wm-over-ons__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.wm-over-ons__split--reverse {
    direction: rtl;
}

.wm-over-ons__split--reverse > * {
    direction: ltr;
}

/* Tekst kolom */
.wm-over-ons__tekst {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wm-over-ons__title {
    font-family: 'Nunito', 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--wm-dark-blue);
    line-height: 1.2;
    margin: 4px 0 0;
}

.wm-over-ons__tekst p {
    font-size: 15px;
    color: var(--wm-water-text);
    line-height: 1.8;
}

/* Faciliteiten lijst */
.wm-over-ons__faciliteiten {
    background: rgba(255,255,255,0.6);
    border: 1.5px solid rgba(10,142,172,0.15);
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 4px;
}

.wm-over-ons__faciliteiten h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #0a8eac;
    margin-bottom: 12px;
}

.wm-over-ons__faciliteiten ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wm-over-ons__faciliteiten li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--wm-water-text);
    font-weight: 500;
}

.wm-over-ons__faciliteiten li svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: #0a8eac;
}

/* Quote */
.wm-over-ons__quote {
    margin-top: 4px;
}

.wm-over-ons__quote blockquote {
    font-family: 'Nunito', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--wm-dark-blue);
    border-left: 4px solid #0a8eac;
    padding-left: 16px;
    margin: 0;
    line-height: 1.4;
}

/* Foto kolom */
.wm-over-ons__fotos--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wm-over-ons__fotos--1 {
    display: flex;
}

.wm-over-ons__foto-wrap {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #b8dce8, #0a8eac);
}

.wm-over-ons__foto-wrap--tall {
    aspect-ratio: 3/4;
    width: 100%;
}

.wm-over-ons__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wm-over-ons__img-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.4);
}

.wm-over-ons__img-placeholder svg {
    width: 40px;
    height: 40px;
    stroke: currentColor;
}

/* Sectie header */
.wm-over-ons__sectie-header {
    text-align: center;
    margin-bottom: 36px;
}

.wm-over-ons__subtitle {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #0a8eac;
    margin: 36px 0 20px;
}

/* Bestuur grid */
.wm-over-ons__bestuur-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}

.wm-over-ons__bestuur-grid--management {
    grid-template-columns: repeat(2, 1fr);
    max-width: 500px;
}

.wm-over-ons__bestuur-kaart {
    background: white;
    border: 1.5px solid #ddeef5;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}

.wm-over-ons__bestuur-kaart:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,59,92,.1);
}

.wm-over-ons__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0a8eac;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
}

.wm-over-ons__avatar--mgmt {
    background: var(--wm-dark-blue);
}

.wm-over-ons__bestuur-naam {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--wm-dark-blue);
    line-height: 1.3;
    margin-bottom: 4px;
}

.wm-over-ons__bestuur-rol {
    font-size: 12px;
    color: #678;
    line-height: 1.4;
}

.wm-over-ons__management {
    margin-top: 8px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .wm-over-ons__bestuur-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .wm-over-ons__split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .wm-over-ons__split--reverse {
        direction: ltr;
    }

    .wm-over-ons__fotos--2 {
        grid-template-columns: 1fr 1fr;
    }

    .wm-over-ons__foto-wrap--tall {
        aspect-ratio: 4/3;
    }

    .wm-over-ons__bestuur-grid { grid-template-columns: repeat(2, 1fr); }
    .wm-over-ons__bestuur-grid--management { max-width: 100%; }
}

@media (max-width: 480px) {
    .wm-over-ons__bestuur-grid { grid-template-columns: 1fr 1fr; }
    .wm-over-ons__fotos--2 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT BLOCK
   ═══════════════════════════════════════════════════════════ */

.wm-contact {
    background: var(--wm-water-gradient);
    padding: 40px 0 40px;
}

/* ── Twee kolommen: kaart + info ── */
.wm-contact__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
    margin-bottom: 36px;
}

.wm-contact__map-wrap {
    border-radius: 12px;
    overflow: hidden;
    min-height: 340px;
}

.wm-contact__map {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: none;
    display: block;
}

/* Info kolom */
.wm-contact__info {
    background: white;
    border-radius: 12px;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border: 1.5px solid #ddeef5;
}

.wm-contact__info-title {
    font-family: 'Nunito', 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--wm-dark-blue);
    margin: 0;
}

.wm-contact__info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.wm-contact__info-row svg {
    width: 18px;
    height: 18px;
    stroke: #0a8eac;
    flex-shrink: 0;
    margin-top: 2px;
}

.wm-contact__info-row strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #0a8eac;
    margin-bottom: 2px;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-contact__info-row span {
    font-size: 14px;
    color: var(--wm-dark-blue);
    font-weight: 500;
    line-height: 1.5;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-contact__info-row a {
    color: #0a8eac;
    text-decoration: none;
}

.wm-contact__info-row a:hover { text-decoration: underline; }

.wm-contact__maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px 18px;
    background: #0a8eac;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: background .15s;
    align-self: flex-start;
}

.wm-contact__maps-btn:hover { background: #076e87; color: #fff; }
.wm-contact__maps-btn svg { width: 14px; height: 14px; stroke: #fff; }

/* ── Routes ── */
.wm-contact__routes {
    background: white;
    border-radius: 12px;
    border: 1.5px solid #ddeef5;
    overflow: hidden;
    margin-bottom: 16px;
}

.wm-contact__routes-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: var(--wm-dark-blue);
    padding: 18px 22px 0;
    margin: 0 0 14px;
}

.wm-contact__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 22px 14px;
    border-bottom: 1.5px solid #eef4f7;
}

.wm-contact__tab {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #c8e4f0;
    background: transparent;
    color: var(--wm-water-text);
    transition: all .15s;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-contact__tab:hover { border-color: #0a8eac; color: #0a8eac; }
.wm-contact__tab.is-active { background: #0a8eac; border-color: #0a8eac; color: #fff; }

.wm-contact__route-body {
    padding: 18px 22px 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.wm-contact__stappen {
    list-style: none;
    counter-reset: stap;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.wm-contact__stap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    counter-increment: stap;
    font-size: 13.5px;
    color: var(--wm-text-body);
    line-height: 1.6;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-contact__stap::before {
    content: counter(stap);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0a8eac;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 2px;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-contact__route-maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: #0a8eac;
    color: #fff;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: background .15s;
}

.wm-contact__route-maps-btn:hover { background: #076e87; color: #fff; }
.wm-contact__route-maps-btn svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ── OV + Parkeren ── */
.wm-contact__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wm-contact__bottom-block {
    background: rgba(255,255,255,0.65);
    border: 1.5px solid #ddeef5;
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-contact__bottom-block svg {
    width: 20px;
    height: 20px;
    stroke: #0a8eac;
    flex-shrink: 0;
    margin-top: 1px;
}

.wm-contact__bottom-block strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--wm-dark-blue);
    margin-bottom: 3px;
}

.wm-contact__bottom-block p {
    font-size: 13px;
    color: var(--wm-text-body);
    line-height: 1.6;
}

.wm-contact__bottom-block a { color: #0a8eac; font-weight: 600; text-decoration: none; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .wm-contact__top { grid-template-columns: 1fr; }
    .wm-contact__map-wrap, .wm-contact__map { min-height: 260px; }
    .wm-contact__route-body { flex-direction: column; align-items: flex-start; }
    .wm-contact__route-maps-btn { align-self: flex-start; }
}

@media (max-width: 540px) {
    .wm-contact__bottom { grid-template-columns: 1fr; }
    .wm-contact__tabs { gap: 4px; }
}


/* ═══════════════════════════════════════════════════════════
   INFORMATIE BLOCK
   ═══════════════════════════════════════════════════════════ */

.wm-informatie {
    background: var(--wm-water-gradient);
    padding: 40px 0 40px;
}

.wm-info__grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.wm-info__grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Kaart — zelfde stijl als .wm-kaart in rooster plugin */
.wm-info__card {
    background: #fff;
    border: 1.5px solid #ddeef5;
    border-radius: 8px;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: box-shadow .15s;
}

.wm-info__card:hover {
    box-shadow: 0 3px 12px rgba(10,110,138,.1);
}

/* Icoon: één kleur — teal, precies zoals dag-headers in het rooster */
.wm-info__card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #0a8eac;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.wm-info__card-icon svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}

.wm-info__card-title {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a2a3a;
    line-height: 1.3;
    margin: 0;
}

.wm-info__card-text {
    font-size: 13.5px;
    color: var(--wm-text-body);
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

/* Checklijst */
.wm-info__lijst {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wm-info__lijst--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 16px;
}

.wm-info__lijst li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--wm-text-body);
    line-height: 1.4;
}

.wm-info__lijst li svg {
    width: 13px;
    height: 13px;
    stroke: #0a8eac;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Notice — subtiel, geen schreeuwerige kleur */
.wm-info__notice {
    background: #f0f7fb;
    border-left: 3px solid #0a8eac;
    border-radius: 0;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #0a6e8a;
    line-height: 1.55;
    font-style: italic;
}

.wm-info__btn {
    align-self: flex-start;
    margin-top: 4px;
    display: inline-block;
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .wm-info__grid3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 580px) {
    .wm-info__grid3,
    .wm-info__grid2  { grid-template-columns: 1fr; }
    .wm-info__lijst--2col { grid-template-columns: 1fr; }
    .wm-info__btn { align-self: stretch; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════
   SPONSOREN BLOCK
   ═══════════════════════════════════════════════════════════ */

.wm-sponsoren {
    background: var(--wm-water-gradient);
    padding: 40px 0 20px;
}

.wm-sponsoren__header {
    text-align: center;
    margin-bottom: 40px;
}

.wm-sponsoren__title {
    font-family: 'Nunito', 'Montserrat', sans-serif;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: var(--wm-dark-blue);
    margin: 8px 0 14px;
    line-height: 1.2;
}

.wm-sponsoren__titel {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    color: var(--wm-dark-blue);
    text-align: center;
    margin-bottom: 8px;
}

.wm-sponsoren__intro {
    font-size: 15px;
    color: var(--wm-water-text);
    max-width: 580px;
    margin: 0 auto 40px;
    line-height: 1.8;
    text-align: center;
}

/* ── Carousel — exact zelfde aanpak als tns-partners-plugin ── */
.wm-sponsoren__carousel-wrap {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    margin-bottom: 48px;
    padding: 20px 0;
}

.wm-sponsoren__track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;
    animation: wm-sponsor-scroll 25s linear infinite;
}

.wm-sponsoren__carousel-wrap:hover .wm-sponsoren__track {
    animation-play-state: paused;
}

@keyframes wm-sponsor-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.wm-sponsoren__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wm-sponsoren__logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wm-sponsoren__logo-img {
    max-height: 60px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.wm-sponsoren__logo:hover .wm-sponsoren__logo-img {
    transform: scale(1.05);
    opacity: 0.85;
}

/* Placeholder */
.wm-sponsoren__logo--placeholder {
    width: 140px;
    height: 60px;
    background: rgba(255,255,255,0.5);
    border: 1.5px dashed #b8dce8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #89aab5;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── CTA balk ── */
.wm-sponsoren__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(255,255,255,0.7);
    border: 1.5px solid #ddeef5;
    border-radius: 12px;
    padding: 22px 28px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.wm-sponsoren__cta-body p {
    font-size: 15px;
    color: var(--wm-water-text);
    line-height: 1.7;
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-sponsoren__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wm-sponsoren__cta-btn svg {
    width: 15px;
    height: 15px;
    stroke: #fff;
}

@media (max-width: 600px) {
    .wm-sponsoren__cta { flex-direction: column; align-items: flex-start; }
    .wm-sponsoren__cta-btn { width: 100%; justify-content: center; }
    .wm-sponsoren__track { gap: 40px; }
    .wm-sponsoren__logo-img { max-width: 120px; max-height: 45px; }
}


/* ═══════════════════════════════════════════════════════════
   KALENDER BLOCK
   ═══════════════════════════════════════════════════════════ */

.wm-kalender {
    background: var(--wm-water-gradient);
    padding: 40px 0 40px;
}

.wm-kalender__intro {
    font-size: 15px;
    color: var(--wm-water-text);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 36px;
    line-height: 1.8;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-kalender__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Kaart — zelfde stijl als informatie en rooster kaartjes */
.wm-kalender__kaart {
    background: #fff;
    border: 1.5px solid #ddeef5;
    border-radius: 8px;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: box-shadow .15s;
}

.wm-kalender__kaart:hover {
    box-shadow: 0 3px 12px rgba(10,110,138,.1);
}

/* Datum rij */
.wm-kalender__kaart-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.wm-kalender__datum {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wm-kalender__datum-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #0a8eac;
}

.wm-kalender__datum-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.wm-kalender__datum-tekst {
    font-size: 12.5px;
    font-weight: 700;
    color: #0a8eac;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Badge — enkel teal, subtiel, geen regenboog */
.wm-kalender__badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    flex-shrink: 0;
    background: #e6f6fa;
    color: #0a6e8a;
}

.wm-kalender__titel {
    font-family: 'Nunito', 'Montserrat', sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--wm-dark-blue);
    line-height: 1.3;
    margin: 0;
}

.wm-kalender__beschrijving {
    font-size: 13px;
    color: var(--wm-text-body);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

/* Leeg state */
.wm-kalender__leeg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: var(--wm-water-text);
    opacity: .6;
}

.wm-kalender__leeg svg {
    width: 40px;
    height: 40px;
    stroke: currentColor;
    margin-bottom: 12px;
}

.wm-kalender__leeg p { font-size: 14px; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .wm-kalender__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .wm-kalender__grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   VRIJZWEMMEN BLOCK
   ═══════════════════════════════════════════════════════════ */

.wm-vrijzwemmen {
    background: var(--wm-water-gradient);
    padding: 40px 0 40px;
}

/* Intro: tekst + foto naast elkaar */
.wm-vrijzwemmen__intro {
    display: grid;
    grid-template-columns: var(--wm-cols, 1fr);
    gap: 48px;
    align-items: center;
    margin-bottom: 36px;
}

.wm-vrijzwemmen__intro-tekst {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wm-vrijzwemmen__intro-titel {
    font-family: 'Nunito', 'Montserrat', sans-serif;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 800;
    color: var(--wm-dark-blue);
    line-height: 1.2;
    margin: 0;
}

.wm-vrijzwemmen__intro-tekst p {
    font-size: 15px;
    color: var(--wm-water-text);
    line-height: 1.8;
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-vrijzwemmen__btn {
    align-self: flex-start;
    display: inline-block;
    margin-top: 4px;
}

.wm-vrijzwemmen__intro-foto {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.wm-vrijzwemmen__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tekstsecties (MBVO, Aqua Power, Verhuur, ...) */
.wm-vrijzwemmen__secties {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 28px;
}

.wm-vrijzwemmen__sectie {
    background: rgba(255,255,255,0.65);
    border: 1.5px solid #ddeef5;
    border-radius: var(--wm-radius);
    padding: 24px 28px;
    scroll-margin-top: 90px;
}

.wm-vrijzwemmen__sectie-titel {
    font-family: 'Nunito', 'Montserrat', sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 800;
    color: var(--wm-dark-blue);
    margin: 0 0 10px;
}

.wm-vrijzwemmen__sectie-tekst {
    font-size: 15px;
    color: var(--wm-water-text);
    line-height: 1.8;
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-vrijzwemmen__sectie-lijst {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wm-vrijzwemmen__sectie-lijst li {
    display: flex;
    gap: 10px;
    font-size: 15px;
    color: var(--wm-water-text);
    line-height: 1.7;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-vrijzwemmen__sectie-lijst svg {
    width: 18px;
    height: 18px;
    stroke: var(--wm-teal);
    flex-shrink: 0;
    margin-top: 3px;
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .wm-vrijzwemmen__intro { grid-template-columns: 1fr; gap: 24px; }
    .wm-vrijzwemmen__btn { align-self: stretch; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   ZWEMLES BLOCK
   ═══════════════════════════════════════════════════════════ */

.wm-zwemles {
    background: var(--wm-water-gradient);
    padding: 40px 0 40px;
}

/* ── Intro ── */
.wm-zwemles__intro {
    display: grid;
    grid-template-columns: var(--wm-cols, 55fr 45fr);
    gap: 48px;
    align-items: center;
    margin-bottom: 32px;
}

.wm-zwemles__intro--no-foto {
    grid-template-columns: 1fr;
    max-width: 680px;
}

.wm-zwemles__intro-tekst {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wm-zwemles__lead {
    font-size: 15px;
    color: var(--wm-water-text);
    line-height: 1.8;
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-zwemles__foto-wrap {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.wm-zwemles__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Aanbod lijst */
.wm-zwemles__aanbod h3,
.wm-zwemles__tijden h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #0a8eac;
    margin-bottom: 10px;
}

.wm-zwemles__aanbod ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wm-zwemles__aanbod li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--wm-dark-blue);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 500;
}

.wm-zwemles__aanbod li svg {
    width: 15px;
    height: 15px;
    stroke: #0a8eac;
    flex-shrink: 0;
}

/* Tijden */
.wm-zwemles__tijden-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wm-zwemles__tijd {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.7);
    border: 1.5px solid #ddeef5;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-zwemles__tijd svg {
    width: 16px;
    height: 16px;
    stroke: #0a8eac;
    flex-shrink: 0;
}

.wm-zwemles__tijd-dag {
    font-weight: 600;
    font-size: 14px;
    color: var(--wm-dark-blue);
    min-width: 110px;
}

.wm-zwemles__tijd-uur {
    font-size: 14px;
    font-weight: 700;
    color: #0a8eac;
}

.wm-zwemles__btn {
    align-self: flex-start;
    display: inline-block;
}

/* Diploma grid — hergebruik wm-info__card */
.wm-zwemles__diploma-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}

.wm-zwemles__prijs {
    font-size: 14px;
    color: var(--wm-dark-blue);
    font-family: 'Segoe UI', system-ui, sans-serif;
    padding-top: 4px;
    border-top: 1px solid #eef4f7;
    margin-top: 4px;
}

.wm-zwemles__prijs strong {
    color: #0a8eac;
    font-weight: 800;
}

/* Voorwaarden */
.wm-zwemles__voorwaarden {
    background: rgba(255,255,255,0.6);
    border: 1.5px solid #ddeef5;
    border-radius: 12px;
    padding: 24px 24px 20px;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-zwemles__voorwaarden-titel {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #0a8eac;
    margin-bottom: 16px;
}

.wm-zwemles__voorwaarden-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

.wm-zwemles__voorwaarde {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wm-zwemles__voorwaarde svg {
    width: 16px;
    height: 16px;
    stroke: #0a8eac;
    flex-shrink: 0;
    margin-top: 2px;
}

.wm-zwemles__voorwaarde p {
    font-size: 13.5px;
    color: var(--wm-text-body);
    line-height: 1.65;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .wm-zwemles__intro         { grid-template-columns: 1fr; gap: 24px; }
    .wm-zwemles__diploma-grid  { grid-template-columns: 1fr; }
    .wm-zwemles__voorwaarden-grid { grid-template-columns: 1fr; }
    .wm-zwemles__btn           { align-self: stretch; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   BANENZWEMMEN BLOCK
   ═══════════════════════════════════════════════════════════ */

.wm-banenzwemmen {
    background: var(--wm-water-gradient);
    padding: 40px 0 40px;
}

.wm-banenzwemmen__tekst {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wm-banenzwemmen__tekst p {
    font-size: 15px;
    color: var(--wm-water-text);
    line-height: 1.8;
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-banenzwemmen__layout {
    display: grid;
    grid-template-columns: var(--wm-cols, 1fr);
    gap: 48px;
    align-items: center;
}

.wm-banenzwemmen__foto-wrap {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.wm-banenzwemmen__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wm-banenzwemmen__btn {
    align-self: flex-start;
    display: inline-block;
}

@media (max-width: 720px) {
    .wm-banenzwemmen__layout { grid-template-columns: 1fr; gap: 24px; }
    .wm-banenzwemmen__btn { align-self: stretch; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   SCHOLEN BLOCK
   ═══════════════════════════════════════════════════════════ */

.wm-scholen {
    background: var(--wm-water-gradient);
    padding: 40px 0 40px;
}

.wm-scholen__tekst {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wm-scholen__layout {
    display: grid;
    grid-template-columns: var(--wm-cols, 1fr);
    gap: 48px;
    align-items: center;
}

.wm-scholen__foto-wrap {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.wm-scholen__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Contact balk */
.wm-scholen__contact {
    background: rgba(255,255,255,0.7);
    border: 1.5px solid #ddeef5;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wm-scholen__contact-tekst p {
    font-size: 14px;
    color: var(--wm-water-text);
    margin: 0;
}

.wm-scholen__contact-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wm-scholen__contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0a8eac;
    text-decoration: none;
}

.wm-scholen__contact-link:hover { text-decoration: underline; }

.wm-scholen__contact-link svg {
    width: 15px;
    height: 15px;
    stroke: #0a8eac;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .wm-scholen__layout   { grid-template-columns: 1fr; gap: 24px; }
    .wm-scholen__contact  { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .wm-wave svg {
        height: 74px;
    }
}

@media (max-width: 480px) {
    .wm-hero__wave svg {
        height: 80px;
    }
}

/* ═══════════════════════════════════════════════════════════
   ARCHIVE / BLOG PAGINA  (index.php)
   ═══════════════════════════════════════════════════════════ */

.wm-archive-section {
    background: var(--wm-water-gradient);
    padding: 0 0 72px;
    margin-top: -2px;
}

/* Filters */
.wm-archive__filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    padding-top: 48px;
}

/* Grid: 3 kolommen */
.wm-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Card */
.wm-archive-card__link {
    display: flex;
    flex-direction: column;
    background: var(--wm-white);
    border-radius: var(--wm-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.wm-archive-card__link:hover {
    transform: translateY(-5px);
    box-shadow: var(--wm-shadow-lg);
}

.wm-archive-card__img {
    height: 200px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: var(--wm-dark-blue);
}

.wm-archive-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.wm-archive-card__link:hover .wm-archive-card__img img {
    transform: scale(1.04);
}

.wm-archive-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--wm-teal), var(--wm-dark-blue));
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.3);
}

.wm-archive-card__date {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--wm-white);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    color: var(--wm-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 2;
}

.wm-archive-card__body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.wm-archive-card__cat {
    display: inline-block;
    background: var(--wm-teal-pale);
    color: var(--wm-teal);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 50px;
    width: fit-content;
}

.wm-archive-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--wm-dark-blue);
    line-height: 1.4;
    margin: 0;
}

.wm-archive-card__excerpt {
    font-size: 13px;
    color: var(--wm-text-body);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.wm-archive-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wm-teal);
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
    padding-top: 4px;
    transition: gap 0.2s ease;
}

.wm-archive-card__link:hover .wm-archive-card__btn {
    gap: 10px;
}

.wm-archive__empty {
    text-align: center;
    padding: 80px 0;
    color: var(--wm-water-text-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Paginering */
.wm-archive__pagination {
    margin-top: 56px;
    display: flex;
    justify-content: center;
}

.wm-archive__pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.wm-archive__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wm-water-text);
    text-decoration: none;
    border: 2px solid rgba(26,74,94,0.2);
    background: var(--wm-white);
    transition: all 0.2s ease;
}

.wm-archive__pagination .page-numbers:hover {
    border-color: var(--wm-teal);
    color: var(--wm-teal);
}

.wm-archive__pagination .page-numbers.current {
    background: var(--wm-teal);
    border-color: var(--wm-teal);
    color: var(--wm-white);
}

.wm-archive__pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

@media (max-width: 1024px) {
    .wm-archive__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .wm-archive__grid { grid-template-columns: 1fr; }
    .wm-archive-card__img { height: 180px; }
    .wm-archive__filters { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .wm-pill-filter { white-space: nowrap; flex-shrink: 0; }
}


/* ═══════════════════════════════════════════════════════════
   SINGLE POST  (single.php)
   ═══════════════════════════════════════════════════════════ */

.wm-single-section {
    background: var(--wm-water-gradient);
    padding: 0 0 72px;
    margin-top: -2px;
}

.wm-single__layout {
    max-width: 800px;
    margin: 0 auto;
}

.wm-single__back {
    margin-bottom: 20px;
    padding-top: 48px;
}

.wm-single__back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--wm-water-text-soft);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s, gap 0.2s;
}

.wm-single__back-link:hover {
    color: var(--wm-teal);
    gap: 4px;
}

/* Hero meta (in de hero overlay) */
.wm-single__hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.wm-single__cat-badge {
    display: inline-block;
    background: rgba(0,160,176,0.25);
    color: var(--wm-teal-light);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s;
}

.wm-single__cat-badge:hover {
    background: rgba(0,160,176,0.4);
    color: #fff;
}

.wm-single__date-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-weight: 500;
}

/* Artikel */
.wm-single__article {
    background: var(--wm-white);
    border-radius: var(--wm-radius-lg);
    overflow: hidden;
    box-shadow: var(--wm-shadow-lg);
}

.wm-single__featured-img {
    width: 100%;
    max-height: 440px;
    overflow: hidden;
}

.wm-single__featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content typography */
.wm-single__content {
    padding: 40px 48px;
}

.wm-single__content p {
    color: var(--wm-text-body);
    line-height: 1.85;
    margin-bottom: 20px;
    font-size: 15px;
}

.wm-single__content h2,
.wm-single__content h3,
.wm-single__content h4 {
    color: var(--wm-dark-blue);
    font-weight: 700;
    margin: 32px 0 12px;
    line-height: 1.3;
}

.wm-single__content h2 { font-size: 22px; }
.wm-single__content h3 { font-size: 18px; }

.wm-single__content a {
    color: var(--wm-teal);
    text-decoration: underline;
    text-decoration-color: rgba(0,160,176,0.3);
    transition: text-decoration-color 0.2s;
}

.wm-single__content a:hover {
    text-decoration-color: var(--wm-teal);
}

.wm-single__content img {
    max-width: 100%;
    border-radius: var(--wm-radius);
    margin: 8px 0;
}

.wm-single__content ul,
.wm-single__content ol {
    color: var(--wm-text-body);
    padding-left: 20px;
    margin-bottom: 20px;
    line-height: 1.8;
    font-size: 15px;
}

.wm-single__content blockquote {
    border-left: 4px solid var(--wm-teal);
    margin: 24px 0;
    padding: 16px 24px;
    background: var(--wm-teal-pale);
    border-radius: 0 var(--wm-radius) var(--wm-radius) 0;
    font-style: italic;
    color: var(--wm-water-text);
}

/* Navigatie vorig/volgend */
.wm-single__post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--wm-border);
    border-top: 1px solid var(--wm-border);
    gap: 1px;
}

.wm-single__nav-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px;
    text-decoration: none;
    background: var(--wm-white);
    transition: background 0.2s;
}

.wm-single__nav-item:hover {
    background: var(--wm-light-bg);
}

.wm-single__nav-item--next { text-align: right; }

.wm-single__nav-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--wm-teal);
}

.wm-single__nav-item--next .wm-single__nav-label { justify-content: flex-end; }

.wm-single__nav-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--wm-dark-blue);
    line-height: 1.4;
}

/* Outline knop */
.wm-btn--outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    border: 2px solid var(--wm-teal);
    color: var(--wm-teal);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    margin-top: 24px;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
}

.wm-btn--outline:hover {
    background: var(--wm-teal);
    color: var(--wm-white);
}

@media (max-width: 768px) {
    .wm-single__content { padding: 28px 20px; }
    .wm-single__post-nav { grid-template-columns: 1fr; }
    .wm-single__nav-item--next { text-align: left; border-top: 1px solid var(--wm-border); }
    .wm-single__nav-item--next .wm-single__nav-label { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   STANDAARD PAGINA CONTENT  (page.php)
   ═══════════════════════════════════════════════════════════ */

.wm-page-content-section {
    background: var(--wm-water-gradient);
    padding: 0 0 72px;
    margin-top: 0;
}

.wm-content--page {
    background: var(--wm-white);
    border-radius: var(--wm-radius-lg);
    box-shadow: var(--wm-shadow-lg);
    padding: 48px 56px;
    margin-top: 48px;
}

@media (max-width: 768px) {
    .wm-content--page { padding: 32px 24px; }
}

/* ══════════════════════════════════════════════════════
   COOKIEBELEID BLOCK
   ══════════════════════════════════════════════════════ */

.wm-cookiebeleid {
    background: #f4f8fb;
    padding: 60px 0 80px;
}

.wm-cb__intro {
    max-width: 720px;
    margin-bottom: 48px;
}
.wm-cb__datum {
    font-size: 13px;
    color: var(--wm-teal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}
.wm-cb__lead {
    font-size: 17px;
    color: #345;
    line-height: 1.65;
}

/* Highlight box */
.wm-cb__highlight {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #e6f7f9;
    border: 1.5px solid #00a0b0;
    border-radius: 10px;
    padding: 16px 22px;
    margin-bottom: 40px;
    color: var(--wm-dark-blue);
    font-size: 15px;
    line-height: 1.5;
}
.wm-cb__highlight svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    stroke: var(--wm-teal);
}

/* Secties */
.wm-cb__section {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    padding: 32px 0;
    border-top: 1px solid #ddeef5;
}
.wm-cb__section:last-of-type { border-bottom: 1px solid #ddeef5; }

.wm-cb__section-icon {
    width: 44px;
    height: 44px;
    background: var(--wm-teal);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
}
.wm-cb__section-icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
}

.wm-cb__section-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--wm-dark-blue);
    margin-bottom: 10px;
}
.wm-cb__section-content p {
    color: #345;
    line-height: 1.7;
    margin-bottom: 12px;
}

/* Tabel */
.wm-cb__table-wrap {
    overflow-x: auto;
    margin-top: 16px;
    border-radius: 10px;
    border: 1.5px solid #c8e4f0;
}
.wm-cb__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.wm-cb__table thead tr {
    background: var(--wm-dark-blue);
    color: #fff;
}
.wm-cb__table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .03em;
}
.wm-cb__table tbody tr:nth-child(even) { background: #f0f7fb; }
.wm-cb__table tbody td {
    padding: 11px 16px;
    color: #1a2a3a;
    vertical-align: top;
    border-top: 1px solid #ddeef5;
}

/* Lijsten */
.wm-cb__list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wm-cb__list li {
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid #ddeef5;
    border-radius: 8px;
    font-size: 14px;
    color: #345;
    line-height: 1.6;
}
.wm-cb__list li a { color: var(--wm-teal); }

.wm-cb__browser-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wm-cb__browser-list li a {
    display: inline-block;
    padding: 6px 16px;
    background: #fff;
    border: 1.5px solid #c8e4f0;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wm-dark-blue);
    text-decoration: none;
    transition: all .15s;
}
.wm-cb__browser-list li a:hover {
    background: var(--wm-teal);
    border-color: var(--wm-teal);
    color: #fff;
}

/* Contact block */
.wm-cb__contact {
    margin-top: 48px;
    background: var(--wm-dark-blue);
    border-radius: 14px;
    padding: 40px;
    color: #fff;
}
.wm-cb__contact-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}
.wm-cb__contact > p {
    color: rgba(255,255,255,.6);
    margin-bottom: 24px;
    font-size: 15px;
}
.wm-cb__contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.wm-cb__contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.wm-cb__contact-item svg {
    width: 20px;
    height: 20px;
    stroke: var(--wm-teal);
    flex-shrink: 0;
    margin-top: 3px;
}
.wm-cb__contact-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wm-cb__contact-item strong {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.wm-cb__contact-item span,
.wm-cb__contact-item a {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}
.wm-cb__contact-item a:hover { color: var(--wm-teal); }

/* Responsive */
@media (max-width: 600px) {
    .wm-cb__section { grid-template-columns: 1fr; gap: 12px; }
    .wm-cb__section-icon { width: 38px; height: 38px; border-radius: 8px; }
    .wm-cb__section-icon svg { width: 18px; height: 18px; }
    .wm-cb__contact { padding: 24px; }
    .wm-cb__table thead th,
    .wm-cb__table tbody td { padding: 9px 12px; font-size: 13px; }
}


/* ══════════════════════════════════════════════════════
   MIJN WATERMAN FLOATING BUTTON — mobiel only
   ══════════════════════════════════════════════════════ */

.wm-mob-cta {
    display: none; /* standaard verborgen, alleen mobiel */
}

@media (max-width: 768px) {
    .wm-mob-cta {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        bottom: 20px;
        right: 16px;
        background: var(--wm-teal);
        color: #fff;
        text-decoration: none;
        border-radius: 28px;
        padding: 12px 18px 12px 14px;
        font-size: 14px;
        font-weight: 700;
        font-family: 'Segoe UI', system-ui, sans-serif;
        box-shadow: 0 4px 20px rgba(0, 160, 176, 0.45);
        z-index: 500;
        transition: transform .2s, box-shadow .2s;
        white-space: nowrap;
    }
    .wm-mob-cta:hover,
    .wm-mob-cta:active {
        transform: scale(1.04);
        box-shadow: 0 6px 24px rgba(0, 160, 176, 0.55);
        color: #fff;
    }
    .wm-mob-cta svg {
        width: 18px;
        height: 18px;
        stroke: #fff;
        flex-shrink: 0;
    }

    /* Schuif WhatsApp-knop omhoog als beide zichtbaar zijn */
    .wm-whatsapp {
        bottom: 84px;
    }
}




/* Vaste openingstijden tabel */
.wm-openingstijden-vast {
    padding: 40px 0 20px;
    max-width: 1150px;
    margin-left: 0;
    margin-right: auto;
}
.wm-openingstijden-vast h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--wm-dark-blue);
    margin-bottom: 4px;
}
.wm-ot-periode {
    color: var(--wm-teal);
    margin-bottom: 28px;
    font-size: 0.95rem;
}
.wm-ot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}
@media (max-width: 700px) {
    .wm-ot-grid { grid-template-columns: 1fr; }
}
.wm-ot-table-wrap h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wm-dark-blue);
    margin-bottom: 10px;
}
.wm-ot-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.wm-ot-table th,
.wm-ot-table td {
    padding: 7px 10px;
    border: 1px solid rgba(0,0,0,0.08);
    text-align: center;
}
.wm-ot-table thead th {
    background: var(--wm-teal);
    color: #fff;
    font-weight: 600;
}
.wm-ot-table thead th:first-child { background: var(--wm-dark-blue); }
.wm-ot-table td:first-child {
    text-align: left;
    font-weight: 600;
    background: #f5fbfd;
    white-space: nowrap;
}
.wm-ot-table tbody tr:nth-child(odd) td { background-color: #f9fdff; }
.wm-ot-table tbody tr:nth-child(odd) td:first-child { background: #eef7fb; }

.wm-ot-extra {
    margin-bottom: 28px;
}
.wm-ot-extra h3,
.wm-ot-toelichting p {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wm-dark-blue);
    margin-bottom: 8px;
}
.wm-ot-extra ul,
.wm-ot-toelichting ul {
    padding-left: 18px;
    font-size: 0.875rem;
    line-height: 1.7;
    color: #444;
}
.wm-ot-toelichting {
    background: #f0f8fc;
    border-left: 3px solid var(--wm-teal);
    border-radius: 4px;
    padding: 16px 20px;
    font-size: 0.875rem;
}

/* ── Tabellen: nooit midden in een woord afbreken ──
   Op smalle schermen werden kolomkoppen als "Voorseizoen" hard doormidden
   geknipt. Woorden breken nu alleen op woordgrenzen, en als de tabel niet
   meer past schuift hij horizontaal in plaats van dat de kolommen worden
   platgedrukt. */

.wm-ot-table th,
.wm-ot-table td,
.wm-cb__table th,
.wm-cb__table td,
.wm-single__content table th,
.wm-single__content table td,
.wm-content table th,
.wm-content table td {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Geen vaste ondergrens: de tabel wordt precies zo breed als zijn eigen
   inhoud nodig heeft, en minimaal zo breed als de beschikbare ruimte.
   Past het, dan vult hij netjes 100% zonder schuifbalk. Past het niet,
   dan schuift hij horizontaal in plaats van dat kolommen worden
   platgedrukt. Elke tabel regelt dat dus zelf, ongeacht kolomaantal.
   min-width:0 op de wrapper is nodig omdat een grid-item anders meegroeit
   met zijn inhoud en de kolomverdeling opblaast. */

.wm-ot-table-wrap {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.wm-ot-table {
    width: max-content;
    min-width: 100%;
}

@media (max-width: 600px) {
    .wm-ot-table {
        font-size: 0.8rem;
    }

    .wm-ot-table th,
    .wm-ot-table td {
        padding: 6px 7px;
    }

    .wm-ot-table thead th {
        line-height: 1.3;
    }
}


/* ═══════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════ */

.wm-zoomable {
    cursor: zoom-in;
}

html.wm-lightbox-open {
    overflow: hidden;
}

.wm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
}

.wm-lightbox.is-open {
    opacity: 1;
}

.wm-lightbox[hidden] {
    display: none;
}

.wm-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 59, 92, 0.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: zoom-out;
}

/* ── Stage ── */

.wm-lightbox__stage {
    position: relative;
    z-index: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: scale(.97);
    transition: transform .2s ease;
}

.wm-lightbox.is-open .wm-lightbox__stage {
    transform: scale(1);
}

.wm-lightbox__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(1400px, 84vw);
    max-height: 76vh;
    border-radius: var(--wm-radius);
}

.wm-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    width: auto;
    height: auto;
    border-radius: var(--wm-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    background: rgba(255, 255, 255, .06);
    transition: opacity .15s ease;
}

.wm-lightbox__img.is-loading {
    opacity: .35;
}

/* ── Ingezoomd: frame wordt een scrollvenster ── */

.wm-lightbox__frame.is-zoomed {
    display: block;
    width: min(1400px, 84vw);
    height: 76vh;
    max-height: 76vh;
    overflow: auto;
    overscroll-behavior: contain;
    cursor: grab;
    background: rgba(0, 0, 0, .2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    scrollbar-width: thin;
}

.wm-lightbox__frame.is-grabbing {
    cursor: grabbing;
}

.wm-lightbox__frame.is-zoomed .wm-lightbox__img {
    width: calc(var(--wm-lb-zoom, 1) * 100%);
    max-width: none;
    max-height: none;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    background: var(--wm-white);
    user-select: none;
    -webkit-user-drag: none;
}

.wm-lightbox__caption {
    max-width: 70ch;
    text-align: center;
    color: var(--wm-white);
    font-size: .9rem;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.wm-lightbox__caption[hidden] {
    display: none;
}

/* ── Knoppen ── */

.wm-lightbox__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--wm-white);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

.wm-lightbox__btn:hover {
    background: var(--wm-teal);
    color: var(--wm-white);
    transform: scale(1.06);
}

.wm-lightbox__btn:focus-visible {
    outline: 3px solid var(--wm-yellow);
    outline-offset: 3px;
}

.wm-lightbox__btn[hidden] {
    display: none;
}

.wm-lightbox__btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Toolbar ── */

.wm-lightbox__toolbar {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wm-lightbox__zoom-level {
    min-width: 92px;
    padding: 8px 12px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    color: var(--wm-white);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-align: center;
    white-space: nowrap;
}

/* ── Navigatie ── */

.wm-lightbox__nav {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
}

.wm-lightbox__nav:hover {
    transform: translateY(-50%) scale(1.06);
}

.wm-lightbox__nav--prev {
    left: 16px;
}

.wm-lightbox__nav--next {
    right: 16px;
}

.wm-lightbox__counter {
    position: absolute;
    z-index: 3;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    color: var(--wm-white);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.wm-lightbox__counter[hidden] {
    display: none;
}

/* ── Mobiel ── */

@media (max-width: 782px) {
    .wm-lightbox__frame,
    .wm-lightbox__frame.is-zoomed {
        max-width: 96vw;
        width: 96vw;
    }

    .wm-lightbox__frame {
        max-height: 68vh;
    }

    .wm-lightbox__frame.is-zoomed {
        height: 68vh;
        max-height: 68vh;
        -webkit-overflow-scrolling: touch;
    }

    .wm-lightbox__img {
        max-height: 68vh;
    }

    .wm-lightbox__toolbar {
        top: 10px;
        right: 10px;
        left: 10px;
        justify-content: flex-end;
        gap: 6px;
    }

    .wm-lightbox__btn {
        width: 40px;
        height: 40px;
    }

    .wm-lightbox__zoom-level {
        min-width: 0;
        font-size: .72rem;
        padding: 7px 10px;
    }

    .wm-lightbox__nav {
        width: 40px;
        height: 40px;
    }

    .wm-lightbox__nav--prev {
        left: 6px;
    }

    .wm-lightbox__nav--next {
        right: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wm-lightbox,
    .wm-lightbox__stage,
    .wm-lightbox__btn {
        transition: none;
    }
}


/* ═══════════════════════════════════
   TEKST + FOTO SECTIES OP MOBIEL
   ═══════════════════════════════════

   De kolomverdeling komt uit de editor en stond als inline style op het
   element. Inline styles winnen het altijd van een media query, dus de
   bestaande mobiele regels kwamen nooit aan bod en werd de foto naast de
   tekst platgedrukt. De verdeling loopt nu via --wm-cols, zodat de media
   query hieronder het gewoon kan overnemen. */

@media (max-width: 720px) {
    .wm-vrijzwemmen__intro,
    .wm-zwemles__intro,
    .wm-banenzwemmen__layout,
    .wm-scholen__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Volle breedte en een rustiger verhouding, zodat de foto niet de halve
       telefoon vult maar ook niet als postzegel naast de tekst hangt. */
    .wm-vrijzwemmen__intro-foto,
    .wm-zwemles__foto-wrap,
    .wm-banenzwemmen__foto-wrap,
    .wm-scholen__foto-wrap {
        width: 100%;
        aspect-ratio: 16 / 10;
    }
}