/* =============================================================================
 * style.css
 * =============================================================================
 *
 * Project-specifieke styling. Vul aan per project.
 *
 * Bevat:
 *   - @font-face declaraties (verwijzen naar /fonts/)
 *   - CSS variabelen (:root)
 *   - Reset / base styles
 *   - Layout en componenten
 *   - Block-specifieke styling
 *   - Media queries
 *
 * Wordt op twee plekken ingeladen:
 *   1. Frontend  — via wp_enqueue_style in sacredfemininejourneys_scripts() (functions.php)
 *   2. Editor    — via add_editor_style() in sacredfemininejourneys_setup() (functions.php)
 *                  zodat blokken in de Gutenberg editor identiek renderen
 *
 * NB: De style.css in de theme root bevat alleen de WordPress thema header
 * en wordt NIET geënqueued.
 * ============================================================================= */


/* :root CSS variabelen — voorbeeld */
/*
:root {
	--color-black: #000;
	--color-white: #fff;
	--font-family-base: 'Lato';
	--heading-font-family: 'Saira Condensed';
	--font-size-base: 16px;
	--lineheight-base: 1.5;
	--input-height: 48px;
	--base-duration: 0.3s;
}
*/


/* =============================================================================
 * Blokruimte — VERPLICHT, werkt ook zonder de :root hierboven
 *
 * Elk blok krijgt --blok-ruimte boven en onder: 20px mobiel, 40px desktop.
 * Padding als standaard: de ruimte valt binnen het blok (achtergrondkleur uit
 * de instellingen-tab heeft lucht; 2 blokken staan altijd 2× --blok-ruimte uit
 * elkaar, padding valt niet weg zoals margin).
 * Margin alleen bij blokken met een eigen gekleurd vlak over de volle breedte;
 * hun eigen padding is de binnenruimte van dat vlak.
 * Bij de start: de root-class van elk blok uit het ontwerp hier toevoegen en
 * alle margin-bottom/margin-top op blok-niveau uit de ontwerp-CSS halen
 * (workflow sectie 16, stap "Ontwerp-CSS normaliseren").
 * ============================================================================= */

:root { --blok-ruimte: 20px; }

/* Blokken zonder eigen vlak — vul per project aan met de root-classes */
.overzicht-resultaten,
.tabs-blok { padding-top: var(--blok-ruimte); padding-bottom: var(--blok-ruimte); }

/* Blokken met een eigen gekleurd vlak over de volle breedte — per project
.voorbeeld-vlak { margin-top: var(--blok-ruimte); margin-bottom: var(--blok-ruimte); } */

@media only screen and (min-width: 1025px) {
	:root { --blok-ruimte: 40px; }
}


/* @font-face declaraties — voorbeeld */
/*
@font-face {
	font-family: 'Lato';
	font-weight: 400;
	font-style: normal;
	src: url('../fonts/Lato-Regular.woff2') format('woff2');
	font-display: swap;
}
*/


/* Blok leeg-melding — alleen zichtbaar in de editor (sacredfemininejourneys_block_leeg).
 * Gebruikt de projectvariabelen als ze bestaan, anders neutrale fallbacks.
 * Pas kleuren per project aan zodat de melding in de stijl van de site valt. */
.blok-leeg { margin: 20px auto; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-family: var(--font-family-base, inherit), sans-serif; font-size: 16px; color: var(--color-text, #4a5568); border: 2px dashed var(--color-primary, #f0b429); border-radius: 16px; background-color: var(--color-bright, #f7f7f7); }
.blok-leeg strong { font-weight: 700; color: var(--color-dark, #1a202c); }
.blok-leeg span { flex: 1 1 auto; }
.blok-leeg .button { padding: 5px 24px; min-height: 40px; cursor: pointer; }


/* =============================================================================
 * Overzicht (standaard-parts in template-parts/overzicht/) — per project
 * vervangen door het ontwerp
 * ============================================================================= */

.overzicht-filter { margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.overzicht-filter select { flex: 1 1 200px; }
.overzicht-toggle { margin-bottom: 20px; display: flex; gap: 10px; }
.overzicht-weergave { display: none; }
.overzicht-weergave.is-active { display: block; }
.overzicht-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; }
.overzicht-kaart { display: block; text-decoration: none; color: inherit; }
.overzicht-kaart-afbeelding img { width: 100%; height: auto; }
.overzicht-meer { margin-top: 30px; text-align: center; }

@media only screen and (min-width: 768px) {
	.overzicht-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (min-width: 1025px) {
	.overzicht-grid { grid-template-columns: repeat(3, 1fr); }
}


/* =============================================================================
 * Tabs (inc/tab-onderdelen.php) — basis; vervang per project door de
 * opmaak van de designer, maar houd de zichtbaarheidsregels.
 * ============================================================================= */

.tabs-kolom { display: flex; flex-wrap: wrap; gap: 30px; }
.tabs-links { flex: 1; min-width: 0; }
.tabs-sidebar { width: 100%; }
.tabs-navigatie { position: sticky; top: 70px; z-index: 5; margin-bottom: 30px; }
.tabs-select { width: 100%; }
.tabs-nav { display: none; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; gap: 12px; }
.tabs-nav li { padding: 12px 24px; cursor: pointer; border-radius: 12px; background-color: #e9edf3; }
.tabs-nav li.is-active { color: #fff; background-color: #333; }
.tab_content { margin-bottom: 40px; }
.tab-tekst { margin-bottom: 30px; }
.tab_content > :last-child { margin-bottom: 0; }

/* Accordion basis */
.accordion-content { height: 0; overflow: hidden; transition: height 0.4s ease; }

@media only screen and (min-width: 1025px) {
	.tabs-select { display: none; }
	.tabs-nav { display: flex; }
	.tabs-sidebar { width: 32%; }

	/* Desktop: alleen de actieve tab. De eerste heeft is-active al vanuit PHP. */
	.tab_content { display: none; }
	.tab_content.is-active { display: block; }
}