/*
Theme Name: INTIYU (bewerkbare secties) v5
Theme URI: https://intiyu.nl
Author: INTIYU
Author URI: https://intiyu.nl
Description: Mobielvriendelijk single-page thema voor INTIYU (mens, leiderschap, organisatie). Hero, fototriptiek en kleurenstrip liggen vast; alle tekstblokken daaronder zijn "Secties" (eigen berichttype) die je met de gewone blok-editor bewerkt. Bij activeren van dit thema wordt de meegeleverde tekst automatisch bijgewerkt (eenmalig per contentversie — latere handmatige aanpassingen blijven daarna behouden). Inclusief WhatsApp-knop in de footer en bij "Plan een kennismaking", naast e-mail en telefoon.
Version: 1.5.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: intiyu
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root {
	--color-dark: #2a2b29;
	--color-brown: #513f32;
	--color-terracotta: #b2623c;
	--color-terracotta-dark: #964f30;
	--color-taupe: #c3b09a;
	--color-cream: #e7ddd2;
	--color-white: #fbf8f5;

	--font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--font-body: 'Work Sans', 'Segoe UI', sans-serif;

	--wrap-width: 1120px;
	--wrap-width-narrow: 720px;

	--space-s: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
	--space-m: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
	--space-l: clamp(3rem, 2.2rem + 3.5vw, 5.5rem);
}

/* ==========================================================================
   1. Reset & basis
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-white);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: var(--color-terracotta-dark);
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--color-terracotta);
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	color: var(--color-dark);
	line-height: 1.2;
	margin: 0 0 0.6em;
}

h2 {
	font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.4rem);
	font-weight: 600;
}

p {
	margin: 0 0 1.2em;
}

ul {
	margin: 0 0 1.2em;
	padding: 0;
	list-style: none;
}

blockquote {
	margin: 1.5em 0;
}

.wrap {
	max-width: var(--wrap-width);
	margin-inline: auto;
	padding-inline: var(--space-s);
}

.wrap--narrow {
	max-width: var(--wrap-width-narrow);
}

.section {
	padding-block: var(--space-l);
}

.section--tint {
	background: var(--color-cream);
}

.section--accent {
	background: var(--color-dark);
	color: var(--color-cream);
}

.section--accent h2,
.section--accent h3,
.section--accent h4 {
	color: var(--color-cream);
}

.section--accent p {
	color: var(--color-cream);
}

.section--cta {
	background: var(--color-terracotta);
	color: #fff;
	text-align: center;
}

.section--cta h2,
.section--cta p {
	color: #fff;
}

/* Langere lopende tekst in een CTA-sectie blijft leesbaar links uitgelijnd;
   alleen de titel en de knop blijven gecentreerd. */
.section--cta .entry-content {
	text-align: left;
}

.section--cta .entry-content blockquote {
	border-left-color: #fff;
	color: #fff;
}

/* Screen-reader only tekst (o.a. voor het verborgen H1 in de hero en de skip-link) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75em 1.25em;
	background: var(--color-dark);
	color: #fff;
	z-index: 1000;
	clip: auto;
	border-radius: 4px;
}

/* ==========================================================================
   2. Header & navigatie
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(251, 248, 245, 0.96);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(42, 43, 41, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
	color: var(--color-dark);
}

.site-logo:hover,
.site-logo:focus {
	color: var(--color-dark);
}

.site-logo img {
	max-height: 44px;
	width: auto;
}

.site-logo__icon {
	display: inline-block;
	height: 36px;
	width: auto;
	vertical-align: middle;
}

.footer__brand .site-logo__icon {
	height: 32px;
	vertical-align: middle;
}

.site-logo__mark {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.5rem;
}

.site-logo__mark .accent {
	color: var(--color-terracotta);
}

.site-logo__text {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.1rem;
	letter-spacing: 0.12em;
}

.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--color-dark);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4) {
	transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--color-white);
	border-bottom: 1px solid rgba(42, 43, 41, 0.08);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.site-nav.is-open {
	max-height: 320px;
}

.nav-links {
	display: flex;
	flex-direction: column;
	padding: var(--space-s);
	gap: 0.25rem;
}

.nav-links a {
	display: block;
	padding: 0.6em 0;
	color: var(--color-dark);
	text-decoration: none;
	font-weight: 500;
}

.nav-links a:hover,
.nav-links a:focus {
	color: var(--color-terracotta-dark);
}

.nav-links .nav-cta,
.nav-links a.nav-cta {
	color: var(--color-terracotta-dark);
	font-weight: 600;
}

/* ==========================================================================
   3. Hero
   ========================================================================== */
.hero {
	line-height: 0;
}

.hero__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1536 / 577;
	object-fit: cover;
}

/* ==========================================================================
   4. Fototriptiek & kleurenstrip
   ========================================================================== */
.photo-row {
	display: flex;
	flex-direction: column;
}

.photo-row img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.palette-strip {
	display: flex;
	height: 28px;
}

.palette-strip span {
	flex: 1 1 20%;
	display: block;
}

/* ==========================================================================
   5. Content-secties
   ========================================================================== */
.lead-statement {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
	font-weight: 600;
	color: var(--color-terracotta-dark);
	margin-top: 1.6em;
}

.lead-statement--light {
	color: var(--color-cream);
}

/* Standaard opsomming (wanneer geen lijststijl is gekozen bij een sectie) */
.entry-content ul {
	margin: 1.4em 0;
	padding-left: 1.2em;
	list-style: disc;
}

.entry-content li {
	margin-bottom: 0.4em;
}

/* Lijststijl "Vinklijst (bolletjes)" — gekozen per sectie in het beheerpaneel */
.list-style--check ul,
.check-list {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	margin-block: 1.4em;
	list-style: none;
	padding-left: 0;
}

.list-style--check li,
.check-list li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0;
}

.list-style--check li::before,
.check-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 10px;
	height: 10px;
	background: var(--color-terracotta);
	border-radius: 50%;
}

/* Lijststijl "Vraaglijst (cursief, streepje)" */
.list-style--question ul,
.question-list {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	margin-block: 1.4em;
	list-style: none;
	padding-left: 0;
}

.list-style--question li,
.question-list li {
	padding-left: 1.1em;
	border-left: 3px solid var(--color-taupe);
	font-style: italic;
	color: var(--color-brown);
	margin-bottom: 0;
}

.section--accent .list-style--question li,
.section--accent .question-list li {
	color: var(--color-cream);
}

/* Lijststijl "Diensten-rooster (2 kolommen)" */
.list-style--grid ul,
.service-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75em 1.5em;
	margin-block: 1.4em;
	list-style: none;
	padding-left: 0;
}

.list-style--grid li,
.service-grid li {
	position: relative;
	padding-left: 1.6em;
	font-weight: 500;
	margin-bottom: 0;
}

.list-style--grid li::before,
.service-grid li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-terracotta);
	font-weight: 700;
}

/* Citaatblok (WordPress-kernblok "Citaat") gebruikt voor het uitgelichte citaat bij "Over Hannelore" */
.entry-content blockquote,
.pull-quote {
	margin: 1.5em 0;
	border-left: 4px solid var(--color-terracotta);
	padding-left: 1em;
	font-family: var(--font-heading);
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
	font-weight: 500;
	color: var(--color-brown);
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   6. Knoppen
   ========================================================================== */
.btn {
	display: inline-block;
	padding: 0.85em 2em;
	border-radius: 999px;
	font-family: var(--font-heading);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, background 0.15s ease;
}

.btn--primary {
	background: var(--color-dark);
	color: #fff;
}

.btn--primary:hover,
.btn--primary:focus {
	background: var(--color-brown);
	color: #fff;
	transform: translateY(-2px);
}

.section--cta .btn--primary {
	background: #fff;
	color: var(--color-terracotta-dark);
}

.section--cta .btn--primary:hover,
.section--cta .btn--primary:focus {
	background: var(--color-cream);
	color: var(--color-terracotta-dark);
}

.cta-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 0.5em;
}

.btn--whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: #25d366;
	color: #fff;
}

.btn--whatsapp:hover,
.btn--whatsapp:focus {
	background: #1fae57;
	color: #fff;
	transform: translateY(-2px);
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer {
	background: var(--color-dark);
	color: var(--color-cream);
}

.footer-palette {
	display: flex;
	height: 10px;
}

.footer-palette__swatch {
	flex: 1 1 20%;
	display: block;
}

.footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding-block: var(--space-m);
}

.footer__brand .site-logo__mark,
.footer__brand .site-logo__text {
	color: var(--color-cream);
}

.footer__tagline {
	margin: 0.5em 0 0;
	color: var(--color-taupe);
	font-size: 0.95rem;
}

.footer__nav .nav-links {
	padding: 0;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
}

.footer__nav .nav-links a {
	padding: 0;
	color: var(--color-cream);
}

.footer__nav .nav-links a:hover,
.footer__nav .nav-links a:focus {
	color: var(--color-terracotta);
}

.footer__contact a {
	color: var(--color-cream);
}

.footer__contact a:hover,
.footer__contact a:focus {
	color: var(--color-terracotta);
}

.footer__social {
	margin-top: 0.75em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.25em;
}

.footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--color-cream);
	text-decoration: none;
	font-size: 0.9rem;
}

.footer__social a:hover,
.footer__social a:focus {
	color: var(--color-terracotta);
}

.icon-linkedin,
.icon-whatsapp {
	flex-shrink: 0;
}

.footer__bottom {
	border-top: 1px solid rgba(231, 221, 210, 0.15);
	padding-block: 1.25em;
	font-size: 0.85rem;
	color: var(--color-taupe);
}

.footer__bottom p {
	margin: 0;
}

/* ==========================================================================
   8. Breakpoints
   ========================================================================== */
@media (min-width: 640px) {
	.list-style--grid ul,
	.service-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 780px) {
	.photo-row {
		flex-direction: row;
	}

	.photo-row img {
		aspect-ratio: auto;
		height: 320px;
		flex: 1 1 0;
	}

	.palette-strip {
		height: 40px;
	}
}

@media (min-width: 900px) {
	.nav-toggle {
		display: none;
	}

	.site-nav {
		position: static;
		max-height: none;
		overflow: visible;
		background: none;
		border: 0;
	}

	.nav-links {
		flex-direction: row;
		align-items: center;
		padding: 0;
		gap: 1.75rem;
	}

	.nav-links a {
		padding: 0;
	}

	.footer__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}