/*
Theme Name: Lotarchitectuur Child
Description: Child theme voor Lotarchitectuur, gebaseerd op Kadence.
Template: kadence
Version: 1.5.0
Text Domain: lotarchitectuur-child
*/

/* Child-theme styling komt hier. */

/* ---------------------------------------------------------
   Homepage hero slideshow.
   Two slide variants alternate: image, then text.
   Text slides rotate through the four corners: tl, tr, br, bl, tl, ...
   Rendered by front-page.php + assets/js/hero-slider.js.

   Font pairing: Fraunces (variable serif, titles) + Inter (sans, body).
   Both loaded via Bunny Fonts (GDPR-safe mirror of Google Fonts).
   Used by top design portfolios (Vercel, Stripe, Pentagram examples).
--------------------------------------------------------- */

:root {
	--lotarch-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--lotarch-font-sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
	--lotarch-header-height: 80px;

	/* --- Site-wide colors. Change deze twee waarden om de hele site te
	       hertinten (achtergrond en primaire tekst). Header, hero-tekst-dia's
	       en alle content-pagina's gebruiken deze variabele. --- */
	--lotarch-bg-primary: #f7f5f0;
	--lotarch-fg-primary: #1a1a1a;

	/* --- Warme accent-kleur, ingezet op editorial pagina's die een
	       thematische kleur nodig hebben (bijv. Verduurzamen). Warm-olijf
	       past bij duurzaamheid — natuurlijk, aards, professioneel zonder
	       dat het te veel opvalt. Verander deze waarde om overal het
	       accent te herkleuren (bijv. terracotta #A3735A, of het site
	       oranje #FD9606). --- */
	--lotarch-accent-warm: #7A8C6D;
	--lotarch-accent-warm-hover: #66765C;
	/* Tint achter icoontjes op de verduurzamen pagina — 8% opacity van
	       het accent, zodat de badge-achtergrond subtiel meekleurt zonder
	       de aandacht van het icoon weg te trekken. */
	--lotarch-accent-warm-tint: rgba( 122, 140, 109, 0.09 );
	--lotarch-accent-warm-tint-strong: rgba( 122, 140, 109, 0.18 );

	/* --- Standaard afstanden in het title-blok op elke content-pagina.
	       Zorg dat title → subtitle → intro op ELKE pagina exact
	       dezelfde verticale ritme heeft. Verander één waarde en het
	       schuift overal mee. --- */
	/* Afstand tussen site-header en pagina-titel (bijv. "Projecten").
	       Hoger = meer lucht boven de titel. */
	--lotarch-page-title-top: clamp( 1rem, 2vw, 1.75rem );
	--lotarch-title-subtitle-gap: 0.5rem;
	--lotarch-subtitle-intro-gap: 1.25rem;

	/* --- Uniforme title-typografie: ALLE page titles gebruiken dezelfde
	       family, size, weight, line-height en letter-spacing. --- */
	--lotarch-page-title-family: var( --lotarch-font-serif );
	--lotarch-page-title-size: clamp( 2.25rem, 5vw, 4rem );
	--lotarch-page-title-weight: 500;
	--lotarch-page-title-line-height: 1.05;
	--lotarch-page-title-letter-spacing: -0.02em;
	--lotarch-page-title-color: var( --lotarch-fg-primary );

	/* --- Uniforme alinea-title typografie: gebruikt door zowel [vd_thema]
	       (secties met foto's) als [vd_sectie] (tekst-only) zodat alle
	       H2 alinea-titels op ELKE pagina exact dezelfde grootte hebben. --- */
	--lotarch-alinea-title-size: clamp( 1.75rem, 3vw, 2.5rem );
	--lotarch-alinea-title-weight: 500;
	--lotarch-alinea-title-line-height: 1.15;
	--lotarch-alinea-title-letter-spacing: -0.015em;

	/* --- Uniforme subtitle-typografie. --- */
	--lotarch-page-subtitle-family: var( --lotarch-font-sans );
	--lotarch-page-subtitle-size: clamp( 1rem, 1.25vw, 1.15rem );
	--lotarch-page-subtitle-weight: 400;
	--lotarch-page-subtitle-line-height: 1.55;
	--lotarch-page-subtitle-color: #444;

	/* --- Projecten pagina: horizontale afstand tussen titel ↔ foto en
	       foto ↔ tekst op elke project-kaart. Hoger = meer ademruimte
	       rond de foto. Verander deze ene waarde om het overal aan te
	       passen. --- */
	--lotarch-project-card-gap: clamp( 3rem, 5vw, 6rem );
	/* Hoeveel de kaarttitel groeit bij het uitklappen. De max-width van
	   de titel is hiervan afgeleid (100% / deze factor), zodat de titel
	   na het vergroten exact binnen zijn eigen kolom blijft en dus nooit
	   onder de foto kan schuiven, ongeacht hoe lang de titel is of hoe
	   breed het scherm. Verander je deze waarde, dan schuift de max-width
	   automatisch mee. */
	--lotarch-card-title-scale: 1.25;

	/* --- Verticale afstand TUSSEN opeenvolgende project-kaarten.
	       Werkt zowel voor de UL-grid op page-projecten.php als voor
	       standalone [project] shortcodes. Hoger = meer lucht tussen
	       elke kaart. --- */
	--lotarch-project-card-spacing: clamp( 3rem, 6vw, 5rem );

	/* --- Verticale marge (padding) op elke editorial-row shortcode:
	       [vd_thema], [vd_sectie], [vd_cta], enz. Bepaalt de afstand
	       tussen opeenvolgende shortcodes op een pagina. Wordt op zowel
	       top als bottom van elke row toegepast, dus totale marge tussen
	       twee rows = 2 x deze waarde. Verlaag naar bijv. clamp(1rem, 3vw, 2rem)
	       voor strakker; verhoog naar clamp(4rem, 8vw, 7rem) voor luxer. --- */
	--lotarch-row-spacing: clamp( 1rem, 2vw, 1.5rem );

	/* --- Max-breedte van het CONTENT-blok op elke pagina (title, subtitle,
	       intro, thema-secties met foto's, contact-info + map). Dit bepaalt
	       hoe ver de titel van de linkerrand van het scherm staat en hoe
	       breed foto's binnen thema-blokken zijn.
	       Verander deze ene waarde om ALLE pagina's tegelijk te
	       verschuiven/schalen. Projecten grid (project cards) heeft eigen
	       bredere max-width omdat de 3-koloms card-layout wijd is. --- */
	--lotarch-page-content-max-width: 1400px;
}

/* Apply the primary background across the whole site so every page
   (homepage, projects, about, etc.) uses the same canvas color. Kadence
   splits pages into 'entry hero' (title area) and 'content wrapper' (body)
   with independent Customizer color settings, so we have to force both. */
html,
body,
.wp-site-blocks,
.site,
.site-content,
.content-wrap,
main,
.content-area,
.entry-hero,
.entry-hero-container-inner,
.entry-hero-section,
.hero-section,
.hero-container,
.page-title,
.page-title-container,
.page-hero-section,
.above-entry-hero,
.wp-block-post-title-wrap,
.entry-content-wrap,
.content-container,
.single-content,
.content-wrap.hfeed,
article,
article.page,
article.post,
.post-inner,
.inside-article,
.entry-content,
.entry-header,
.entry-summary,
.site-main {
	background-color: var( --lotarch-bg-primary ) !important;
	background-image: none !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
	border-top: 0 !important;
}

/* Override only Kadence's dedicated background variable. Do NOT touch
   numbered palette slots (--global-palette1..9) or --global-palette-highlight
   because Kadence uses those for text and border colors too, and setting
   them to bg-color makes text invisible. */
:root,
:root body {
	--global-palette-bg: var( --lotarch-bg-primary ) !important;
}