/*
Theme Name: Moskee
Description: Rustig, toegankelijk blokthema voor moskeeën: gebed, onderwijs, doneren en ANBI. Werkt samen met de doneerplugin.
Version: 0.2.6
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Author: icul.nl
Author URI: https://icul.nl
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moskee
*/

/* Kleuren, type en knoppen staan in theme.json. Hier alleen wat theme.json niet kan. */

/* Browseroppervlakken */
:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.op-donker :focus-visible { outline-color: #fff; }
::selection { background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--contrast); }
input, textarea { caret-color: var(--wp--preset--color--primary); }

/* Header, sticky */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--border); }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0); }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } } /* daar scrolt de adminbalk mee (position: absolute), anders blijft er een kier boven de header */
.wp-site-blocks > .site-header + * { margin-block-start: 0; } /* geen beige strook tussen kop en infobalk (blockGap) */
.site-header .wp-block-navigation a { color: var(--wp--preset--color--text-2); padding: 9px 12px; }
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--primary); font-weight: 700; }
/* Zelfde breedte en zijmarge als infobalk en inhoud. Menu en doneerknop altijd rechts, ook zonder logo. */
.header-binnen { box-sizing: content-box; max-width: 1080px; margin-inline: auto; padding-inline: var(--wp--style--root--padding-left, 24px); }
.header-binnen > :last-child { margin-left: auto; }
/* Patroon "Header gecentreerd": logo boven, menu en doneerknop eronder in het midden. */
.header-gecentreerd { gap: 12px; }
.header-gecentreerd > :last-child { margin-left: 0; }
.site-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 781px) { .site-header .wp-block-site-logo img { width: auto; max-height: 56px; } } /* een vierkant logo maakt de vaste kop anders een kwart van het scherm */
/* Tot 1024px past het volledige menu niet naast logo en knop: dan het hamburgermenu (WordPress doet dat pas onder 600px). */
@media (min-width: 600px) and (max-width: 1023px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Uitgeklapt menu: achtergrond van het theme en links uitgelijnd (core maakt het wit en rechts, omdat het menu rechts staat). */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--base); }
.site-header .wp-block-navigation__responsive-container.is-menu-open,
.site-header .wp-block-navigation__responsive-container.is-menu-open .items-justified-right { --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; }
/* Uitgeklapt menu: elk item een tikdoel van 44px (core zet de padding op 0, vandaar een class zwaarder dan core); de ruimte zit nu in het item, niet ertussen. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { padding-block: 10px; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { row-gap: 0; }
/* Hamburger: even hoog als de doneerknop, icoon in het midden, geen wit vlak op de beige kop. */
.site-header .wp-block-navigation__responsive-container-open { width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid var(--wp--preset--color--border); border-radius: 12px; background: transparent; color: var(--wp--preset--color--primary); }

/* Donkere vlakken: infobalk, doneer-CTA, footer */
.op-donker { background: var(--wp--preset--color--primary); color: rgba(255, 255, 255, 0.82); }
.op-donker :where(h1, h2, h3, h4, strong, a) { color: #fff; }
.infobalk p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.site-footer { margin-top: 96px; }
.site-footer p, .site-footer a { font-size: 15px; }
.site-footer .footer-onder { border-top: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.site-footer .footer-onder a { color: inherit; text-decoration: underline; }

/* Knoppen: accent is alleen voor doneren */
.wp-block-button.is-style-doneer .wp-block-button__link { background: var(--wp--preset--color--accent); color: #fff; }
.wp-block-button.is-style-doneer .wp-block-button__link:hover { background: var(--wp--preset--color--accent-hover); }
.wp-block-button.is-style-licht .wp-block-button__link { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.wp-block-button.is-style-licht .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); }

/* Arabische naam boven de hoofdtitel */
.is-style-arabisch { font-family: var(--wp--preset--font-family--arabisch); font-weight: 600; font-size: clamp(1.55rem, 3.4vw, 2.2rem); line-height: 1.5; color: var(--wp--preset--color--primary); text-align: left; margin-bottom: 0; }

/* Tekst */
.lead { font-size: var(--wp--preset--font-size--large); line-height: 1.45; color: var(--wp--preset--color--text-2); max-width: 40em; }
/* Smaller dan de pagina: links houden, anders centreert de constrained layout hem. */
.is-layout-constrained > .lead { margin-left: 0 !important; }
.gedempt { color: var(--wp--preset--color--text-3); font-size: var(--wp--preset--font-size--small); }
.veldlabel { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--text-2); margin-bottom: 4px; }

/* Rijen met lijn erboven (weekritme, lestijden, contactgegevens, FAQ) */
.rij { border-top: 1px solid var(--wp--preset--color--border); padding-block: 16px; }
.rij > p { margin: 0; }
.rij-titel { font-weight: 600; font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--contrast); }
.rij > p:not(.rij-titel) { color: var(--wp--preset--color--text-2); }

/* Witte kaart en zacht accentvlak */
.kaart { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; box-shadow: var(--wp--preset--shadow--sm); }
.aftrekbaar { background: var(--wp--preset--color--accent-soft); border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 25%, var(--wp--preset--color--accent-soft)); border-radius: 12px; }
.doneer-cta { border-radius: 12px; }
.plek-voor-plugin { border: 1px dashed var(--wp--preset--color--text-3); border-radius: 12px; color: var(--wp--preset--color--text-3); }

/* ANBI: gegevenstabel en documenten */
.gegevens table { border-collapse: collapse; width: 100%; }
.gegevens td { border: 0; padding: 6px 0; vertical-align: top; }
.gegevens td:first-child { color: var(--wp--preset--color--text-3); width: 42%; padding-right: 16px; }
.gegevens td:last-child { font-weight: 600; }
.documenten { list-style: none; padding: 0; }
.documenten li { border-bottom: 1px solid var(--wp--preset--color--border); padding: 15px 0; }
.documenten a { color: var(--wp--preset--color--contrast); font-weight: 500; text-decoration: none; }
.documenten a:hover { text-decoration: underline; }

/* Formulieren (van plugins): basisstijl zodat ze in het theme passen.
   Rand van invoervelden minimaal 3:1 tegen wit (WCAG 1.4.11); --border is daarvoor te licht. tools/tests/contrast.php rekent dezelfde menging na. */
:root { --moskee-veldrand: color-mix(in srgb, var(--wp--preset--color--text-3) 75%, var(--wp--preset--color--surface)); }
.wp-site-blocks :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
	width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface); border: 1px solid var(--moskee-veldrand); border-radius: 12px;
}
.wp-site-blocks :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--wp--preset--color--danger); }
.wp-site-blocks label { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--text-2); }

.tabulair { font-variant-numeric: tabular-nums; }

/* Ritme van de pagina */
.pagina { padding-top: 64px; }
.sectie { padding-top: 88px; }
.sectie-klein { padding-top: 48px; }
.header-binnen { padding-block: 16px; }
.infobalk-binnen { padding-block: 11px; }
.infobalk-binnen, .infobalk-binnen > .wp-block-group { row-gap: 4px; } /* op mobiel staan de regels onder elkaar; 20px ertussen maakte de balk te hoog */
.site-footer > .wp-block-group { padding-block: 44px 36px; }
.footer-naam strong { font-size: var(--wp--preset--font-size--large); }
.footer-onder { margin-top: 32px; padding-top: 18px; }
.doneer-cta { padding: 40px; }
.kaart, .aftrekbaar, .plek-voor-plugin { padding: 24px; }
@media (max-width: 781px) {
	.alleen-breed { display: none; }
	.doneer-cta { padding: 24px; }
}

/* Koppen en tekstvarianten */
.hero h1 { font-size: var(--wp--preset--font-size--display); margin-top: 0; }
.h-groot { font-size: var(--wp--preset--font-size--xxx-large); }
.h-klein { font-size: var(--wp--preset--font-size--x-large); }
.tekst-2 { color: var(--wp--preset--color--text-2); }
.rij-link { flex-basis: 100%; font-weight: 600; }

/* Hero-foto */
.hero-foto img { width: 100%; height: 360px; object-fit: cover; border-radius: 12px; }

/* Hero zonder foto: donker vlak (patronen "Hero effen" en "Hero met geometrisch motief") */
.hero-effen { padding: 56px 40px; border-radius: 12px; }
.hero-effen .is-style-arabisch { color: #fff; }
.hero-effen .lead { color: rgba(255, 255, 255, 0.82); }
.hero-motief { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%23fff' stroke-opacity='.13'%3E%3Crect x='24' y='24' width='48' height='48'/%3E%3Crect x='24' y='24' width='48' height='48' transform='rotate(45 48 48)'/%3E%3Cpath d='M48 0v24M48 72v24M0 48h24M72 48h24'/%3E%3C/svg%3E"); background-size: 96px 96px; }
@media (max-width: 781px) { .hero-effen { padding: 36px 24px; } }

/* Doneerformulier van de doneerplugin in de stijl van het theme (plugin-classes .md-*). */
div.md-donation-wrapper { min-height: 0; font-family: inherit; color: var(--wp--preset--color--contrast); } /* plugin zet min-height: 100vh: lege ruimte onder het formulier */
/* Kleuren van de plugin (CSS-variabelen) op die van het theme zetten, zodat groen/grijs overal verdwijnt. */
.md-donation-wrapper, .md-spotlight, .md-donor-grid-wrap {
	--md-green: var(--wp--preset--color--primary);
	--md-green-dark: var(--wp--preset--color--primary-hover);
	--md-cyan: var(--wp--preset--color--primary);
	--md-border-color: var(--wp--preset--color--border);
	--md-border-hover: var(--wp--preset--color--text-3);
	--md-text-primary: var(--wp--preset--color--contrast);
	--md-text-secondary: var(--wp--preset--color--text-2);
	--md-text-muted: var(--wp--preset--color--text-2);
	--md-text-light: var(--wp--preset--color--text-3);
	--md-bg-primary: var(--wp--preset--color--surface);
	--md-bg-secondary: var(--wp--preset--color--surface);
}
.md-donation-wrapper .md-donation-container { border: 1px solid var(--wp--preset--color--border); border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--surface); }
.md-donation-wrapper .md-header:not(:has(.md-header-text)) { display: none; }
/* Doelen als één lijst: dunne scheidingslijnen, geen kaart per doel. */
.md-donation-wrapper .md-items-grid { padding: 0; gap: 0; }
.md-donation-wrapper .md-item-card { align-items: center; gap: 16px; margin: 0; padding: 16px 20px; border: 0; border-top: 1px solid var(--wp--preset--color--border); border-radius: 0; background: var(--wp--preset--color--surface); transition: background-color .15s ease-out; }
.md-donation-wrapper .md-item-card:first-child { border-top: 0; }
.md-donation-wrapper .md-item-card:focus-within { background: color-mix(in srgb, var(--wp--preset--color--base) 50%, #fff); }
.md-donation-wrapper .md-item-card h3 { font-size: 17px; line-height: 1.3; margin: 0 0 2px; }
.md-donation-wrapper .md-item-card p { font-size: 14px; line-height: 1.4; margin: 0; color: var(--wp--preset--color--text-2); }
.md-donation-wrapper .md-item-controls { flex: 0 0 auto; }
.md-donation-wrapper .md-item-controls:has(.md-open-amount) { flex: 0 0 160px; }
.md-donation-wrapper input, .md-donation-wrapper textarea { box-sizing: border-box; max-width: 100%; font-family: inherit; }
.md-donation-wrapper .md-open-amount,
.md-donation-wrapper .md-form input,
.md-donation-wrapper .md-form textarea { width: 100%; border: 1px solid var(--moskee-veldrand); border-radius: 10px; background: #fff; color: var(--wp--preset--color--contrast); font-size: 16px; box-shadow: none; }
/* Bedragveld: zacht vlak met rand van 3:1, euroteken links, cijfers rechts zodat bedragen onder elkaar staan. */
.md-donation-wrapper .md-item-card .md-open-amount { height: 48px; padding: 0 14px !important; border: 1px solid var(--moskee-veldrand); background: var(--wp--preset--color--subtle); font-size: 18px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.md-donation-wrapper .md-item-card .md-open-amount:focus { background: #fff; }
.md-donation-wrapper .md-open-amount::placeholder { font-weight: 400; color: var(--wp--preset--color--text-3); text-align: left; }
/* Euroteken voor het bedrag zodra er iets is ingevuld (placeholder noemt het al). */
.md-donation-wrapper .md-item-controls:has(.md-open-amount) { position: relative; }
.md-donation-wrapper .md-item-controls:has(.md-open-amount:not(:placeholder-shown))::before { content: "€"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: 600; pointer-events: none; }
.md-donation-wrapper .md-open-amount:not(:placeholder-shown) { padding-left: 32px !important; } /* plugin zet padding met !important */
.md-donation-wrapper .md-item-price { color: var(--wp--preset--color--primary); font-size: 22px; font-variant-numeric: tabular-nums; }
.md-donation-wrapper .md-shares-btn { border: 1px solid var(--moskee-veldrand); color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface); font-family: inherit; }
.md-donation-wrapper .md-shares-btn:hover:not(:disabled) { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary-soft); }
.md-donation-wrapper .md-form input { height: 48px; padding: 0 14px; }
.md-donation-wrapper .md-form textarea { min-height: 88px; padding: 12px 14px; }
.md-donation-wrapper input:focus, .md-donation-wrapper textarea:focus { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; border-color: var(--wp--preset--color--primary); box-shadow: none; }
.md-donation-wrapper .md-summary-section { padding: 20px 16px; background: var(--wp--preset--color--surface); border-top: 1px solid var(--wp--preset--color--border); }
.md-donation-wrapper .md-empty { padding: 0 0 16px; text-align: left; font-size: 14px; color: var(--wp--preset--color--text-2); }
.md-donation-wrapper .md-receipt { margin-bottom: 20px; border: 1px solid var(--wp--preset--color--border); border-radius: 12px; background: var(--wp--preset--color--surface); }
.md-donation-wrapper .md-receipt-item.total .amount { color: var(--wp--preset--color--primary); font-variant-numeric: tabular-nums; }
.md-donation-wrapper .md-form-group { margin-bottom: 14px; }
.md-donation-wrapper .md-form-group label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--contrast); }
.md-donation-wrapper .md-optional { font-weight: 400; color: var(--wp--preset--color--text-2); }
.md-donation-wrapper .md-submit-btn { min-height: 52px; border-radius: 12px; background: var(--wp--preset--color--accent); color: #fff; font-family: inherit; font-size: 18px; font-weight: 700; }
.md-donation-wrapper .md-submit-btn:not(:disabled):hover { background: var(--wp--preset--color--accent-hover); }
.md-donation-wrapper .md-submit-btn:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.md-donation-wrapper .md-submit-btn:disabled { opacity: 1; background: var(--wp--preset--color--border); color: var(--wp--preset--color--text-2); cursor: not-allowed; }
.md-donation-wrapper .md-submit-btn .emoji, .md-donation-wrapper .md-submit-btn img.emoji { display: none !important; }
/* Aandelenkaart (campagne met aandelen). */
.md-donation-wrapper .md-shares-card { margin: 0 0 20px; padding: 0; border: 0; border-radius: 0; background: transparent; } /* het formulier is al de kaart; geen kaart in een kaart */
.md-donation-wrapper .md-shares-card-title { font-size: 17px; color: var(--wp--preset--color--contrast); }
.md-donation-wrapper .md-shares-section-label { color: var(--wp--preset--color--text-2); }
.md-donation-wrapper #md-shares-input { border: 1px solid var(--moskee-veldrand); border-radius: 10px; background: var(--wp--preset--color--subtle); font-variant-numeric: tabular-nums; }
.md-donation-wrapper .md-shares-total-row { border-top-color: var(--wp--preset--color--border); }
.md-donation-wrapper .md-shares-total-row strong { color: var(--wp--preset--color--primary); font-variant-numeric: tabular-nums; }
.md-donation-wrapper .md-shares-divider { color: var(--wp--preset--color--text-2); }
.md-donation-wrapper .md-shares-divider::before, .md-donation-wrapper .md-shares-divider::after { background: var(--wp--preset--color--border); }
.md-donation-wrapper .md-free-amount-wrapper { border: 1px solid var(--moskee-veldrand); border-radius: 10px; background: var(--wp--preset--color--subtle); }
.md-donation-wrapper .md-free-amount-wrapper:focus-within { border-color: var(--wp--preset--color--primary); background: #fff; }
.md-donation-wrapper .md-free-euro { border: 0; background: transparent; color: var(--wp--preset--color--contrast); }
.md-donation-wrapper #md-free-input { height: 48px; border: 0; background: transparent; font-variant-numeric: tabular-nums; }
/* Bij aandelen toont de kaart zelf het totaal; de melding "Selecteer donaties" is dan verwarrend. */
.md-donation-wrapper:has(.md-shares-card) .md-empty { display: none; }
@media (max-width: 480px) {
	.md-donation-wrapper .md-item-card { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
	.md-donation-wrapper .md-item-controls, .md-donation-wrapper .md-item-controls:has(.md-open-amount) { flex: 1 1 100%; }
}

/* Spotlight-campagne van de doneerplugin (staat boven elk ander doneerformulier). De plugin zet zijn CSS in de pagina, na het theme: selectors daarom met .md-spotlight ervoor. */
.md-donation-container:has(> .md-spotlight) { margin: 0 0 16px; border: 1px solid var(--wp--preset--color--border); border-radius: 16px; background: var(--wp--preset--color--surface); box-shadow: none; overflow: hidden; }
.md-spotlight { padding: 20px; }
.md-spotlight .md-spotlight-intro { font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--text-2); }
.md-spotlight .md-spotlight-intro strong { display: block; margin-bottom: 4px; font-size: 19px; line-height: 1.3; color: var(--wp--preset--color--contrast); }
.md-spotlight .md-spotlight-intro em { font-size: 14px; }
.md-spotlight .md-spotlight-progress { margin-top: 16px; }
.md-spotlight .md-spotlight-progress-bar { height: 8px; border-radius: 999px; background: var(--wp--preset--color--subtle); overflow: hidden; }
.md-spotlight .md-spotlight-progress-fill { height: 100%; border-radius: inherit; background: var(--wp--preset--color--accent); }
.md-spotlight .md-spotlight-progress-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 13px; color: var(--wp--preset--color--text-2); font-variant-numeric: tabular-nums; }
/* Donateursvakjes zoals in het donateursoverzicht. */
.md-spotlight .md-spotlight-grid-label { color: var(--wp--preset--color--text-3); }
.md-spotlight .md-spotlight-cell { border-radius: 8px; background: var(--wp--preset--color--primary); }
.md-spotlight .md-spotlight-cell-empty { background: var(--wp--preset--color--subtle) !important; } /* plugin zet !important */
/* Rij met donateurs alleen tonen als er namen in staan. */
.md-spotlight:not(:has(.md-spotlight-cell:not(.md-spotlight-cell-empty))) :is(.md-spotlight-grid-label, .md-spotlight-grid) { display: none; }
.md-spotlight .md-spotlight-footer { margin-top: 16px; }
.md-spotlight .md-spotlight-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 12px; background: var(--wp--preset--color--primary); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; }
.md-spotlight .md-spotlight-btn:hover { background: var(--wp--preset--color--primary-hover); }
.md-spotlight .md-spotlight-btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.md-spotlight :is(.md-spotlight-btn-icon, .md-spotlight-btn-sub) { display: none; }
/* Schakelaars in het formulier ("Toon mijn naam"): kleuren van het theme. */
.md-donation-wrapper .md-optins-section { border-color: var(--wp--preset--color--border); background: color-mix(in srgb, var(--wp--preset--color--base) 50%, #fff); }
.md-donation-wrapper .md-toggle input:checked + .md-toggle-slider { background: var(--wp--preset--color--primary); }
.md-donation-wrapper .md-toggle input:focus-visible + .md-toggle-slider { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
/* Donateursoverzicht [md_donor_grid]. De plugin zet zijn CSS in de pagina (na het theme), vandaar .md-donation-container ervoor. */
.md-donation-container .md-donor-grid-page { max-width: none; padding: 20px; font-family: inherit; }
.md-donation-container .md-grid-header { text-align: left; margin-bottom: 16px; }
.md-donation-container .md-grid-header h2 { margin: 0; font-size: 19px; line-height: 1.3; }
.md-donation-container .md-grid-btn { min-height: 44px; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700; }
.md-donation-container .md-grid-download { border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); }
.md-donation-container .md-grid-download:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary-soft); }
.md-donation-container .md-grid-share { background: var(--wp--preset--color--primary); color: #fff; }
.md-donation-container .md-grid-share:hover { background: var(--wp--preset--color--primary-hover); }
.md-donation-container .md-grid-btn:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.md-donation-container .md-grid-btn img.emoji { display: none !important; }
/* Het vlak dat als afbeelding gedeeld wordt: wit houden, maar geen kaart in een kaart. */
.md-donation-container .md-donor-grid-capture { padding: 4px 0 0; border: 0; border-radius: 0; }
.md-donation-container .md-capture-header { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--wp--preset--color--border); }
.md-donation-container .md-capture-header h3 { margin: 0 0 12px; font-size: 17px; }
.md-donation-container .md-grid-progress-bar { height: 8px; background: var(--wp--preset--color--subtle); }
.md-donation-container .md-grid-progress-fill { background: var(--wp--preset--color--accent); }
.md-donation-container .md-grid-progress-labels, .md-donation-container .md-grid-shares-info { font-size: 13px; color: var(--wp--preset--color--text-2); font-variant-numeric: tabular-nums; }
.md-donation-container .md-grid-nav-btn { min-width: 44px; min-height: 44px; border-color: var(--wp--preset--color--border); border-radius: 10px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--primary); font-family: inherit; }
.md-donation-container .md-grid-nav-btn:hover:not(:disabled) { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary); color: #fff; }
.md-donation-container .md-grid-page-indicator { font-size: 14px; color: var(--wp--preset--color--text-2); }
.md-donation-container .md-donor-cell { border-radius: 8px; background: var(--wp--preset--color--primary); font-size: 13px; }
.md-donation-container .md-donor-cell-empty { background: var(--wp--preset--color--subtle); }
.md-donation-container .md-capture-footer { border-top-color: var(--wp--preset--color--border); color: var(--wp--preset--color--text-3); }
@media (max-width: 480px) { .md-donation-container .md-donor-names-grid { grid-template-columns: repeat(3, 1fr); } } /* anders maar 2 kolommen: 25 rijen per pagina */

/* Blokken van de plugin Moskee Beheer (classes .mb-*, variabelen --mb-*). Volgorde van de plugin-CSS ligt niet vast, vandaar body ervoor. */
body .mb-blok {
	--mb-primair: var(--wp--preset--color--primary);
	--mb-primair-zacht: var(--wp--preset--color--primary-soft);
	--mb-succes: var(--wp--preset--color--success);
	--mb-succes-zacht: color-mix(in srgb, var(--wp--preset--color--success) 8%, var(--wp--preset--color--surface)); /* meer dan 8%: succes-tekst erop komt onder 4,5:1 */
	--mb-lijn: var(--wp--preset--color--border);
	--mb-vlak: var(--wp--preset--color--surface);
	--mb-tekst-zacht: var(--wp--preset--color--text-2);
}
/* Secties Komende activiteiten en Uitgelicht event: weg als het blok leeg is (niets gepland) of de plugin ontbreekt. Alleen op de site; in de editor blijven ze staan. */
body:not(.editor-styles-wrapper) :is(.komend-rij, .uitgelicht-rij):not(:has(.mb-komend)) { display: none; }
/* Blokstijl "Groot" van Komende activiteiten (patroon Uitgelicht event): het item als grote kaart, label boven de titel.
   Alleen koppelvlak-namen; de hele kaart is klikbaar als de titel een link is. */
.is-style-groot .mb-rij { position: relative; grid-template-columns: auto 1fr; grid-template-areas: "dag label" "dag wat"; align-items: center; gap: 8px 32px; margin: 0 0 16px; padding: 32px 36px 32px 42px; border-radius: 12px; box-shadow: inset 6px 0 0 var(--mb-tint, var(--wp--preset--color--primary)); }
.is-style-groot .mb-dag { grid-area: dag; font-size: 2.1em; padding-right: 32px; color: var(--wp--preset--color--primary); }
.is-style-groot .mb-label { grid-area: label; justify-self: start; align-self: end; font-size: var(--wp--preset--font-size--small); }
.is-style-groot .mb-wat { grid-area: wat; align-self: start; }
.is-style-groot .mb-titel { font-size: var(--wp--preset--font-size--xxx-large); font-weight: 700; line-height: 1.2; color: var(--wp--preset--color--primary); text-wrap: balance; }
.is-style-groot .mb-titel:any-link { text-decoration: none; }
.is-style-groot .mb-titel:any-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.is-style-groot .mb-titel:any-link::after { content: " \2192"; }
.is-style-groot .mb-titel:focus-visible { outline: none; }
.is-style-groot .mb-rij:has(.mb-titel:focus-visible) { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.is-style-groot .mb-rij:has(.mb-titel:any-link):hover { border-color: var(--wp--preset--color--primary); }
.is-style-groot .mb-info { margin-top: 6px; font-size: var(--wp--preset--font-size--large); line-height: 1.45; }
@media (max-width: 600px) {
	.is-style-groot .mb-rij { gap: 6px 16px; padding: 20px 20px 20px 26px; }
	.is-style-groot .mb-dag { font-size: 1.45em; padding-right: 16px; }
	.is-style-groot .mb-titel { font-size: var(--wp--preset--font-size--x-large); }
	.is-style-groot .mb-info { font-size: var(--wp--preset--font-size--medium); }
}
/* Abonneerknoppen onder de agenda: secundaire knop (wit met lijn, zoals de downloadknop van het donateursoverzicht), niet de doneerkleur. */
.mb-abonneer .mb-knop { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--wp--preset--color--border); border-radius: 12px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--small); font-weight: 600; text-decoration: none; }
.mb-abonneer .mb-knop:hover { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary-soft); }
/* Itempagina: datum, tijd en plaats als ondertitel onder de h1. */
body .mb-item-info { font-size: var(--wp--preset--font-size--large); line-height: 1.45; color: var(--wp--preset--color--text-2); }
/* Stand bij aanmelden ("Nog 1 plek", "1 van 2 helpers", "Vol"): rustig, maar in de primaire kleur zodat hij opvalt naast de grijze info. */
body .mb-teller { color: var(--wp--preset--color--primary); font-weight: 600; }
body .mb-rij .mb-teller { margin-top: 4px; font-size: var(--wp--preset--font-size--small); }
/* Actieknop van Moskee Beheer (Ik help mee, Aanmelden, Versturen): primaire knop zoals in theme.json, minstens 44px hoog. */
body :is(.mb-klus, .mb-aanmelden, .mb-contact) .mb-knop { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface); font: inherit; font-size: var(--wp--preset--font-size--medium); font-weight: 600; text-decoration: none; cursor: pointer; }
body :is(.mb-klus, .mb-aanmelden, .mb-contact) .mb-knop:hover { background: var(--wp--preset--color--primary-hover); }
body :is(.mb-klus, .mb-aanmelden, .mb-contact) .mb-knop:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
body .mb-aanmelden .mb-knop:disabled { opacity: 1; cursor: default; background: var(--wp--preset--color--subtle); color: var(--wp--preset--color--text-2); border: 1px solid var(--wp--preset--color--border); }
/* Sectie Klussen op Vrijwilligers: weg als er geen klussen zijn of de plugin ontbreekt. Alleen op de site. */
body:not(.editor-styles-wrapper) .klussen-rij:not(:has(.mb-klussen)) { display: none; }
/* Blok Klussen: kaarten als de rest van het theme (wit, lijn, 12px), streep in de tint van het label bovenaan, knop onderaan. */
body .mb-klussen .mb-lijst { gap: 16px; }
body .mb-klus { gap: 4px; padding: 20px; border-radius: 12px; box-shadow: inset 0 5px 0 var(--mb-tint, var(--wp--preset--color--primary)); }
body .mb-klus .mb-titel { margin-top: 4px; font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--primary); text-decoration: none; }
body .mb-klus .mb-titel:hover { text-decoration: underline; }
body .mb-klus .mb-info { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--text-2); }
body .mb-klus .mb-teller { margin: 8px 0 0; font-size: var(--wp--preset--font-size--small); }
body .mb-klus .mb-knop { align-self: flex-start; margin-top: auto; }
body .mb-klus :is(.mb-info, .mb-teller):has(+ .mb-knop) { margin-bottom: 16px; }
/* Aanmeldkaart op de itempagina: kaart zoals de rest van het theme, velden zoals de andere formulieren (zie Formulieren hierboven). */
body .mb-aanmelden { max-width: 640px; box-sizing: border-box; margin: 48px 0 0; padding: 8px 28px 24px; border-radius: 12px; }
.is-layout-constrained > .mb-aanmelden { margin-left: 0 !important; } /* links houden, net als .lead: de constrained layout centreert hem anders */
body .mb-aanmelden-kop { margin: 20px 0 4px; font-size: var(--wp--preset--font-size--x-large); }
body .mb-aanmelden .mb-teller { margin: 0 0 12px; }
body .mb-melding { margin: 12px 0; padding: 12px 16px; border-radius: 12px; }
body .mb-veld { margin: 16px 0; }
body .mb-veld label { display: block; margin-bottom: 6px; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--text-2); }
body .mb-veld :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) { box-sizing: border-box; width: 100%; max-width: 26em; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface); border: 1px solid var(--moskee-veldrand); border-radius: 12px; }
body .mb-veld :is(input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; border-color: var(--wp--preset--color--primary); }
body .mb-vinkje label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-size: var(--wp--preset--font-size--medium); font-weight: 400; color: var(--wp--preset--color--contrast); cursor: pointer; }
body .mb-vinkje input { width: 20px; height: 20px; margin: 0; accent-color: var(--wp--preset--color--primary); }
body .mb-klein { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--text-2); }
/* Contactformulier (blok van Moskee Beheer) in de kaart op Contact: velden over de hele breedte van de kaart. Zonder plugin is de kaart weg (alleen op de site). */
body .mb-veld textarea { min-height: 9em; line-height: 1.5; resize: vertical; }
body .mb-contact .mb-veld :is(input, textarea) { max-width: none; }
body:not(.editor-styles-wrapper) .contact-kaart:not(:has(.mb-contact)) { display: none; }
@media (max-width: 600px) {
	body .mb-aanmelden { padding: 4px 20px 20px; }
	body :is(.mb-aanmelden, .mb-contact) .mb-knop { width: 100%; }
}
/* Mededelingsbalk van Moskee Beheer: staat via wp_body_open boven de header (template-canvas.php van WordPress roept die aan voor elk blokthema-template).
   Zelfde breedte en zijmarge als de header, zacht primair vlak (niet het accent van doneren), tekst minstens 4,5:1 (contrast en primary op primary-soft, getest in tools/tests/contrast.php). */
body .mb-mededelingen { padding: 0 var(--wp--style--root--padding-right, 24px) 0 var(--wp--style--root--padding-left, 24px); background: var(--wp--preset--color--primary-soft); border-bottom: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--contrast); font-size: 15px; line-height: 1.45; }
body .mb-mededeling { max-width: 1080px; margin: 0 auto; padding: 10px 0; overflow-wrap: break-word; }
body .mb-mededeling-titel { color: var(--wp--preset--color--primary); }
/* Vaste header: ankers (na versturen #mb-contact of #mb-aanmelden) en toetsenbordfocus vallen niet onder de header.
   --moskee-kop is de gemeten hoogte van de header (script in functions.php), ook bij een groot logo of een menu van twee regels; zonder script een schatting.
   De plugin zet scroll-margin-top: 7rem op die blokken; die telt op bij deze ruimte, dus hier op 0. */
html { scroll-padding-top: calc(var(--moskee-kop, 120px) + var(--wp-admin--admin-bar--height, 0px) + 16px); }
@media (max-width: 600px) { html { scroll-padding-top: calc(var(--moskee-kop, 80px) + 16px); } } /* de beheerbalk scrolt hier mee */
body :is(.mb-aanmelden, .mb-contact) { scroll-margin-top: 0; }