/*
 * Daltonschool Nicolaas — basisstijlen.
 * Layout/opmaak van pagina's zit in Elementor (global variables + global classes "dn-*").
 * Hier alleen: basis, shortcode-output, nav-menu en fallbacks.
 */

:root {
	--dn-oranje: #B05500;        /* actiekleur (knoppen, links) — WCAG AA op wit/crème/tint */
	--dn-oranje-hover: #8F4500;
	--dn-oranje-licht: #EE7F1A;  /* merkoranje, alleen decoratief (blobs, illustraties) */
	--dn-inkt: #2B2622;
	--dn-inkt-zacht: #6B625A;
	--dn-creme: #FFFCF7;
	--dn-wit: #FFFFFF;
	--dn-lijn: #EDE3D6;
	--dn-tint-oranje: #FFF6EB;
	--dn-rood: #D93B34;
	--dn-geel: #F3B315;
	--dn-groen: #4FA836;
	--dn-blauw: #1E76B4;
	--dn-font-kop: 'Baloo 2', system-ui, sans-serif;
	--dn-font-tekst: 'Nunito Sans', system-ui, sans-serif;
}

/* Elementor schrijft font-variabelen zonder quotes ("Baloo 2" wordt dan ongeldig). Hogere specificiteit wint. */
html:root {
	--dn-font-kop: 'Baloo 2', system-ui, sans-serif;
	--dn-font-tekst: 'Nunito Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

/* Voorkomt horizontaal scrollen door het ingeklapte (full-width) mobiele menu. clip ≠ hidden: sticky header blijft werken. */
html, body { overflow-x: clip; }

body {
	margin: 0;
	background: var(--dn-creme);
	color: var(--dn-inkt);
	font-family: var(--dn-font-tekst);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--dn-oranje); }
a:hover { color: var(--dn-oranje-hover); }

:focus-visible { outline: 3px solid var(--dn-oranje); outline-offset: 3px; border-radius: 4px; }
/* Elementor zet op sommige links "all: unset" (logo, links in tekst): focusrand altijd tonen voor toetsenbordgebruikers */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor [tabindex]:focus-visible { outline: 3px solid var(--dn-oranje) !important; outline-offset: 3px; }

.dn-skip-link {
	position: absolute; left: 16px; top: -100px; z-index: 10000;
	background: var(--dn-inkt); color: #fff; padding: 10px 18px; border-radius: 999px;
	font-weight: 800; text-decoration: none;
}
.dn-skip-link:focus { top: 12px; color: #fff; }

/* ---------- Kruimelpad [dn_breadcrumb] — wrapper: global class dn-breadcrumb ---------- */
.dn-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dn-breadcrumb a { color: var(--dn-inkt-zacht); text-decoration: none; }
.dn-breadcrumb a:hover { color: var(--dn-oranje); text-decoration: underline; }
.dn-breadcrumb strong { color: var(--dn-inkt); font-weight: 700; }

/* ---------- Sectie-navigatie [dn_subnav] — wrapper: global class dn-subnav ---------- */
.dn-subnav { display: flex; flex-direction: column; gap: 10px; }
.dn-subnav a { color: var(--dn-inkt-zacht); text-decoration: none; }
.dn-subnav a:hover { color: var(--dn-oranje); text-decoration: underline; }

/* ---------- Illustratie-placeholder [dn_illustratie] — wrapper: global class dn-illu-slot ----------
 * Output: <TAG><span/><span/>[<span>label</span>]</TAG>, TAG = span|em|b|u (oranje|blauw|groen|geel).
 * Kaartvariant: wrapper krijgt daarnaast de global class dn-illu-slot-kaart.
 */
.dn-illu-slot > * {
	--dn-illu-bg: #FFF6EB; --dn-illu-a: #EE7F1A; --dn-illu-b: #F3D9BF;
	display: flex; position: relative; overflow: hidden; align-items: flex-end;
	width: 100%; height: 260px; padding: 16px; box-sizing: border-box;
	border-radius: 24px; background: var(--dn-illu-bg);
	font-style: normal; font-weight: inherit; text-decoration: none;
}
.dn-illu-slot > em { --dn-illu-bg: #EAF3FB; --dn-illu-a: #1E76B4; --dn-illu-b: #A9D0E8; }
.dn-illu-slot > b  { --dn-illu-bg: #EEF6E7; --dn-illu-a: #4FA836; --dn-illu-b: #BFE2AC; }
.dn-illu-slot > u  { --dn-illu-bg: #FFF8E3; --dn-illu-a: #F3B315; --dn-illu-b: #F8E3A6; }

.dn-illu-slot > * > span:nth-child(-n+2) { position: absolute; border-radius: 50%; }
.dn-illu-slot > * > span:nth-child(1) { top: -30px; right: -26px; width: 140px; height: 140px; background: var(--dn-illu-a); opacity: .85; }
.dn-illu-slot > * > span:nth-child(2) { bottom: -30px; left: 40px; width: 100px; height: 100px; background: var(--dn-illu-b); }
.dn-illu-slot > * > span:nth-child(3) {
	position: relative; font-size: 12px; line-height: 1.3; color: var(--dn-inkt-zacht);
	background: rgba(255, 255, 255, .9); padding: 6px 12px; border-radius: 999px;
}

.dn-illu-slot-kaart > * { height: 140px; border-radius: 0; padding: 0; }
.dn-illu-slot-kaart > * > span:nth-child(1) { top: -20px; right: auto; left: -16px; width: 90px; height: 90px; }
.dn-illu-slot-kaart > * > span:nth-child(2) { bottom: -24px; left: auto; right: 20px; width: 70px; height: 70px; }

@media (max-width: 767px) {
	.dn-illu-slot > * { height: 180px; border-radius: 20px; }
	.dn-illu-slot-kaart > * { height: 120px; border-radius: 0; }
}

/* Uitgelichte afbeelding naast de placeholder: verberg het lege e-image als er geen foto is. */
.dn-foto-slot:not(:has(img[src]:not([src=""]))) { display: none; }
.dn-foto-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Pagina-inhoud (Post Content in de Subpagina-template) ----------
 * Voor tekst uit de blokeditor. Elementor-content op de pagina zelf gebruikt de dn-*-classes.
 */
.elementor-widget-theme-post-content { font-family: var(--dn-font-tekst); font-size: 15px; line-height: 1.7; color: var(--dn-inkt); }
.elementor-widget-theme-post-content p, .elementor-widget-theme-post-content li { font-family: inherit; color: inherit; }
.elementor-widget-theme-post-content > * + * { margin-top: 1em; }
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.elementor-widget-theme-post-content h4 { font-family: var(--dn-font-kop); font-weight: 700; line-height: 1.25; color: var(--dn-inkt); margin: 1.4em 0 .5em; }
.elementor-widget-theme-post-content h2 { font-size: 24px; }
.elementor-widget-theme-post-content h3 { font-size: 20px; }
.elementor-widget-theme-post-content h2:first-child,
.elementor-widget-theme-post-content h3:first-child { margin-top: 0; }
.elementor-widget-theme-post-content p { margin: 0 0 1em; }
.elementor-widget-theme-post-content a,
.elementor .elementor-widget-theme-post-content a { color: var(--dn-oranje); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.elementor .elementor-widget-theme-post-content a:hover { text-decoration-thickness: 2px; }
/* Knoppen in de tekst (bestandsblok) blijven zonder onderstreping */
.elementor .elementor-widget-theme-post-content .wp-block-file__button { text-decoration: none; }
.elementor-widget-theme-post-content a:hover { color: var(--dn-oranje-hover); }
.elementor-widget-theme-post-content ul { list-style: none; padding: 0; margin: 0 0 1em; display: flex; flex-direction: column; gap: 10px; }
.elementor-widget-theme-post-content ul li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.elementor-widget-theme-post-content ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--dn-oranje); }
.elementor-widget-theme-post-content ol { padding-left: 1.3em; }
.elementor-widget-theme-post-content blockquote {
	margin: 1.4em 0; background: var(--dn-tint-oranje); border-radius: 16px; padding: 24px 28px;
	border-left: 4px solid var(--dn-oranje); font-family: var(--dn-font-kop); font-weight: 700; font-style: italic; font-size: 17px; line-height: 1.4;
}
.elementor-widget-theme-post-content blockquote p { margin: 0; }
.elementor-widget-theme-post-content img { border-radius: 20px; }
.elementor-widget-theme-post-content .wp-block-table { margin: 0 0 1.4em; overflow-x: auto; }
.elementor-widget-theme-post-content table {
	width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px;
	background: var(--dn-wit); border: 1px solid var(--dn-lijn); border-radius: 14px; overflow: hidden;
}
.elementor-widget-theme-post-content .wp-block-table th,
.elementor-widget-theme-post-content .wp-block-table td {
	text-align: left; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--dn-lijn); vertical-align: top;
}
.elementor-widget-theme-post-content .wp-block-table tr:last-child td { border-bottom: 0; }
.elementor-widget-theme-post-content .wp-block-table thead th { background: var(--dn-tint-oranje); font-weight: 800; border-bottom: 1px solid var(--dn-lijn); }
.elementor-widget-theme-post-content .wp-block-table td:first-child { font-weight: 700; }
.elementor-widget-theme-post-content .wp-block-file__button,
.elementor-widget-theme-post-content .wp-block-button__link { background: var(--dn-oranje); color: #fff; border-radius: 999px; padding: 12px 24px; font-weight: 800; text-decoration: none; }
@media (max-width: 767px) {
	.elementor-widget-theme-post-content { font-size: 14px; }
	.elementor-widget-theme-post-content h2 { font-size: 20px; }
	.elementor-widget-theme-post-content blockquote { padding: 18px 20px; font-size: 15px; }
}

/* Zijbalkkaart "In dit onderdeel" verbergen als een pagina geen buurpagina's heeft */
.dn-kaart-zijbalk:has(.dn-subnav:empty) { display: none; }

/* Links in donkere zijbalk-kaart */
.dn-kaart-zijbalk .dn-subtekst a { color: inherit; text-decoration: none; }
.dn-kaart-zijbalk .dn-subtekst a:hover { text-decoration: underline; }

/* ---------- Filterknoppen uit shortcodes ([dn_document_filter], [dn_schooljaar_filter]) — wrapper: dn-filterpills ---------- */
.dn-filterpills { display: flex; flex-wrap: wrap; gap: 10px; }
.dn-filterpills:empty { display: none; }
.elementor .dn-filterpills a,
.elementor .dn-filterpills strong {
	display: inline-block; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--dn-lijn);
	background: var(--dn-wit); color: var(--dn-inkt); font-size: 13px; font-weight: 700; line-height: 1.3; text-decoration: none;
}
.elementor .dn-filterpills a:hover { border-color: var(--dn-oranje); color: var(--dn-oranje); }
.elementor .dn-filterpills strong { background: var(--dn-inkt); border-color: var(--dn-inkt); color: var(--dn-wit); font-weight: 800; }

/* Lege velden in loop-kaarten (bv. geen opmerking of periode) niet tonen */
.dn-verberg-leeg:empty { display: none; }

/* Initialen-avatar verdwijnt zodra er een foto is (shortcode geeft dan niets terug) */
.dn-avatar:empty { display: none; }

/* ---------- Filterpills vacatures: actieve pill via body-class ---------- */
body.post-type-archive-dn_vacature .elementor .dn-pill-alle,
body.term-onze-school .elementor .dn-pill-onze-school,
body.term-het-sticht .elementor .dn-pill-het-sticht {
	background-color: var(--dn-inkt); border-color: var(--dn-inkt); color: var(--dn-wit); font-weight: 800;
}

/* ---------- Toegankelijkheid: klikgebied telefoon-/e-maillinks minimaal 24px hoog (WCAG 2.2, 2.5.8) ---------- */
.elementor a[href^="tel:"],
.elementor a[href^="mailto:"] { display: inline-block; min-height: 24px; line-height: 24px; }

/* ---------- Sticky header (Theme Builder-locatie) ---------- */
.elementor-location-header { position: sticky; top: 0; z-index: 100; }
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .elementor-location-header { top: 0; } }

/* ---------- Hoofdmenu (Elementor Pro nav-menu in de header) ---------- */
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
	font-family: var(--dn-font-tekst); font-weight: 700; font-size: 15px;
	color: var(--dn-inkt); padding: 10px 17px;
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .current-menu-ancestor > .elementor-item { color: var(--dn-oranje); }
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item::after { background-color: var(--dn-oranje) !important; height: 3px; border-radius: 3px; }

.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown {
	background: var(--dn-wit); border: 1px solid var(--dn-lijn); border-radius: 16px;
	padding: 8px; box-shadow: 0 12px 32px rgba(43, 38, 34, .08);
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu--dropdown { min-width: 240px !important; }
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown a {
	font-family: var(--dn-font-tekst); font-weight: 600; font-size: 14px;
	color: var(--dn-inkt); border-radius: 10px; padding: 10px 14px;
}
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown a:hover,
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item-active { background: var(--dn-tint-oranje); color: var(--dn-oranje-hover); }

.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle { background: transparent; color: var(--dn-inkt); font-size: 26px; padding: 6px; border-radius: 10px; }
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle:hover { background: var(--dn-tint-oranje); }
.elementor-location-header .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { margin-top: 16px; }

.elementor-location-header .elementor-widget-nav-menu .sub-arrow svg { fill: currentColor !important; }

/* ---------- Footer-menu's (nav-menu's in de footer) ---------- */
.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu a,
.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
	font-family: var(--dn-font-tekst); font-weight: 400; font-size: 13px;
	color: #C9C1B7; padding: 5px 0;
}
.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu a:hover { color: var(--dn-wit); text-decoration: underline; }
.elementor-location-footer .elementor-widget-nav-menu .elementor-item::after { display: none; }
.elementor-location-footer a { color: #C9C1B7; text-decoration: none; }
.elementor-location-footer .elementor-nav-menu a.elementor-item-active { color: var(--dn-wit) !important; font-weight: 700; }
.elementor-location-footer a:hover { color: var(--dn-wit); text-decoration: underline; }

/* ---------- Loop-items: hele kaart klikbaar & hover ---------- */
.dn-kaart-link { transition: transform .15s ease, box-shadow .15s ease; }
.dn-kaart-link:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(43, 38, 34, .08); }

/* ---------- Fallbacks (alleen als Elementor-templates ontbreken) ---------- */
.dn-fallback-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 56px; background: #fff; border-bottom: 1px solid var(--dn-lijn); }
.dn-fallback-header ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.dn-fallback-header a { color: var(--dn-inkt); font-weight: 700; text-decoration: none; }
.dn-fallback-content { max-width: 800px; margin: 0 auto; padding: 56px 20px; }
.dn-fallback-content h1, .dn-fallback-content h2 { font-family: var(--dn-font-kop); }
.dn-fallback-footer { background: var(--dn-inkt); color: #8B8177; padding: 32px 56px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.dn-kaart-link { transition: none; }
	.dn-kaart-link:hover { transform: none; }
}