/*
 * Wanneer is het: "Vertrekstaat". Kleuren komen uit de Blocksy-palette (met dezelfde
 * waarden als terugval), zodat een wijziging in de Customizer vanzelf doorwerkt.
 */
/* Lettertypen, lokaal gehost (SIL Open Font License): Geist, Geist Mono en Outfit, alleen latin */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/geist-400.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/geist-500.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/geist-600.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/geist-700.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/geist-mono-500.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/outfit-600.woff2") format("woff2"); }

:root {
	--wih-amber: var(--theme-palette-color-1, #e8a23a);
	--wih-ink: var(--theme-palette-color-3, #dde1e2);
	--wih-line: var(--theme-palette-color-5, #333a3d);
	--wih-raised: var(--theme-palette-color-6, #20272a);
	--wih-panel: var(--theme-palette-color-7, #1b2124);
	--wih-bg: var(--theme-palette-color-8, #14181a);
	--wih-zacht: #838d90;
}

.wih-zacht { color: var(--wih-zacht); }
.wih-amber { color: var(--wih-amber); }

.wih-label {
	margin: 0;
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wih-zacht);
}

.wih-lead { font-size: 1.25em; margin: 0 0 1em; }
.wih-h2 { font-size: 1.35em; margin: 1.6em 0 .5em; line-height: 1.15; }
.wih-h3 { font-size: 1.1em; margin: 1.4em 0 .5em; line-height: 1.15; }

/* Split-flap tegel */
.wih-flip {
	display: inline-block;
	padding: 4px 10px;
	background: var(--wih-raised);
	border: 1px solid var(--wih-line);
	border-radius: 2px;
	font-family: "Geist Mono", ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	color: var(--wih-amber);
	line-height: 1.3;
}
.wih-flip--xl { font-size: 1.6em; padding: 6px 14px; }

.wih-klok {
	font-family: "Geist Mono", ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	color: var(--wih-amber);
}

/* Tabellen */
.wih-tabel-wrap { overflow-x: auto; margin: 1em 0; }
.wih-tabel { width: 100%; border-collapse: collapse; font-size: .92em; background: transparent; }
.wih-tabel th,
.wih-tabel td { padding: 8px 12px 8px 0; border: 0; border-bottom: 1px solid var(--wih-line); text-align: left; vertical-align: top; }
.wih-tabel th { color: var(--wih-zacht); font-weight: 500; }
.wih-tabel td.wih-naam { font-weight: 500; }
.wih-tabel td.wih-zacht { color: var(--wih-zacht); }
.wih-tabel a { color: var(--wih-ink); text-decoration: none; }
.wih-tabel a:hover { color: var(--wih-amber); text-decoration: underline; }
.wih-tabel .wih-nu td { background: rgba(232, 162, 58, .16); font-weight: 500; }
.wih-badge {
	margin-left: 8px;
	padding: 1px 6px;
	border-radius: 2px;
	background: var(--wih-amber);
	color: #14181a;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/* Weeknummers */
.wih-hero {
	margin: 0 0 1.5em;
	padding: 18px 20px;
	background: var(--wih-raised);
	border: 1px solid rgba(232, 162, 58, .4);
	border-radius: 2px;
}
.wih-hero__week { margin: .4em 0 .2em; font-size: 1.1em; }
.wih-hero__jaar { font-size: 1.4em; }
.wih-hero p { margin-bottom: 0; }
.wih-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 1em 0 1.5em; }
.wih-chips a {
	padding: 4px 10px;
	border: 1px solid var(--wih-line);
	border-radius: 2px;
	font-size: .9em;
	color: var(--wih-zacht);
	text-decoration: none;
}
.wih-chips a:hover { border-color: var(--wih-amber); color: var(--wih-amber); }
.wih-maanden section { scroll-margin-top: 80px; }

/* Lijst met komende feestdagen */
.wih-lijst { background: var(--wih-panel); border: 1px solid var(--wih-line); border-radius: 2px; }
.wih-rij {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 12px 18px;
	color: var(--wih-ink);
	text-decoration: none;
}
.wih-rij + .wih-rij { border-top: 1px solid var(--wih-line); }
.wih-rij:hover { background: rgba(0, 0, 0, .15); }
.wih-rij .wih-flip { text-align: center; }
.wih-rij__naam { display: block; }
.wih-rij__datum { display: block; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--wih-zacht); }
.wih-rij__dagen { font-family: "Geist Mono", ui-monospace, monospace; font-size: .9em; color: var(--wih-zacht); white-space: nowrap; }

/* Vandaag */
.wih-vandaag .wih-flip { margin: 4px 0 10px; }
.wih-vandaag__lang { margin: 0; text-transform: none; }
.wih-vandaag__tijd { margin: 4px 0 10px; font-size: 1.1em; }

/* Kaarten */
.wih-grid { display: grid; gap: 16px; margin: 1em 0; }
.wih-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wih-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wih-kaartlink {
	display: block;
	padding: 16px;
	background: var(--wih-raised);
	border: 1px solid var(--wih-line);
	border-radius: 2px;
	color: var(--wih-ink);
	text-decoration: none;
}
.wih-kaartlink:hover { border-color: var(--wih-amber); }
.wih-kaartlink .wih-h3 { margin: 0 0 .3em; }
.wih-kaartlink p { margin: .2em 0 0; font-size: .92em; }
.wih-kaartlink--media { padding: 0; overflow: hidden; background: var(--wih-panel); }
.wih-kaartlink--media img,
.wih-kaartlink--media .wih-leeg { display: block; width: 100%; height: 128px; object-fit: cover; background: var(--wih-raised); }
.wih-kaartlink__titel { display: block; padding: 10px 12px; font-size: .92em; font-weight: 500; }
.wih-kaartlink--media:hover .wih-kaartlink__titel { color: var(--wih-amber); }

/* Afteller */
.wih-countdown {
	margin: .6em 0 1.2em;
	padding: 16px;
	background: var(--wih-raised);
	border-radius: 2px;
	text-align: center;
}
.wih-countdown__nog { margin: 0; font-size: .8em; color: var(--wih-zacht); }
.wih-countdown__eenheden { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.wih-countdown__waarde {
	font-family: "Geist Mono", ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 1.9em;
	font-weight: 500;
	color: var(--wih-amber);
}
.wih-countdown__label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--wih-zacht); }
.wih-countdown__tot { margin: 10px 0 0; font-size: .8em; color: var(--wih-zacht); }

/* Schoolvakanties: regiokeuze en status */
.wih-klein { font-size: .85em; }
.wih-status { min-height: 4.5em; margin-bottom: 1em; }
.wih-status:empty { min-height: 0; margin: 0; }
.wih-bezig { padding: 16px; background: var(--wih-raised); border-radius: 2px; text-align: center; }
.wih-bezig__tekst { margin: 0; font-size: 1.25em; font-weight: 500; color: var(--wih-amber); }
.wih-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.wih-tab {
	padding: 4px 12px;
	background: transparent;
	border: 1px solid var(--wih-line);
	border-radius: 2px;
	color: var(--wih-zacht);
	font-size: .92em;
	cursor: pointer;
}
.wih-tab:hover { color: var(--wih-ink); border-color: var(--wih-zacht); }
.wih-tab[aria-pressed="true"] { background: var(--wih-amber); border-color: var(--wih-amber); color: #14181a; font-weight: 600; }
.wih-provincies { margin: 8px 0 0; font-size: .82em; }
.wih-vak [data-r] { display: none; }
.wih-vak[data-regio="noord"] [data-r="noord"],
.wih-vak[data-regio="midden"] [data-r="midden"],
.wih-vak[data-regio="zuid"] [data-r="zuid"] { display: inline; }

/* Artikelpagina's: oude site toonde geen auteur, datum, reacties, gerelateerde of vorige/volgende artikelen */
.single-post .ct-meta-element-author,
.single-post .ct-meta-element-date,
.single-post .ct-meta-element-comments,
.single-post .ct-related-posts-container,
.single-post .post-navigation { display: none; }
.wih-na-artikel { margin-top: 2em; }
.wih-lijstje { margin: 10px 0 0; padding: 0; list-style: none; }
.wih-lijstje li { margin: 0 0 8px; font-size: .92em; }
.wih-lijstje a { color: var(--wih-ink); text-decoration: none; }
.wih-lijstje a:hover { color: var(--wih-amber); text-decoration: underline; }

/* Maandblok op de homepage */
.wih-maandblok__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wih-maandblok__titel { margin: 0; font-size: 1.5em; font-weight: 500; line-height: 1.15; }
.wih-maandblok__kop a { color: var(--wih-amber); font-size: .9em; text-decoration: none; }
.wih-maandblok__kop a:hover { text-decoration: underline; }
.wih-maandblok > p { margin: 4px 0 0; font-size: .92em; }
.wih-maandblok__lijst { margin: 12px 0 0; padding: 0; list-style: none; }
.wih-maandblok__lijst li { position: relative; margin: 0 0 8px; padding-left: 18px; font-size: .92em; }
.wih-maandblok__lijst li::before { content: "•"; position: absolute; left: 2px; color: var(--wih-amber); }
.wih-maandblok__lijst a { color: var(--wih-amber); text-decoration: underline; }
.wih-maandblok__nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--wih-line); font-size: .8em; }
.wih-maandblok__nav a { color: var(--wih-zacht); text-decoration: none; }
.wih-maandblok__nav a:hover { color: var(--wih-amber); }
.wih-maandblok__nav a.is-nu { color: var(--wih-amber); font-weight: 500; text-decoration: underline; }
.wih-kaartlink__titel small { display: block; margin-bottom: 2px; font-size: .78em; font-weight: 400; }

/* Verlofplanner: amber = zelf in te zetten verlofdag, amber omlijnd = feestdag, grijs = weekend */
.wih-dag { display: block; text-align: center; border-radius: 2px; line-height: 1.15; padding: 6px 0; }
.wih-dag small { display: block; font-size: 10px; opacity: .8; }
.wih-dag b { display: block; font-size: .92em; font-weight: 600; }
.wih-dag--feestdag { border: 1px solid rgba(232, 162, 58, .5); background: var(--wih-raised); color: var(--wih-amber); }
.wih-dag--verlofdag { background: var(--wih-amber); color: #14181a; }
.wih-dag--weekend { background: var(--wih-raised); color: var(--wih-zacht); }
i.wih-dag { display: inline-block; width: 12px; height: 12px; padding: 0; vertical-align: -1px; margin-right: 6px; }
.wih-strook { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; align-content: start; }
.wih-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: .8em 0; font-size: .9em; color: var(--wih-zacht); }

.wih-vp-top { padding: 20px; background: var(--wih-panel); border: 2px solid var(--wih-line); border-radius: 2px; margin-bottom: 1.5em; }
.wih-vp-top__kop { margin: 0; font-size: 1.6em; font-weight: 700; line-height: 1.15; }
.wih-vp-top__sub { margin: 4px 0; font-size: 1.5em; font-weight: 600; color: var(--wih-amber); line-height: 1.2; }
.wih-vp-top__uitleg { margin: 1.4em 0 .2em; font-weight: 500; }
.wih-vp-top tfoot td { padding: 8px 12px 8px 0; font-weight: 600; }
.wih-kaart { padding: 14px; border: 1px solid var(--wih-line); border-radius: 2px; }
.wih-kaart p { margin: 0 0 4px; }
.wih-kaart__groot { font-size: 1.25em; font-weight: 600; }
.wih-kaart .wih-strook { margin-top: 10px; }

.wih-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.wih-stat { padding: 12px 14px; background: var(--wih-panel); border: 1px solid var(--wih-line); border-radius: 2px; }
.wih-stat p { margin: 0; }
.wih-stat__waarde { font-size: 1.4em; font-weight: 600; line-height: 1.2; }
.wih-stat__waarde--groot { font-size: 1.7em; }
.wih-stat--groot { margin: 14px 0; padding: 14px 16px; }
.wih-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.wih-knop {
	padding: 8px 16px;
	background: var(--wih-amber);
	border: 1px solid var(--wih-amber);
	border-radius: 2px;
	color: #14181a;
	font: inherit;
	font-size: .92em;
	font-weight: 600;
	cursor: pointer;
}
.wih-knop:hover { background: #f0b65c; border-color: #f0b65c; }
.wih-knop--rand { background: transparent; border-color: var(--wih-line); color: var(--wih-zacht); font-weight: 500; }
.wih-knop--rand:hover { background: rgba(0, 0, 0, .15); border-color: var(--wih-line); }

.wih-maandraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; margin-top: 16px; }
.wih-maand__naam { margin: 0 0 4px; font-weight: 600; font-size: .95em; }
.wih-maand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wih-maand__wd { text-align: center; font-size: 10px; color: var(--wih-zacht); }
.wih-cel { display: block; padding: 4px 0; border: 0; border-radius: 2px; font: inherit; font-size: 11px; line-height: 1.3; text-align: center; background: var(--wih-panel); color: var(--wih-zacht); }
.wih-cel--feestdag { border: 1px solid rgba(232, 162, 58, .5); background: var(--wih-raised); color: var(--wih-amber); }
.wih-cel--weekend { background: var(--wih-raised); }
button.wih-cel--werk { cursor: pointer; }
button.wih-cel--werk:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--wih-amber); }
button.wih-cel--werk:disabled { cursor: not-allowed; opacity: .5; }
.wih-cel--gekozen,
button.wih-cel--gekozen:disabled { background: var(--wih-amber); color: #14181a; opacity: 1; cursor: pointer; }

.wih-combinaties { display: grid; gap: 12px; margin-top: 12px; }
.wih-comb { padding: 14px; border: 1px solid var(--wih-line); border-radius: 2px; }
.wih-comb--aan { background: var(--wih-raised); border-color: rgba(232, 162, 58, .6); }
.wih-comb__kop { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-weight: 500; cursor: pointer; }
.wih-comb__kop input { margin-top: 5px; accent-color: var(--wih-amber); }
.wih-comb__tekst { font-size: .92em; }
.wih-comb__tekst p { margin: 8px 0 0; }
.wih-comb__tekst p:first-child { margin-top: 0; }
.wih-comb__tekst ul { margin: 2px 0 0; padding-left: 18px; color: var(--wih-zacht); }

/* Rekenmachines */
.wih-calc { margin: 1.2em 0; }
.wih-calc form { margin: 0; }
.wih-velden { display: grid; gap: 16px; margin-bottom: 14px; }
.wih-velden--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wih-velden--rij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.wih-veld { margin-bottom: 12px; }
.wih-veld label { display: block; margin-bottom: 4px; font-size: .92em; font-weight: 500; }
.wih-calc input[type="date"],
.wih-calc input[type="number"],
.wih-calc select {
	width: 100%;
	max-width: 320px;
	padding: 8px 12px;
	background: var(--wih-raised);
	border: 1px solid var(--wih-line);
	border-radius: 2px;
	color: var(--wih-ink);
	font: inherit;
	font-size: .95em;
	color-scheme: dark;
}
.wih-velden--rij input[type="number"] { width: 96px; }
.wih-velden--rij select { width: auto; }
.wih-calc input:focus,
.wih-calc select:focus { outline: none; border-color: var(--wih-amber); }
.wih-vink { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: .95em; cursor: pointer; }
.wih-linkknop { display: block; margin-top: 4px; padding: 0; background: none; border: 0; color: var(--wih-zacht); font-size: .8em; text-decoration: underline; cursor: pointer; }
.wih-linkknop:hover { color: var(--wih-amber); }

.wih-uitkomst { margin-top: 20px; padding: 16px; background: var(--wih-panel); border: 1px solid var(--wih-line); border-radius: 2px; }
.wih-uitkomst__kop { margin: 0; font-size: .9em; color: var(--wih-zacht); }
.wih-uitkomst__waarde { margin: 6px 0 0; font-size: 1.9em; padding: 6px 14px; }
.wih-uitkomst__waarde--klein { font-size: 1.45em; }
.wih-uitkomst__extra { margin: 8px 0 0; font-size: .88em; color: var(--wih-zacht); }
.wih-flip--klein { margin-top: 4px; padding: 1px 8px; font-size: .78em; }
.wih-mijlpalen { margin: 8px 0 0; padding: 0; list-style: none; }
.wih-mijlpalen li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--wih-line); font-size: .95em; }
.wih-mijlpalen li:last-child { border-bottom: 0; }
.wih-mijlpalen__rechts { text-align: right; color: var(--wih-zacht); }

@media (max-width: 689px) {
	.wih-stats { grid-template-columns: 1fr; }
	.wih-maandraster { grid-template-columns: 1fr; }
	.wih-velden--2 { grid-template-columns: 1fr; }
	.wih-mijlpalen li { flex-direction: column; align-items: flex-start; gap: 4px; }
	.wih-mijlpalen__rechts { text-align: left; }
}

@media (max-width: 689px) {
	.wih-grid--2,
	.wih-grid--3 { grid-template-columns: 1fr; }
	.wih-rij { grid-template-columns: 72px 1fr auto; gap: 12px; padding: 12px; }
}