/*
Theme Name: Balanspunt
Theme URI: https://balanspunt.be
Author: Yannick Peers
Description: Blokthema voor Balanspunt, praktijk voor lichaam & geest op Linkeroever. Zonder paginabouwer: alle inhoud is aan te passen in de WordPress-editor.
Version: 1.0.4
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: balanspunt
*/

/* Koptekst: blijft bovenaan staan tijdens het scrollen */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--steen);
}

/* De vervaging zit op een aparte laag: een backdrop-filter op de koptekst zelf
   zou het schermvullende mobiele menu binnen de koptekst opsluiten. */
header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(251, 248, 241, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.site-header .wp-block-site-logo img {
	height: auto;
}

/* Zichtbare focus voor toetsenbordgebruikers */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--oker);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Knoppen: secundaire knop met omlijning */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 2px solid currentColor;
	padding: calc(0.8rem - 2px) calc(1.5rem - 2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--wit);
}

.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--zand);
}

.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--zand);
	border-color: var(--wp--preset--color--zand);
	color: var(--wp--preset--color--ink);
}

.has-ink-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--ink);
}

/* Blokstijl Kaart */
.is-style-card {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--steen);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: 0 1px 2px rgba(31, 35, 40, 0.04);
}

/* Blokstijl Klikbare kaart: de hele kaart is een link */
.is-style-link-card {
	position: relative;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--steen);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--40);
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.is-style-link-card a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.is-style-link-card:hover,
.is-style-link-card:focus-within {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--zon);
	box-shadow: 0 8px 24px rgba(31, 35, 40, 0.08);
}

.is-style-link-card a {
	text-decoration: none;
	font-weight: 700;
}

.is-style-link-card a:focus-visible {
	outline: none;
}

.is-style-link-card:focus-within {
	outline: 3px solid var(--wp--preset--color--oker);
	outline-offset: 3px;
}

/* Blokstijl Bovenschrift voor korte labels boven een titel */
p.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oker);
}

.has-ink-background-color p.is-style-eyebrow {
	color: var(--wp--preset--color--zon);
}

/* Blokstijl Golf voor de scheidingslijn */
.wp-block-separator.is-style-golf {
	border: none;
	height: 40px;
	max-width: none;
	width: 100%;
	opacity: 1;
	background: url("assets/img/golf.svg") repeat-x center / 200px 40px;
}

/* Blokstijl Vinkjes voor lijsten */
ul.is-style-checks {
	list-style: none;
	padding-left: 0;
}

ul.is-style-checks li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.5rem;
}

ul.is-style-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--zon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231F2328' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Blokstijl Stap: genummerde cirkel */
.is-style-step {
	counter-increment: stap;
}

.wp-block-columns:has(> .wp-block-column > .is-style-step),
.wp-block-group:has(> .is-style-step) {
	counter-reset: stap;
}

.is-style-step::before {
	content: counter(stap);
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--zon);
	color: var(--wp--preset--color--ink);
	font-weight: 900;
	margin-bottom: 0.75rem;
}

/* Afbeeldingen */
.wp-block-image.is-style-rounded-soft img {
	border-radius: 24px;
}

.is-style-card .wp-block-image img,
.is-style-link-card .wp-block-image img {
	display: block;
}

/* Veelgestelde vragen */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	position: relative;
	padding-right: 2.5rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--oker);
}

.wp-block-details[open] summary::after {
	content: "\2212";
}

.wp-block-details[open] > summary {
	margin-bottom: 0.75rem;
}

/* Tabellen */
.wp-block-table table {
	border-collapse: collapse;
	background: var(--wp--preset--color--wit);
	border-radius: 16px;
	overflow: hidden;
}

.wp-block-table th,
.wp-block-table td {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--steen);
	padding: 0.85rem 1rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead {
	border-bottom: none;
	background: var(--wp--preset--color--zon-licht);
}

.wp-block-table tbody tr:last-child td {
	border-bottom: none;
}

@media (max-width: 640px) {
	.wp-block-table {
		overflow-x: auto;
	}

	.wp-block-table table {
		min-width: 560px;
	}
}

/* Voettekst */
footer.wp-block-template-part a {
	color: var(--wp--preset--color--zand);
}

footer.wp-block-template-part a:hover {
	color: var(--wp--preset--color--zon);
}

/* Mobiel menu */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: var(--wp--preset--font-size--large);
}

@media (max-width: 599px) {
	.site-header .wp-block-site-logo img {
		width: 112px !important;
	}

	.site-header .header-cta .wp-block-button__link {
		padding: 0.6rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

/* Geen witruimte tussen koptekst, inhoud en voettekst */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Titels en links op een donkere achtergrond */
.wp-block-group.has-text-color :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.has-ink-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--zon);
}

/* Voettekst: lijsten zonder opsommingstekens */
.footer-links {
	list-style: none;
	padding-left: 0;
}

.footer-links li {
	margin-bottom: 0.35rem;
}

/* Koptekst op mobiel: knop naast het menu-icoon */
@media (max-width: 599px) {
	.site-header .header-actions {
		gap: 0.75rem;
	}

	.site-header .header-cta {
		order: -1;
	}
}

/* Golflijn over de volle breedte */
.wp-block-separator.is-style-golf.alignfull {
	width: auto;
}

/* Bron onder een citaat */
.wp-block-quote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 700;
	color: var(--wp--preset--color--ink-soft);
}

/* Knoppen op een gele achtergrond */
.has-zon-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--wit);
}

.has-zon-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--ink);
}

/* Geopend mobiel menu: links uitgelijnd, grote tikvlakken */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open * {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}