/*
Theme Name: Cantiamo
Theme URI: https://cantiamo.online
Description: Licht blokthema voor a-capellakoor Cantiamo Leidschendam. Roze header met koorfoto en golf, crème achtergrond, groene koppen. Werkt samen met de plugin Cantiamo Repertoire.
Author: RZ-Services
Version: 0.2.5
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: cantiamo
*/

/* ---------- Header ---------- */
.crep-header { position: relative; }
.crep-header .wp-block-cover { min-height: clamp(230px, 22vw, 340px) !important; padding-bottom: 72px; }
.crep-header__rij { width: 100%; }
.crep-header .wp-block-site-logo img { width: clamp(140px, 14vw, 220px); height: auto; }
.crep-header .wp-block-navigation { text-shadow: 0 1px 3px rgb(0 0 0 / .35); }
.crep-header .wp-block-navigation__submenu-container { text-shadow: none; }
.crep-header .wp-block-navigation__responsive-container-open svg { width: 32px; height: 32px; }
.crep-header .wp-block-navigation { color: #fff; }
.crep-header .wp-block-navigation a { text-decoration: none; padding: .35rem .15rem; border-bottom: 2px solid transparent; }
.crep-header .wp-block-navigation a:hover,
.crep-header .wp-block-navigation .current-menu-item > a,
.crep-header .wp-block-navigation a[aria-current="page"] { border-bottom-color: #fff; }
/* Submenu (desktop): boven de golf, crème paneel met groene bovenrand zoals de oude site.
   De navigatie geeft submenu's de overlay-kleuren mee (has-background), vandaar !important. */
.crep-header .wp-block-cover { overflow: visible !important; }
.crep-header .wp-block-cover .wp-block-cover__inner-container { position: relative; z-index: 3 !important; }
.crep-header .wp-block-navigation .wp-block-navigation__submenu-container,
.crep-header .wp-block-navigation .wp-block-navigation__submenu-container.has-background {
	background: var(--wp--preset--color--creme) !important;
	color: var(--wp--preset--color--groen-diep) !important;
	border: 0 !important;
	border-top: 5px solid var(--wp--preset--color--groen) !important;
	border-radius: 0 0 6px 6px !important;
	box-shadow: 0 10px 24px rgb(0 0 0 / .18) !important;
	padding: 0 !important;
	min-width: 14rem !important;
}
.crep-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item + .wp-block-navigation-item { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--groen) 18%, transparent); }
.crep-header .wp-block-navigation .wp-block-navigation__submenu-container a { display: block; width: 100%; padding: .8rem 1.4rem !important; border: 0 !important; color: inherit !important; }
.crep-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover,
.crep-header .wp-block-navigation .wp-block-navigation__submenu-container a:focus-visible { background: color-mix(in srgb, var(--wp--preset--color--roze) 14%, var(--wp--preset--color--creme)) !important; color: var(--wp--preset--color--roze-donker) !important; }
.crep-header .wp-block-navigation .wp-block-navigation__submenu-container a[aria-current="page"] { color: var(--wp--preset--color--roze-donker) !important; font-weight: 600; }

/* Mobiel menu: uitklapmenu onder de header, in dezelfde stijl als het submenu op desktop
   (zoals het oude Elementor-menu). Geen schermvullende overlay. */
@media (max-width: 599px) {
	.crep-header .wp-block-cover,
	.crep-header .wp-block-cover .wp-block-cover__inner-container,
	.crep-header .crep-header__rij,
	.crep-header .wp-block-navigation { position: static !important; }
	.crep-header .wp-block-navigation__responsive-container-open { padding: .25rem; }
	.crep-header .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute !important;
		inset: auto 0 auto 0 !important;
		top: calc(100% - 1px) !important;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
		background: var(--wp--preset--color--creme) !important;
		color: var(--wp--preset--color--groen-diep) !important;
		border-top: 5px solid var(--wp--preset--color--groen);
		box-shadow: 0 12px 24px rgb(0 0 0 / .18);
		overflow: visible !important;
		animation: none !important;
		text-shadow: none;
		z-index: 20;
	}
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: .55rem; right: 1rem; z-index: 2; color: var(--wp--preset--color--groen-diep); }
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { margin: 0 !important; padding: 0 !important; align-items: stretch !important; }
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; }
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: stretch !important; width: 100%; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--groen) 20%, transparent); }
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		display: block; width: 100%; box-sizing: border-box; margin: 0;
		padding: .8rem 1.5rem !important; border: 0 !important; outline-offset: -2px;
		color: var(--wp--preset--color--groen-diep) !important; text-align: left; text-decoration: none !important;
		font-size: 1.05rem; text-shadow: none !important;
	}
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
		padding: .9rem 1.5rem .2rem !important; font-size: .78rem !important; font-weight: 600 !important;
		letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--groen) !important; pointer-events: none;
	}
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.has-background {
		position: static !important; background: transparent !important; color: inherit !important; border: 0 !important;
		box-shadow: none !important; min-width: 0 !important; padding: 0 0 .3rem !important; gap: 0 !important; align-items: stretch !important;
	}
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0 !important; }
	.crep-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { padding: .55rem 1.5rem .55rem 2.4rem !important; }
	.crep-header .wp-block-navigation__responsive-container.is-menu-open a:hover { background: color-mix(in srgb, var(--wp--preset--color--roze) 14%, var(--wp--preset--color--creme)) !important; }
	.crep-header .wp-block-navigation__responsive-container.is-menu-open a[aria-current="page"] { color: var(--wp--preset--color--roze-donker) !important; font-weight: 600; }
	html.has-modal-open { overflow: auto !important; }
}

/* Golf onder de header (vorm uit de oude site, Elementor "mountains") */
.crep-golf { position: absolute; left: 0; right: 0; bottom: -1px; height: 72px; pointer-events: none; line-height: 0; z-index: 2; }
.crep-golf svg { width: 100%; height: 100%; transform: rotate(180deg); }
.crep-golf path { fill: var(--wp--preset--color--creme); }

/* ---------- Inhoud ---------- */
main.wp-block-group { min-height: 40vh; }
.wp-block-post-title { margin-top: 0; }
.wp-block-image img, .wp-block-gallery img { border-radius: 6px; }
:where(.wp-block-group.is-layout-constrained) > p { max-width: var(--wp--style--global--content-size); }

/* Formulieren (contact, cantiamo-contact) */
.cantiamo-contact label, form label { font-weight: 600; color: var(--wp--preset--color--groen-donker); }
.cantiamo-contact input:not([type=submit]):not([type=checkbox]), .cantiamo-contact textarea,
main input[type=text], main input[type=email], main input[type=tel], main textarea {
	box-sizing: border-box; max-width: 100%; width: 100%; padding: .65rem .8rem; border: 1px solid var(--wp--preset--color--groen); border-radius: 6px; background: #fff; font: inherit; color: #2b2b2b;
}
*, *::before, *::after { box-sizing: border-box; }
main input:focus, main textarea:focus, main select:focus { outline: 2px solid var(--wp--preset--color--roze); outline-offset: 1px; }

/* Spamval (honeypot) van cantiamo-contact altijd verbergen */
.cantiamo-contact-wrapper .cc-website { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cantiamo-contact-wrapper p { margin: 0 0 1rem; }
.cantiamo-contact-wrapper input[type=submit] { padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--wp--preset--color--groen-donker); color: var(--wp--preset--color--creme); font: inherit; font-weight: 600; cursor: pointer; }
.cantiamo-contact-wrapper input[type=submit]:hover { background: var(--wp--preset--color--roze-donker); }
.crep-kaart iframe { display: block; }

/* Galerij (voormalige carrousel): gelijke tegels, geen uitgerekte laatste rij */
.wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; }

/* Luisteren: lichte kaarten (knipoog naar de oude groene banden) */
.crep-luister { background: color-mix(in srgb, var(--wp--preset--color--groen) 12%, var(--wp--preset--color--creme)); border-left: 4px solid var(--wp--preset--color--groen); border-radius: 6px; padding: 1rem 1.25rem; }
.crep-luister h2, .crep-luister h3 { margin: 0 0 .5rem; color: var(--wp--preset--color--groen-donker); }
.crep-luister .wp-block-image { margin: 0; }
.crep-luister .crep-speler { margin-bottom: 0; }

/* Roze oproep op home */
.crep-oproep a { text-decoration: none; }
.crep-oproep a::after { content: " →"; }
.crep-oproep a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.crep-footer a { color: inherit; }

/* Toegankelijkheid */
:focus-visible { outline: 2px solid var(--wp--preset--color--roze-donker); outline-offset: 2px; }
.skip-link:focus { background: #fff; color: #000; }

@media (max-width: 781px) {
	.crep-header .wp-block-cover { padding-bottom: 56px; }
	.crep-golf { height: 48px; }
	.crep-luister .wp-block-image img { max-width: 88px; }
	.crep-luister .wp-block-columns { flex-wrap: nowrap !important; gap: .9rem; }
	.crep-luister .wp-block-column:first-child { flex: 0 0 88px !important; }
}

/* Luisteren op telefoon: klein beeld naast de titel, speler over de volle kaartbreedte */
@media (max-width: 600px) {
	.crep-luister { padding: .9rem 1rem; }
	.crep-luister .wp-block-columns { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); gap: .6rem .9rem; align-items: center; }
	.crep-luister .wp-block-column { flex: none !important; min-width: 0; }
	.crep-luister .wp-block-column:first-child { width: 64px; }
	.crep-luister .wp-block-image img { width: 64px; max-width: 64px; height: auto; }
	.crep-luister .wp-block-column:last-child { display: contents; }
	.crep-luister .wp-block-column:last-child > h2,
	.crep-luister .wp-block-column:last-child > h3 { margin: 0; font-size: 1.2rem; }
	.crep-luister .wp-block-column:last-child > .wp-block-cantiamo-audiospeler { grid-column: 1 / -1; margin: 0; }
}