/*
 Theme Name:     NVvTO
 Description:    Standalone theme for the NVvTO (Nederlandse Vereniging voor Thuisonderwijs).
 Author:         NVvTO
 Version:        3.1.3
 Requires PHP:   7.4
 Text Domain:    nvvto
*/

/* =========================================================
   1. Design tokens
   ========================================================= */
:root {
	/* colour */
	--c-ink:        #1c2b36;
	--c-body:       #3b4d5a;
	--c-soft:       #64798a;
	--c-blue:       #2e96c8;   /* fills, brand surfaces */
	--c-blue-link:  #1f7fb3;   /* text links (AA on white) */
	--c-blue-deep:  #14415c;   /* footer, dark surfaces */
	--c-orange:     #f08c1e;
	--c-paper:      #ffffff;
	--c-wash:       #f2f8fb;
	--c-line:       #e2ebf2;

	/* type */
	--f-display: "Lato", "Segoe UI", sans-serif;
	--f-body:    "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* shape + depth */
	--radius:     5px;
	--radius-sm:  3px;
	--shadow-sm:  0 1px 2px rgba(20, 43, 58, .06), 0 4px 14px rgba(20, 43, 58, .05);
	--shadow-md:  0 2px 6px rgba(20, 43, 58, .07), 0 12px 32px rgba(20, 43, 58, .09);

	/* layout */
	--content-max: 1400px;
	--gutter: clamp(1.1rem, 3.5vw, 2rem);
}

/* The fallback inline-SVG logo (images/logo.php) renders its wordmark in
   Ancillary; without this face the fallback logo text degrades to a system
   font. Only used when no Customizer logo is set. */
@font-face {
	font-family: "Ancillary-Bold";
	src: url("fonts/Ancillary-Bold.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "Ancillary-Regular";
	src: url("fonts/ancillary-regular-webfont.woff2") format("woff2"),
	     url("fonts/ancillary-regular-webfont.woff") format("woff");
	font-display: swap;
}

/* =========================================================
   2. Reset + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--f-body);
	font-size: 1.0625rem;             /* 17px */
	line-height: 1.65;
	color: var(--c-body);
	/* Solid light blue. Site-wide background is customizable in the
	   Customizer (Kleuren -> Achtergrondkleur / Achtergrondafbeelding);
	   this is only the default when nothing is set there. */
	background-color: #e9f3fa;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-display);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--c-ink);
	margin: 1.6em 0 0.5em;
	text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); margin-top: 0; }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.1rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.02rem; }

p, ul, ol { margin: 0 0 1.25em; }
li + li { margin-top: 0.3em; }

a { color: var(--c-blue-link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--c-blue); }

hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.2em 0; }

blockquote {
	margin: 1.8em 0;
	padding: 0.4em 0 0.4em 1.3em;
	border-left: 3px solid var(--c-orange);
	color: var(--c-soft);
	font-size: 1.06em;
}

table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
th, td { padding: 0.6em 0.8em; border-bottom: 1px solid var(--c-line); text-align: left; }
th { font-family: var(--f-display); font-weight: 700; color: var(--c-ink); }

/* forms (also covers Ninja Forms + search + comments) */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="number"], input[type="password"], textarea, select {
	width: 100%;
	padding: 0.62em 0.9em;
	border: 1px solid #cfdde6;
	border-radius: var(--radius-sm);
	background: #fff;
	font: inherit;
	color: var(--c-ink);
	transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue) 18%, transparent);
}
button, input[type="submit"], input[type="button"], .nf-form-content input[type="button"] {
	display: inline-block;
	padding: 0.7em 1.6em;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--c-blue);
	color: #fff;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: filter .15s, transform .15s;
}
button:hover, input[type="submit"]:hover, .nf-form-content input[type="button"]:hover {
	filter: brightness(1.07);
	transform: translateY(-1px);
}

::selection { background: color-mix(in srgb, var(--c-blue) 25%, transparent); }

/* WordPress content alignment. These used to live in the retired parent
   theme's style.css; without them every alignleft/alignright image in the
   classic-editor content stacks unfloated. Margins match the old values so
   existing pages render as they always did. */
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft  { float: left;  margin: 5px 20px 20px 0; }
.aligncenter { display: block; float: none; margin: 5px auto 20px; }
.alignnone { float: none; }

.wp-caption { max-width: 100%; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption.alignleft  { margin: 5px 20px 20px 0; }
.wp-caption .wp-caption-text {
	font-size: 0.85rem;
	color: var(--c-soft);
	margin: 0.4em 0 0;
	text-align: center;
}

/* Content wrappers contain their floats, so a tall floated image can never
   poke out of the bottom of a card. flow-root = modern clearfix.
   overflow-wrap guards against unbreakable runs in author content (long URLs,
   "_____" divider lines) pushing a horizontal scrollbar onto the page. */
.text, .entry-content, .comment-content { display: flow-root; }
.rounded-block, .main-content, .text, .entry-content, .so-panel {
	overflow-wrap: break-word;
}

/* A 300px float next to a 55px text column is unreadable: release floats on
   small screens and center the image instead. */
@media (max-width: 600px) {
	.alignright, .alignleft { float: none; display: block; margin: 1em auto; }
}

/* =========================================================
   3. Legacy grid shim
   The templates keep their Bootstrap-era class names; this
   is the only grid CSS on the site now. Mobile-first.
   ========================================================= */
.container {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.row { display: flex; flex-wrap: wrap; margin-inline: -12px; }
/* NB: every width rule below carries the same `.row >` prefix as the base
   rule; without it the base (attribute selector, specificity 0,2,0) beats
   the plain column classes and everything renders full width. */
.row > [class*="col-"] { width: 100%; min-height: 1px; padding-inline: 12px; }
.row > .col-xs-6 { width: 50%; }

.row > .col-xs-4 { width: 33.333%; }
.row > .col-xs-8 { width: 66.666%; }
@media (min-width: 768px) {
	.row > .col-sm-12 { width: 100%; }
	.row > .col-sm-9  { width: 75%; }
	.row > .col-sm-8  { width: 66.666%; }
	.row > .col-sm-6  { width: 50%; }
	.row > .col-sm-4  { width: 33.333%; }
	.row > .col-sm-3  { width: 25%; }
}
@media (min-width: 992px) {
	.row > .col-md-12 { width: 100%; }
	.row > .col-md-9  { width: 75%; }
	.row > .col-md-6  { width: 50%; }
	.row > .col-md-4  { width: 33.333%; }
	.row > .col-md-3  { width: 25%; }
	.row > .col-md-2  { width: 16.666%; }
}

/* =========================================================
   4. Header
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--c-line);
}
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
/* At <=600px the WP admin bar is position:absolute and scrolls away with the
   page, so offsetting the sticky header by 46px leaves a see-through gap. */
@media screen and (max-width: 600px) { body.admin-bar .site-header { top: 0; } }

.site-header__utility {
	display: flex;
	justify-content: flex-end;
	border-bottom: 1px solid var(--c-line);
}
.site-header__utility ul { list-style: none; display: flex; gap: 1.4em; margin: 0; padding: 0.35em 0; }
.site-header__utility li { margin: 0; }
.site-header__utility a {
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--c-soft);
	text-decoration: none;
}
.site-header__utility a:hover { color: var(--c-blue-link); }

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: 0.65rem;
}
/* .site-logo is a wrapper div: the link inside comes either from
   the_custom_logo() (a.custom-logo-link) or from the SVG fallback. */
.site-logo, .site-logo a { display: flex; align-items: center; text-decoration: none; }
.site-logo svg, .site-logo img { height: 66px; width: auto; display: block; }
@media (max-width: 600px) {
	.site-logo svg, .site-logo img { height: 50px; }
	.site-header__bar { padding-block: 0.45rem; }
}

/* primary nav */
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.site-nav li { margin: 0; position: relative; }
.site-nav a {
	display: block;
	padding: 0.55em 0.85em;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--c-ink);
	text-decoration: none;
	border-radius: var(--radius-sm);
}
.site-nav a:hover { color: var(--c-blue-link); background: var(--c-wash); }
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current_page_parent > a { color: var(--c-blue-link); }
.site-nav .current-menu-item > a::after,
.site-nav .current-menu-ancestor > a::after {
	content: "";
	display: block;
	height: 3px;
	border-radius: 2px;
	background: var(--c-orange);
	margin: 2px 0.1em 0;
}

/* dropdowns */
.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	flex-direction: column;
	gap: 0;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: 0.4rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav .sub-menu a { font-weight: 600; font-size: 0.92rem; padding: 0.5em 0.8em; }
.site-nav .sub-menu .sub-menu { top: 0; left: 100%; }

/* mobile */
.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	border-radius: var(--radius-sm);
}
.nav-toggle:hover { background: var(--c-wash); transform: none; filter: none; }
.nav-toggle span {
	display: block;
	width: 24px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--c-ink);
	transition: transform .2s, opacity .2s;
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1020px) {
	.nav-toggle { display: block; }
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--c-line);
		box-shadow: var(--shadow-md);
		display: none;
		padding: 0.6rem var(--gutter) 1rem;
	}
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; gap: 0; }
	.site-nav a { padding: 0.7em 0.4em; font-size: 1.05rem; border-bottom: 1px solid var(--c-wash); border-radius: 0; }
	.site-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 1rem;
		display: none;
	}
	.site-nav li.is-open > .sub-menu { display: block; }
	.site-nav .current-menu-item > a::after { display: none; }
	.submenu-toggle {
		position: absolute;
		right: 0;
		top: 6px;
		width: 38px;
		height: 38px;
		background: none;
		border: 0;
		padding: 0;
	}
	.submenu-toggle::before {
		content: "";
		display: block;
		margin: auto;
		width: 9px;
		height: 9px;
		border-right: 2.5px solid var(--c-soft);
		border-bottom: 2.5px solid var(--c-soft);
		transform: rotate(45deg);
		transition: transform .2s;
	}
	li.is-open > .submenu-toggle::before { transform: rotate(-135deg); }
}
@media (min-width: 1021px) { .submenu-toggle { display: none; } }

/* =========================================================
   5. Content area + cards
   ========================================================= */
.page-content { padding-block: clamp(2.2rem, 5vw, 4rem); }

/* Builder pages that OPEN with a full-width stretched row (hero landings on
   the regular templates) sit flush under the header: no content-area top
   padding and no card chrome around the builder canvas. Scoped via :has() to
   that exact case, so ordinary builder pages (cards, sidebars, FAQ etc.)
   keep their spacing. */
.page-content:has(.panel-layout > .panel-grid:first-child .siteorigin-panels-stretch) {
	padding-top: 0;
}
.page-content .main-content:has(.panel-layout > .panel-grid:first-child .siteorigin-panels-stretch) {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.banner { max-width: var(--content-max); margin: clamp(1rem, 3vw, 2rem) auto 0; padding-inline: var(--gutter); }
.banner img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.rounded-block, .main-content {
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: clamp(1.4rem, 3.5vw, 2.75rem);
}

/* Most cards are themselves grid columns (page.php, left-sidebar.php, 404),
   where the gutter rule `.row > [class*="col-"]` (specificity 0,2,0) beats
   the padding above and leaves only 12px of side inset. Restate at equal
   specificity, later in the file, so the card inset wins (legacy: 20px 6%). */
.row > .rounded-block, .row > .main-content {
	padding: clamp(1.4rem, 3.5vw, 2.75rem);
}
/* Flexes to whatever the sidebar leaves over: 75% next to a sidebar,
   full width when the page has none. */
.row > .main-content {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	margin-inline: 12px;
	padding: clamp(1.4rem, 3.5vw, 2.75rem);
}
@media (max-width: 991px) {
	.row > .main-content { flex-basis: 100%; margin-top: 1.5rem; }
}

.block-title h2 { margin-top: 0; }
.block-title hr {
	width: 56px;
	border: 0;
	border-top: 4px solid var(--c-orange);
	border-radius: 2px;
	margin: 0.7rem 0 1.8rem;
}

.text.sm_pages > :first-child { margin-top: 0; }
.text img { border-radius: var(--radius); }
/* Content images get a visible frame, as on the old site (it had a 2px grey
   border): white scans of magazine pages or documents on the white card are
   otherwise indistinguishable from the page itself and melt together. */
.text .sow-image-container img,
.main-content .sow-image-container img,
.rounded-block .sow-image-container img,
.sow-tabs-panel-content img,
.text .textwidget img {
	border: 1px solid var(--c-line);
	box-shadow: var(--shadow-sm);
}
/* Image widgets fill their column, as in the old parent theme: editors mix
   full-size and thumbnail-size sources, and without this the same page shows
   images at different widths. */
.sow-image-container img { width: 100%; }
/* Consecutive image widgets are separate "pages": give them air. */
.so-panel.widget_sow-image + .so-panel.widget_sow-image { margin-top: 1.75rem; }

.read-more {
	font-family: var(--f-display);
	font-weight: 700;
	text-decoration: none;
}
.read-more::after { content: " \2192"; }

/* post meta */
.metaData {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.5em;
	margin: 0 0 1.4em;
	padding: 0 0 1em;
	border-bottom: 1px solid var(--c-line);
	font-size: 0.85rem;
	color: var(--c-soft);
}
.metaData li { margin: 0; }
.metaData a { color: inherit; }

/* =========================================================
   6. Sidebar (Simple Page Sidebars nav blocks)
   ========================================================= */
/* Scoped to the sidebar wrappers only (sidebar.php + the dagverslag /
   thuisonderwijsgroep variants all use .main-sidebar.filter_category);
   footer widgets share the aside.widget markup and must NOT get this. */
.main-sidebar .widget {
	background: var(--c-blue);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 1.5rem 1.4rem;
	margin-bottom: 1.6rem;
	color: #fff;
}
/* h5 comes from the theme's own sidebar registration; h4.title is the WP
   default used by extra sidebars (e.g. Simple Page Sidebars' "Dagverslagen"),
   which are registered without custom title args. */
.main-sidebar .widget h5,
.main-sidebar .widget h4.title,
.main-sidebar .widget .widget-title {
	margin: 0 0 0.9rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	font-size: 1.12rem;
}
.main-sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
.main-sidebar .widget li { margin: 0; }
.main-sidebar .widget a {
	display: block;
	padding: 0.45em 0.2em 0.45em 1.1em;
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border-radius: var(--radius-sm);
	position: relative;
}
.main-sidebar .widget a::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid rgba(255, 255, 255, .75);
	border-top: 2px solid rgba(255, 255, 255, .75);
	transform: translateY(-50%) rotate(45deg);
}
.main-sidebar .widget a:hover { background: rgba(255, 255, 255, .13); }
.main-sidebar .widget .current-menu-item > a { background: rgba(255, 255, 255, .18); }
.main-sidebar .widget .sub-menu { padding-left: 1rem; }

/* =========================================================
   7. Footer
   ========================================================= */
.site-footer {
	margin-top: clamp(2.5rem, 6vw, 5rem);
	background: var(--c-blue-deep);
	color: rgba(255, 255, 255, .82);
	padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
	font-size: 0.95rem;
}
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .footer-widget { margin-bottom: 1.6rem; }

/* Footer columns flow: each widget area takes at least ~280px and grows into
   whatever is free. With only one active widget area (the current setup: one
   nav-menu widget holding the whole sitemap) it spans the full row instead of
   being boxed into a 33% column with dead space beside it. */
.site-footer .row > [class*="col-"] {
	flex: 1 1 280px;
	width: auto;
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: #fff; }
.site-footer .widget-title, .site-footer h3 {
	font-size: 0.85rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: rgba(255, 255, 255, .6);
	margin: 0 0 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 0.45em; }

/* The footer sitemap is one nav-menu widget with a nested tree; lay its
   top-level items out as columns, exactly as the old theme presented it. */
.site-footer .widget_nav_menu > div > ul,
.site-footer .widget_nav_menu > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
}
.site-footer .widget_nav_menu > div > ul > li,
.site-footer .widget_nav_menu > ul > li {
	flex: 1 1 150px;
	min-width: 140px;
}
.site-footer .widget_nav_menu > div > ul > li > a,
.site-footer .widget_nav_menu > ul > li > a {
	display: block;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 0.86rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: rgba(255, 255, 255, .65);
	margin-bottom: 0.7em;
}
.site-footer .sub-menu { padding: 0; }
.site-footer .sub-menu a { font-size: 0.92rem; }
/* A nested sub-menu sits inside its parent li, so the li bottom margin
   lands under the WHOLE nested list; give the list its own top gap so
   'Activiteiten' -> 'Workshops' matches the item rhythm. */
.site-footer .sub-menu .sub-menu { padding-left: 0.9em; margin-top: 0.45em; }
.footer-tagline {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(1.4rem, 3vw, 2rem);
	letter-spacing: 0.14em;
	color: #fff;
	text-align: center;
	margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.footer-tagline h1, .footer-tagline h2, .footer-tagline h3, .footer-tagline p { margin: 0; font-size: inherit; letter-spacing: inherit; }
.site-footer__bottom {
	margin-top: 1.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 0.82rem;
	color: rgba(255, 255, 255, .55);
	text-align: center;
}

/* =========================================================
   7b. Block language (custom SiteOrigin widgets)
   The per-instance ACCENT COLOURS (headings, hr, button border/tint)
   come from each widget's own generated CSS; this section only
   provides the geometry the old theme stylesheet used to supply.
   ========================================================= */
.special-block,
.full-width-block {
	background: rgba(255, 255, 255, .82);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: clamp(1.3rem, 3vw, 2rem);
	margin-block: 20px;
}
/* Centering: the special-block WIDGET centers itself via its per-instance
   generated CSS (only when that instance compiles, i.e. it has an accent
   colour set), matching production. The theme centers only the archive
   title block and the full-width band; templates reusing .special-block as
   a plain wrapper (single.php) stay left-aligned. */
.my_blog .row.special-block-without-button,
.full-width-block { text-align: center; }
/* Card TITLES are centered even when the instance CSS never compiles (no
   accent colour set): 14 published cards rely on this, as did the legacy
   .block-title rule. Body text stays with the instance CSS. */
.widget_special-block-widget .special-block .block-title,
.so-widget-special-block-widget .special-block .block-title,
.widget_post-block-widget .special-block .block-title { text-align: center; }
.special-block { position: relative; }
/* Equal-height cards with bottom-pinned buttons are a WIDGET-card feature.
   Templates reuse .special-block for plain boxes (search title, single post
   wrapper): a global height:100% there resolves against the flex-stretched
   column and blows the box up to the full page height, and the 96px is dead
   space when there is no pinned button. Scope both to the widget contexts. */
.widget_special-block-widget,
.so-widget-special-block-widget,
.widget_special-block-widget .special-block,
.so-widget-special-block-widget .special-block { height: 100%; }
.widget_special-block-widget .special-block,
.so-widget-special-block-widget .special-block,
.widget_post-block-widget .special-block { padding-bottom: 96px; }
.special-block.special-block-without-button { padding-bottom: clamp(1.3rem, 3vw, 2rem); }
/* The archive/search title block carries the .row class, so the grid shim
   turns it into a flex container and the category description ends up NEXT
   TO the title instead of under it. Stack it like normal flow content. */
.row.special-block-without-button { display: block; }

.special-block .block-title h2 { margin-top: 0; font-size: 1.45rem; }
.special-block .block-title hr,
.full-width-block .block-title hr { width: 56px; margin: 8px 0 18px; border-top-width: 3px; }
/* Centered accent line only where the title itself is centered (widget
   cards and archive title blocks); left-aligned titles keep it left. */
.widget_special-block-widget .special-block .block-title hr,
.so-widget-special-block-widget .special-block .block-title hr,
.widget_post-block-widget .special-block .block-title hr,
.special-block-without-button .block-title hr,
.full-width-block .block-title hr { margin-inline: auto; }

/* Section headings dropped into custom-HTML widgets ('level-1-widget',
   e.g. the 'Data' heading on the workshops page): the old theme styled
   these like block titles with an accent line and breathing room. */
.level-1-widget { margin-top: clamp(1.8rem, 4vw, 3rem); }
.level-1-widget .widget-title {
	text-align: center;
	font-size: 1.45rem;
	margin: 0 0 0.4rem;
}
.level-1-widget .widget-title::after {
	content: "";
	display: block;
	width: 56px;
	border-top: 4px solid var(--c-orange);
	border-radius: 2px;
	margin: 0.7rem auto 1.2rem;
}

/* full-width band variant */
.full-width-block { border-radius: var(--radius); }
.full-width-block .block-content { max-width: 960px; margin-inline: auto; }

/* headline widget acts as a section divider band */
.so-widget-sow-headline { padding-block: 0.5rem; }

/* the block buttons: pinned to the card bottom so rows stay equal height */
.sow-submit,
.eaw-booknow .wfea-button,
.special-block .button {
	display: block;
	width: 100%;
	/* the action strip is always centered, whatever the card text does */
	text-align: center;
	border: 2px solid var(--c-blue);
	border-radius: var(--radius-sm);
	padding: 0.55em 1em;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 1.08rem;
	text-decoration: none;
	color: var(--c-blue);
	background: color-mix(in srgb, var(--c-blue) 12%, transparent);
	transition: filter .15s, transform .15s, box-shadow .15s;
}
.special-block .button {
	position: absolute;
	left: 0;
	bottom: 0;
	border-radius: 0 0 var(--radius) var(--radius);
	border-width: 2px 0 0;
	padding-block: 0.8em;
}
.special-block .button.in-content-button { position: static; border-width: 2px; border-radius: var(--radius-sm); }
/* Hover: the widgets' own generated CSS still carries a 2019-era inset glow
   (inset 0 0 20px 7px in the accent colour) at high specificity, hence the
   !important. The modern state is just a calm deepening of the tinted fill. */
.special-block .button:hover, .sow-submit:hover, .eaw-booknow .wfea-button:hover {
	box-shadow: none !important;
	filter: saturate(1.4) brightness(0.97);
}
.special-block .button, .sow-submit, .eaw-booknow .wfea-button { transition: filter .18s ease; }
.special-block .icon { display: inline-block; vertical-align: -0.15em; margin-right: 0.5em; font-size: 1.3em; transition: transform .18s ease; }
.special-block .button:hover .icon { transform: translateY(-2px); }
.special-block .icon img { height: 1.2em; width: auto; vertical-align: middle; }

/* =========================================================
   8. Archives, search, 404, comments
   ========================================================= */
.my_blog article { margin-bottom: 2rem; }
.heading .title, .page-title-area { padding-block: 1rem; }

.search-form { display: flex; gap: 0.6rem; max-width: 460px; }
.search-form input[type="search"] { flex: 1; }

.comment-list { list-style: none; padding: 0; }
.comment-list .comment { border-top: 1px solid var(--c-line); padding: 1.2em 0; }

.page-links { margin: 1.6em 0; }
.page-links span, .page-links a { display: inline-block; padding: 0.2em 0.7em; border-radius: var(--radius-sm); }
.page-links > span:not(.page-links-title) { background: var(--c-blue); color: #fff; }

/* =========================================================
   9. Plugin harmony
   ========================================================= */
/* Ninja Forms */
.nf-form-cont .nf-form-title h3 { margin-top: 0; }
.nf-field-label label { font-weight: 600; color: var(--c-ink); font-size: 0.94rem; }
.nf-form-fields-required { font-size: 0.82rem; color: var(--c-soft); }

/* Show/Hide accordion links get breathing room */
.text .bg_shce_showhide, .text a[id^="bg-showhide"] { display: block; padding: 0.6em 0; }

/* SiteOrigin panels inside cards keep their own grid; give rows air */
.main-content .panel-grid + .panel-grid { margin-top: 0.5rem; }

/* External-link arrows (indicate-external-links) inherit colour. The
   inline-block makes the sup an atomic inline: without it the link's
   underline is re-painted at the sup's raised baseline and slices through
   the arrow like a strikethrough. */
.extlink sup { color: var(--c-soft); display: inline-block; }

/* Blog/search layouts: the first card in the content column carries a 20px
   top margin from .special-block while the sidebar widgets start flush, so
   the two columns looked vertically misaligned. */
.my_blog > div > .special-block:first-child { margin-top: 0; }

/* Posts pagination (search, category and magazine archives): WP outputs
   .navigation.pagination > .nav-links with .page-numbers items. */
.navigation.pagination { margin: 2rem 0 0.5rem; }
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	color: var(--c-blue);
	font-weight: 600;
	text-decoration: none;
}
.navigation.pagination a.page-numbers:hover {
	border-color: var(--c-blue);
	background: color-mix(in srgb, var(--c-blue) 8%, transparent);
}
.navigation.pagination .page-numbers.current {
	background: var(--c-blue);
	border-color: var(--c-blue);
	color: #fff;
}
.navigation.pagination .page-numbers.dots {
	background: none;
	border: none;
	box-shadow: none;
	color: var(--c-soft);
}
.navigation.pagination .prev.page-numbers,
.navigation.pagination .next.page-numbers { font-size: 1.3rem; line-height: 1; }

/* =========================================================
   Magazine overview pages (Dagverslagen / Thuisonderwijsgroepen):
   the block query loop renders as tilted 'polaroid' photo cards.
   Ported from the old theme; the wrapper class dagverslagen-query-loop
   is set on the query block in the page content.
   ========================================================= */
.dagverslagen-query-loop .wp-block-post-template { margin-block: 32px; }
.dagverslagen-query-loop .is-layout-grid { align-items: start; gap: 24px; }
.dagverslagen-query-loop .wp-block-post {
	margin: 0;
	padding: 16px 32px 4px;
	box-sizing: border-box;
	position: relative;
	border-radius: 0; /* polaroids have square corners, deliberately not var(--radius) */
	background: var(--c-paper);
	--dagverslag-shadow-color: rgba(0, 0, 0, 0.33);
	box-shadow: 1px 4px 12px var(--dagverslag-shadow-color);
}
.dagverslagen-query-loop .wp-block-post:hover { --dagverslag-shadow-color: rgba(0, 0, 0, 0.5); }
.dagverslagen-query-loop .wp-block-post:nth-child(8n + 1) { transform: rotate(3deg); }
.dagverslagen-query-loop .wp-block-post:nth-child(8n + 2) { transform: rotate(-2deg); }
.dagverslagen-query-loop .wp-block-post:nth-child(8n + 3) { transform: rotate(1.5deg); }
.dagverslagen-query-loop .wp-block-post:nth-child(8n + 4) { transform: rotate(0.5deg); }
.dagverslagen-query-loop .wp-block-post:nth-child(8n + 5) { transform: rotate(-3deg); }
.dagverslagen-query-loop .wp-block-post:nth-child(8n + 6) { transform: rotate(2deg); }
.dagverslagen-query-loop .wp-block-post:nth-child(8n + 7) { transform: rotate(5deg); }
.dagverslagen-query-loop .wp-block-post:nth-child(8n + 8) { transform: rotate(-1deg); }
.dagverslagen-query-loop .wp-block-post .wp-block-post-title { font-size: 1.6rem; color: #5b5b5b; }
/* Stretch the title link over the whole card */
.dagverslagen-query-loop .wp-block-post .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 10;
	cursor: pointer;
}
.dagverslagen-query-loop .wp-block-post .wp-block-post-title a { text-decoration: none; }
.sidebar-dagverslag .wp-block-latest-posts a { text-decoration: none; }

/* Eventbrite events list (widget-for-eventbrite-api, the workshop dates).
   Replaces the deleted style-events.css, which was written for an older
   plugin markup and inverted the title order. Top-align the thumbnail and
   content, give the date/venue lines air (the plugin sets line-height:100%),
   and space the rows. */
.eaw-li__flex { align-items: flex-start; }
.eaw-li__wrap + .eaw-li__wrap { margin-top: 1.25rem; }
.eaw-content-wrap { line-height: 1.55; }
.eaw-content-wrap .eaw-title { margin: 0 0 0.25rem; font-size: 1.15rem; }
.eaw-time { display: block; color: var(--c-soft); }
.eaw-booknow { margin-top: 0.7rem; max-width: 320px; }
.eaw-thumb-wrap img { border-radius: var(--radius-sm); }

/* Literatuuroverzicht page (custom class on its panel layout): coloured
   dividers and hover accents, as on the old site. */
.literatuuroverzicht hr:not(h2 + hr) { border-top: 2px solid var(--c-yellow, #bfbe00); }
.literatuuroverzicht a:hover { color: #b200b2; }
.literatuuroverzicht .internal-links a:hover { color: var(--c-blue); }

/* SiteOrigin tabs widget (Commissies on /vereniging/structuur/): the widget
   instance is configured with WHITE tab labels, so the theme must paint the
   tab bar (as the legacy theme did) or the labels vanish against the card.
   The .panel-layout prefix lifts these to 5 classes, one more than the
   generated per-instance CSS they override. */
.panel-layout .so-widget-sow-tabs .sow-tabs {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-paper);
	overflow: hidden;
}
.panel-layout .so-widget-sow-tabs .sow-tabs .sow-tabs-tab-container {
	background: color-mix(in srgb, var(--c-blue) 16%, transparent);
	padding: 0;
}
.panel-layout .so-widget-sow-tabs .sow-tabs .sow-tabs-tab-container .sow-tabs-tab {
	margin: 0;
	flex: 1 1 auto;
	text-align: center;
	color: var(--c-blue);
	font-weight: 600;
	border-radius: 0;
}
.panel-layout .so-widget-sow-tabs .sow-tabs .sow-tabs-tab-container .sow-tabs-tab .sow-tabs-title {
	display: block;
	text-align: center;
}
.panel-layout .so-widget-sow-tabs .sow-tabs .sow-tabs-tab-container .sow-tabs-tab:hover {
	color: var(--c-blue);
	background: color-mix(in srgb, var(--c-blue) 10%, transparent);
}
.panel-layout .so-widget-sow-tabs .sow-tabs .sow-tabs-tab-container .sow-tabs-tab.sow-tabs-tab-selected {
	background: var(--c-paper);
	color: var(--c-blue);
}
.sow-tabs-panel-content { overflow: auto; font-size: inherit !important; }

/* Hero/slider background videos are decoration: no hover UI, no clicks.
   NB: use SELF-HOSTED mp4 files for hero background videos, not YouTube.
   A YouTube embed always shows its title overlay and (when looped via the
   playlist trick) prev/next buttons, and no parameter disables them. A
   self-hosted file loops cleanly with zero chrome. */
.sow-slide-video-oembed iframe { pointer-events: none; }

/* =========================================================
   10. Utilities + a11y
   ========================================================= */
.screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-ink);
	color: #fff;
	padding: 0.6em 1em;
	z-index: 1000;
}
.skip-link:focus { left: 0; }

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