/* ==========================================================================
   Meppeler Meppers 2025 main stylesheet
   ========================================================================== */

:root {
    --mm-blue: #0262b9;
    --mm-blue-dark: #01498b;
    --mm-blue-light: #3a8ee6;
    --mm-blue-soft: #e3f0ff;
    --mm-blue-soft-2: #f3f7ff;
    --mm-accent-lime: #a3e635;
    --mm-gray-900: #0b1120;
    --mm-gray-700: #374151;
    --mm-gray-500: #6b7280;
    --mm-gray-100: #f3f4f6;
    --mm-radius-xl: 1.25rem;
    --mm-shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.18);
    --mm-transition-fast: 180ms ease-out;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--mm-gray-900);
    background: radial-gradient(circle at top left, #f4f7ff 0, #ffffff 45%) fixed;
}

/* ---------- Global helpers ---------- */

.mm-section {
    padding: 4rem 0;
}

.mm-section.bg-alt {
    background: linear-gradient(135deg, #f1f5ff, #ffffff);
}

@media (min-width: 992px) {
    .mm-section {
        padding: 5rem 0;
    }
}

.mm-section-title {
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: .75rem;
    color: var(--mm-blue);
    margin-bottom: .25rem;
}

.mm-section-heading {
    font-weight: 800;
    font-size: clamp(1.75rem, 2vw + 1.3rem, 2.4rem);
    margin-bottom: 0.75rem;
}

.mm-section-subtitle {
    max-width: 620px;
    color: var(--mm-gray-500);
    font-size: 0.98rem;
}

.letter-spacing {
    letter-spacing: 0.16em;
}

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

.mm-navbar {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
}

.mm-navbar .navbar-brand {
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mm-navbar-logo {
    height: 52px;
    width: auto;
}

@media (min-width: 992px) {
    .mm-navbar-logo {
        height: 64px;
    }
}

/* Zorg dat het menu altijd horizontaal en zonder bullets is, ook met fallback */
.mm-navbar .navbar-nav {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.mm-navbar .navbar-nav > li {
    margin: 0 .25rem;
}

.mm-nav-link,
.mm-navbar .navbar-nav > li > a {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-gray-700) !important;
    position: relative;
    padding: 0.75rem 0.9rem !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Onderstreping: nu op ::before i.p.v. ::after */
.mm-nav-link::before,
.mm-navbar .navbar-nav > li > a::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mm-blue), var(--mm-blue-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--mm-transition-fast);
}

.mm-nav-link:hover::before,
.mm-navbar .navbar-nav > li > a:hover::before,
.mm-nav-link:focus::before,
.mm-navbar .navbar-nav > li > a:focus::before,
.mm-nav-link[aria-current="page"]::before {
    transform: scaleX(1);
}

.mm-nav-cta {
    border-radius: 999px;
    padding-inline: 1.4rem;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Parent-items met submenu als dropdown-container */
.mm-navbar .navbar-nav > .menu-item-has-children {
    position: relative;
}

/* Pijltje achter menu-items die een submenu hebben */
.mm-navbar .navbar-nav > .menu-item-has-children > a::after {
    content: "▾";
    font-size: 0.7rem;
    margin-left: 0.35rem;
    display: inline-block;
    transform-origin: center;
    transition: transform 150ms ease-out;
}

/* Pijltje omklappen als dropdown “open” is */
.mm-navbar .navbar-nav > .menu-item-has-children:hover > a::after,
.mm-navbar .navbar-nav > .menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
}

/* Basisstijl van het dropdown-menu */
.mm-navbar .navbar-nav > .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 0.5rem 0;
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    list-style: none;
    display: none;              /* verborgen standaard */
    z-index: 1000;
}

/* Dropdown tonen op hover / focus (desktop + toetsenbord) */
.mm-navbar .navbar-nav > .menu-item-has-children:hover > .sub-menu,
.mm-navbar .navbar-nav > .menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

/* Items in het dropdown-menu */
.mm-navbar .navbar-nav > .menu-item-has-children > .sub-menu > li {
    margin: 0;
}

/* Links in dropdown-menu */
.mm-navbar .navbar-nav > .menu-item-has-children > .sub-menu > li > a {
    display: block;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: none;
    color: var(--mm-gray-700) !important;
    text-decoration: none;
    white-space: nowrap;
}

/* Hover-stijl in dropdown */
.mm-navbar .navbar-nav > .menu-item-has-children > .sub-menu > li > a:hover {
    background-color: var(--mm-blue-soft);
    color: var(--mm-blue) !important;
}

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

.mm-hero {
    padding-top: 7rem;
    padding-bottom: 4rem;
    position: relative;

    /* Achtergrondfoto + donker laagje eroverheen voor leesbaarheid */
    background-image:
        linear-gradient(120deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.4)),
        url('https://meppelermeppers.nl/wp-content/uploads/2024/12/Kersttoernooi-2024-Meppeler-Meppers-08.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 992px) {
    .mm-hero {
        padding-top: 8rem;
        padding-bottom: 5rem;
    }
}

.mm-hero-card {
    border-radius: 1.75rem;
    box-shadow: var(--mm-shadow-soft);
    background: conic-gradient(from 210deg at 10% 0%, #ffffff, #f8fbff, #ffffff);
    border: 1px solid rgba(148, 163, 184, 0.25);
    padding: 2rem 1.75rem;
}

@media (min-width: 768px) {
    .mm-hero-card {
        padding: 2.5rem 2.25rem;
    }
}

.mm-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(2, 98, 185, 0.08);
    color: var(--mm-blue);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mm-hero-title {
    font-weight: 900;
    font-size: clamp(2.2rem, 4vw + 1.5rem, 3.1rem);
    line-height: 1.05;
    margin: 1rem 0 .75rem;
}

.mm-hero-title span {
    color: var(--mm-blue);
}

.mm-hero-text {
    font-size: 0.98rem;
    color: var(--mm-gray-700);
    max-width: 32rem;
}

/* Hero rechts: foto + badges */

.mm-hero-media {
    position: relative;
}

.mm-hero-photo {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.35);
    border: 3px solid rgba(255,255,255,0.7);
}

.mm-hero-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.mm-hero-photo-badge {
    position: absolute;
    left: 10%;
    bottom: -14%;
    background: #ffffff;
    border-radius: 1.25rem;
    padding: .75rem 1rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.mm-hero-photo-badge-logo {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--mm-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-hero-photo-badge-logo img {
    max-width: 70%;
    height: auto;
}

.mm-hero-photo-badge-text {
    font-size: .8rem;
}

.mm-hero-photo-badge-text strong {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: .72rem;
}

/* ---------- Buttons ---------- */

.btn-mm-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: linear-gradient(135deg, var(--mm-blue), var(--mm-blue-dark));
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: linear-gradient(135deg, var(--mm-blue-dark), #002f6c);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 2, 98, 185;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: .82rem;
    border: none;
    box-shadow: 0 12px 30px rgba(2, 98, 185, 0.35);
}

.btn-mm-outline {
    --bs-btn-color: var(--mm-blue);
    --bs-btn-border-color: rgba(15, 23, 42, 0.18);
    --bs-btn-hover-bg: var(--mm-blue-soft);
    --bs-btn-hover-border-color: var(--mm-blue);
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: .8rem;
}

/* ---------- Nieuws ---------- */

.mm-news-list {
    position: relative;
}

.mm-news-card {
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: #ffffff;
    padding: 1.25rem 1.25rem 1.4rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: transform var(--mm-transition-fast), box-shadow var(--mm-transition-fast), border-color var(--mm-transition-fast);
}

.mm-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    border-color: rgba(2, 98, 185, 0.55);
}

.mm-news-thumb-wrap {
    border-radius: 1rem;
    overflow: hidden;
    margin: -0.25rem -0.25rem 0.75rem;
    background: radial-gradient(circle at top, var(--mm-blue), var(--mm-blue-dark));
    position: relative;
}

.mm-news-thumb-wrap img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.mm-news-thumb-wrap--placeholder {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.mm-news-thumb-wrap--placeholder img {
    width: 120px;
    height: auto;
    object-fit: contain;
}

.mm-news-date {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mm-gray-500);
}

.mm-news-title {
    font-size: 1.02rem;
    font-weight: 700;
}

.mm-news-more {
    margin-top: auto;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mm-blue);
}

.mm-news-hidden {
    display: none !important;
}

/* ---------- Trainingstijden / agenda ---------- */

.mm-schedule-card {
    border-radius: 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    padding: 1.75rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.mm-schedule-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(2, 98, 185, 0.12), rgba(56, 189, 248, 0.04));
    opacity: 0.5;
    pointer-events: none;
}

.mm-schedule-card > * {
    position: relative;
    z-index: 1;
}

.mm-schedule-pill {
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(2, 98, 185, 0.16);
    color: var(--mm-blue-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mm-schedule-table {
    width: 100%;
    font-size: 0.9rem;
}

.mm-schedule-table th,
.mm-schedule-table td {
    padding: .55rem .4rem;
    vertical-align: top;
}

.mm-schedule-table th {
    font-weight: 700;
    color: var(--mm-gray-700);
    white-space: nowrap;
}

.mm-schedule-location {
    font-size: .8rem;
    color: var(--mm-gray-500);
}

/* ---------- Sponsors ---------- */

.mm-sponsor-wrap {
    border-radius: 1.5rem;
    background: radial-gradient(circle at top left, #0b1120, #020617);
    border: 1px solid rgba(148, 163, 184, 0.7);
    padding: 1.75rem 1.5rem;
    color: #e5e7eb;
}

.mm-sponsor-wrap h2 {
    color: #e5e7eb;
}

.mm-sponsor-tagline {
    font-size: .85rem;
    color: #cbd5f5;
}

.mm-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

@media (min-width: 576px) {
    .mm-sponsor-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.mm-sponsor-card {
    border-radius: .9rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    padding: .75rem;
    background: rgba(15, 23, 42, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    text-align: center;
    min-height: 70px;
    padding-inline: 1rem;
}

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

.mm-footer {
    background: radial-gradient(circle at top, #020617, #020617 40%, #000000);
    color: #e5e7eb;
    padding-top: 3rem;
}

.mm-footer h3 {
    letter-spacing: 0.14em;
}

.mm-footer a {
    color: #e5e7eb;
    text-decoration: none;
    opacity: 0.9;
}

.mm-footer a:hover {
    opacity: 1;
}

.mm-footer-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.mm-footer-list li {
    font-size: .86rem;
    margin-bottom: .35rem;
}

.mm-footer-meta {
    border-top: 1px solid rgba(148, 163, 184, 0.4);
    margin-top: 2rem;
    padding-top: 1.25rem;
    font-size: .8rem;
    color: #9ca3af;
}

/* ---------- Content ---------- */

.entry-title {
    font-weight: 800;
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    margin-bottom: .75rem;
}

.entry-meta {
    font-size: .85rem;
    color: var(--mm-gray-500);
    margin-bottom: 1.25rem;
}

.entry-content {
    font-size: 0.98rem;
}

.entry-content p {
    margin-bottom: 1rem;
}

.entry-content a {
    color: var(--mm-blue);
    text-decoration: underline;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}

/* ---------- Sidebar ---------- */

.widget-title {
    font-weight: 700;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.widget ul li {
    margin-bottom: .35rem;
}

/* ---------- Utilities ---------- */

.mm-pill {
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: rgba(148, 163, 184, 0.2);
}

.mm-badge-oldstars {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
}

.mm-badge-jeugd {
    background: rgba(59, 130, 246, 0.16);
    color: #1d4ed8;
}

.mm-badge-senioren {
    background: rgba(234, 179, 8, 0.15);
    color: #b45309;
}



.advertentie-sidebar {
	display: block;
	padding: 10px 0;
	position: relative;
	}

.advertentie-sidebar img {
	width: 140px;
	}

/* Container van het logo bepaalt de hoogte van de navbar */
.mm-navbar-logo-wrap {
    height: 56px;              /* basishoogte van de balk */
    align-items: center;
}

/* Logo zelf iets opblazen zonder de balk hoger te maken */
.mm-navbar-logo-wrap img,
.mm-navbar .custom-logo {
    height: 56px;
    width: auto;
    transform: scale(1.3);     /* logo visueel 30% groter */
    transform-origin: left center;
}


/* ---------- Tabellen in content ---------- */

.entry-content table,
.mm-section table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    background: #ffffff;
    overflow: hidden; /* zorgt dat afgeronde hoeken ook voor cell-borders gelden */
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

/* Algemene cel-opmaak */
.entry-content th,
.entry-content td,
.mm-section th,
.mm-section td {
    padding: 0.6rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    text-align: left;
    vertical-align: top;
}

/* Headerrij: blauwe balk, lichte tekst */
.entry-content thead th,
.mm-section thead th {
    background: #0262b9;
    color: #f9fafb;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    border-color: rgba(15, 23, 42, 0.2);
}

/* Als er geen thead is, stijl de eerste rij van tbody als header */
.entry-content tbody tr:first-child th,
.mm-section tbody tr:first-child th {
    background: #0262b9;
    color: #f9fafb;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
}

/* Zebra-striping voor leesbaarheid */
.entry-content tbody tr:nth-child(odd),
.mm-section tbody tr:nth-child(odd) {
    background: #f9fbff;
}

.entry-content tbody tr:nth-child(even),
.mm-section tbody tr:nth-child(even) {
    background: #ffffff;
}

/* Hover-over een rij */
.entry-content tbody tr:hover,
.mm-section tbody tr:hover {
    background: #e3f0ff;
}

/* Cellen met alleen getallen iets rechts uitlijnen (optioneel) */
.entry-content td:nth-child(n+2),
.mm-section td:nth-child(n+2) {
    /* eventueel: text-align: right; */
}

/* Responsief: op kleine schermen iets kleinere text en padding */
@media (max-width: 767.98px) {
    .entry-content table,
    .mm-section table {
        font-size: 0.85rem;
    }

    .entry-content th,
    .entry-content td,
    .mm-section th,
    .mm-section td {
        padding: 0.45rem 0.6rem;
    }
}


/* ---------- Pagina hero ---------- */

.mm-page-hero {
    padding-top: 7rem;
    padding-bottom: 2.75rem;
    background:
        radial-gradient(circle at top left, rgba(2, 98, 185, 0.12), #ffffff 55%),
        radial-gradient(circle at bottom right, #e3f0ff, #ffffff 55%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--mm-gray-900);
}

@media (min-width: 992px) {
    .mm-page-hero {
        padding-top: 8rem;
        padding-bottom: 3.25rem;
    }
}

/* Als er een uitgelichte afbeelding als achtergrond is */
.mm-page-hero.mm-page-hero--has-thumb {
    border-bottom: none;
    color: #f9fafb;
}

.mm-page-hero.mm-page-hero--has-thumb .mm-section-title {
    color: #e5e7eb;
    opacity: 0.9;
}

.mm-page-hero.mm-page-hero--has-thumb .mm-page-breadcrumb {
    color: #e5e7eb;
}

.mm-page-hero.mm-page-hero--has-thumb .mm-page-breadcrumb a {
    color: #ffffff;
}

.mm-page-hero.mm-page-hero--has-thumb .mm-page-breadcrumb a:hover {
    text-decoration: underline;
}

.mm-page-title {
    font-weight: 800;
    font-size: clamp(1.8rem, 2.3vw, 2.3rem);
    margin-bottom: 0.6rem;
}

.mm-page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.mm-page-meta .mm-pill {
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
}

.mm-page-breadcrumb {
    color: var(--mm-gray-500);
}

.mm-page-breadcrumb a {
    color: var(--mm-blue);
    text-decoration: none;
}

.mm-page-breadcrumb a:hover {
    text-decoration: underline;
}

.mm-page-breadcrumb .current {
    font-weight: 600;
    color: inherit;
}

/* ---------- Pagina content kaart & sidebar (zoals eerder) ---------- */

.mm-page-content-section {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.mm-page-card {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    padding: 1.75rem 1.5rem;
}

@media (min-width: 768px) {
    .mm-page-card {
        padding: 2rem 2rem;
    }
}

.mm-page-card .entry-content > h2,
.mm-page-card .entry-content > h3,
.mm-page-card .entry-content > h4 {
    margin-top: 1.7rem;
}

/* Sidebar op pagina's iets meer als kolom-kaart */

.mm-page-sidebar {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 1.5rem 1.25rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

@media (max-width: 991.98px) {
    .mm-page-sidebar {
        margin-top: 1.25rem;
    }
}

/* ---------- Sidebar widgets (algemene stijl) ---------- */

.mm-page-sidebar .mm-widget {
    margin-bottom: 1.25rem;
}

.mm-page-sidebar .widget-title {
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
}

/* Kaart-stijl voor blokken */
.mm-widget--card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    padding: 1rem 0.9rem;
}

/* CTA-blok extra opvallend */
.mm-widget--cta {
    background: linear-gradient(135deg, rgba(2, 98, 185, 0.08), rgba(2, 98, 185, 0.02));
    border-radius: 1rem;
    border: 1px solid rgba(2, 98, 185, 0.3);
    padding: 1rem 0.9rem 1.1rem;
}

/* Header van widget met optionele link rechts */
.mm-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.mm-widget-link {
    text-decoration: none;
    color: var(--mm-blue);
}

.mm-widget-link:hover {
    text-decoration: underline;
}

/* Kleine blok-labels binnen widgets */
.mm-widget-block-label {
    font-weight: 600;
}

/* Lijst in widgets */
.mm-widget-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.mm-widget-list li {
    margin-bottom: 0.35rem;
}

/* Tag voor type (Jeugd, Senioren, OldStars) */
.mm-widget-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-right: 0.35rem;
    background: rgba(2, 98, 185, 0.08);
    color: var(--mm-blue);
}

/* Divider binnen card-widget */
.mm-widget-divider {
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    margin: 0.9rem 0;
}

/* Grid voor "Handig": downloads en snel naar naast elkaar */
.mm-widget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

/* ---------- Sidebar nieuws (mini-kaarten) ---------- */

.mm-sidebar-news-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.mm-sidebar-news-item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.mm-sidebar-news-thumb-link {
    flex-shrink: 0;
}

.mm-sidebar-news-thumb {
    width: 60px;
    height: 60px;
    border-radius: 0.75rem;
    overflow: hidden;
    background: radial-gradient(circle at top, var(--mm-blue), var(--mm-blue-dark));
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.mm-sidebar-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mm-sidebar-news-body {
    flex: 1;
    min-width: 0;
}

.mm-sidebar-news-date {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mm-gray-500);
    margin-bottom: 0.05rem;
}

.mm-sidebar-news-title {
    font-size: 0.9rem;
    margin: 0;
}

.mm-sidebar-news-title a {
    color: var(--mm-gray-900);
    text-decoration: none;
}

.mm-sidebar-news-title a:hover {
    color: var(--mm-blue);
    text-decoration: underline;
}

/* Trainingstijden-lijst netjes uitgelijnd */
.mm-widget-list--schedule li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

/* Label-kolom (Jeugd / Senioren / OldStars) met vaste breedte */
.mm-widget-tag--label {
    min-width: 90px;      /* eventueel 80px of 100px naar smaak */
    text-align: left;
    flex-shrink: 0;
}

/* Tekst ernaast vult de rest van de regel */
.mm-widget-line {
    flex: 1;
}


/* ---------- Hero / home: trainingstabellen loskoppelen van globale tabelstijl ---------- */

.mm-schedule-card .mm-schedule-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.mm-schedule-card .mm-schedule-table th,
.mm-schedule-card .mm-schedule-table td {
    border: none;
    padding: 0.55rem 0.4rem;
    vertical-align: top;
    background: transparent;
}

.mm-schedule-card .mm-schedule-table th {
    font-weight: 700;
    color: var(--mm-gray-700);
    white-space: nowrap;
}

/* Alle rijen in het schema geen zebra-achtergrond meegeven */
.mm-schedule-card .mm-schedule-table tbody tr {
    background: transparent !important;
}

.mm-schedule-card .mm-schedule-table tbody tr + tr th,
.mm-schedule-card .mm-schedule-table tbody tr + tr td {
    border-top: 1px solid rgba(148, 163, 184, 0.4);
}

/* Eerste rij van de schema-tabellen op home mag geen blauwe headerstijl krijgen */
.mm-schedule-card .mm-schedule-table thead th,
.mm-schedule-card .mm-schedule-table tbody tr:first-child th {
    background: transparent !important;
    color: var(--mm-gray-700) !important;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    border-color: transparent;
}


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

.mm-footer-top {
    padding-bottom: 0.5rem;
}

.mm-footer a {
    color: #e5e7eb;
    text-decoration: none;
    opacity: 0.9;
}

.mm-footer a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Social icons blok */

.mm-footer-social {
    margin-top: 0.25rem;
}

.mm-footer-social-link {
    display: inline-flex;
    text-decoration: none;
}

.mm-footer-social-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.45);
    transition: transform 150ms ease-out, box-shadow 150ms ease-out, opacity 150ms ease-out;
}

/* Facebook-kleur */
.mm-footer-social-icon--fb {
    background: #1877F2;
}

/* Instagram-gradient */
.mm-footer-social-icon--ig {
    background:
        radial-gradient(circle at 30% 30%, #fdf497 0, #fdf497 10%, transparent 40%),
        radial-gradient(circle at 30% 110%, #fd5949 0, #d6249f 35%, #285AEB 70%);
}

/* Icons zelf */
.mm-footer-social-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Hover-effect */
.mm-footer-social-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.6);
    opacity: 0.95;
}


/* ---------- Fotoalbum overzicht ---------- */

.mm-album-grid {
    margin-top: 0.25rem;
}

.mm-album-card {
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform var(--mm-transition-fast), box-shadow var(--mm-transition-fast), border-color var(--mm-transition-fast);
}

.mm-album-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    border-color: rgba(2, 98, 185, 0.6);
}

.mm-album-thumb-link {
    display: block;
    overflow: hidden;
}

.mm-album-thumb {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    background: radial-gradient(circle at top, var(--mm-blue), var(--mm-blue-dark));
}

.mm-album-thumb img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    transition: transform 200ms ease-out;
}

.mm-album-card:hover .mm-album-thumb img {
    transform: scale(1.03);
}

/* Placeholder als er geen thumbnail is */
.mm-album-thumb-placeholder {
    width: 100%;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.mm-album-thumb-placeholder img {
    max-width: 130px;
    height: auto;
    object-fit: contain;
}

.mm-album-body {
    padding: 0.9rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.mm-album-meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mm-gray-500);
}

.mm-album-title a {
    color: var(--mm-gray-900);
}

.mm-album-title a:hover {
    color: var(--mm-blue);
}

.mm-album-more {
    margin-top: auto;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-blue);
    text-decoration: none;
}

.mm-album-more:hover {
    text-decoration: underline;
}

/* ---------- Single fotoalbum: galerij ---------- */

.mm-album-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.mm-album-gallery-item {
    position: relative;
}

.mm-album-gallery-link {
    display: block;
    text-decoration: none;
}

.mm-album-gallery-thumb {
    border-radius: 0.9rem;
    overflow: hidden;
    background: radial-gradient(circle at top, var(--mm-blue), var(--mm-blue-dark));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
    transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}

.mm-album-gallery-thumb img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.mm-album-gallery-link:hover .mm-album-gallery-thumb {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.26);
}

/* ---------- Lightbox: zwarte overlay + duidelijke iconen ---------- */

.mm-lightbox-backdrop {
    position: fixed;
    inset: 0;
    /* Echte zwarte, doorzichtige achtergrond */
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 9999;
}

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

.mm-lightbox-inner {
    max-width: 1100px;
    max-height: 90vh;
    position: relative;
}

/* Foto zelf: geen afgeronde hoeken */
.mm-lightbox-inner img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 0;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
    display: block;
}

/* Sluit-knop: groter, helder wit en duidelijk kader */
.mm-lightbox-close {
    position: absolute;
    top: -44px;
    right: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mm-lightbox-close:hover {
    background: #000000;
}

/* Vorige/volgende-knoppen: duidelijk zichtbaar en iets groter */
.mm-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9);
}

.mm-lightbox-nav--prev {
    left: -60px;
}

.mm-lightbox-nav--next {
    right: -60px;
}

.mm-lightbox-nav:hover {
    background: #000000;
}

/* Body lock als lightbox openstaat */
body.mm-lightbox-open {
    overflow: hidden;
}

/* Kleinere schermen: knoppen dichterbij en iets compacter */
@media (max-width: 767.98px) {
    .mm-lightbox-nav {
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }

    .mm-lightbox-nav--prev {
        left: -46px;
    }

    .mm-lightbox-nav--next {
        right: -46px;
    }

    .mm-lightbox-close {
        top: -40px;
        width: 32px;
        height: 32px;
        font-size: 1.4rem;
    }
}

/* Icoontjes in de lightbox-knoppen perfect centreren */
.mm-lightbox-nav,
.mm-lightbox-close {
    display: flex;              /* ipv inline-flex, mag ook maar dit is expliciet */
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;             /* haalt extra “tekstruimte” weg rond het icoon */
}

/* Zorg dat de iconen zelf duidelijk zijn */
.mm-lightbox-nav {
    font-size: 1.8rem;
}

.mm-lightbox-close {
    font-size: 1.6rem;
}

/* Icoontjes in lightbox-knoppen mooi gecentreerd met specifieke offsets */

.mm-lightbox-nav,
.mm-lightbox-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mm-lightbox-icon {
    display: block;
    line-height: 1;
    text-align: center;
}

/* Sluit-knop: translateY(-0.12em) */
.mm-lightbox-close .mm-lightbox-icon {
    font-size: 1.6rem;
    transform: translateY(-0.12em);
}

/* Vorige-knop: translate(-0.04em, -0.05em) */
.mm-lightbox-nav--prev .mm-lightbox-icon {
    font-size: 1.8rem;
    transform: translate(-0.04em, -0.05em);
}

/* Volgende-knop: translate(0.04em, -0.05em) */
.mm-lightbox-nav--next .mm-lightbox-icon {
    font-size: 1.8rem;
    transform: translate(0.04em, -0.05em);
}


/* ---------- Sectie-navigatie in sidebar ---------- */

.mm-widget-section-nav .mm-widget-header {
    margin-bottom: 0.5rem;
}

.mm-widget-list--section-nav li {
    margin-bottom: 0.25rem;
}

.mm-widget-list--section-nav li a {
    display: block;
    padding: 0.25rem 0.4rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--mm-gray-800);
}

.mm-widget-list--section-nav li a:hover {
    background: rgba(2, 98, 185, 0.06);
    color: var(--mm-blue);
}

/* Huidige pagina duidelijk markeren */
.mm-widget-list--section-nav li.is-current a,
.mm-widget-list--section-nav li a.is-current-link {
    background: rgba(2, 98, 185, 0.12);
    color: var(--mm-blue);
    font-weight: 600;
}

/* ---------- Sectie-navigatie: subniveau ---------- */

.mm-widget-list--section-nav > li {
    margin-bottom: 0.25rem;
}

/* Submenu (niveau 2) netjes ingesprongen en visueel gekoppeld */
.mm-widget-list--section-nav .mm-subnav {
    list-style: none;
    padding-left: 0.6rem;
    margin: 0.15rem 0 0.1rem;
    border-left: 1px solid rgba(148, 163, 184, 0.5);
}

.mm-widget-list--section-nav .mm-subnav li {
    margin-bottom: 0.15rem;
}

.mm-widget-list--section-nav .mm-subnav li a {
    padding: 0.15rem 0.4rem 0.15rem 0.6rem;
    color: var(--mm-gray-700);
}

/* Kleine bullet/indicator voor subitems (optioneel) */
.mm-widget-list--section-nav .mm-subnav li a::before {
    content: "•";
    margin-right: 0.3rem;
    font-size: 1em;
    color: var(--mm-gray-400);
}

/* Hover en current blijven werken zoals eerder */
.mm-widget-list--section-nav li.is-current > a,
.mm-widget-list--section-nav li a.is-current-link {
    background: rgba(2, 98, 185, 0.12);
    color: var(--mm-blue);
    font-weight: 600;
}

/* Extra styling specifiek voor de downloadknop */
.downloadbutton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;              /* ruimte tussen icoon en tekst */
    text-decoration: none !important;
}

/* Icoontje vóór de tekst (unicode, geen extra library nodig) */
.downloadbutton::after {
    content: "⬇";             /* downloadpijltje, evt. vervangen door "📄" of "↓" */
    display: inline-block;
    font-size: 1.1em;
    line-height: 1;
}

/* Optioneel: iets subtieler bij hover, bouwt voort op bestaande .btn hover */
.downloadbutton:hover,
.downloadbutton:focus {
    text-decoration: none;    /* geen underline op hover */
}