/*
Theme Name: Praktijk
Description: Eenvoudig, rustig block-thema voor een psychologiepraktijk. Alle pagina's, menu's, kleuren en afbeeldingen zijn aan te passen via Weergave > Editor.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.8
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: praktijk
*/

/* ---------- Lettertypes ---------- */
/* Koppen iets smaller, in de stijl van "VAN HOEK" in het logo */
h1, h2, h3, h4, h5, h6, .wp-block-site-title { font-stretch: 87.5%; }

/* Kleine labels: hoofdletters met ruimte, zoals "PSYCHOLOGIEPRAKTIJK" in het logo */
.site-footer h2 {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 500;
	font-stretch: 100%;
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 1px 0 rgba(31, 19, 77, 0.08);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header .wp-block-navigation-item__content {
	padding: 0.4em 0.2em;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s, color 0.2s;
}
.site-header .wp-block-navigation-item__content:hover,
.site-header .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--oranje);
}

/* "Aanmelden" als opvallende knop in het menu (CSS-klasse: is-cta) */
.site-header .wp-block-navigation-item.is-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--oranje);
	color: var(--wp--preset--color--indigo);
	border-radius: 999px;
	padding: 0.45em 1.2em;
	border-bottom: 0;
	font-weight: 600;
}
.site-header .wp-block-navigation-item.is-cta > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--geel);
}

/* Mobiel menu */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--indigo) !important;
	color: var(--wp--preset--color--wit) !important;
	padding: 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.4rem;
}

/* ---------- Geschilderde band (sfeerstrook) ---------- */
.geschilderde-band {
	min-height: 28px;
	background: url("assets/images/achtergrond-klein.jpg") center / cover;
}

/* ---------- Hero ---------- */
.hero-titel { text-shadow: 0 2px 18px rgba(31, 19, 77, 0.45); }

/* ---------- Kaarten ---------- */
.kaart {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kaart:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(31, 19, 77, 0.12);
}

/* ---------- Tabel (tarieven) ---------- */
.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(52, 110, 115, 0.25);
}
.wp-block-table thead {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--wit);
	border: 0;
}
.wp-block-table td, .wp-block-table th {
	border: 0;
	border-bottom: 1px solid rgba(52, 110, 115, 0.15);
	padding: 0.7em 1em;
	text-align: left;
}
.wp-block-table tbody tr:nth-child(even) { background: var(--wp--preset--color--teal-licht); }
.wp-block-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Kaart (OpenStreetMap) ---------- */
.kaart-embed iframe {
	width: 100%;
	height: 380px;
	border: 0;
	border-radius: 24px;
	display: block;
}

/* ---------- Footer ---------- */
.site-footer a { color: inherit; text-decoration-color: var(--wp--preset--color--oranje); }
.site-footer a:hover { color: var(--wp--preset--color--geel); }
.site-footer ul { list-style: none; padding-left: 0; }
.site-footer li { margin-bottom: 0.35em; }

/* ---------- Toegankelijkheid ---------- */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--oranje);
	outline-offset: 3px;
	border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}