/*
 * Vlindair base styles.
 *
 * Colours: only the five brand colours. No tints, no transparency, no greys, no #fff.
 * Tokens come from theme.json as --wp--preset--* variables; the short --vl-* aliases
 * below exist for readability only.
 *
 * Loaded on the front end and in the block editor (add_editor_style).
 */

:root,
.editor-styles-wrapper {
	--vl-deep-blue: var(--wp--preset--color--deep-blue, #00174a);
	--vl-electric-purple: var(--wp--preset--color--electric-purple, #3c2f8b);
	--vl-morning-pink: var(--wp--preset--color--morning-pink, #b68dc6);
	--vl-cloud-white: var(--wp--preset--color--cloud-white, #f2eeee);
	--vl-sweet-orange: var(--wp--preset--color--sweet-orange, #efd5d0);

	/* The homepage sky (decision 2026-11-08, from design/proposals/kaleidoscope.html): the only
	 * colours outside the brand palette, used for the gradient under the homepage hero and nowhere else. */
	--vl-sky-night: #0a0f2c;
	--vl-sky-indigo: #2b2560;
	--vl-sky-mauve: #6e4c86;
	--vl-sky-rose: #f2a0b5;
	--vl-sky-peach: #ffb58c;
	--vl-sky-lilac: #c9b8f5;
	--vl-sky-sky: #cfe6ff;
	--vl-sky-paper: #f6f3ee;

	--vl-header-height: 84px;
	--vl-font-display: var(--wp--preset--font-family--display);
	--vl-font-body: var(--wp--preset--font-family--body);
	--vl-font-mono: var(--wp--preset--font-family--mono);

	/* Focus ring: Electric purple on light surfaces, Morning pink on dark ones. */
	--vl-focus: var(--vl-electric-purple);

	/* Form fields on light surfaces. Dark surfaces override these below. */
	--vl-field-text: var(--vl-deep-blue);
	--vl-field-border: var(--vl-electric-purple);
	--vl-field-background: var(--vl-cloud-white);
	--vl-field-placeholder: var(--vl-electric-purple);

	/* Hairlines between list items and cards. */
	--vl-rule: var(--vl-morning-pink);

	/* Secondary text (labels, sources). */
	--vl-muted: var(--vl-electric-purple);

	/* Window shape: the brand outline from brand/window.svg, normalised to a 0–1 box.
	 * Keep identical to VLINDAIR_WINDOW_PATH in inc/window.php. */
	--vl-window-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><path d='M0.1816,0.0170 C0.2877,0.0057 0.3939,0.0000 0.5000,0.0000 C0.6061,0.0000 0.7123,0.0057 0.8184,0.0170 C0.8986,0.0256 0.9610,0.0726 0.9704,0.1314 C0.9901,0.2543 1.0000,0.3771 1.0000,0.5000 C1.0000,0.6229 0.9901,0.7457 0.9704,0.8686 C0.9610,0.9274 0.8986,0.9744 0.8184,0.9830 C0.7123,0.9943 0.6061,1.0000 0.5000,1.0000 C0.3939,1.0000 0.2877,0.9943 0.1816,0.9830 C0.1014,0.9744 0.0390,0.9274 0.0296,0.8686 C0.0099,0.7457 0.0000,0.6229 0.0000,0.5000 C0.0000,0.3771 0.0099,0.2543 0.0296,0.1314 C0.0390,0.0726 0.1014,0.0256 0.1816,0.0170 Z'/></svg>");
}

/* ------------------------------------------------------------------
 * Dark surfaces: anything with a Deep blue or Electric purple background,
 * or one of the dark gradients. Children pick up light text and the pink focus ring.
 * ------------------------------------------------------------------ */

.has-deep-blue-background-color,
.has-electric-purple-background-color,
.has-deep-blue-purple-gradient-background,
.has-purple-deep-blue-gradient-background,
.vl-dark {
	--vl-focus: var(--vl-morning-pink);
	--vl-field-text: var(--vl-cloud-white);
	--vl-field-border: var(--vl-morning-pink);
	--vl-field-background: transparent;
	--vl-field-placeholder: var(--vl-morning-pink);
	--vl-rule: var(--vl-electric-purple);
	--vl-muted: var(--vl-morning-pink);
	color: var(--vl-cloud-white);
}

.has-electric-purple-background-color {
	--vl-rule: var(--vl-morning-pink);
	--vl-muted: var(--vl-sweet-orange);
}

.has-deep-blue-background-color :is(h1, h2, h3, h4, h5, h6, a),
.has-electric-purple-background-color :is(h1, h2, h3, h4, h5, h6, a),
.has-deep-blue-purple-gradient-background :is(h1, h2, h3, h4, h5, h6, a),
.has-purple-deep-blue-gradient-background :is(h1, h2, h3, h4, h5, h6, a),
.vl-dark :is(h1, h2, h3, h4, h5, h6, a) {
	color: inherit;
}

/* ------------------------------------------------------------------
 * Document
 * ------------------------------------------------------------------ */

/* Header, main and footer touch: no block gap between the top-level template blocks,
 * nor between full-width sections in page content (sections carry their own padding). */
.wp-site-blocks > * + *,
.entry-content > :is(.vl-section, .vl-pledge, .vl-bottlenecks) {
	margin-block-start: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor links (#pledge, #press-kit) land below the sticky header, with room to breathe. */
	scroll-padding-top: calc(var(--vl-header-height) + var(--wp--preset--spacing--50) + var(--wp-admin--admin-bar--height, 0px));
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* Headlines: one key phrase stands out in Toroka Wide Bold, upright (the browser must not slant it). */
:is(h1, h2, h3, h4, .has-display-font-family, .has-hero-font-size, .has-heading-xl-font-size, .has-heading-l-font-size, .has-heading-m-font-size) em {
	font-style: normal;
	font-weight: 700;
}

/* Keyboard focus: always visible, offset, in the surface's focus colour. */
:focus-visible {
	outline: 2px solid var(--vl-focus);
	outline-offset: 3px;
}

:focus:not(:focus-visible) {
	outline: none;
}

::selection {
	background: var(--vl-morning-pink);
	color: var(--vl-deep-blue);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: var(--vl-deep-blue);
	color: var(--vl-cloud-white);
	white-space: normal;
}

/* ------------------------------------------------------------------
 * The window shape
 *
 * Front end: SVG clipPath printed at wp_body_open (inc/window.php).
 * Editor canvas: the clipPath is not present, so the mask does the same job.
 * Both come from the same outline. Never add a border or frame.
 * ------------------------------------------------------------------ */

.vl-window {
	aspect-ratio: 384 / 524;
	overflow: hidden;
	-webkit-mask-image: var(--vl-window-mask);
	mask-image: var(--vl-window-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	clip-path: url(#vl-window);
}

/* Small window used as a marker or bullet (27 × 37 in the designs). */
.vl-window-mark {
	display: inline-block;
	width: 27px;
	aspect-ratio: 384 / 524;
	background: var(--vl-electric-purple);
	-webkit-mask-image: var(--vl-window-mask);
	mask-image: var(--vl-window-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	clip-path: url(#vl-window);
}

/* ------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------ */

.vl-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.vl-field label,
.vl-form legend {
	font-family: var(--vl-font-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vl-muted);
}

.vl-form input:not([type="checkbox"], [type="radio"]),
.vl-form select,
.vl-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 0 1rem;
	border: 1px solid var(--vl-field-border);
	border-radius: 10px;
	background: var(--vl-field-background);
	color: var(--vl-field-text);
	font: inherit;
	font-size: 1rem;
}

.vl-form textarea {
	padding: 0.875rem 1rem;
	resize: vertical;
}

.vl-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%23B68DC6' stroke-width='1.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 16px;
}

.vl-form ::placeholder {
	color: var(--vl-field-placeholder);
	opacity: 1;
}

.vl-form input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	accent-color: var(--vl-electric-purple);
}

.vl-form .vl-field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.75rem;
}

.vl-form .vl-field--check label {
	font-family: var(--vl-font-body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

.vl-form button,
.vl-form .vl-button {
	min-height: 52px;
	padding: 0 1.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--vl-electric-purple);
	color: var(--vl-cloud-white);
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
}

.vl-dark .vl-form button,
.has-deep-blue-background-color .vl-form button,
.has-electric-purple-background-color .vl-form button {
	background: var(--vl-cloud-white);
	color: var(--vl-electric-purple);
}

.vl-form .vl-error {
	font-size: var(--wp--preset--font-size--small);
	color: inherit;
	font-weight: 500;
}

.vl-form [aria-invalid="true"] {
	border-width: 2px;
}

/* Honeypot field: hidden from people, present for bots. Never display:none. */
.vl-form .vl-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * Block styles (registered in inc/block-styles.php)
 * ------------------------------------------------------------------ */

/* Image → Window */
.wp-block-image.is-style-window img {
	aspect-ratio: 384 / 524;
	width: 100%;
	object-fit: cover;
	-webkit-mask-image: var(--vl-window-mask);
	mask-image: var(--vl-window-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	clip-path: url(#vl-window);
	border-radius: 0;
}

/* Group → Window: a window-shaped panel with centred content. */
.wp-block-group.is-style-window {
	aspect-ratio: 384 / 524;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	overflow: hidden;
	padding: 12% 10%;
	-webkit-mask-image: var(--vl-window-mask);
	mask-image: var(--vl-window-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	clip-path: url(#vl-window);
}

.wp-block-group.is-style-window > * {
	margin-block: 0;
}

/* Group → Card: rounded panel. Background colour comes from the block settings. */
.wp-block-group.is-style-card {
	border-radius: 20px;
	padding: var(--wp--preset--spacing--50);
}

/* Paragraph → Label: monospaced eyebrow. */
.is-style-label {
	font-family: var(--vl-font-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--vl-muted);
}

/* Paragraph → Source: the line beneath a figure. */
.is-style-source {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.45;
	color: var(--vl-muted);
}

/* List → Dividers */
.wp-block-list.is-style-rule {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--vl-rule);
}

.wp-block-list.is-style-rule > li {
	padding: 1.375rem 0;
	border-bottom: 1px solid var(--vl-rule);
}

/* List → Numbered with dividers: 01, 02, … in mono. */
.wp-block-list.is-style-numbered-rule {
	list-style: none;
	counter-reset: vl-item;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--vl-rule);
}

.wp-block-list.is-style-numbered-rule > li {
	counter-increment: vl-item;
	display: flex;
	gap: 1.5rem;
	padding: 1.375rem 0;
	border-bottom: 1px solid var(--vl-rule);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.wp-block-list.is-style-numbered-rule > li::before {
	content: counter(vl-item, decimal-leading-zero);
	flex: none;
	font-family: var(--vl-font-mono);
	font-size: 0.875rem;
	line-height: 1.9;
	color: var(--vl-muted);
}

/* List → Window bullets */
.wp-block-list.is-style-window-bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
}

.wp-block-list.is-style-window-bullets > li {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.wp-block-list.is-style-window-bullets > li::before {
	content: "";
	flex: none;
	width: 14px;
	aspect-ratio: 384 / 524;
	margin-top: 0.3em;
	background: var(--vl-electric-purple);
	-webkit-mask-image: var(--vl-window-mask);
	mask-image: var(--vl-window-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	clip-path: url(#vl-window);
}

.vl-dark .wp-block-list.is-style-window-bullets > li::before,
.has-deep-blue-background-color .wp-block-list.is-style-window-bullets > li::before {
	background: var(--vl-morning-pink);
}

/* Pull quote: the cite line in mono beneath the quote (core's em-based size would inherit the display size). */
.wp-block-quote cite {
	display: block;
	margin-top: 1.125rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
}

/* Button → Light (for dark surfaces) and the core Outline style. */
.wp-block-button.is-style-light .wp-block-button__link {
	background: var(--vl-cloud-white);
	color: var(--vl-electric-purple);
}

.wp-block-button.is-style-light .wp-block-button__link:is(:hover, :focus) {
	background: var(--vl-sweet-orange);
	color: var(--vl-deep-blue);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
	padding-top: calc(0.9rem - 1px);
	padding-bottom: calc(0.9rem - 1px);
}

.wp-block-button.is-style-outline .wp-block-button__link:is(:hover, :focus) {
	background: var(--vl-cloud-white);
	color: var(--vl-electric-purple);
	border-color: var(--vl-cloud-white);
}

/* ------------------------------------------------------------------
 * Header (parts/header*.html)
 *
 * --dark: transparent bar, dark logo, Deep blue text (all pages but the homepage).
 * --light: sits on the horizon gradient, white logo, Cloud white text (homepage).
 * Below 900 px the navigation collapses into a Menu button that opens a
 * full-screen Deep blue panel (the core Navigation block's overlay, restyled).
 * ------------------------------------------------------------------ */

/* The template part's <header> is the sticky element (sticky stays inside its parent). */
.wp-site-blocks > header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.vl-header {
	transition: background 0.3s ease-out, padding 0.3s ease-out;
}

.vl-header--dark {
	color: var(--vl-deep-blue);
}

/* Scrolled: the bar floats as a solid Electric purple pillow (content width, rounded ends)
 * over the page, with light text and the white logo. */
.vl-header.is-stuck {
	background: transparent !important;
	color: var(--vl-cloud-white);
	padding-top: var(--wp--preset--spacing--20) !important;
	padding-bottom: var(--wp--preset--spacing--20) !important;
	--vl-focus: var(--vl-morning-pink);
}

.vl-header.is-stuck .vl-header__bar {
	background: var(--vl-electric-purple);
	border-radius: 999px;
	padding: 0.625rem 0.75rem 0.625rem 1.75rem;
}

.vl-header.is-stuck .vl-nav .wp-block-navigation-item__content,
.vl-header.is-stuck .vl-nav .wp-block-navigation__responsive-container-open {
	color: var(--vl-cloud-white);
}

.vl-header.is-stuck .vl-header__cta .wp-block-button__link {
	background: var(--vl-cloud-white);
	color: var(--vl-electric-purple);
}

.vl-header__bar {
	transition: background 0.3s ease-out, padding 0.3s ease-out, border-radius 0.3s ease-out;
}

@media (max-width: 600px) {
	.vl-header.is-stuck .vl-header__bar {
		padding: 0.5rem 0.5rem 0.5rem 1.125rem;
	}
}

/* The homepage bar floats over the hero: it has a fixed height, no background of its own,
 * and the hero section is pulled up underneath it by the same amount. */
.vl-header--horizon {
	box-sizing: border-box;
	height: var(--vl-header-height);
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vl-header--horizon > * {
	width: 100%;
}

/* The hero is wider than the content column but not full width: its side margin sits
 * halfway between the full-width margin and the content column's margin; the pledge card
 * sits inside it with the same margin below. The selector beats core's
 * ":root :where(.is-layout-constrained) > :first-child" margin reset. */
:root .wp-site-blocks .vl-section--horizon {
	--vl-hero-margin-full: clamp(1.25rem, 4.5vw, 4rem);
	--vl-hero-margin: max(var(--vl-hero-margin-full), calc((var(--vl-hero-margin-full) + (100vw - var(--wp--style--global--content-size)) / 2) / 2));
	margin-top: calc(-1 * var(--vl-header-height));
	padding: var(--vl-header-height) var(--vl-hero-margin) var(--vl-hero-margin);
	background-size: cover;
	background-position: center;
}

:root .wp-site-blocks .vl-section--horizon > * {
	max-width: none;
}

/* ------------------------------------------------------------------
 * Homepage sky: the sections under the hero form one gradient, night at the top and
 * daylight at the foot. Each section paints its own slice so the stops line up with the
 * content whatever its height. Night, indigo and mauve carry light text (.vl-dark); rose,
 * peach, lilac, sky and paper keep the dark defaults. The background goes on
 * background-image so it also covers a preset colour class (which core sets !important).
 * ------------------------------------------------------------------ */

.vl-sky {
	background-image: linear-gradient(180deg, var(--vl-sky-from), var(--vl-sky-to));
}

.vl-sky--night {
	--vl-sky-from: var(--vl-sky-night);
	--vl-sky-to: var(--vl-sky-indigo);
}

.vl-sky--indigo {
	--vl-sky-from: var(--vl-sky-indigo);
	--vl-sky-to: var(--vl-sky-mauve);
}

/* Mauve, then a text-free dawn strip into rose at the bottom (the Bottlenecks band). */
.vl-sky--mauve {
	--vl-muted: var(--vl-sweet-orange);
	--vl-rule: var(--vl-morning-pink);
	background-image: linear-gradient(180deg, var(--vl-sky-mauve) 0, var(--vl-sky-mauve) calc(100% - 18vh), var(--vl-sky-rose) 100%);
}

.vl-bottlenecks.vl-sky--mauve {
	padding-bottom: calc(var(--wp--preset--spacing--90) + 18vh);
}

.vl-bottlenecks.vl-sky--mauve .vl-item-list {
	--vl-rule: var(--vl-morning-pink);
}

.vl-sky--rose {
	--vl-sky-from: var(--vl-sky-rose);
	--vl-sky-to: var(--vl-sky-peach);
}

/* Peach to full daylight (the closing call to action). */
.vl-sky--peach {
	background-image: linear-gradient(180deg, var(--vl-sky-peach) 0%, var(--vl-sky-lilac) 45%, var(--vl-sky-sky) 80%, var(--vl-sky-paper) 100%);
}

@media (max-width: 900px) {
	.vl-bottlenecks.vl-sky--mauve {
		padding-bottom: calc(var(--wp--preset--spacing--80) + 18vh);
	}
}


.vl-header--light {
	color: var(--vl-cloud-white);
	--vl-focus: var(--vl-cloud-white);
}

.vl-header__bar {
	gap: var(--wp--preset--spacing--40);
}

.vl-header .vl-logo {
	line-height: 0;
	flex: none;
}

.vl-header .vl-logo img {
	display: block;
}

.vl-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.vl-nav .wp-block-navigation-item__content {
	color: inherit;
	text-decoration: none;
}

.vl-nav .wp-block-navigation-item__content:hover,
.vl-nav .wp-block-navigation-item__content:focus-visible,
.vl-nav .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 6px;
}

.vl-header__cta {
	flex: none;
}

.vl-header__cta .wp-block-button__link {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	min-height: 44px;
	box-sizing: border-box;
}

/* Menu button: larger target, label next to the icon. */
.vl-nav .wp-block-navigation__responsive-container-open,
.vl-nav .wp-block-navigation__responsive-container-close {
	color: inherit;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
}

/* The open overlay: full-screen Deep blue panel with large links. */
.vl-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	--vl-focus: var(--vl-morning-pink);
}

.vl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
}

.vl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--vl-font-display);
	font-size: var(--wp--preset--font-size--heading-s);
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.vl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--50);
}

/* Raise the collapse point from the core default (600 px) to 900 px, as in the designs. */
@media (min-width: 600px) and (max-width: 900px) {
	.vl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.vl-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 900px) {
	.vl-header__bar {
		gap: var(--wp--preset--spacing--30);
	}

	.vl-nav {
		flex: none;
		order: 3;
	}

	.vl-header__cta {
		order: 2;
		margin-left: auto;
	}

	.vl-header--minimal .vl-nav {
		margin-left: auto;
	}
}

@media (max-width: 480px) {
	.vl-header__cta .wp-block-button__link {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ------------------------------------------------------------------
 * Footer (parts/footer*.html)
 * ------------------------------------------------------------------ */

.vl-footer__row {
	gap: var(--wp--preset--spacing--50);
}

.vl-footer__tagline {
	letter-spacing: 0.32em;
}

/* The links stand in one column, each a 44 px row. */
.vl-footer__nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vl-footer__nav .wp-block-navigation-item__content:hover,
.vl-footer__nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: none;
}

.vl-footer__legal {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--vl-electric-purple);
}

.vl-footer__legal p {
	margin: 0;
}

.vl-footer__legal a {
	color: inherit;
}

.vl-footer__affiliations .vl-logos__label {
	color: var(--vl-morning-pink);
	margin-bottom: var(--wp--preset--spacing--30);
}

.vl-footer__affiliations .vl-logos {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

/* ------------------------------------------------------------------
 * Pages built from patterns (patterns/page-*.php)
 * ------------------------------------------------------------------ */

/* Page hero: label, h1 and intro; optionally a window on the right. */
.vl-page-hero__text > *,
.vl-page-hero .wp-block-column > * {
	margin-block: 0;
}

.vl-page-hero__text > .is-style-label,
.vl-page-hero .wp-block-column > .is-style-label {
	margin-bottom: var(--wp--preset--spacing--40);
}

.vl-page-hero__text > h1 + p,
.vl-page-hero .wp-block-column > h1 + p {
	max-width: 560px;
	margin-top: var(--wp--preset--spacing--50);
	line-height: 1.45;
}

.vl-page-hero__text h1 {
	max-width: 1040px;
}

.vl-page-hero__text > h1 + p {
	max-width: 760px;
}

.vl-page-hero__photo,
.vl-page-hero__window {
	max-width: 360px;
	margin-left: auto;
}

.vl-page-hero__window {
	padding: 14% 10%;
}

.vl-page-hero__window .is-style-label {
	margin-bottom: var(--wp--preset--spacing--30);
}

.vl-page-hero__phase {
	line-height: 1;
}

.vl-page-hero__phase-name {
	font-weight: 300;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

.vl-page-hero__window p:last-child {
	line-height: 1.5;
}

/* Text measures inside constrained sections (padding keeps them on the left edge). */
.vl-measure {
	padding-right: clamp(0px, 100% - 760px, 480px);
}

.vl-measure-wide {
	padding-right: clamp(0px, 100% - 900px, 340px);
}

/* Large card: the form panels. */
.wp-block-group.is-style-card.vl-card--large {
	border-radius: 28px;
	padding: clamp(var(--wp--preset--spacing--50), 5vw, var(--wp--preset--spacing--70));
}

.wp-block-group.is-style-card > * {
	margin-block: 0;
}

.wp-block-group.is-style-card > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.wp-block-group.is-style-card .is-style-label {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Prose pages (privacy notice): one column of headings and paragraphs. */
.vl-prose > * {
	max-width: 760px;
}

.vl-prose > h2 {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--20);
}

.vl-prose > p {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

@media (max-width: 781px) {
	.vl-page-hero__photo,
	.vl-page-hero__window {
		max-width: 300px;
		margin-left: 0;
		margin-top: var(--wp--preset--spacing--50);
	}
}

/* Pledge pages (patterns/page-pledge-*.php) */
.vl-pledge-hero > .is-style-label {
	margin-bottom: var(--wp--preset--spacing--40);
}

.vl-pledge-hero > h1 {
	max-width: 980px;
	margin-block: 0;
}

.vl-pledge-hero__intro {
	max-width: 560px;
	margin-top: var(--wp--preset--spacing--40) !important;
	line-height: 1.45;
}

.vl-pledge-hero > .vl-pass-wrap {
	margin-top: var(--wp--preset--spacing--70);
	margin-bottom: calc(-1 * var(--wp--preset--spacing--80));
	position: relative;
	z-index: 1;
}

.vl-section--next {
	padding-top: calc(var(--wp--preset--spacing--90) + var(--wp--preset--spacing--80)) !important;
}

.vl-steps .vl-step {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--vl-electric-purple);
}

.vl-steps .vl-step > * {
	margin-block: 0;
}

.vl-steps .vl-step > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.vl-step__number {
	font-family: var(--vl-font-mono);
	font-size: 0.875rem;
	color: var(--vl-morning-pink);
}

.vl-steps .vl-step > h3 {
	font-size: var(--wp--preset--font-size--heading-xs);
}

.vl-steps .vl-share {
	margin-top: var(--wp--preset--spacing--30);
}

/* Form block (plugin form engine): two-column grid, full-width rows, radio options, success. */
.vl-form--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.vl-form--grid .vl-form__row--full {
	grid-column: 1 / -1;
}

.vl-form--grid fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.vl-form--grid legend {
	margin-bottom: 0.5rem;
}

.vl-field__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.vl-field__option {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-size: 1rem;
}

.vl-form input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--vl-electric-purple);
}

.vl-form__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--20);
}

.vl-form__note {
	margin: 0;
	max-width: 640px;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--vl-muted);
}

.vl-form__success {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.vl-form-anchor {
	position: relative;
	top: calc(-1 * var(--wp--preset--spacing--60));
}

@media (max-width: 600px) {
	.vl-form--grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Form errors */
.vl-form__error {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0.75rem 1rem;
	border-radius: 10px;
	background: var(--vl-sweet-orange);
	color: var(--vl-deep-blue);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* ------------------------------------------------------------------
 * Articles, jobs, archives and search (templates/single-*.html, archive-*.html, search.html)
 * ------------------------------------------------------------------ */

/* Page heads sit in a default-layout group inside the constrained one, so narrow text stays on the left edge. */
.vl-article__head > *,
.vl-archive__head > *,
.vl-404 > * {
	margin-block: 0;
}

.vl-article__head > .vl-kicker {
	margin-bottom: var(--wp--preset--spacing--40);
}

.vl-article__title {
	max-width: 1040px;
}

/* Lead: the excerpt on jobs, the first paragraph of the body on news items. */
.vl-article__lead,
.vl-article__body > p:first-child {
	max-width: 760px;
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.45;
}

.vl-article__body > p:first-child {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--60);
}

.vl-article__body {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.7;
}

.vl-article__body > :is(p, ul, ol, h2, h3, blockquote) {
	max-width: 680px;
}

.vl-article__body > h2 {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-xs);
}

.vl-article__body > h3 {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--large);
}

/* Photos: window-shaped images side by side. */
.vl-article__body > .wp-block-columns,
.vl-article__body > .wp-block-gallery {
	margin-bottom: var(--wp--preset--spacing--60);
}

.vl-article__body figcaption {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--vl-electric-purple);
	text-align: left;
}

.vl-about {
	margin-top: var(--wp--preset--spacing--60);
	max-width: 680px;
}

.vl-about > h2 {
	margin-bottom: var(--wp--preset--spacing--20);
}

.vl-article__back {
	margin-top: var(--wp--preset--spacing--60);
}

.vl-article__columns {
	align-items: flex-start;
}

.vl-article__aside {
	position: sticky;
	top: var(--wp--preset--spacing--40);
}

.vl-archive__head > h1 {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.vl-archive__intro {
	max-width: 760px;
	line-height: 1.45;
}

.vl-archive__head > .vl-search {
	margin-top: var(--wp--preset--spacing--50);
}

.vl-archive .wp-block-vlindair-news-filter + .wp-block-query,
.vl-article__main > .wp-block-query {
	margin-top: var(--wp--preset--spacing--50);
}

/* Result lists: rows with dividers, kicker on top, title, excerpt. */
.vl-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--vl-rule);
}

.vl-list > .wp-block-post {
	margin: 0;
	padding: var(--wp--preset--spacing--50) 0;
	border-bottom: 1px solid var(--vl-rule);
}

.vl-list > .wp-block-post > * {
	margin-block: 0;
}

.vl-list__title {
	margin-top: var(--wp--preset--spacing--20);
	max-width: 42rem;
}

.vl-list__title a {
	color: inherit;
	text-decoration: none;
}

.vl-list__title a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.vl-list__excerpt {
	margin-top: var(--wp--preset--spacing--20);
	max-width: 42rem;
	line-height: 1.55;
}

.vl-list__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.vl-pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}

.vl-pagination a,
.vl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.25rem;
	text-decoration: none;
}

.vl-pagination a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.vl-pagination .page-numbers.current {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* Search form (core Search block). */
.vl-search {
	max-width: 560px;
}

.vl-search .wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--20);
}

.vl-search .wp-block-search__input {
	min-height: 48px;
	padding: 0.5rem 0.25rem;
	border: 0;
	border-bottom: 1px solid var(--vl-field-border);
	border-radius: 0;
	background: var(--vl-field-background);
	color: var(--vl-field-text);
	font: inherit;
}

.vl-search .wp-block-search__input::placeholder {
	color: var(--vl-field-placeholder);
}

.vl-search .wp-block-search__button {
	min-height: 48px;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--vl-electric-purple);
	color: var(--vl-cloud-white);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.vl-search .wp-block-search__button:is(:hover, :focus-visible) {
	background: var(--vl-deep-blue);
}

/* 404 */
.vl-404 > h1 {
	max-width: 900px;
	margin-top: var(--wp--preset--spacing--40);
}

.vl-404 > p:not(.is-style-label) {
	max-width: 640px;
	margin-top: var(--wp--preset--spacing--40);
	line-height: 1.45;
}

.vl-404 > .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--50);
}

@media (max-width: 781px) {
	.vl-article__aside {
		position: static;
	}
}

/* ------------------------------------------------------------------
 * Ease-in on scroll (assets/js/reveal.js). Elements are hidden only once the script has
 * run (html.vl-reveal-ready), so nothing disappears without JavaScript.
 * ------------------------------------------------------------------ */

.vl-reveal-ready .vl-reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--vl-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.vl-reveal-ready .vl-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ------------------------------------------------------------------
 * Print: the content, in black on white, without navigation, forms or animation.
 * ------------------------------------------------------------------ */

@media print {
	.vl-header,
	.vl-footer,
	.vl-pledge,
	.vl-form,
	.vl-share,
	.vl-press__share,
	.wp-block-buttons,
	.vl-setting-link,
	.vl-filter-wrap {
		display: none !important;
	}

	.vl-reveal-ready .vl-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	body,
	.has-background,
	.vl-section,
	.vl-bottlenecks,
	.vl-press__card,
	.vl-pass {
		background: #fff !important;
		color: #000 !important;
	}

	a {
		color: #000 !important;
	}

	main a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}

	.vl-article__aside {
		position: static;
	}
}

/* ------------------------------------------------------------------
 * Motion: everything respects prefers-reduced-motion.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.vl-header,
	.vl-header__bar {
		transition: none;
	}

	.vl-reveal-ready .vl-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}