/*
Theme Name: Moskee
Description: Rustig, toegankelijk blokthema voor moskeeën: gebed, onderwijs, doneren en ANBI. Werkt samen met de doneerplugin.
Version: 0.1.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Author: Nuh
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); }
.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; }
.site-header .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--wp--preset--color--border); border-radius: 12px; background: var(--wp--preset--color--surface); }

/* 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; }
.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-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 */
.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(--wp--preset--color--border); 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; }
.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; }