/**
 * Hondenschool Rotterdam child theme: site stylesheet.
 *
 * Order: 1 fonts · 2 token bridge · 3 base · 4 utilities · 5 video hero · 6 CourseFlow · 7 header · 8 footer · 9 homepage.
 *
 * Rules:
 * - Colours and typography are defined once, in the Elementor Kit (Site Settings). This file only refers to
 *   the Kit's CSS variables (--e-global-*); the hex values after the comma are fallbacks for pages without Kit CSS.
 * - No course facts here or anywhere in the theme: CourseFlow renders them.
 * - CourseFlow selectors are one class deep; the list is the contract in README.md.
 */

/* 1. Self-hosted fonts (SIL Open Font License, see assets/fonts/OFL-*.txt). Latin subset covers Dutch. */
@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* 2. Token bridge: Kit variables (ids per docs/website-redesign-w2-plan.md W2.2) → short theme names. */
:root {
	--ahr-primary: var(--e-global-color-primary, #7440a0);
	--ahr-brand: var(--e-global-color-secondary, #ab6fcc);
	--ahr-ink: var(--e-global-color-text, #1e1a23);
	--ahr-primary-strong: var(--e-global-color-primarystrong, #5a2d7d);
	--ahr-primary-deep: var(--e-global-color-primarydeep, #3f1f57);
	--ahr-lavender-200: var(--e-global-color-lavender200, #ddc9eb);
	--ahr-lavender-100: var(--e-global-color-lavender100, #efe5f6);
	--ahr-lavender-50: var(--e-global-color-lavender50, #f8f3fb);
	--ahr-cream-100: var(--e-global-color-cream100, #f6eee2);
	--ahr-cream-50: var(--e-global-color-cream50, #fbf7f1);
	--ahr-ink-muted: var(--e-global-color-inkmuted, #5b5463);
	--ahr-border: var(--e-global-color-border, #e3dce8);
	--ahr-border-input: var(--e-global-color-borderinput, #857c8f);
	--ahr-error: var(--e-global-color-error, #b3261e);

	--ahr-font-heading: var(--e-global-typography-primary-font-family, "Outfit"), system-ui, sans-serif;
	--ahr-font-body: var(--e-global-typography-text-font-family, "Source Sans 3"), system-ui, sans-serif;

	/* Shape, depth and rhythm (W1 §4). Not colour or type, so they live here. */
	--ahr-radius-input: 10px;
	--ahr-radius-card: 20px;
	--ahr-radius-photo: 28px;
	--ahr-shadow: 0 6px 24px rgb(63 31 87 / 0.1);
	--ahr-space-1: 4px;
	--ahr-space-2: 8px;
	--ahr-space-3: 12px;
	--ahr-space-4: 16px;
	--ahr-space-5: 24px;
	--ahr-space-6: 32px;
	--ahr-space-7: 48px;
	--ahr-space-8: 64px;
	--ahr-space-section: clamp(64px, 8vw, 112px);
	--ahr-focus: 3px solid var(--ahr-primary);
}

/* 3. Base. Typography itself comes from the Kit's Theme Style. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--ahr-focus);
	outline-offset: 3px;
}

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

/* 4. Utilities used as Elementor CSS classes (README.md lists them). */
.ahr-section {
	padding-block: var(--ahr-space-section);
	position: relative;
}

.ahr-section--tight {
	padding-block: calc(var(--ahr-space-section) / 2);
}

.ahr-eyebrow,
.ahr-eyebrow .elementor-heading-title {
	color: var(--ahr-primary);
	font-family: var(--ahr-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ahr-photo img {
	border-radius: var(--ahr-radius-photo);
	display: block;
	height: auto;
	width: 100%;
}

/* Organic shape behind a photo or section: subtle, decorative, never content (C2). */
.ahr-shape {
	isolation: isolate;
	position: relative;
}

.ahr-shape::before {
	background: var(--ahr-lavender-100) no-repeat;
	content: "";
	inset: -8% -10% auto auto;
	-webkit-mask: var(--ahr-shape-mask) center / contain no-repeat;
	mask: var(--ahr-shape-mask) center / contain no-repeat;
	pointer-events: none;
	position: absolute;
	width: min(70%, 520px);
	aspect-ratio: 1;
	z-index: -1;
}

.ahr-shape--a { --ahr-shape-mask: url("../shapes/blob-a.svg"); }
.ahr-shape--b { --ahr-shape-mask: url("../shapes/blob-b.svg"); }
.ahr-shape--c { --ahr-shape-mask: url("../shapes/blob-c.svg"); }
.ahr-shape--cream::before { background-color: var(--ahr-cream-100); }

/* Pull an element up over the previous section (next-course block over the hero). */
.ahr-overlap-up {
	margin-top: calc(-1 * var(--ahr-space-8)) !important;
	position: relative;
	z-index: 3;
}

.ahr-card {
	background: #fff;
	border-radius: var(--ahr-radius-card);
	box-shadow: var(--ahr-shadow);
	overflow: hidden;
}

/* 5. Video hero (container with class ahr-hero; behaviour in assets/js/hero-video.js). */
.ahr-hero {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.ahr-hero__video {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.6s ease;
	width: 100%;
	z-index: 0;
}

.ahr-hero__video.is-playing {
	opacity: 1;
}

/*
 * Pause/play control (WCAG 2.2.2): small and quiet, a dark-glass pill with white text in the lower right corner.
 * The fill is 70 % ink, so the text stays above 4.5:1 even over the brightest video frame. Scoped under .ahr-hero so
 * the Kit's global button style (.elementor-kit-N button) never turns it into a purple call to action.
 */
.ahr-hero .ahr-hero__toggle {
	align-items: center;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: rgb(30 26 35 / 0.7);
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 999px;
	bottom: var(--ahr-space-4);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: 600 0.8125rem/1 var(--ahr-font-body);
	gap: var(--ahr-space-2);
	letter-spacing: normal;
	min-height: 36px;
	padding: 0 14px;
	position: absolute;
	right: var(--ahr-space-4);
	text-transform: none;
	top: auto;
	z-index: 4;
}

.ahr-hero .ahr-hero__toggle:hover,
.ahr-hero .ahr-hero__toggle:focus {
	background: rgb(30 26 35 / 0.85);
	border-color: rgb(255 255 255 / 0.7);
	color: #fff;
}

.ahr-hero .ahr-hero__toggle:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.ahr-hero__toggle-icon {
	font-size: 0.75rem;
}

/* 6. CourseFlow components. Styled by their own BEM classes only; CourseFlow is not modified. */

/* 6.1 Enrollment form: CourseFlow's own stylesheet reads these public properties. */
body {
	--courseflow-accent: var(--ahr-primary);
	--courseflow-accent-text: #fff;
	--courseflow-radius: var(--ahr-radius-input);
	--courseflow-error: var(--ahr-error);
}

/*
 * 6.2 Buttons in display components look like the Kit's primary button.
 * "body a." outranks the Kit's link rule (.elementor-kit-N a), which would otherwise colour the label purple.
 */
body a.courseflow-button {
	align-items: center;
	background: var(--ahr-primary);
	border: 2px solid transparent;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-family: var(--ahr-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	justify-content: center;
	line-height: 1.2;
	min-height: 48px;
	padding: 12px 26px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

body a.courseflow-button:hover,
body a.courseflow-button:focus-visible {
	background: var(--ahr-primary-strong);
	color: #fff;
}

/* Availability is always text; the small mark only repeats it (never colour alone). */
.courseflow-course-card__availability::before,
.courseflow-course-info__availability::before,
.courseflow-next-courses__availability::before {
	content: "●";
	color: var(--ahr-primary);
	font-size: 0.65em;
	margin-right: 0.45em;
	vertical-align: 0.15em;
}

.courseflow-course-card__availability--full::before,
.courseflow-course-card__availability--closed::before,
.courseflow-course-info--full .courseflow-course-info__availability::before,
.courseflow-course-info--closed .courseflow-course-info__availability::before,
.courseflow-next-courses__course--full .courseflow-next-courses__availability::before,
.courseflow-next-courses__course--closed .courseflow-next-courses__availability::before {
	color: var(--ahr-ink-muted);
	content: "○";
}

/* 6.3 Course card (inside the Elementor card shell: photo above, this below). */
.courseflow-course-card {
	display: flex;
	flex-direction: column;
	gap: var(--ahr-space-3);
}

/*
 * Equal-height cards in a row: the widget grows inside the ahr-card shell, so the actions line up at the bottom.
 * (Not height: 100%, which inside Elementor's flex containers resolves to the whole section height.)
 */
.ahr-card > .elementor-widget-courseflow-course-card {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.ahr-card > .elementor-widget-courseflow-course-card > .elementor-widget-container,
.ahr-card .courseflow-course-card {
	flex-grow: 1;
}

.courseflow-course-card__title {
	font-family: var(--ahr-font-heading);
	font-weight: 600;
	margin: 0;
}

.courseflow-course-card__summary {
	color: var(--ahr-ink-muted);
	margin: 0;
}

/*
 * Label and value side by side when the card is wide enough (about 16.5rem), otherwise the value wraps under its
 * label. Intrinsic wrapping instead of a container query: size containment inflates the height that Elementor's
 * nested flex containers reserve for the card.
 */
.courseflow-course-card__facts {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	font-size: 1rem;
	gap: var(--ahr-space-1) var(--ahr-space-4);
	margin: var(--ahr-space-2) 0 0;
}

.courseflow-course-card__facts dt {
	color: var(--ahr-ink-muted);
	flex: 1 0 7.5rem;
}

.courseflow-course-card__facts dd {
	flex: 999 1 9rem;
	font-weight: 600;
	margin: 0;
}

.courseflow-course-card__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahr-space-3) var(--ahr-space-5);
	margin: auto 0 0;
	padding-top: var(--ahr-space-3);
}

.courseflow-course-card__more {
	color: var(--ahr-primary);
	font-weight: 600;
	text-underline-offset: 3px;
}

/* 6.4 Next courses (the block below the hero and in the final CTA). */
.courseflow-next-courses {
	background: #fff;
	border-radius: var(--ahr-radius-card);
	box-shadow: var(--ahr-shadow);
	padding: var(--ahr-space-5) var(--ahr-space-6);
}

/* Scoped by the component class: outranks the Kit's heading rule (.elementor-kit-N h2), so the title stays a label. */
.courseflow-next-courses .courseflow-next-courses__title {
	color: var(--ahr-primary);
	font-family: var(--ahr-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 var(--ahr-space-2);
	text-transform: uppercase;
}

.courseflow-next-courses__dates,
.courseflow-next-courses__courses {
	list-style: none;
	margin: 0;
	padding: 0;
}

.courseflow-next-courses__date + .courseflow-next-courses__date {
	border-top: 1px solid var(--ahr-border);
	margin-top: var(--ahr-space-4);
	padding-top: var(--ahr-space-4);
}

.courseflow-next-courses__when {
	font-family: var(--ahr-font-heading);
	font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--ahr-space-3);
}

.courseflow-next-courses__course {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahr-space-2) var(--ahr-space-4);
	padding-block: var(--ahr-space-2);
}

.courseflow-next-courses__name {
	font-weight: 600;
}

.courseflow-next-courses__availability {
	color: var(--ahr-ink-muted);
	font-size: 0.9375rem;
}

.courseflow-next-courses__course .courseflow-button {
	margin-left: auto;
}

.courseflow-next-courses__empty {
	margin: 0;
}

@media (max-width: 767px) {
	.courseflow-next-courses {
		padding: var(--ahr-space-5);
	}

	.courseflow-next-courses__course .courseflow-button {
		margin-left: 0;
		width: 100%;
	}
}

/* 6.5 Course info panel (course pages). */
.courseflow-course-info {
	background: var(--ahr-lavender-50);
	border-radius: var(--ahr-radius-card);
	display: grid;
	gap: var(--ahr-space-3);
	padding: var(--ahr-space-6);
}

.courseflow-course-info .courseflow-course-info__title {
	color: var(--ahr-primary);
	font-family: var(--ahr-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.courseflow-course-info__start {
	font-family: var(--ahr-font-heading);
	font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}

.courseflow-course-info__price {
	font-family: var(--ahr-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}

.courseflow-course-info__price-note {
	color: var(--ahr-ink-muted);
	font-family: var(--ahr-font-body);
	font-size: 1rem;
	font-weight: 400;
}

.courseflow-course-info__groups {
	list-style: none;
	margin: 0;
	padding: 0;
}

.courseflow-course-info__cta {
	margin: var(--ahr-space-2) 0 0;
}

/* 6.6 Schedule. A cancelled session keeps its status text; the strike-through only repeats it. */
.courseflow-schedule__title {
	font-family: var(--ahr-font-heading);
	font-weight: 600;
}

.courseflow-schedule__sessions {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A row holds name, group, status, time and details as inline siblings: the date/time goes first, on its own line. */
.courseflow-schedule__session {
	align-items: baseline;
	border-bottom: 1px solid var(--ahr-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahr-space-1) var(--ahr-space-2);
	padding-block: var(--ahr-space-3);
}

.courseflow-schedule__when {
	flex-basis: 100%;
	font-weight: 600;
	order: -1;
}

.courseflow-schedule__group,
.courseflow-schedule__details {
	color: var(--ahr-ink-muted);
}

.courseflow-schedule__details {
	flex-basis: 100%;
	font-size: 0.9375rem;
}

.courseflow-schedule__session--cancelled .courseflow-schedule__when,
.courseflow-schedule__session--cancelled .courseflow-schedule__name {
	color: var(--ahr-ink-muted);
	text-decoration: line-through;
}

.courseflow-schedule__status {
	color: var(--ahr-error);
	font-weight: 600;
}

/*
 * 7. Site header (template-parts/header.php, behaviour in assets/js/site-header.js).
 * Sticky; once scrolled it gets "is-compact": the bar gets lower and the difference becomes a transparent border below
 * it, so the space the header takes in the page never changes and nothing below it moves (no layout shift). A border,
 * unlike a margin, never collapses with the margin of the content below.
 */
:root {
	--ahr-header-h: 64px;
	--ahr-header-h-compact: 56px;
	--ahr-gutter: 20px;
}

@media (min-width: 1025px) {
	:root {
		--ahr-header-h: 88px;
		--ahr-header-h-compact: 68px;
		--ahr-gutter: 32px;
	}
}

html {
	scroll-padding-top: calc(var(--ahr-header-h-compact) + var(--ahr-space-4));
}

.ahr-header {
	border-bottom: 0 solid transparent;
	pointer-events: none; /* The transparent border must not catch clicks meant for the page. */
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	transition: border-bottom-width 0.25s ease;
	z-index: 100;
}

/* The WordPress toolbar scrolls away on small screens, so the header sticks to the very top there. */
@media (max-width: 600px) {
	.admin-bar .ahr-header {
		top: 0;
	}
}

.ahr-header.is-compact {
	border-bottom-width: calc(var(--ahr-header-h) - var(--ahr-header-h-compact));
}

.ahr-header__bar {
	background: #fff;
	height: var(--ahr-header-h);
	pointer-events: auto;
	position: relative;
	transition: height 0.25s ease, box-shadow 0.25s ease;
}

.ahr-header.is-compact .ahr-header__bar {
	box-shadow: 0 2px 16px rgb(63 31 87 / 0.1);
	height: var(--ahr-header-h-compact);
}

.ahr-header__inner {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	gap: var(--ahr-space-2);
	height: 100%;
	margin-inline: auto;
	max-width: calc(1240px + 2 * var(--ahr-gutter));
	padding-inline: var(--ahr-gutter);
}

.ahr-header__brand {
	flex: 0 0 auto;
	margin-right: auto;
}

.ahr-header__brand a {
	display: block;
}

.ahr-header__brand img {
	display: block;
	height: auto;
	transition: width 0.25s ease;
	width: 140px;
}

.ahr-header__name {
	color: var(--ahr-primary);
	font-family: var(--ahr-font-heading);
	font-weight: 700;
	text-decoration: none;
}

.ahr-header__actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: var(--ahr-space-2);
}

/* The header button looks like the Kit's primary button ("a." outranks the Kit's link colour). */
.ahr-header a.ahr-header__cta {
	align-items: center;
	background: var(--ahr-primary);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-family: var(--ahr-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	min-height: 44px;
	padding: 0 16px;
	text-decoration: none;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}

.ahr-header a.ahr-header__cta:hover,
.ahr-header a.ahr-header__cta:focus-visible {
	background: var(--ahr-primary-strong);
	color: #fff;
}

.ahr-header .ahr-header__toggle {
	align-items: center;
	background: #fff;
	border: 1px solid var(--ahr-border-input);
	border-radius: 999px;
	color: var(--ahr-ink);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--ahr-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	gap: var(--ahr-space-2);
	justify-content: center;
	letter-spacing: normal;
	line-height: 1;
	min-height: 44px;
	min-width: 44px;
	padding: 0 11px;
	text-transform: none;
}

.ahr-header .ahr-header__toggle:hover,
.ahr-header .ahr-header__toggle:focus,
.ahr-header .ahr-header__toggle[aria-expanded="true"] {
	background: var(--ahr-lavender-50);
	border-color: var(--ahr-border-input);
	color: var(--ahr-ink);
}

/* Three-line icon that turns into a cross when the menu is open. */
.ahr-header__toggle-icon {
	display: block;
	height: 14px;
	position: relative;
	width: 18px;
}

.ahr-header__toggle-icon span,
.ahr-header__toggle-icon::before,
.ahr-header__toggle-icon::after {
	background: currentColor;
	border-radius: 2px;
	content: "";
	display: block;
	height: 2px;
	left: 0;
	position: absolute;
	transition: transform 0.2s ease, opacity 0.2s ease;
	width: 18px;
}

.ahr-header__toggle-icon::before { top: 0; }
.ahr-header__toggle-icon span { top: 6px; }
.ahr-header__toggle-icon::after { top: 12px; }

.ahr-header__toggle[aria-expanded="true"] .ahr-header__toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.ahr-header__toggle[aria-expanded="true"] .ahr-header__toggle-icon span { opacity: 0; }
.ahr-header__toggle[aria-expanded="true"] .ahr-header__toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

/* The word "Menu" next to the icon only where there is room; below that it is read by screen readers only. */
@media (max-width: 479px) {
	.ahr-header__toggle-label {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

/*
 * Phones: the logo as large as the row allows (160 px at 360), never pushing the menu button or "Inschrijven" out.
 * 158 px = the menu button (44) + the CTA with 12 px padding (~98) + two gaps. Smaller logos lose the wordmark.
 */
@media (max-width: 399px) {
	.ahr-header__brand img {
		width: min(160px, calc(100vw - 2 * var(--ahr-gutter) - 158px));
	}

	.ahr-header a.ahr-header__cta {
		padding: 0 12px;
	}
}

@media (min-width: 400px) {
	.ahr-header__brand img {
		width: 172px;
	}
}

/* Main menu, shared. */
.ahr-nav__list,
.ahr-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ahr-nav .ahr-nav__list a {
	color: var(--ahr-ink);
	font-family: var(--ahr-font-body);
	font-weight: 600;
	text-decoration: none;
}

.ahr-nav .ahr-nav__list a:hover {
	color: var(--ahr-primary);
}

/* Current page: purple and underlined (never colour alone). */
.ahr-nav .ahr-nav__list a[aria-current="page"],
.ahr-nav .ahr-nav__list .current-menu-ancestor > a {
	color: var(--ahr-primary-strong);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Scoped under .ahr-header to outrank the Kit's button rules (.elementor-kit-N button). */
.ahr-header .ahr-nav__subtoggle {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 999px;
	color: var(--ahr-ink);
	cursor: pointer;
	display: none;
	height: 44px;
	justify-content: center;
	min-height: 0;
	padding: 0;
	width: 32px;
}

.ahr-header .ahr-nav__subtoggle:hover,
.ahr-header .ahr-nav__subtoggle:focus,
.ahr-header .ahr-nav__subtoggle[aria-expanded="true"] {
	background: var(--ahr-lavender-50);
	color: var(--ahr-primary);
}

.ahr-nav__chevron {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	display: block;
	height: 7px;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
	width: 7px;
}

.ahr-nav__subtoggle[aria-expanded="true"] .ahr-nav__chevron {
	transform: translateY(2px) rotate(-135deg);
}

/* Desktop: horizontal menu with a dropdown card. */
@media (min-width: 1025px) {
	.ahr-header__brand {
		margin-right: 0;
	}

	.ahr-header__brand img {
		width: 220px;
	}

	.ahr-header.is-compact .ahr-header__brand img {
		width: 184px;
	}

	.ahr-header__inner {
		gap: var(--ahr-space-5);
	}

	.ahr-header .ahr-header__toggle {
		display: none;
	}

	.ahr-header a.ahr-header__cta {
		font-size: 1.0625rem;
		min-height: 48px;
		padding: 0 26px;
	}

	.ahr-nav {
		display: flex;
		flex: 1 1 auto;
		justify-content: center;
	}

	.ahr-nav__list {
		align-items: center;
		display: flex;
		gap: var(--ahr-space-1);
	}

	.ahr-nav__list > li {
		align-items: center;
		display: flex;
		position: relative;
	}

	.ahr-nav__list > li > a {
		align-items: center;
		display: inline-flex;
		font-size: 1.0625rem;
		min-height: 44px;
		padding: 0 var(--ahr-space-3);
	}

	.ahr-nav__list > .menu-item-has-children > a {
		padding-right: var(--ahr-space-1);
	}

	.ahr-header .ahr-nav__subtoggle {
		display: inline-flex;
	}

	.ahr-nav__list .sub-menu {
		background: #fff;
		border-radius: var(--ahr-radius-card);
		box-shadow: var(--ahr-shadow);
		display: none;
		left: 0;
		min-width: 240px;
		padding: var(--ahr-space-2);
		position: absolute;
		top: 100%;
		z-index: 10;
	}

	.ahr-nav__list > li.is-open > .sub-menu {
		display: block;
	}

	.ahr-nav__list .sub-menu a {
		border-radius: var(--ahr-radius-input);
		display: flex;
		padding: 10px 14px;
	}

	.ahr-nav__list .sub-menu a:hover {
		background: var(--ahr-lavender-50);
	}
}

/* Mouse users also get the dropdown on hover. Keyboard and touch use the button. */
@media (min-width: 1025px) and (hover: hover) {
	.ahr-nav__list > li:hover > .sub-menu {
		display: block;
	}
}

/* Mobile and tablet: the menu is a panel below the bar, opened with the toggle. */
@media (max-width: 1024px) {
	.ahr-js .ahr-nav {
		background: #fff;
		border-top: 1px solid var(--ahr-border);
		box-shadow: 0 16px 24px rgb(63 31 87 / 0.12);
		box-sizing: border-box;
		display: none;
		left: 0;
		max-height: calc(100dvh - var(--ahr-header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--ahr-space-2) var(--ahr-gutter) var(--ahr-space-6);
		position: absolute;
		right: 0;
		top: 100%;
	}

	.ahr-header.is-open .ahr-nav {
		display: block;
	}

	/* Dim the page behind the open menu; a click there closes it (site-header.js). */
	.ahr-header.is-open::after {
		background: rgb(30 26 35 / 0.4);
		content: "";
		inset: 0;
		pointer-events: auto;
		position: fixed;
		z-index: -1;
	}

	.ahr-nav__list a {
		align-items: center;
		border-bottom: 1px solid var(--ahr-border);
		display: flex;
		font-size: 1.125rem;
		min-height: 48px;
	}

	.ahr-nav .ahr-nav__list .sub-menu a {
		font-size: 1.0625rem;
		font-weight: 400;
		padding-left: var(--ahr-space-5);
	}

	/* Without JavaScript the menu stays visible under the bar. */
	html:not(.ahr-js) .ahr-header__bar {
		height: auto;
	}

	html:not(.ahr-js) .ahr-header__inner {
		flex-wrap: wrap;
		padding-block: var(--ahr-space-3);
	}

	html:not(.ahr-js) .ahr-nav {
		flex-basis: 100%;
		order: 3;
	}

	html:not(.ahr-js) .ahr-header .ahr-header__toggle {
		display: none;
	}
}

/* No page scrolling behind the open mobile menu. */
html.ahr-menu-open {
	overflow: hidden;
}

/* 8. Site footer (template-parts/footer.php): deep purple, white text (16.7:1), organic top edge. */

/* On short pages the footer still sits at the bottom of the window. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* The content area grows, so the footer keeps its own top margin (room for the curved edge) on every page. */
body > #content {
	flex: 1 0 auto;
	width: 100%;
}

body > .ahr-header {
	flex-shrink: 0;
}

.ahr-footer {
	background: var(--ahr-primary-deep);
	color: #fff;
	margin-top: var(--ahr-space-8);
	overflow-x: clip;
	padding: var(--ahr-space-7) var(--ahr-gutter) 0;
	position: relative;
}

.ahr-footer::before {
	background: inherit;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	content: "";
	height: 48px;
	left: -15%;
	pointer-events: none;
	position: absolute;
	top: -47px;
	width: 130%;
}

.ahr-footer__inner {
	display: grid;
	gap: var(--ahr-space-7);
	margin-inline: auto;
	max-width: 1240px;
}

@media (min-width: 1025px) {
	.ahr-footer__inner {
		grid-template-columns: minmax(220px, 1fr) 3fr;
	}
}

.ahr-footer__brand {
	display: inline-block;
}

.ahr-footer__logo {
	display: block;
	height: auto;
	width: 220px;
}

.ahr-footer__nav {
	display: grid;
	gap: var(--ahr-space-6) var(--ahr-space-5);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.ahr-footer .ahr-footer__heading {
	color: var(--ahr-lavender-200);
	font-family: var(--ahr-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0 0 var(--ahr-space-3);
	text-transform: uppercase;
}

.ahr-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ahr-footer__list li {
	padding-block: var(--ahr-space-1);
}

.ahr-footer .ahr-footer__list a {
	color: #fff;
	display: inline-block;
	padding-block: 2px;
	text-decoration: none;
}

.ahr-footer .ahr-footer__list a:hover,
.ahr-footer .ahr-footer__list a:focus-visible,
.ahr-footer .ahr-footer__list a[aria-current="page"] {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The purple focus ring would vanish on deep purple. */
.ahr-footer :focus-visible {
	outline-color: #fff;
}

.ahr-footer__bottom {
	border-top: 1px solid rgb(255 255 255 / 0.18);
	margin: var(--ahr-space-7) auto 0;
	max-width: 1240px;
	padding-block: var(--ahr-space-5) var(--ahr-space-6);
}

.ahr-footer__address {
	color: rgb(255 255 255 / 0.9);
	font-style: normal;
	line-height: 1.6;
	margin-top: var(--ahr-space-5);
}

.ahr-footer__copyright {
	color: rgb(255 255 255 / 0.85);
	font-size: 0.9375rem;
	margin: 0;
}

/*
 * 9. Homepage components (W4, page "Home"; Elementor containers and widgets carry these classes).
 * Layout lives here so the Elementor data holds no colours, fonts or pixel values (W2 rule).
 * Elementor containers read their padding/gap from CSS variables; ".e-con.ahr-…" (two classes) wins over ".e-con".
 * CourseFlow output is never hidden or filtered here: it shows what CourseFlow returns (W4 decision, CC1 dependency).
 */
:root {
	--ahr-home-space: clamp(48px, 5.5vw, 80px);
}

/* 9.1 Section shells. */
.e-con.ahr-home-section {
	--padding-top: var(--ahr-home-space);
	--padding-bottom: var(--ahr-home-space);
	--padding-left: var(--ahr-gutter);
	--padding-right: var(--ahr-gutter);
	position: relative;
}

.e-con.ahr-home-section--flush-top {
	--padding-top: 0px;
}

.e-con.ahr-home-section--flush-bottom {
	--padding-bottom: 0px;
}

/* Structural containers carry no padding of their own (Elementor's default is 10 px). */
.e-con.ahr-wrap,
.e-con.ahr-home-head,
.e-con.ahr-course-grid,
.e-con.ahr-benefit-grid,
.e-con.ahr-panel__main,
.e-con.ahr-actions {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.e-con.ahr-wrap {
	--gap: 0px;
	--row-gap: 0px;
	margin-inline: auto;
	max-width: 1240px;
	position: relative;
	width: 100%;
	z-index: 1;
}

.ahr-home-head {
	margin-bottom: var(--ahr-space-7);
	max-width: 720px;
}

.ahr-home-head--center {
	margin-inline: auto;
	text-align: center;
}

.elementor-widget.ahr-lead {
	color: var(--ahr-ink-muted);
	font-size: 1.125rem;
}

.ahr-lead p:last-child {
	margin-bottom: 0;
}

.ahr-home-section h2,
.ahr-home-section h3,
.ahr-home-hero h1 {
	text-wrap: balance;
}

/* Kit headings with tighter spacing inside the homepage components. */
.ahr-home-section .elementor-widget-heading .elementor-heading-title {
	margin: 0;
}

.elementor-widget.ahr-eyebrow {
	margin-bottom: var(--ahr-space-2);
}

/* A hand-drawn underline under one phrase (span.ahr-swoosh in a heading). */
.ahr-swoosh {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8c40-6 90-7 194-2' fill='none' stroke='%23AB6FCC' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left 100% / 100% 0.32em no-repeat;
	padding-bottom: 0.12em;
	white-space: nowrap;
}

/* 9.2 Button variants (on the Elementor Button widget; the base look comes from the Kit). */
.elementor-widget.ahr-btn--light .elementor-button {
	background-color: #fff;
	color: var(--ahr-primary-strong);
}

.elementor-widget.ahr-btn--light .elementor-button:hover,
.elementor-widget.ahr-btn--light .elementor-button:focus-visible {
	background-color: var(--ahr-lavender-100);
	color: var(--ahr-primary-strong);
}

.elementor-widget.ahr-btn--outline .elementor-button {
	background-color: transparent;
	box-shadow: inset 0 0 0 2px var(--ahr-primary);
	color: var(--ahr-primary);
}

.elementor-widget.ahr-btn--outline .elementor-button:hover,
.elementor-widget.ahr-btn--outline .elementor-button:focus-visible {
	background-color: var(--ahr-lavender-50);
	color: var(--ahr-primary-strong);
}

.elementor-widget.ahr-textlink a {
	align-items: center;
	color: var(--ahr-primary);
	display: inline-flex;
	font-weight: 600;
	min-height: 48px;
	text-underline-offset: 3px;
}

.elementor-widget.ahr-textlink p {
	margin: 0;
}

.e-con.ahr-actions {
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: center;
	--gap: var(--ahr-space-3) var(--ahr-space-4);
	--row-gap: var(--ahr-space-3);
	--column-gap: var(--ahr-space-4);
}

.e-con.ahr-actions { /* after the reset above, so this wins */
	--padding-top: var(--ahr-space-2);
}

/* Line icons ([ahr_icon]) in an organic shape. */
.ahr-icon {
	align-items: center;
	background: #fff;
	border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
	color: var(--ahr-primary);
	display: inline-flex;
	height: 72px;
	justify-content: center;
	width: 80px;
}

.ahr-icon svg {
	display: block;
	height: 36px;
	width: 36px;
}

/* 9.3 Hero: a rounded media panel with the text on a purple-tinted gradient (≥ 768 px); on phones the still sits
 * above the text, so no text ever covers the puppy. The video (≥ 1025 px) is added by hero-video.js. */
.e-con.ahr-home-hero-wrap {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.e-con.ahr-home-hero {
	--gap: 0px;
	--row-gap: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.ahr-hero__media,
.ahr-hero__poster {
	display: block;
	width: 100%;
}

.ahr-hero__poster {
	height: auto;
}

.e-con.ahr-hero__content {
	--gap: 0px;
	--row-gap: 0px;
	--padding-top: var(--ahr-space-4);
	--padding-bottom: 0px;
	--padding-left: var(--ahr-gutter);
	--padding-right: var(--ahr-gutter);
}

.ahr-hero__content .elementor-widget.ahr-eyebrow {
	display: none;
}

.ahr-hero__title .elementor-heading-title {
	font-size: clamp(2rem, 3.4vw + 1.1rem, 4.25rem);
	line-height: 1.04;
	margin: 0 0 var(--ahr-space-3);
}

.elementor-widget.ahr-hero__lead {
	font-size: 1.0625rem;
}

.ahr-hero__lead p {
	margin: 0 0 var(--ahr-space-4);
}

@media (max-width: 767px) {
	.ahr-hero__poster {
		aspect-ratio: 16 / 10;
		object-fit: cover;
		object-position: 40% 50%;
	}

	/* On white the hero button is the normal purple button. */
	.ahr-home-hero .elementor-widget.ahr-btn--light .elementor-button {
		background-color: var(--ahr-primary);
		color: #fff;
	}
}

@media (min-width: 768px) {
	.e-con.ahr-home-hero-wrap {
		--padding-top: var(--ahr-space-4);
		--padding-left: var(--ahr-gutter);
		--padding-right: var(--ahr-gutter);
	}

	.e-con.ahr-home-hero {
		--justify-content: center;
		border-radius: 32px;
		margin-inline: auto;
		max-width: 1600px;
		min-height: clamp(420px, 36vw, 560px);
		overflow: hidden;
		width: 100%;
	}

	.ahr-home-hero > .ahr-hero__media-widget {
		inset: 0;
		position: absolute;
		z-index: -1;
	}

	.ahr-home-hero > .ahr-hero__media-widget,
	.ahr-home-hero .ahr-hero__media,
	.ahr-home-hero .ahr-hero__poster,
	.ahr-home-hero .elementor-shortcode {
		height: 100%;
	}

	.ahr-hero__poster {
		object-fit: cover;
		object-position: 65% 50%;
	}

	.ahr-home-hero::after {
		background: linear-gradient(90deg, rgb(47 22 66 / 0.86) 0%, rgb(63 31 87 / 0.6) 34%, rgb(63 31 87 / 0) 62%);
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
		z-index: 1;
	}

	.e-con.ahr-hero__content {
		--padding-top: var(--ahr-space-8);
		--padding-bottom: var(--ahr-space-8);
		--padding-left: clamp(24px, 4vw, 64px);
		--padding-right: clamp(24px, 4vw, 64px);
		color: #fff;
		margin-inline: auto;
		max-width: calc(1240px + 2 * var(--ahr-gutter));
		position: relative;
		width: 100%;
		z-index: 2;
	}

	.ahr-hero__content .elementor-widget.ahr-eyebrow {
		display: block;
	}

	.ahr-hero__content .ahr-eyebrow .elementor-heading-title {
		color: var(--ahr-lavender-200);
	}

	.ahr-home-hero .ahr-hero__title .elementor-heading-title {
		color: #fff;
		max-width: 11ch;
	}

	.elementor-widget.ahr-hero__lead {
		color: #fff;
		font-size: 1.1875rem;
	}
}

/* The video sits above the poster (z-index 0) and under the gradient and text. */
.ahr-home-hero .ahr-hero__video {
	z-index: 0;
}

/* 9.4 Next courses: a clear gap below the hero (24 px mobile, 40 px from 768 px), never overlapping.
 * Compact rows: the course name is the main text, the start date a small label above it, availability and "Schrijf je
 * in" share one line. Styling only: CourseFlow decides which dates, courses and states appear (the two-date,
 * available-only limit is CC1's CourseFlow feature); nothing is hidden or filtered here. */
.e-con.ahr-home-next {
	--padding-top: 24px;
	--padding-bottom: 0px;
}

@media (min-width: 768px) {
	.e-con.ahr-home-next {
		--padding-top: 40px;
	}
}

.ahr-home-next .courseflow-next-courses {
	background: var(--ahr-lavender-50);
	border-radius: 28px;
	box-shadow: none;
	display: grid;
	gap: var(--ahr-space-4);
	padding: var(--ahr-space-5) var(--ahr-space-4) var(--ahr-space-4);
}

.ahr-home-next .courseflow-next-courses .courseflow-next-courses__title {
	color: var(--ahr-ink);
	font-family: var(--ahr-font-heading);
	font-size: clamp(1.375rem, 0.8vw + 1.1rem, 1.75rem);
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.2;
	margin: 0;
	padding-inline: var(--ahr-space-2);
	text-transform: none;
}

.ahr-home-next .courseflow-next-courses__dates {
	display: grid;
	gap: var(--ahr-space-3);
}

.ahr-home-next .courseflow-next-courses__date,
.ahr-home-next .courseflow-next-courses__date + .courseflow-next-courses__date {
	background: #fff;
	border: 0;
	border-radius: 20px;
	margin: 0;
	padding: var(--ahr-space-4) var(--ahr-space-5);
}

/* The date: a small purple label with a calendar mark. */
.ahr-home-next .courseflow-next-courses__when {
	color: var(--ahr-primary-strong);
	display: block;
	font-family: var(--ahr-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 var(--ahr-space-1);
}

.ahr-home-next .courseflow-next-courses__when::before {
	background: currentColor;
	content: "";
	display: inline-block;
	height: 18px;
	margin-right: var(--ahr-space-2);
	vertical-align: -3px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 18px;
}

/* One course: name on its own line, then availability (left) and the button (right). */
.ahr-home-next .courseflow-next-courses__course {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahr-space-2) var(--ahr-space-4);
	padding: var(--ahr-space-1) 0 0;
}

.ahr-home-next .courseflow-next-courses__course + .courseflow-next-courses__course {
	border-top: 1px solid var(--ahr-border);
	margin-top: var(--ahr-space-3);
	padding-top: var(--ahr-space-3);
}

.ahr-home-next .courseflow-next-courses__name {
	color: var(--ahr-ink);
	font-family: var(--ahr-font-heading);
	font-size: clamp(1.25rem, 0.6vw + 1.05rem, 1.5rem);
	font-weight: 700;
	flex: 1 0 100%;
	line-height: 1.2;
	text-decoration: none;
}

.ahr-home-next a.courseflow-next-courses__name:hover,
.ahr-home-next a.courseflow-next-courses__name:focus-visible {
	color: var(--ahr-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ahr-home-next .courseflow-next-courses__availability {
	color: var(--ahr-ink-muted);
	flex: 1 0 auto;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.ahr-home-next .courseflow-next-courses__course .courseflow-button {
	font-size: 1rem;
	margin: 0;
	min-height: 44px;
	padding: 0 20px;
	white-space: nowrap;
	width: auto;
}

.ahr-home-next .courseflow-next-courses__empty {
	background: #fff;
	border-radius: 20px;
	padding: var(--ahr-space-4) var(--ahr-space-5);
}

@media (min-width: 1025px) {
	.ahr-home-next .courseflow-next-courses {
		padding: var(--ahr-space-6);
	}

	.ahr-home-next .courseflow-next-courses__dates {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Below the dates: where we are (early mention of the Hoge Bergse Bos) and the link to all start dates. */
.e-con.ahr-next-meta {
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: center;
	--justify-content: space-between;
	--gap: var(--ahr-space-1) var(--ahr-space-5);
	--row-gap: var(--ahr-space-1);
	--column-gap: var(--ahr-space-5);
	--padding-top: var(--ahr-space-3);
	--padding-bottom: 0px;
	--padding-left: var(--ahr-space-2);
	--padding-right: var(--ahr-space-2);
}

.ahr-next-meta p {
	margin: 0;
}

.ahr-next-meta__place p {
	align-items: center;
	display: flex;
	gap: var(--ahr-space-2);
	min-height: 44px;
}

.ahr-next-meta__place .ahr-icon {
	background: none;
	color: var(--ahr-primary);
	flex: 0 0 auto;
	height: auto;
	width: auto;
}

.ahr-next-meta__place .ahr-icon svg {
	height: 22px;
	width: 22px;
}

.ahr-next-meta__place a {
	color: var(--ahr-primary);
	font-weight: 600;
	text-underline-offset: 3px;
}

.ahr-home-next__all a {
	align-items: center;
	color: var(--ahr-primary);
	display: inline-flex;
	font-weight: 600;
	gap: 6px;
	min-height: 44px;
}

/* 9.5 Course cards: photo with a "Voor wie" label, one intro line, then the CourseFlow course card. */
.e-con.ahr-home-courses {
	overflow: hidden;
}

.e-con.ahr-home-courses::before {
	background: var(--ahr-lavender-100);
	border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%;
	content: "";
	height: 520px;
	pointer-events: none;
	position: absolute;
	right: -160px;
	top: 40px;
	width: 620px;
}

.e-con.ahr-course-grid {
	--gap: var(--ahr-space-5);
	display: grid;
	gap: var(--ahr-space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.e-con.ahr-course-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.e-con.ahr-course-grid {
		gap: var(--ahr-space-6);
		grid-template-columns: repeat(3, 1fr);
	}
}

.e-con.ahr-course {
	--gap: 0px;
	--row-gap: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.e-con.ahr-course__media {
	--gap: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	position: relative;
}

.ahr-course__media img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: var(--ahr-focus-point, 50% 50%);
	width: 100%;
}

/* Focal points per photo, so every crop keeps the dog's face: the puppies, the Berner's eyes, the labrador's head. */
.ahr-course--puppy {
	--ahr-focus-point: 45% 60%;
}

.ahr-course--basis {
	--ahr-focus-point: 50% 38%;
}

.ahr-course--gevo {
	--ahr-focus-point: 72% 35%;
}

@media (max-width: 767px) {
	.ahr-course__media img {
		aspect-ratio: 3 / 2;
	}
}

.elementor-widget.ahr-course__for {
	bottom: -16px;
	left: var(--ahr-space-5);
	position: absolute;
	right: auto;
	width: auto;
}

.ahr-course__for .elementor-heading-title {
	background: #fff;
	border-radius: 999px;
	box-shadow: var(--ahr-shadow);
	color: var(--ahr-primary-strong);
	font-family: var(--ahr-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	padding: 6px 14px;
}

.e-con.ahr-course__body {
	--gap: var(--ahr-space-3);
	--row-gap: var(--ahr-space-3);
	--padding-top: var(--ahr-space-7);
	--padding-bottom: var(--ahr-space-6);
	--padding-left: var(--ahr-space-5);
	--padding-right: var(--ahr-space-5);
	flex-grow: 1;
}

/* Equal action rows: the text link is as tall as the button. */
.ahr-course__body .courseflow-course-card__more {
	align-items: center;
	display: inline-flex;
	min-height: 48px;
}

/* Mobile: less padding, facts as two columns, one action row. All CourseFlow facts stay visible. */
@media (max-width: 767px) {
	.e-con.ahr-course__body {
		--gap: var(--ahr-space-2);
		--row-gap: var(--ahr-space-2);
		--padding-top: var(--ahr-space-6);
		--padding-bottom: var(--ahr-space-5);
	}

	.ahr-course__body .courseflow-course-card__title {
		font-size: 1.375rem;
	}

	.ahr-course__body .courseflow-course-card__facts {
		display: grid;
		gap: var(--ahr-space-1) var(--ahr-space-3);
		grid-template-columns: 7.5rem 1fr;
		margin-top: var(--ahr-space-1);
	}

	.ahr-course__body .courseflow-course-card__facts dt,
	.ahr-course__body .courseflow-course-card__facts dd {
		flex: none;
		min-width: 0;
	}

	.ahr-course__body .courseflow-course-card__actions {
		gap: var(--ahr-space-1) var(--ahr-space-4);
		padding-top: var(--ahr-space-2);
	}

	.ahr-course__body .courseflow-course-card__actions > * {
		white-space: nowrap;
	}
}

/* Title first, then the intro line, then summary, facts and links: the CourseFlow card's parts join this column. */
.ahr-course__body > .elementor-widget-courseflow-course-card,
.ahr-course__body > .elementor-widget-courseflow-course-card > .elementor-widget-container,
.ahr-course__body .courseflow-course-card {
	display: contents;
}

.ahr-course__body .courseflow-course-card__title {
	font-size: 1.5rem;
	order: 1;
}

.elementor-widget.ahr-course__intro {
	order: 2;
}

.ahr-course__intro p {
	margin: 0;
}

.ahr-course__body .courseflow-course-card__summary {
	order: 3;
}

.ahr-course__body .courseflow-course-card__facts {
	order: 4;
}

.ahr-course__body .courseflow-course-card__actions {
	order: 5;
}

.elementor-widget.ahr-sticker {
	margin: var(--ahr-space-7) auto 0;
	width: auto;
}

.ahr-sticker p {
	background: var(--ahr-cream-100);
	border-radius: 999px;
	display: inline-block;
	margin: 0;
	padding: 10px 22px;
	transform: rotate(-1.5deg);
}

/* 9.6 Benefits: tinted cards, icon in an organic shape, the middle card set lower on desktop. */
.e-con.ahr-benefit-grid {
	--gap: var(--ahr-space-5);
	display: grid;
	gap: var(--ahr-space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.e-con.ahr-benefit-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.e-con.ahr-benefit {
	--gap: 0px;
	--row-gap: 0px;
	--padding-top: var(--ahr-space-6);
	--padding-bottom: var(--ahr-space-6);
	--padding-left: var(--ahr-space-6);
	--padding-right: var(--ahr-space-6);
	background: #fff;
	border-radius: 28px;
	box-shadow: var(--ahr-shadow);
}

.e-con.ahr-home-benefits {
	background: var(--ahr-lavender-50);
}

.ahr-benefit .ahr-icon {
	background: var(--ahr-lavender-100);
}

.e-con.ahr-benefit:nth-child(2) .ahr-icon {
	background: var(--ahr-cream-100);
}

@media (min-width: 1025px) {
	.e-con.ahr-benefit:nth-child(2) {
		transform: translateY(32px);
	}

	.e-con.ahr-home-benefits {
		--padding-bottom: calc(var(--ahr-home-space) + 32px);
	}
}

.ahr-home-section .ahr-benefit .elementor-heading-title {
	font-size: 1.375rem;
	margin: var(--ahr-space-4) 0 var(--ahr-space-2);
}

.ahr-benefit .elementor-widget-text-editor {
	color: var(--ahr-ink);
}

.ahr-benefit .elementor-widget-text-editor p {
	margin: 0;
}

/* 9.7 Panels: Privétraining (cream, checklist), location (outlined), final call to action (deep purple). */
.e-con.ahr-panel {
	--padding-top: var(--ahr-space-6);
	--padding-bottom: var(--ahr-space-6);
	--padding-left: var(--ahr-space-5);
	--padding-right: var(--ahr-space-5);
	border-radius: 32px;
	overflow: hidden;
	position: relative;
}

.e-con.ahr-panel > .e-con,
.e-con.ahr-panel > .elementor-widget {
	position: relative;
	z-index: 1;
}

.e-con.ahr-panel--cream {
	background: var(--ahr-cream-50);
}

.e-con.ahr-panel--cream::after {
	background: var(--ahr-cream-100);
	border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%;
	content: "";
	height: 300px;
	pointer-events: none;
	position: absolute;
	right: -90px;
	top: -120px;
	width: 360px;
}

@media (min-width: 1025px) {
	.e-con.ahr-panel--split {
		--padding-top: var(--ahr-space-8);
		--padding-bottom: var(--ahr-space-8);
		--padding-left: var(--ahr-space-8);
		--padding-right: var(--ahr-space-8);
		align-items: center;
		display: grid;
		gap: var(--ahr-space-8);
		grid-template-columns: 6fr 5fr;
	}
}

.e-con.ahr-panel--split {
	--gap: var(--ahr-space-5);
	--row-gap: var(--ahr-space-5);
}

.ahr-checks ul {
	display: grid;
	gap: var(--ahr-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ahr-checks li {
	background: #fff;
	border-radius: 16px;
	padding: var(--ahr-space-4) var(--ahr-space-4) var(--ahr-space-4) 52px;
	position: relative;
}

.ahr-checks li::before {
	background: var(--ahr-primary);
	content: "";
	height: 20px;
	left: var(--ahr-space-4);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	position: absolute;
	top: calc(var(--ahr-space-4) + 2px);
	width: 20px;
}

/*
 * About: Chantal's photograph left (desktop) or above (mobile), text right. The photo is an arch (round top, soft
 * bottom corners) on a lavender organic shape; the face and headset sit in the upper middle of the source, so the
 * crops keep them in view (desktop 4:5 from 48% / 22%; mobile the full square). "Sinds 1996" is a round badge.
 */
.e-con.ahr-home-about {
	background: var(--ahr-lavender-50);
	overflow: hidden;
}

.e-con.ahr-about {
	--padding-top: 0px;
	display: grid;
	gap: var(--ahr-space-7);
	grid-template-columns: 1fr;
}

@media (min-width: 1025px) {
	.e-con.ahr-about {
		align-items: center;
		gap: var(--ahr-space-8);
		grid-template-columns: 5fr 6fr;
	}
}

.e-con.ahr-about__text {
	--gap: var(--ahr-space-3);
	--row-gap: var(--ahr-space-3);
}

.e-con.ahr-about__text > .elementor-widget.ahr-eyebrow {
	margin-bottom: calc(-1 * var(--ahr-space-2));
}

.e-con.ahr-about__media,
.e-con.ahr-about__text {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.e-con.ahr-about__media {
	--gap: 0px;
	--row-gap: 0px;
	isolation: isolate;
	margin-inline: auto;
	max-width: 480px;
	position: relative;
	width: 100%;
}

/* The organic shape behind the photo, offset to the lower right. */
.e-con.ahr-about__media::before {
	background: var(--ahr-lavender-200);
	border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%;
	content: "";
	inset: 10% -7% -5% 12%;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.ahr-about__photo img {
	aspect-ratio: 1 / 1;
	border-radius: 999px 999px 28px 28px;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: 48% 22%;
	width: 100%;
}

@media (min-width: 1025px) {
	.ahr-about__photo img {
		aspect-ratio: 4 / 5;
		border-radius: 999px 999px 32px 32px;
	}
}

.elementor-widget.ahr-about__badge {
	bottom: 8%;
	position: absolute;
	right: -12px;
	width: auto;
	z-index: 2;
}

.ahr-home-section .ahr-about__badge .elementor-heading-title {
	align-items: center;
	background: var(--ahr-primary);
	border-radius: 50%;
	box-shadow: var(--ahr-shadow);
	color: #fff;
	display: flex;
	flex-direction: column;
	font-family: var(--ahr-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	height: 112px;
	justify-content: center;
	line-height: 1.05;
	transform: rotate(-8deg);
	width: 112px;
}

.ahr-about__badge strong {
	font-size: 1.75rem;
	font-weight: 700;
}

@media (min-width: 1025px) {
	.elementor-widget.ahr-about__badge {
		right: -28px;
	}

	.ahr-home-section .ahr-about__badge .elementor-heading-title {
		font-size: 1rem;
		height: 132px;
		width: 132px;
	}

	.ahr-about__badge strong {
		font-size: 2.125rem;
	}
}

.e-con.ahr-community {
	--flex-direction: row;
	--align-items: flex-start;
	--gap: var(--ahr-space-4);
	--column-gap: var(--ahr-space-4);
	--padding-top: var(--ahr-space-4);
	--padding-bottom: var(--ahr-space-4);
	--padding-left: var(--ahr-space-5);
	--padding-right: var(--ahr-space-5);
	background: #fff;
	border-radius: 20px;
	margin-top: var(--ahr-space-5);
}

.ahr-community .ahr-icon {
	background: none;
	height: auto;
	width: auto;
}

.ahr-community .ahr-icon svg {
	height: 24px;
	width: 24px;
}

.ahr-community .elementor-widget-text-editor {
	flex: 1;
}

.ahr-community p {
	margin: 0;
}

.e-con.ahr-panel--location {
	--gap: var(--ahr-space-4);
	--row-gap: var(--ahr-space-4);
	background: var(--ahr-cream-50);
}

@media (min-width: 1025px) {
	.e-con.ahr-panel--location {
		--padding-top: var(--ahr-space-7);
		--padding-bottom: var(--ahr-space-7);
		--padding-left: var(--ahr-space-7);
		--padding-right: var(--ahr-space-7);
		align-items: center;
		display: grid;
		gap: var(--ahr-space-7);
		grid-template-columns: auto 1fr auto;
	}
}

.ahr-panel--location .ahr-icon {
	background: var(--ahr-lavender-200);
	height: 88px;
	width: 100px;
}

.ahr-panel--location .ahr-icon svg {
	height: 40px;
	width: 40px;
}

.ahr-home-section .ahr-panel--location h2.elementor-heading-title {
	font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem);
}

.ahr-panel--location p {
	margin: 0;
}

.ahr-panel--location address {
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	margin-top: var(--ahr-space-3);
}

.e-con.ahr-panel--location .ahr-actions {
	--padding-top: 0px;
}

@media (min-width: 1025px) {
	.e-con.ahr-panel--location .ahr-actions {
		--flex-direction: column;
		--align-items: stretch;
	}
}

.e-con.ahr-panel--deep {
	--padding-top: var(--ahr-space-8);
	--padding-bottom: var(--ahr-space-8);
	--align-items: center;
	background: var(--ahr-primary-deep);
	color: #fff;
	text-align: center;
}

.e-con.ahr-panel--deep::before {
	background: var(--ahr-primary);
	border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
	content: "";
	height: 360px;
	left: -120px;
	opacity: 0.45;
	pointer-events: none;
	position: absolute;
	top: -170px;
	width: 440px;
}

.e-con.ahr-panel--deep::after {
	background: var(--ahr-brand);
	border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%;
	bottom: -150px;
	content: "";
	height: 260px;
	opacity: 0.35;
	pointer-events: none;
	position: absolute;
	right: -90px;
	width: 320px;
}

.ahr-panel--deep .elementor-heading-title {
	color: #fff;
}

.elementor-widget.ahr-panel__text {
	color: rgb(255 255 255 / 0.92);
	font-size: 1.125rem;
}

.ahr-panel--deep .ahr-panel__text p {
	margin: var(--ahr-space-3) 0 var(--ahr-space-5);
}

/*
 * 9.8 Heading colours on the homepage. Elementor's Heading widget defaults to the global Primary colour; the approved
 * design uses near-black headings, with purple only for eyebrows and labels, and white on the hero and deep purple.
 * Three classes deep, so these win over the widget default without !important.
 */
.ahr-home-section .elementor-widget-heading .elementor-heading-title,
.ahr-home-hero-wrap .elementor-widget-heading .elementor-heading-title {
	color: var(--ahr-ink);
}

.ahr-home-section .ahr-eyebrow .elementor-heading-title,
.ahr-home-hero-wrap .ahr-eyebrow .elementor-heading-title {
	color: var(--ahr-primary);
}

.ahr-home-section .ahr-course__for .elementor-heading-title {
	color: var(--ahr-primary-strong);
}

.ahr-home-section .ahr-panel--deep .elementor-heading-title {
	color: #fff;
}

@media (min-width: 768px) {
	.ahr-home-hero-wrap .ahr-home-hero .ahr-hero__title .elementor-heading-title {
		color: #fff;
	}

	.ahr-home-hero-wrap .ahr-home-hero .ahr-eyebrow .elementor-heading-title {
		color: var(--ahr-lavender-200);
	}
}

/* Line lengths: Elementor forces max-width: 100% on widget wrappers, so the limit sits on the paragraph. */
.ahr-hero__lead p {
	max-width: 36ch;
}

.ahr-panel__text p {
	margin-inline: auto;
	max-width: 46ch;
}

/* The "Sinds 1996" badge is white on brand purple (7.04:1); it must win over the heading-colour rule in §9.8. */
.ahr-home-section .ahr-about .ahr-about__badge .elementor-heading-title {
	color: #fff;
}

/*
 * 10. Course pages (W5; built by docs/elementor/w5-*.php, first the Puppycursus reference page).
 * The sections reuse the §9 shells and components (ahr-home-section, ahr-wrap, ahr-home-head, ahr-checks, panels, icons),
 * so the §9.8 heading colours apply too. CourseFlow's course info and schedule are styled only, never hidden or filtered.
 */

/* Structural containers carry no padding of their own. */
.e-con.ahr-course-hero__text,
.e-con.ahr-course-hero__media,
.e-con.ahr-enroll,
.e-con.ahr-course-split,
.e-con.ahr-course-split__main,
.e-con.ahr-course-format,
.e-con.ahr-course-format__main,
.e-con.ahr-steps,
.e-con.ahr-step__text,
.e-con.ahr-need-grid,
.e-con.ahr-course-duo,
.e-con.ahr-instructor__text {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

/*
 * 10.1 Course hero: one lavender panel holding the text, the photo and the CourseFlow enrollment panel.
 * Phones: text → enrollment panel → photo, so the next start, price and availability come before decoration
 * (UX §13). From 768 px: text | photo, with the enrollment panel across the full width below.
 */
.e-con.ahr-course-top {
	--padding-top: var(--ahr-space-4);
}

.e-con.ahr-course-hero {
	--padding-top: var(--ahr-space-4);
	--padding-bottom: var(--ahr-space-5);
	--padding-left: var(--ahr-space-4);
	--padding-right: var(--ahr-space-4);
	background: var(--ahr-lavender-50);
	border-radius: 32px;
	display: grid;
	gap: var(--ahr-space-4);
	grid-template-areas: "text" "enroll" "media";
	grid-template-columns: minmax(0, 1fr);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

/* A soft organic shape in the upper right corner, behind the photo (::after: Elementor positions ::before itself). */
.e-con.ahr-course-hero::after {
	background: var(--ahr-lavender-100);
	border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%;
	content: "";
	height: 420px;
	left: auto;
	pointer-events: none;
	position: absolute;
	right: -140px;
	top: -160px;
	width: 520px;
	z-index: -1;
}

.e-con.ahr-course-hero__text {
	--gap: 0px;
	--row-gap: 0px;
	grid-area: text;
}

.e-con.ahr-course-hero__media {
	grid-area: media;
	position: relative;
}

.e-con.ahr-enroll {
	--gap: var(--ahr-space-2);
	--row-gap: var(--ahr-space-2);
	grid-area: enroll;
}

/* The title never outgrows its column: "Gevorderdencursus" is one long word (about 9 times the font size wide). */
.e-con.ahr-course-hero__text {
	container-type: inline-size;
}

.ahr-course-hero__title .elementor-heading-title {
	font-size: min(clamp(2.25rem, 2.6vw + 1.4rem, 4rem), 10.6cqi);
	line-height: 1.05;
	margin: 0 0 var(--ahr-space-3);
}

.elementor-widget.ahr-course-hero__lead {
	color: var(--ahr-ink);
	font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem);
}

.ahr-course-hero__lead p {
	margin: 0 0 var(--ahr-space-4);
	max-width: 40ch;
}

/* Key facts as chips: editorial facts only (never dates, prices or places). */
.ahr-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahr-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ahr-chips li {
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgb(63 31 87 / 0.08);
	color: var(--ahr-primary-strong);
	font-family: var(--ahr-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	padding: 7px 14px;
}

.elementor-widget.ahr-course-hero__place {
	margin-top: var(--ahr-space-3);
}

.ahr-course-hero__photo img {
	aspect-ratio: 3 / 2;
	border-radius: var(--ahr-radius-photo);
	display: block;
	height: auto;
	object-fit: cover;
	object-position: 45% 55%;
	width: 100%;
}

@media (min-width: 768px) {
	.e-con.ahr-course-hero {
		--padding-top: var(--ahr-space-6);
		--padding-bottom: var(--ahr-space-6);
		--padding-left: var(--ahr-space-6);
		--padding-right: var(--ahr-space-6);
		align-items: center;
		column-gap: var(--ahr-space-6);
		grid-template-areas: "text media" "enroll enroll";
		grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
		row-gap: var(--ahr-space-6);
	}

	.ahr-course-hero__photo img {
		aspect-ratio: 4 / 3.4;
		border-radius: 999px 999px var(--ahr-radius-photo) var(--ahr-radius-photo);
	}
}

@media (min-width: 1025px) {
	.e-con.ahr-course-hero {
		--padding-top: var(--ahr-space-7);
		--padding-bottom: var(--ahr-space-7);
		--padding-left: var(--ahr-space-8);
		--padding-right: var(--ahr-space-7);
		column-gap: var(--ahr-space-8);
		row-gap: var(--ahr-space-6);
	}

	.ahr-course-hero__photo img {
		aspect-ratio: 4 / 3;
	}
}

/*
 * 10.2 Enrollment panel (CourseFlow course info): a white card. Phones and tablets: one column with a full-width
 * button on phones. Desktop: one row (start · price · availability and groups · button), so it stays above the fold.
 */
.ahr-enroll .courseflow-course-info {
	background: #fff;
	border-radius: 24px;
	box-shadow: var(--ahr-shadow);
	color: var(--ahr-ink);
	gap: var(--ahr-space-2);
	padding: var(--ahr-space-4) var(--ahr-space-5) var(--ahr-space-5);
	text-align: left;
}

/* "Start" as a small label, the date below it; the price in the same heading face but smaller. */
.ahr-enroll .courseflow-course-info__start {
	color: var(--ahr-ink-muted);
	font-family: var(--ahr-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.ahr-enroll .courseflow-course-info__start time {
	color: var(--ahr-ink);
	display: block;
	font-family: var(--ahr-font-heading);
	font-size: clamp(1.375rem, 0.6vw + 1.15rem, 1.75rem);
	font-weight: 700;
	line-height: 1.15;
	margin-top: 2px;
}

.ahr-enroll .courseflow-course-info__price {
	font-size: 1.25rem;
	line-height: 1.3;
}

.ahr-enroll .courseflow-course-info__availability {
	font-weight: 600;
	margin: 0;
}

.ahr-enroll .courseflow-course-info__groups {
	color: var(--ahr-ink-muted);
	display: grid;
	font-size: 0.9375rem;
	gap: 2px;
}

.ahr-enroll .courseflow-course-info__group-name {
	color: var(--ahr-ink);
	font-weight: 600;
}

.ahr-enroll .courseflow-course-info__empty {
	font-size: 1.125rem;
	margin: 0;
}

.ahr-enroll .courseflow-course-info__cta {
	margin: var(--ahr-space-2) 0 0;
}

.ahr-enroll .courseflow-course-info__cta .courseflow-button {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.ahr-enroll .courseflow-course-info__cta .courseflow-button {
		width: 100%;
	}
}

/* Tablets: the facts in one column, the button on the right, so it stays in the first screen. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ahr-enroll .courseflow-course-info:not(.courseflow-course-info--none) {
		align-items: center;
		column-gap: var(--ahr-space-5);
		grid-template-columns: minmax(0, 1fr) max-content;
		padding: var(--ahr-space-5) var(--ahr-space-6);
	}

	.ahr-enroll .courseflow-course-info:not(.courseflow-course-info--none) > * {
		grid-column: 1;
	}

	.ahr-enroll .courseflow-course-info .courseflow-course-info__cta {
		grid-column: 2;
		grid-row: 1 / span 6;
		margin: 0;
	}
}

@media (min-width: 1025px) {
	.ahr-enroll .courseflow-course-info:not(.courseflow-course-info--none) {
		align-items: center;
		column-gap: var(--ahr-space-5);
		grid-template-areas:
			"title title title cta"
			"start price avail cta"
			"start price groups cta";
		grid-template-columns: max-content max-content minmax(15rem, 1fr) max-content;
		padding: var(--ahr-space-5) var(--ahr-space-6);
		row-gap: 2px;
	}

	.ahr-enroll .courseflow-course-info .courseflow-course-info__title {
		grid-area: title;
		margin-bottom: var(--ahr-space-1);
	}

	.ahr-enroll .courseflow-course-info__start {
		grid-area: start;
	}

	.ahr-enroll .courseflow-course-info__price {
		border-left: 1px solid var(--ahr-border);
		grid-area: price;
		padding-left: var(--ahr-space-5);
	}

	.ahr-enroll .courseflow-course-info__availability {
		align-self: end;
		border-left: 1px solid var(--ahr-border);
		grid-area: avail;
		padding-left: var(--ahr-space-5);
	}

	.ahr-enroll .courseflow-course-info__groups {
		align-self: start;
		border-left: 1px solid var(--ahr-border);
		grid-area: groups;
		padding-left: var(--ahr-space-5);
	}

	/* Without a group list the availability fills both rows. */
	.ahr-enroll .courseflow-course-info__availability:not(:has(+ .courseflow-course-info__groups)) {
		align-self: center;
		grid-row: 2 / span 2;
	}

	.ahr-enroll .courseflow-course-info__cta {
		grid-area: cta;
		margin: 0;
	}
}

/*
 * No run planned (CourseFlow state "none": course name, list price, the D18 text). From 768 px: the name on top, the
 * text on the left and the price on the right. The one-row layout above is for planned runs only.
 */
@media (min-width: 768px) {
	.ahr-enroll .courseflow-course-info--none {
		align-items: baseline;
		column-gap: var(--ahr-space-6);
		grid-template-columns: minmax(0, 1fr) max-content;
		padding: var(--ahr-space-5) var(--ahr-space-6);
		row-gap: var(--ahr-space-1);
	}

	.ahr-enroll .courseflow-course-info--none .courseflow-course-info__title {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.ahr-enroll .courseflow-course-info--none .courseflow-course-info__empty {
		grid-column: 1;
		grid-row: 2;
	}

	.ahr-enroll .courseflow-course-info--none .courseflow-course-info__price {
		border-left: 0;
		grid-column: 2;
		grid-row: 2;
		padding-left: 0;
		white-space: nowrap;
	}
}

.ahr-enroll__all p {
	margin: 0;
	padding-inline: var(--ahr-space-2);
}

/* 10.3 Voor wie: text and a tinted checklist side by side on desktop. */
.e-con.ahr-course-split {
	display: grid;
	gap: var(--ahr-space-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1025px) {
	.e-con.ahr-course-split {
		align-items: center;
		gap: var(--ahr-space-8);
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}

.e-con.ahr-course-split__main,
.e-con.ahr-course-format__main {
	--gap: var(--ahr-space-3);
	--row-gap: var(--ahr-space-3);
}

.e-con.ahr-course-split__main > .elementor-widget.ahr-eyebrow,
.e-con.ahr-course-format__main > .elementor-widget.ahr-eyebrow {
	margin-bottom: calc(-1 * var(--ahr-space-2));
}

.ahr-course-split .ahr-lead p {
	max-width: 52ch;
}

.ahr-checks--tinted li {
	background: var(--ahr-lavender-50);
}

/* 10.4 Wat ga je leren and Wat heb je nodig: lavender bands. The goals are a grid of check cards. */
.e-con.ahr-course-goals,
.e-con.ahr-course-needs {
	background: var(--ahr-lavender-50);
}

.ahr-course-goals .ahr-home-head,
.ahr-course-needs .ahr-home-head {
	margin-bottom: var(--ahr-space-6);
}

@media (min-width: 768px) {
	.ahr-checks--grid ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.ahr-checks--grid ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ahr-checks--grid li {
	box-shadow: 0 2px 10px rgb(63 31 87 / 0.06);
}

/* 10.5 Zo ziet de cursus eruit: the format on the left, the live CourseFlow schedule in a card on the right. */
.e-con.ahr-course-format {
	display: grid;
	gap: var(--ahr-space-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1025px) {
	.e-con.ahr-course-format {
		align-items: start;
		gap: var(--ahr-space-7);
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}

.e-con.ahr-steps {
	--gap: var(--ahr-space-3);
	--row-gap: var(--ahr-space-3);
	margin-top: var(--ahr-space-3);
}

.e-con.ahr-step {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: flex-start;
	--gap: var(--ahr-space-4);
	--column-gap: var(--ahr-space-4);
	--padding-top: var(--ahr-space-4);
	--padding-bottom: var(--ahr-space-4);
	--padding-left: var(--ahr-space-4);
	--padding-right: var(--ahr-space-5);
	background: var(--ahr-cream-50);
	border-radius: 20px;
}

.e-con.ahr-step > .elementor-widget-shortcode {
	flex: 0 0 auto;
	width: auto;
}

.ahr-step .ahr-icon {
	background: #fff;
	height: 56px;
	width: 62px;
}

.ahr-step .ahr-icon svg {
	height: 28px;
	width: 28px;
}

.e-con.ahr-step__text {
	--gap: var(--ahr-space-1);
	--row-gap: var(--ahr-space-1);
	flex: 1 1 0;
	min-width: 0;
}

.ahr-home-section .ahr-step .elementor-heading-title {
	font-size: 1.25rem;
}

.ahr-step p {
	margin: 0;
}

/* Phones: the icon above the title, so the text gets the card's full width. */
@media (max-width: 767px) {
	.e-con.ahr-step {
		--flex-direction: column;
		--gap: var(--ahr-space-3);
		--row-gap: var(--ahr-space-3);
		--padding-top: var(--ahr-space-5);
		--padding-bottom: var(--ahr-space-5);
		--padding-left: var(--ahr-space-5);
		--padding-right: var(--ahr-space-5);
	}

	.ahr-step .ahr-icon {
		height: 48px;
		width: 54px;
	}

	.ahr-step .ahr-icon svg {
		height: 24px;
		width: 24px;
	}
}

/* A closing line below the steps (for example what you take home): plain text. */
.elementor-widget.ahr-course-note {
	margin-top: var(--ahr-space-2);
}

.ahr-course-note p {
	margin: 0;
}

.e-con.ahr-schedule-card {
	--padding-top: var(--ahr-space-5);
	--padding-bottom: var(--ahr-space-4);
	--padding-left: var(--ahr-space-4);
	--padding-right: var(--ahr-space-4);
	background: #fff;
	border-radius: 24px;
	box-shadow: var(--ahr-shadow);
}

@media (min-width: 768px) {
	.e-con.ahr-schedule-card {
		--padding-top: var(--ahr-space-6);
		--padding-left: var(--ahr-space-6);
		--padding-right: var(--ahr-space-6);
	}
}

.ahr-schedule-card .courseflow-schedule .courseflow-schedule__title {
	font-size: 1.25rem;
	line-height: 1.25;
	margin: 0 0 var(--ahr-space-2);
}

.ahr-schedule-card .courseflow-schedule__session {
	padding-block: 10px;
}

.ahr-schedule-card .courseflow-schedule__session:last-child {
	border-bottom: 0;
}

.ahr-schedule-card .courseflow-schedule__when {
	color: var(--ahr-primary-strong);
}

.ahr-schedule-card .courseflow-schedule__name {
	font-weight: 600;
}

.ahr-schedule-card .courseflow-schedule__empty {
	margin: 0;
}

/* From 600 px: the date and time in a column on the left, the lesson and its details on the right. */
@media (min-width: 600px) {
	.ahr-schedule-card .courseflow-schedule__session {
		column-gap: var(--ahr-space-3);
		display: grid;
		grid-template-columns: 12.5rem auto minmax(0, 1fr);
		row-gap: 0;
	}

	.ahr-schedule-card .courseflow-schedule__when {
		grid-column: 1;
		grid-row: 1 / span 3;
	}

	.ahr-schedule-card .courseflow-schedule__name {
		grid-column: 2;
		grid-row: 1;
	}

	.ahr-schedule-card .courseflow-schedule__group {
		grid-column: 3;
		grid-row: 1;
	}

	.ahr-schedule-card .courseflow-schedule__details {
		grid-column: 2 / -1;
		grid-row: 2;
	}

	.ahr-schedule-card .courseflow-schedule__status {
		grid-column: 2 / -1;
		grid-row: 3;
	}
}

/*
 * Phones: the schedule shows its first three sessions; assets/js/course-schedule.js adds a disclosure button
 * ("Bekijk het volledige lesrooster", aria-expanded) and the class is-collapsed. Without the script, or from 768 px,
 * every session is shown. The rows themselves are CourseFlow's and are never changed.
 */
.ahr-schedule-toggle {
	display: none;
}

@media (max-width: 767px) {
	.ahr-schedule-card .courseflow-schedule__sessions.is-collapsed > .courseflow-schedule__session:nth-child(n + 4) {
		display: none;
	}

	.ahr-schedule-card .courseflow-schedule__sessions.is-collapsed > .courseflow-schedule__session:nth-child(3) {
		border-bottom: 0;
	}

	.ahr-schedule-card .ahr-schedule-toggle {
		align-items: center;
		background: #fff;
		border: 2px solid var(--ahr-primary);
		border-radius: 999px;
		color: var(--ahr-primary);
		cursor: pointer;
		display: flex;
		font-family: var(--ahr-font-heading);
		font-size: 1rem;
		font-weight: 600;
		gap: var(--ahr-space-2);
		justify-content: center;
		letter-spacing: normal;
		line-height: 1.2;
		margin-top: var(--ahr-space-3);
		min-height: 48px;
		padding: var(--ahr-space-2) var(--ahr-space-5);
		text-transform: none;
		width: 100%;
	}

	.ahr-schedule-card .ahr-schedule-toggle:hover,
	.ahr-schedule-card .ahr-schedule-toggle:focus {
		background: var(--ahr-lavender-50);
		color: var(--ahr-primary-strong);
	}

	.ahr-schedule-toggle__mark {
		border-bottom: 2px solid currentColor;
		border-right: 2px solid currentColor;
		height: 8px;
		transform: translateY(-2px) rotate(45deg);
		width: 8px;
	}

	.ahr-schedule-toggle[aria-expanded="true"] .ahr-schedule-toggle__mark {
		transform: translateY(2px) rotate(-135deg);
	}
}

/* 10.6 Wat heb je nodig: three cards with a line icon. */
.e-con.ahr-need-grid {
	display: grid;
	gap: var(--ahr-space-4);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.e-con.ahr-need-grid {
		gap: var(--ahr-space-5);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.e-con.ahr-need {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: center;
	--gap: var(--ahr-space-4);
	--column-gap: var(--ahr-space-4);
	--padding-top: var(--ahr-space-4);
	--padding-bottom: var(--ahr-space-4);
	--padding-left: var(--ahr-space-4);
	--padding-right: var(--ahr-space-5);
	background: #fff;
	border-radius: 24px;
	box-shadow: var(--ahr-shadow);
}

.e-con.ahr-need > .elementor-widget-shortcode {
	flex: 0 0 auto;
	width: auto;
}

.ahr-need .ahr-icon {
	background: var(--ahr-lavender-100);
}

.e-con.ahr-need > .elementor-widget-text-editor {
	flex: 1 1 0;
	min-width: 0;
}

.ahr-need p {
	color: var(--ahr-ink-muted);
	margin: 0;
}

.ahr-need strong {
	color: var(--ahr-ink);
	font-family: var(--ahr-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
}

@media (min-width: 768px) {
	.e-con.ahr-need {
		--flex-direction: column;
		--padding-top: var(--ahr-space-6);
		--padding-bottom: var(--ahr-space-6);
		--padding-left: var(--ahr-space-5);
		--padding-right: var(--ahr-space-5);
		text-align: center;
	}

	.e-con.ahr-need > .elementor-widget-text-editor {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* 10.7 Head instructor and the Privétraining bridge, side by side on desktop. */
.e-con.ahr-course-duo {
	display: grid;
	gap: var(--ahr-space-5);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1025px) {
	.e-con.ahr-course-duo {
		gap: var(--ahr-space-6);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.e-con.ahr-instructor {
	--gap: var(--ahr-space-5);
	--row-gap: var(--ahr-space-5);
	--column-gap: var(--ahr-space-5);
	--padding-top: var(--ahr-space-6);
	--padding-bottom: var(--ahr-space-6);
	--padding-left: var(--ahr-space-5);
	--padding-right: var(--ahr-space-5);
	background: var(--ahr-lavender-50);
	border-radius: 32px;
}

@media (min-width: 600px) {
	.e-con.ahr-instructor {
		--flex-direction: row;
		--flex-wrap: nowrap;
		--align-items: center;
		--padding-left: var(--ahr-space-6);
		--padding-right: var(--ahr-space-6);
	}
}

.e-con.ahr-instructor > .ahr-instructor__photo {
	flex: 0 0 auto;
	width: auto;
}

.ahr-instructor__photo img {
	aspect-ratio: 1;
	border: 6px solid #fff;
	border-radius: 50%;
	box-shadow: var(--ahr-shadow);
	display: block;
	height: auto;
	object-fit: cover;
	object-position: 48% 22%;
	width: 152px;
}

.e-con.ahr-instructor__text {
	--gap: var(--ahr-space-2);
	--row-gap: var(--ahr-space-2);
	flex: 1 1 0;
	min-width: 0;
}

.ahr-instructor__text p {
	margin: 0;
}

.ahr-home-section .ahr-course-duo h2.elementor-heading-title {
	font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem);
}

.e-con.ahr-bridge {
	--gap: var(--ahr-space-2);
	--row-gap: var(--ahr-space-2);
	--justify-content: center;
}

@media (min-width: 768px) {
	.e-con.ahr-bridge {
		--padding-left: var(--ahr-space-6);
		--padding-right: var(--ahr-space-6);
	}
}

.ahr-bridge .elementor-widget-text-editor p {
	margin: 0;
}

/* 10.8 Final call to action (the §9.7 deep panel): a white text link inside the lead text. */
.ahr-panel--deep .ahr-panel__text a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * 10.9 Phones: reading text one step larger (18 px, as the lead text) with a calm line height, and a little less card
 * padding so lines keep a comfortable length at 360 px.
 */
@media (max-width: 767px) {
	.ahr-course-split .ahr-checks li,
	.ahr-course-goals .ahr-checks li,
	.ahr-home-section .ahr-step p,
	.ahr-home-section .ahr-course-note p,
	.ahr-home-section .ahr-instructor__text p,
	.ahr-course-split .ahr-community p,
	.ahr-course-callout p,
	.ahr-home-section .ahr-bridge .elementor-widget-text-editor p {
		font-size: 1.125rem;
		line-height: 1.55;
	}

	.ahr-schedule-card .courseflow-schedule__details {
		font-size: 1rem;
	}

	.e-con.ahr-instructor {
		--padding-left: var(--ahr-space-4);
		--padding-right: var(--ahr-space-4);
	}
}

/*
 * 10.10 Shared course-page parts added with Basis and Gevorderden (W5.2).
 */

/* Hero photo focal points (same faces as the homepage cards: the Berner's eyes, the labrador's head). */
.ahr-course-hero__photo--basis img {
	object-position: 50% 38%;
}

.ahr-course-hero__photo--gevorderden img {
	object-position: 72% 35%;
}

/* A note card on a lavender band (Basis "Loop je ergens tegenaan?"): the §9 community card, centred. */
.e-con.ahr-course-callout {
	margin-inline: auto;
	margin-top: var(--ahr-space-6);
	max-width: 720px;
	width: 100%;
}

/* The community card on a white section (Gevorderden beach walk) gets the lavender tint instead of white. */
.ahr-course-split .e-con.ahr-community {
	background: var(--ahr-lavender-50);
}

/* Gevorderden: two titled checklists side by side from 768 px. */
.e-con.ahr-course-lists {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	display: grid;
	gap: var(--ahr-space-5);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.e-con.ahr-course-lists {
		gap: var(--ahr-space-6);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.e-con.ahr-course-list {
	--gap: var(--ahr-space-3);
	--row-gap: var(--ahr-space-3);
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	align-content: start;
}

.ahr-home-section .ahr-course-list .elementor-heading-title {
	font-size: 1.375rem;
}

/*
 * Final call to action: two variants (inc/elementor.php renders the one that matches CourseFlow's enrollment state).
 * Each variant is a plain centred column inside the deep panel.
 */
.e-con.ahr-cta-variant {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--align-items: center;
	width: 100%;
}

.ahr-panel--deep .e-con.ahr-actions {
	--justify-content: center;
}

.elementor-widget.ahr-textlink--light a,
.elementor-widget.ahr-textlink--light a:hover,
.elementor-widget.ahr-textlink--light a:focus-visible {
	color: #fff;
}

.ahr-panel--deep .ahr-textlink--light a:focus-visible {
	outline-color: #fff;
}

/* Links inside running text on course pages are underlined, never marked by colour alone (WCAG 1.4.1). */
.ahr-lead a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * 10.11 W5 follow-ups and the information pages (Privétraining, Locatie, Contact).
 */

/*
 * Course hero on phones: a short photo strip first, then the text and the CourseFlow panel. The location line moves
 * below the panel on phones (a second copy, `--mobile`), so start date, price and availability stay in the first
 * screen at 360 px. From 768 px nothing changes.
 */
@media (max-width: 767px) {
	.e-con.ahr-course-hero:not(.ahr-course-hero--page) {
		--padding-top: var(--ahr-space-3);
		gap: var(--ahr-space-3);
		grid-template-areas: "media" "text" "enroll";
	}

	.ahr-course-hero:not(.ahr-course-hero--page) .ahr-course-hero__photo img {
		aspect-ratio: 3 / 1;
		border-radius: 20px;
	}

	.ahr-course-hero:not(.ahr-course-hero--page) .ahr-course-hero__lead p {
		margin-bottom: var(--ahr-space-3);
	}

	.elementor-widget.ahr-course-hero__place--wide {
		display: none;
	}

	.ahr-enroll .elementor-widget.ahr-course-hero__place--mobile {
		margin-top: 0;
	}
}

@media (min-width: 768px) {
	.elementor-widget.ahr-course-hero__place--mobile {
		display: none;
	}
}

/* No run planned: contact is the action under the panel (no start dates are suggested). */
.elementor-widget.ahr-enroll__contact {
	margin-top: var(--ahr-space-2);
}

/* Page hero (information pages): text and one side element; text only on Contact. */
.e-con.ahr-course-hero--page {
	grid-template-areas: "text" "media";
}

@media (min-width: 768px) {
	.e-con.ahr-course-hero--page {
		grid-template-areas: "text media";
	}

	.e-con.ahr-course-hero--text-only {
		grid-template-areas: "text";
		grid-template-columns: minmax(0, 1fr);
	}
}

.ahr-course-hero--page .e-con.ahr-actions {
	margin-top: var(--ahr-space-4);
}

.ahr-course-hero__photo--chantal img {
	object-position: 48% 22%;
}

/* The address card (Locatie hero, Contact): white on lavender, cream on white. */
.ahr-course-hero .e-con.ahr-address-card {
	background: #fff;
	box-shadow: var(--ahr-shadow);
}

/* The address card is a narrow column card: never the wide three-column homepage layout (§9.7). */
@media (min-width: 1025px) {
	.e-con.ahr-address-card {
		--padding-top: var(--ahr-space-6);
		--padding-bottom: var(--ahr-space-6);
		--padding-left: var(--ahr-space-6);
		--padding-right: var(--ahr-space-6);
		align-items: stretch;
		display: flex;
		gap: var(--ahr-space-4);
	}

	.e-con.ahr-address-card .ahr-actions {
		--flex-direction: row;
		--align-items: center;
	}
}

.e-con.ahr-address-card {
	--align-items: flex-start;
	text-align: left;
	--padding-top: var(--ahr-space-6);
	--padding-bottom: var(--ahr-space-6);
	--padding-left: var(--ahr-space-5);
	--padding-right: var(--ahr-space-5);
}

.ahr-address-card address {
	margin-top: 0;
	font-size: 1.125rem;
	font-style: normal;
	line-height: 1.6;
}

.ahr-home-section .ahr-address-card .elementor-heading-title {
	font-size: 1.5rem;
}

/* Info cards (Locatie, Contact): the "Wat heb je nodig?" card with a sentence and a link. */
.ahr-need--info p {
	color: var(--ahr-ink-muted);
}

/* The link gets its own line under the sentence (centred with the card from 768 px). */
.ahr-need--info a {
	align-items: center;
	color: var(--ahr-primary);
	display: flex;
	width: fit-content;
	min-height: 44px;
	font-weight: 600;
	margin-top: var(--ahr-space-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.e-con.ahr-contact-routes {
	--padding-top: var(--ahr-space-6);
	--padding-bottom: var(--ahr-space-6);
}

/* A cream panel with plain text links to the courses (no enrollment action). */
.e-con.ahr-group-links {
	--align-items: flex-start;
}

@media (min-width: 768px) {
	.e-con.ahr-group-links {
		--padding-left: var(--ahr-space-7);
		--padding-right: var(--ahr-space-7);
	}
}

/* Contact: the form and the address card; from 1025 px side by side. */
.e-con.ahr-contact-grid {
	display: grid;
	gap: var(--ahr-space-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1025px) {
	.e-con.ahr-contact-grid {
		align-items: start;
		gap: var(--ahr-space-7);
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	}
}

.e-con.ahr-contact-form {
	--gap: var(--ahr-space-3);
	--row-gap: var(--ahr-space-3);
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	scroll-margin-top: calc(var(--ahr-header-h-compact) + var(--ahr-space-4));
}

.e-con.ahr-contact-form > .elementor-widget.ahr-eyebrow {
	margin-bottom: calc(-1 * var(--ahr-space-2));
}

/* Form fields in the Kit's look: 48 px fields, the input border token, a visible focus ring. */
.ahr-contact-form .elementor-field-group {
	margin-bottom: var(--ahr-space-4);
}

.ahr-contact-form .elementor-field-label {
	color: var(--ahr-ink);
	font-weight: 600;
	margin-bottom: var(--ahr-space-1);
}

.ahr-contact-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper),
.ahr-contact-form .elementor-field-group .elementor-select-wrapper select {
	background: #fff;
	border: 1px solid var(--ahr-border-input);
	border-radius: var(--ahr-radius-input);
	color: var(--ahr-ink);
	font-family: var(--ahr-font-body);
	font-size: 1.0625rem;
	min-height: 48px;
	padding: var(--ahr-space-3) var(--ahr-space-4);
}

.ahr-contact-form .elementor-field-group .elementor-field:focus,
.ahr-contact-form .elementor-field-group select:focus {
	border-color: var(--ahr-primary);
	box-shadow: 0 0 0 3px var(--ahr-lavender-200);
	outline: none;
}

.ahr-contact-form .elementor-form .elementor-button {
	min-height: 48px;
}

.ahr-form-note {
	color: var(--ahr-ink-muted);
	font-size: 1rem;
	margin: 0;
}

.ahr-form-note a {
	color: var(--ahr-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * 10.12 Information pages: the section after the (short) page hero starts closer to it, and its text column starts
 * at the top instead of being centred against a taller list. Desktop gap hero → content: 192 → 111 px on
 * Privétraining (the Contact rhythm). Course pages are not affected.
 */
.e-con.ahr-course-top:has(.ahr-course-hero--page) + .e-con.ahr-home-section {
	--padding-top: var(--ahr-space-6);
}

@media (min-width: 1025px) {
	.e-con.ahr-course-top:has(.ahr-course-hero--page) + .e-con.ahr-home-section .e-con.ahr-course-split {
		align-items: start;
	}
}

@media (min-width: 768px) {
	.ahr-need--info a {
		margin-inline: auto;
	}
}

/* 10.13 Cursussen overview (W6.1): the "Welke cursus past bij je hond?" guide, 2 × 2 on tablets, 4 in a row from 1025 px. */
@media (min-width: 768px) {
	.e-con.ahr-need-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.e-con.ahr-need-grid--four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Cursussen: the course cards follow the short hero closely (owner review W6.1). Gap hero → section: 56 px desktop, 44 px phones. */
.e-con.ahr-course-top:has(+ .ahr-courses-overview) {
	--padding-bottom: var(--ahr-space-5);
}

@media (max-width: 767px) {
	.e-con.ahr-course-top:has(+ .ahr-courses-overview) {
		--padding-bottom: var(--ahr-space-3);
	}

	.ahr-courses-overview .e-con.ahr-home-head {
		margin-bottom: var(--ahr-space-5);
	}
}

/*
 * 10.14 Inschrijven (W6.2): CourseFlow's public enrollment flow in the site's look. Presentation only, scoped to the
 * page section .ahr-enroll-page, by CourseFlow's own BEM classes (selector contract in README.md); CourseFlow keeps
 * its layout, states, validation and texts. Re-check against templates/public/enrollment/ on CourseFlow updates.
 */
.e-con.ahr-course-top:has(+ .ahr-enroll-page) {
	--padding-bottom: var(--ahr-space-5);
}

.e-con.ahr-enroll-page {
	--padding-top: var(--ahr-space-6);
}

/* One centred column for the whole flow (owner review): 896 px = 56rem, within the 850–950 px target. */
:root {
	--ahr-enroll-width: 56rem;
}

.ahr-enroll-page .courseflow-enroll {
	--cf-tint: var(--ahr-lavender-50);
	--cf-tint-strong: var(--ahr-cream-50);
	max-width: var(--ahr-enroll-width);
}

/* Cards: white on the page, the site's radius and shadow. */
.ahr-enroll-page .courseflow-enroll__panel,
.ahr-enroll-page .courseflow-enroll__run {
	background: #fff;
	border: 0;
	border-radius: var(--ahr-radius-card);
	box-shadow: var(--ahr-shadow);
}

.ahr-enroll-page .courseflow-enroll__run {
	border-top: 4px solid var(--ahr-primary);
}

/* The participant (dog) block in lavender, terms and consent in cream. */
.ahr-enroll-page .courseflow-enroll__section--subject {
	background: var(--ahr-lavender-50);
	border-color: transparent;
	border-left-color: var(--ahr-primary);
	border-radius: 16px;
}

.ahr-enroll-page .courseflow-enroll__section--consent {
	background: var(--ahr-cream-50);
	border-color: var(--ahr-cream-100);
	border-radius: 16px;
}

.ahr-enroll-page .courseflow-enroll__notice {
	background: #fff;
	border-color: var(--ahr-border);
	border-left-color: var(--ahr-primary);
	box-shadow: var(--ahr-shadow);
}

/* Pill buttons in the heading face, like the Kit's buttons. */
.ahr-enroll-page .courseflow-enroll .courseflow-enroll__button {
	border-radius: 999px;
	font-family: var(--ahr-font-heading);
	font-weight: 600;
	min-height: 48px;
}

.ahr-enroll-page .courseflow-enroll .courseflow-enroll__button--primary:hover,
.ahr-enroll-page .courseflow-enroll .courseflow-enroll__button--primary:focus-visible {
	background: var(--ahr-primary-strong);
	border-color: var(--ahr-primary-strong);
}

.ahr-enroll-page .courseflow-enroll .courseflow-enroll__button--secondary {
	border-color: var(--ahr-primary);
	color: var(--ahr-primary);
}

/* Fields: the site's 48 px controls. */
.ahr-enroll-page .courseflow-enroll {
	--cf-control: 48px;
}

/* Address row: street, house number and addition get equal thirds, so "Huisnummer *" no longer wraps. */
@container cfenroll (min-width: 36rem) {
	.ahr-enroll-page .courseflow-enroll__grid > .courseflow-enroll__field--street,
	.ahr-enroll-page .courseflow-enroll__grid > .courseflow-enroll__field--number,
	.ahr-enroll-page .courseflow-enroll__grid > .courseflow-enroll__field--addition {
		grid-column: span 2;
	}
}

/*
 * During the flow (CourseFlow shows its step indicator: details, errors, review, confirmation) the page hero shrinks
 * to the eyebrow and title, so the steps and the form start in the first screen. The full hero with the help links
 * stays on the course choice. Only our own hero copy is hidden; CourseFlow's output is untouched.
 */
.elementor:has(.courseflow-enroll__steps) .ahr-course-hero--page .ahr-course-hero__lead,
.elementor:has(.courseflow-enroll__steps) .ahr-course-hero--page .e-con.ahr-actions {
	display: none;
}

.elementor:has(.courseflow-enroll__steps) .ahr-course-hero--page .ahr-course-hero__title .elementor-heading-title {
	margin-bottom: 0;
}

.elementor:has(.courseflow-enroll__steps) .e-con.ahr-course-hero--page {
	--padding-top: var(--ahr-space-5);
	--padding-bottom: var(--ahr-space-5);
}

/* Phones: the two help links on the course choice sit closer together. */
@media (max-width: 767px) {
	.ahr-course-top:has(+ .ahr-enroll-page) .e-con.ahr-actions {
		--gap: 0px;
		--row-gap: 0px;
		margin-top: var(--ahr-space-2);
	}
}

/* During the flow the compact hero takes the same centred column as the steps and the form, so title, steps and fields share one left edge (owner review W6.2). Phones: unchanged (the column is the full width there). */
.elementor:has(.courseflow-enroll__steps) .e-con.ahr-course-hero--page {
	margin-inline: auto;
	max-width: var(--ahr-enroll-width);
}

@media (min-width: 768px) {
	.elementor:has(.courseflow-enroll__steps) .e-con.ahr-course-hero--page {
		--padding-left: var(--ahr-space-6);
		--padding-right: var(--ahr-space-6);
	}
}

/* 10.15 Over ons (W6.3): the W4 About block opens the page; its intro keeps a readable line length when it runs full width (768–1024 px). */
.ahr-about-page .ahr-lead p {
	max-width: 62ch;
}

/*
 * 10.16 Legal pages (W6.4: Algemene voorwaarden, Privacyverklaring). A readable single text column after the compact
 * page hero. `.ahr-legal-placeholder` marks LOCAL DRAFT content on these pages only (owner instruction 2026-10-14);
 * it is removed when the approved texts are placed.
 */
.e-con.ahr-course-top:has(+ .ahr-legal) {
	--padding-bottom: var(--ahr-space-5);
}

.e-con.ahr-legal {
	--padding-top: var(--ahr-space-6);
}

.e-con.ahr-legal__body {
	max-width: 46rem;
}

.ahr-legal__text {
	font-size: 1.0625rem;
	line-height: 1.65;
}

.ahr-legal__text h2 {
	font-size: clamp(1.375rem, 0.6vw + 1.15rem, 1.75rem);
	line-height: 1.25;
	margin: var(--ahr-space-6) 0 var(--ahr-space-2);
}

.ahr-legal__text p {
	margin: 0 0 var(--ahr-space-3);
}

.ahr-legal__rules {
	display: grid;
	gap: var(--ahr-space-3);
	margin: var(--ahr-space-3) 0 0;
	padding-left: 1.5em;
}

.ahr-legal__rules li::marker {
	color: var(--ahr-primary);
	font-weight: 700;
}

.ahr-legal-placeholder {
	background: var(--ahr-cream-50);
	border: 2px dashed var(--ahr-brand);
	border-radius: 12px;
	color: var(--ahr-ink);
	padding: var(--ahr-space-3) var(--ahr-space-4);
}

.ahr-legal-placeholder strong {
	background: var(--ahr-primary-deep);
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-family: var(--ahr-font-heading);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	margin-right: var(--ahr-space-2);
	padding: 2px 10px;
	text-transform: uppercase;
}

/* Print: the legal text only, in black on white, with link targets. */
@media print {
	.ahr-header,
	.ahr-footer,
	.skip-link {
		display: none !important;
	}

	.e-con.ahr-course-hero,
	.ahr-legal-placeholder {
		background: none !important;
		box-shadow: none !important;
	}

	.e-con.ahr-course-hero::after {
		display: none;
	}

	.ahr-legal__text {
		color: #000;
		font-size: 11pt;
	}

	.ahr-legal__text a[href^="http"]::after,
	.ahr-legal__text a[href^="/"]::after {
		content: " (" attr(href) ")";
	}
}

/* Inline "te bevestigen" marks in the draft privacy statement (local draft only; removed once confirmed). */
.ahr-legal__text mark.ahr-legal-confirm {
	background: var(--ahr-cream-100);
	border-bottom: 2px dashed var(--ahr-brand);
	border-radius: 4px;
	color: var(--ahr-ink);
	font-size: 0.9375em;
	padding: 0 4px;
}

.ahr-legal__text ul {
	display: grid;
	gap: var(--ahr-space-2);
	margin: 0 0 var(--ahr-space-3);
	padding-left: 1.25em;
}

.ahr-legal__text a {
	color: var(--ahr-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * 10.17 Dagopvang and Aanvraag dagopvang (W6.5; built by docs/elementor/w6-dagopvang.php and
 * w6-aanvraagdagopvang.php). The live content in the site's look: a photo hero, the five topics as an in-page link
 * row, topic rows (heading beside the text from 1025 px), the Strandwandeling photo beside a deep panel, and the
 * application form in the centred enrollment column with large radio and checkbox targets.
 */

/* Hero photo: the live 1920 × 600 banner, cropped on the two dogs. */
.ahr-course-hero__photo--dagopvang img {
	object-position: 40% 60%;
}

/* The five topics: a wrapping row of pill links with an icon (keyboard focus from the theme's focus ring). */
.ahr-dag-nav-section.ahr-home-section {
	--padding-top: var(--ahr-space-6);
	--padding-bottom: 0px;
}

.ahr-dag-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahr-space-3);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ahr-dag-nav a {
	align-items: center;
	background: var(--ahr-lavender-50);
	border: 1px solid var(--ahr-lavender-200);
	border-radius: 999px;
	color: var(--ahr-primary-strong);
	display: inline-flex;
	font-family: var(--ahr-font-heading);
	font-weight: 600;
	gap: var(--ahr-space-2);
	min-height: 48px;
	padding: var(--ahr-space-2) var(--ahr-space-5) var(--ahr-space-2) var(--ahr-space-3);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ahr-dag-nav a:hover {
	background: var(--ahr-lavender-100);
	border-color: var(--ahr-primary);
}

.ahr-dag-nav .ahr-icon {
	align-items: center;
	background: #fff;
	border-radius: 50%;
	color: var(--ahr-primary);
	display: inline-flex;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.ahr-dag-nav .ahr-icon svg {
	height: 22px;
	width: 22px;
}

/* Phones: more compact pills (two rows at 360 px) that keep 44 px touch targets and 15 px text. */
@media (max-width: 767px) {
	.ahr-dag-nav ul {
		gap: var(--ahr-space-2);
	}

	.ahr-dag-nav a {
		font-size: 0.9375rem;
		gap: 6px;
		min-height: 44px;
		padding: 4px var(--ahr-space-3) 4px 4px;
	}

	.ahr-dag-nav .ahr-icon {
		height: 32px;
		width: 32px;
	}

	.ahr-dag-nav .ahr-icon svg {
		height: 20px;
		width: 20px;
	}
}

/*
 * W6.5 polish: from 768 px these two pages start their content 48 px below the page hero (the shared information-page
 * rhythm gives 80–111 px). Phones keep the shared rhythm.
 */
@media (min-width: 768px) {
	.e-con.ahr-course-top:has(+ .ahr-dag-nav-section),
	.e-con.ahr-course-top:has(+ .ahr-dag-form-section) {
		--padding-bottom: var(--ahr-space-5);
	}

	.e-con.ahr-course-top:has(.ahr-course-hero--page) + .e-con.ahr-home-section.ahr-dag-nav-section,
	.e-con.ahr-course-top:has(.ahr-course-hero--page) + .e-con.ahr-home-section.ahr-dag-form-section {
		--padding-top: var(--ahr-space-5);
	}
}

/* Topic rows: separated by a thin line; from 1025 px the heading sits beside the text. */
.e-con.ahr-dag-topics {
	--gap: 0px;
	--row-gap: 0px;
	max-width: 68rem;
}

.e-con.ahr-dag-topic {
	--gap: var(--ahr-space-3);
	--row-gap: var(--ahr-space-3);
	--padding-top: var(--ahr-space-6);
	--padding-bottom: var(--ahr-space-6);
	border-top: 1px solid var(--ahr-lavender-200);
	scroll-margin-top: calc(var(--ahr-header-h-compact) + var(--ahr-space-4));
}

.e-con.ahr-dag-topic:first-child {
	border-top: 0;
	--padding-top: 0px;
}

.ahr-dag-topic__title .elementor-heading-title {
	margin: 0;
}

.ahr-dag-topic__text p {
	margin: 0 0 var(--ahr-space-3);
	max-width: 68ch;
}

.ahr-dag-topic__text p:last-child {
	margin-bottom: 0;
}

.ahr-dag-topic__text ul {
	margin-bottom: var(--ahr-space-3);
}

.ahr-dag-topic__text ul:last-child {
	margin-bottom: 0;
}

.ahr-dag-topic__text.ahr-checks li {
	background: var(--ahr-lavender-50);
	padding-bottom: var(--ahr-space-3);
	padding-top: var(--ahr-space-3);
}

.ahr-dag-topic__text.ahr-checks li::before {
	top: calc(var(--ahr-space-3) + 2px);
}

.ahr-dag-topic__text a {
	color: var(--ahr-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 1025px) {
	.e-con.ahr-dag-topic {
		align-items: start;
		column-gap: var(--ahr-space-8);
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
}

/*
 * Strandwandeling: from 1025 px the photo and the deep panel side by side in two equal columns, the photo filling the
 * panel's height; 768–1024 px stacked with a wider, lower photo (2:1); phones stacked (3:2). Text left-aligned.
 */
.e-con.ahr-dag-beach {
	--gap: var(--ahr-space-5);
	--row-gap: var(--ahr-space-5);
}

.ahr-dag-beach__photo img {
	aspect-ratio: 3 / 2;
	border-radius: var(--ahr-radius-photo);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.e-con.ahr-dag-beach__panel {
	--align-items: flex-start;
	--padding-top: var(--ahr-space-7);
	--padding-bottom: var(--ahr-space-7);
	text-align: left;
}

.ahr-dag-beach__panel .elementor-heading-title {
	margin: 0 0 var(--ahr-space-2);
}

.ahr-dag-beach__question .elementor-heading-title {
	color: var(--ahr-lavender-200);
	font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
}

.ahr-dag-beach__panel .ahr-panel__text p {
	margin: 0;
	max-width: 60ch;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ahr-dag-beach__photo img {
		aspect-ratio: 2 / 1;
	}
}

@media (min-width: 1025px) {
	.e-con.ahr-dag-beach {
		align-items: stretch;
		display: grid;
		gap: var(--ahr-space-6);
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.ahr-dag-beach__photo,
	.ahr-dag-beach__photo .elementor-widget-container {
		height: 100%;
	}

	.ahr-dag-beach__photo img {
		aspect-ratio: auto;
		height: 100%;
		min-height: 320px;
	}

	.e-con.ahr-dag-beach__panel {
		--justify-content: center;
	}
}

/* Aanvraag dagopvang: the form in the centred enrollment column. */
.e-con.ahr-dag-form-wrap {
	max-width: 56rem;
}

/* Radio groups and the agreement: 24 px controls, 44 px rows, the brand colour. */
.ahr-dag-form .elementor-field-type-radio .elementor-field-subgroup {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahr-space-1) var(--ahr-space-5);
}

.ahr-dag-form .elementor-field-option {
	align-items: center;
	display: inline-flex;
	gap: var(--ahr-space-2);
	min-height: 44px;
}

.ahr-dag-form .elementor-field-option input,
.ahr-dag-form .elementor-field-type-acceptance input[type="checkbox"] {
	accent-color: var(--ahr-primary);
	flex: 0 0 auto;
	height: 24px;
	margin: 0;
	width: 24px;
}

.ahr-dag-form .elementor-field-option label {
	color: var(--ahr-ink);
	font-size: 1.0625rem;
}

.ahr-dag-form .elementor-field-type-acceptance .elementor-field-subgroup {
	width: 100%;
}

.ahr-dag-form .elementor-field-type-acceptance .elementor-field-option {
	align-items: flex-start;
	display: flex;
	gap: var(--ahr-space-3);
	min-height: 0;
}

.ahr-dag-form .elementor-field-type-acceptance label {
	color: var(--ahr-ink);
	font-size: 1.0625rem;
	font-weight: 600;
}

.ahr-dag-form .elementor-field-type-acceptance label a {
	color: var(--ahr-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The six terms points: a quiet lavender card inside the form. */
.ahr-dag-terms {
	background: var(--ahr-lavender-50);
	border-radius: var(--ahr-radius-card);
	padding: var(--ahr-space-5);
}

.ahr-dag-terms .ahr-dag-terms__title {
	font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
	line-height: 1.3;
	margin: 0 0 var(--ahr-space-3);
}

.ahr-dag-terms ul {
	display: grid;
	gap: var(--ahr-space-2);
	margin: 0;
	padding-left: 1.25em;
}

.ahr-dag-terms li::marker {
	color: var(--ahr-primary);
}

/* Field and form messages: the error token, not colour alone (the text says what is wrong). */
.ahr-dag-form .elementor-field-group .elementor-message.elementor-message-danger,
.ahr-dag-form .elementor-field-group .elementor-message {
	color: var(--ahr-error);
	font-size: 1rem;
	margin-top: var(--ahr-space-1);
}

.ahr-dag-form .elementor-form > .elementor-message {
	border-radius: var(--ahr-radius-input);
	font-size: 1.0625rem;
	margin-top: var(--ahr-space-4);
	padding: var(--ahr-space-3) var(--ahr-space-4);
}

.ahr-dag-form .elementor-form > .elementor-message-success {
	background: var(--ahr-lavender-50);
	color: var(--ahr-ink);
}

.ahr-dag-form .elementor-form > .elementor-message-danger {
	background: #fff4f4;
	color: var(--ahr-error);
}

/*
 * W6.6: the contact form's messages in the same look (Elementor's default red, #d9534f, is 3.96:1 on white, below AA).
 * Both forms: no message icon. Elementor draws it with its icon font, which the site does not load, so an empty box
 * showed in front of the text; the text itself says what happened.
 */
.ahr-contact-form__form .elementor-field-group .elementor-message {
	color: var(--ahr-error);
	font-size: 1rem;
	margin-top: var(--ahr-space-1);
}

.ahr-contact-form__form .elementor-form > .elementor-message {
	border-radius: var(--ahr-radius-input);
	font-size: 1.0625rem;
	margin-top: var(--ahr-space-4);
	padding: var(--ahr-space-3) var(--ahr-space-4);
}

.ahr-contact-form__form .elementor-form > .elementor-message-success {
	background: var(--ahr-lavender-50);
	color: var(--ahr-ink);
}

.ahr-contact-form__form .elementor-form > .elementor-message-danger {
	background: #fff4f4;
	color: var(--ahr-error);
}

.ahr-contact-form__form .elementor-message::before,
.ahr-dag-form .elementor-message::before {
	content: none;
	display: none;
}

@media (max-width: 767px) {
	.ahr-dag-form .elementor-field-group.elementor-col-33,
	.ahr-dag-form .elementor-field-group.elementor-col-66 {
		width: 100%;
	}

	.ahr-dag-terms {
		padding: var(--ahr-space-4);
	}
}

/* The agreement's error message sits on its own line under the checkbox text (Elementor places it inside the option). */
.ahr-dag-form .elementor-field-type-acceptance .elementor-field-option {
	flex-wrap: wrap;
}

.ahr-dag-form .elementor-field-type-acceptance .elementor-field-option .elementor-message {
	flex-basis: 100%;
	margin-left: calc(24px + var(--ahr-space-3));
}

/*
 * 10.18 Page not found (W6.6; template-parts/404.php). The information-page hero panel (lavender, organic shape) with
 * the message and the ways back, then the course links as pills. Theme markup, no Elementor data.
 */
/* Hello limits a non-Elementor .site-main to 500–1140 px with 10 px sides; the 404 takes the header's width and gutter. */
body.error404 .site-main.ahr-404 {
	max-width: none;
	padding: var(--ahr-space-4) var(--ahr-gutter) 0;
}

.ahr-404__inner {
	margin-inline: auto;
	max-width: 1240px;
}

.ahr-404__hero .ahr-404__inner {
	background: var(--ahr-lavender-50);
	border-radius: 32px;
	isolation: isolate;
	overflow: hidden;
	padding: var(--ahr-space-6) var(--ahr-space-5);
	position: relative;
}

/* The same soft shape as the page heroes (§10.1), upper right, decorative only. */
.ahr-404__hero .ahr-404__inner::after {
	background: var(--ahr-lavender-100);
	border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%;
	content: "";
	height: 420px;
	pointer-events: none;
	position: absolute;
	right: -140px;
	top: -160px;
	width: 520px;
	z-index: -1;
}

.ahr-404__eyebrow {
	color: var(--ahr-primary);
	font-family: var(--ahr-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 var(--ahr-space-2);
	text-transform: uppercase;
}

.ahr-404 .ahr-404__title {
	margin: 0;
	max-width: 14em;
	text-wrap: balance;
}

.ahr-404__lead {
	color: var(--ahr-ink-muted);
	font-size: var(--e-global-typography-lead-font-size, 1.25rem);
	line-height: 1.5;
	margin: var(--ahr-space-4) 0 0;
	max-width: 36em;
}

.ahr-404__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahr-space-3) var(--ahr-space-4);
	margin-top: var(--ahr-space-6);
}

/* The Kit's primary and outline buttons ("a." outranks the Kit's link colour). */
.ahr-404 a.ahr-404__btn {
	align-items: center;
	background: var(--ahr-primary);
	border-radius: 999px;
	box-shadow: inset 0 0 0 2px var(--ahr-primary);
	color: #fff;
	display: inline-flex;
	font-family: var(--ahr-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	min-height: 48px;
	padding: 12px 26px;
	text-decoration: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ahr-404 a.ahr-404__btn:hover {
	background: var(--ahr-primary-strong);
	box-shadow: inset 0 0 0 2px var(--ahr-primary-strong);
	color: #fff;
}

.ahr-404 a.ahr-404__btn--outline {
	background: transparent;
	color: var(--ahr-primary);
}

.ahr-404 a.ahr-404__btn--outline:hover {
	background: #fff;
	color: var(--ahr-primary-strong);
}

.ahr-404 a.ahr-404__textlink {
	align-items: center;
	color: var(--ahr-primary);
	display: inline-flex;
	font-weight: 600;
	min-height: 48px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ahr-404__more {
	padding-top: var(--ahr-space-7);
}

.ahr-404__more .ahr-404__inner {
	padding-inline: var(--ahr-space-5);
}

.ahr-404 .ahr-404__subtitle {
	font-size: var(--e-global-typography-h4-font-size, 1.25rem);
	margin: 0 0 var(--ahr-space-4);
}

.ahr-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahr-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The Dagopvang topic pills (§10.17), without icons. */
.ahr-404__links a {
	align-items: center;
	background: var(--ahr-lavender-50);
	border: 1px solid var(--ahr-lavender-200);
	border-radius: 999px;
	color: var(--ahr-primary-strong);
	display: inline-flex;
	font-family: var(--ahr-font-heading);
	font-weight: 600;
	min-height: 48px;
	padding: var(--ahr-space-2) var(--ahr-space-5);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ahr-404__links a:hover {
	background: var(--ahr-lavender-100);
	border-color: var(--ahr-primary);
	color: var(--ahr-primary-strong);
}

@media (max-width: 767px) {
	.ahr-404__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.ahr-404 a.ahr-404__btn {
		justify-content: center;
	}

	.ahr-404 a.ahr-404__textlink {
		align-self: center;
	}

	.ahr-404__more .ahr-404__inner {
		padding-inline: 0;
	}

	.ahr-404__links {
		gap: var(--ahr-space-2);
	}

	.ahr-404__links a {
		font-size: 0.9375rem;
		min-height: 44px;
		padding: 4px var(--ahr-space-4);
	}
}

@media (min-width: 768px) {
	.ahr-404__hero .ahr-404__inner {
		padding: var(--ahr-space-7) var(--ahr-space-6);
	}

	.ahr-404__more .ahr-404__inner {
		padding-inline: var(--ahr-space-6);
	}
}

@media (min-width: 1025px) {
	.ahr-404__hero .ahr-404__inner {
		padding: var(--ahr-space-8) var(--ahr-space-8) calc(var(--ahr-space-8) + var(--ahr-space-2));
	}

	.ahr-404__more .ahr-404__inner {
		padding-inline: var(--ahr-space-8);
	}
}