/*
 * Christina Skei theme stylesheet — THE stylesheet.
 * Registered as frontend style (inc/enqueue.php) AND editor style (inc/setup.php).
 * Design source: design/04-rally.html (monorepo). Colour placement follows design 4,
 * not the brief (PLAN §13 G): court-side is text, buttons, small elements and the
 * marquee band only — never a section surface.
 * Tokens only via custom properties. Every block style's extra CSS lives here,
 * banner-commented with its styles/block/*.json counterpart.
 */

/* -------------------------------------------------------------------------
 * Icons — single-source SVGs (assets/icons/), drawn with mask-image +
 * background: currentColor. Declared here, consumed here (relative url()).
 * ---------------------------------------------------------------------- */

:root {
	--cs-icon-arrow: url("../icons/arrow.svg");
	--cs-icon-check: url("../icons/check.svg");
	--cs-icon-play: url("../icons/play.svg");
	--cs-icon-instagram: url("../icons/instagram.svg");
	--cs-admin-offset: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	:root {
		--cs-admin-offset: 0px;
	}
}

/* -------------------------------------------------------------------------
 * Base. No global box-sizing reset (codehouse-wp-gotchas 4.3).
 * ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin-block: 0;
	overflow-wrap: break-word;
}

:where(p) {
	margin-block: 0;
}

/* Full-width sections sit flush: the page's rhythm is each section's own
 * padding, not post-content's blockGap (which would paint sand stripes). */
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

a:where(:not(.wp-element-button)) {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness var(--wp--custom--motion--default);
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

:where(.is-style-hero, .is-style-marquee, .cs-header-overlay:not(.is-scrolled)) :focus-visible {
	outline-color: var(--wp--preset--color--match-point);
}

/* The mobile menu overlay is sand even inside the transparent header. */
.is-menu-open :focus-visible {
	outline-color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * Contrast guard: court-side-muted is 4.8:1 on sand only (brief). On seaglass
 * (3.9:1) and lime it fails WCAG AA, so muted text there becomes court-side.
 * ---------------------------------------------------------------------- */

:is(.has-seaglass-background-color, .has-match-point-background-color) :is(.is-style-eyebrow, .has-court-side-muted-color, .is-style-link-row > p) {
	color: var(--wp--preset--color--contrast) !important;
}

/* -------------------------------------------------------------------------
 * Emphasis — rich-text format cs/em (assets/js/editor.js).
 * Light surfaces: lime behind court-side. Photo/video: lime text.
 * Lime surface: sand behind.
 * ---------------------------------------------------------------------- */

/*
 * The highlight frames the word, not the font box. Cal Sans' content area is
 * 1.30em (ascent 1.00, descent 0.30) with a cap height of 0.70, so a plain
 * background reaches 0.30em above the capitals and paints over the previous
 * line's descenders in sentence-case headings (2026-10-21). The gradient
 * starts 0.12em above cap height (= the side padding) and ends just under the
 * g/p/y descender (0.22em below the baseline).
 */
mark.cs-em {
	--cs-em-bg: var(--wp--preset--color--match-point);
	background:
		linear-gradient(
			to bottom,
			transparent 0.18em,
			var(--cs-em-bg) 0.18em,
			var(--cs-em-bg) calc(100% - 0.08em),
			transparent calc(100% - 0.08em)
		);
	color: var(--wp--preset--color--contrast);
	padding: 0 0.12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.is-style-hero mark.cs-em {
	background: transparent;
	color: var(--wp--preset--color--match-point);
	padding: 0;
}

.has-match-point-background-color mark.cs-em {
	--cs-em-bg: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * Running text — page, post, exercise and programme-day content
 * (core/post-content). Henrik 2026-10-21.
 * Subheadings: an h2 directly in the content is a subheading, set at
 * «Mellomtittel» 26→36 (nearer h3 than the 32→56 section h2). Section
 * headings sit inside pattern groups and are not direct children, so they
 * keep the element size. An explicit font-size class (!important) still wins.
 * Lists: number or bullet flush with the text edge, wrapped lines hanging
 * under the text. Markers are drawn with ::before (the list-item counter, so
 * «start» and «reversed» still work); list-style-type is a zero-width string,
 * not none, which would make Safari drop the list semantics. Check lists
 * (is-style-check) have their own markers.
 * ---------------------------------------------------------------------- */

.wp-block-post-content > h2.wp-block-heading,
.is-root-container > h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--subheading);
	line-height: 1.12;
}

.wp-block-post-content .wp-block-list:not(.is-style-check),
.is-root-container .wp-block-list:not(.is-style-check) {
	padding-inline-start: 0;
	list-style-type: "\200B";
}

.wp-block-post-content .wp-block-list:not(.is-style-check) > li,
.is-root-container .wp-block-list:not(.is-style-check) > li {
	position: relative;
	padding-inline-start: 1.5em;
}

.wp-block-post-content ul.wp-block-list:not(.is-style-check) > li::before,
.is-root-container ul.wp-block-list:not(.is-style-check) > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.04em;
	top: calc(0.5lh - 0.16em);
	width: 0.32em;
	height: 0.32em;
	border-radius: 50%;
	background: currentColor;
}

.wp-block-post-content ol.wp-block-list > li::before,
.is-root-container ol.wp-block-list > li::before {
	content: counter(list-item) ".";
	position: absolute;
	inset-inline-start: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
 * Buttons — arrow in its own circle (button-in-button). All button styles:
 * default (court-side), lime (styles/block/button-lime.json), outline
 * (theme.json styles.blocks.core/button.variations.outline).
 * Google Sans Flex has no → glyph; the arrow is the arrow icon. WPForms
 * submit buttons (.cs-form .wpforms-submit) share the look (theme.css «Forms»).
 * ::after = tinted circle (flex item), ::before = arrow on top of it.
 * ---------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link,
.cs-form .wpforms-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 48px;
	padding: 8px 8px 8px 1.75rem;
	box-sizing: border-box;
	transition: background-color var(--wp--custom--motion--default), color var(--wp--custom--motion--default), border-color var(--wp--custom--motion--default), transform var(--wp--custom--motion--default);
}

.wp-block-button .wp-block-button__link:active,
.cs-form .wpforms-submit:active {
	transform: scale(0.98);
}

.wp-block-button .wp-block-button__link::after,
.cs-form .wpforms-submit::after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 14%, transparent);
}

.wp-block-button .wp-block-button__link::before,
.cs-form .wpforms-submit::before {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: currentColor;
	-webkit-mask: var(--cs-icon-arrow) center / contain no-repeat;
	mask: var(--cs-icon-arrow) center / contain no-repeat;
	transition: transform 400ms var(--wp--custom--ease--spring);
}

.wp-block-button .wp-block-button__link:hover::before,
.cs-form .wpforms-submit:hover::before {
	transform: translateX(3px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	padding: 6px 6px 6px calc(1.75rem - 2px);
}

.wp-block-button.is-style-outline .wp-block-button__link::before {
	right: 14px;
}

/* -------------------------------------------------------------------------
 * Header — parts/header.html → patterns/header.php.
 * Static (default): sticky sand bar. The wrapper sticks, not the inner group
 * (gotchas 4.6). Overlay (className cs-header-overlay, front page): fixed and
 * transparent over the hero; theme.js adds .is-scrolled once the hero is gone.
 * ---------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--cs-admin-offset);
	z-index: 50;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-site-blocks > header.cs-header-overlay {
	position: fixed;
	inset: var(--cs-admin-offset) 0 auto 0;
	background: transparent;
	border-bottom-color: transparent;
	color: var(--wp--preset--color--base);
	transition: background-color 400ms var(--wp--custom--ease--spring), color 400ms var(--wp--custom--ease--spring), border-color 400ms var(--wp--custom--ease--spring);
}

.wp-site-blocks > header.cs-header-overlay.is-scrolled {
	background: var(--wp--preset--color--base);
	border-bottom-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.wp-site-blocks > .cs-header-overlay + * {
	margin-block-start: 0;
}

.cs-header__bar {
	min-height: var(--wp--custom--header--height);
	transition: min-height 400ms var(--wp--custom--ease--spring);
}

.cs-header-overlay.is-scrolled .cs-header__bar {
	min-height: 72px;
}

.cs-header .cs-logo {
	margin: 0;
}

.cs-header .cs-logo img {
	display: block;
	width: clamp(120px, 9vw, 176px);
	height: auto;
	border-radius: 0;
}

.cs-header .cs-logo--light,
.cs-header-overlay.is-scrolled .cs-logo--light {
	display: none;
}

.cs-header-overlay:not(.is-scrolled) .cs-logo--light {
	display: block;
}

.cs-header-overlay:not(.is-scrolled) .cs-logo--dark {
	display: none;
}

.cs-header__menu .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.cs-header__menu .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 2px;
	background: currentColor;
	transition: right 300ms var(--wp--custom--ease--spring);
}

.cs-header__menu .wp-block-navigation-item__content:hover::after,
.cs-header__menu .current-menu-item > .wp-block-navigation-item__content::after {
	right: 0;
}

/* Small lime pill: no circle, plain arrow. */
.cs-header__cta .wp-block-button__link {
	min-height: 44px;
	padding: 10px 18px 10px 20px;
	gap: 10px;
	font-size: 0.82rem;
}

.cs-header__cta .wp-block-button__link::after {
	width: 14px;
	height: 14px;
	border-radius: 0;
	background: currentColor;
	-webkit-mask: var(--cs-icon-arrow) center / contain no-repeat;
	mask: var(--cs-icon-arrow) center / contain no-repeat;
	transition: transform 400ms var(--wp--custom--ease--spring);
}

.cs-header__cta .wp-block-button__link::before {
	content: none;
}

.cs-header__cta .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* Mobile menu: the theme owns the breakpoint (gotchas 7.5). */
.cs-header__toggle .wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

.cs-header__toggle .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: calc(var(--cs-admin-offset) + 1.5rem);
}

.cs-header__toggle .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
}

.cs-header__toggle .is-menu-open .cs-menu-cta .wp-block-navigation-item__content {
	background: var(--wp--preset--color--match-point);
	padding: 0 0.12em;
}

@media (min-width: 900px) {
	.cs-header__toggle {
		display: none !important;
	}
}

@media (max-width: 899px) {
	.cs-header__menu,
	.cs-header__cta {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Hero — core/cover + styles/block/cover-hero.json, patterns/hero-video.php.
 * Text bottom-left on the calm part of the frame; hero-fade gradient covers
 * the lower half only. Mobile: H1 + button only, so the video stays visible.
 * ---------------------------------------------------------------------- */

.wp-block-cover.is-style-hero {
	/* 100dvh, not the block's 100vh: no iOS address-bar jump. */
	min-height: 100dvh !important;
	align-items: flex-end;
}

.wp-block-cover.is-style-hero .wp-block-cover__video-background {
	object-position: 50% 35%;
}

/* A positioned cover shrinks its inner container to the content; the hero
 * needs the full width so the alignwide copy lines up with the header.
 * Core: .wp-block-cover.has-custom-content-position.has-custom-content-position
 * .wp-block-cover__inner-container (0,4,0, loaded after theme.css) — one step more. */
.wp-block-cover.is-style-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
}

.cs-hero__copy {
	display: grid;
	gap: 1.375rem;
	justify-items: start;
}

.cs-hero__copy > * {
	margin: 0 !important;
}

.cs-hero__copy h1 {
	max-width: 11ch;
	line-height: 1; /* Sentence case since 2026-10-21: room for descenders. */
	color: var(--wp--preset--color--base);
}

.cs-hero__lead {
	max-width: 36ch;
}

@media (max-width: 899px) {
	.wp-block-cover.is-style-hero {
		padding-bottom: 28px !important;
	}

	.wp-block-cover.is-style-hero .wp-block-cover__video-background {
		object-position: 50% 30%;
	}

	.cs-hero__copy {
		gap: 1rem;
	}

	.cs-hero__copy h1 {
		max-width: 9ch;
	}

	.cs-hero__lead {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Marquee — styles/block/group-marquee.json, patterns/marquee.php.
 * theme.js appends an aria-hidden copy of the track; both tracks slide -100%.
 * ---------------------------------------------------------------------- */

.wp-block-group.is-style-marquee {
	overflow: hidden;
	gap: 0;
}

.wp-block-group.is-style-marquee > * {
	flex: none;
	animation: cs-marquee 36s linear infinite;
}

.wp-block-group.is-style-marquee:hover > * {
	animation-play-state: paused;
}

.cs-marquee__track p {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.cs-marquee__track p::after {
	content: "";
	width: 7px;
	height: 7px;
	margin: 0 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--match-point);
}

@keyframes cs-marquee {
	to {
		transform: translateX(-100%);
	}
}

@media (max-width: 899px) {
	.cs-marquee__track p::after {
		margin: 0 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-marquee {
		justify-content: center;
	}

	.wp-block-group.is-style-marquee > * {
		flex: 1 1 auto;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 8px;
		animation: none;
	}

	.wp-block-group.is-style-marquee > [aria-hidden="true"] {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Eyebrow — styles/block/paragraph-eyebrow.json. Chip — small lime pill.
 * ---------------------------------------------------------------------- */

.cs-chip,
.wp-block-post-terms.cs-chip {
	display: inline-flex;
	width: fit-content;
	margin: 0;
	padding: 8px 12px;
	border-radius: 9999px;
	background: var(--wp--preset--color--match-point);
	color: var(--wp--preset--color--contrast);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wp-block-post-terms.cs-chip {
	background: var(--wp--preset--color--seaglass);
	letter-spacing: 0.12em;
}

.wp-block-post-terms.cs-chip a {
	color: inherit;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Start picker — patterns/start-picker.php, styles/block/group-link-row.json.
 * One link per row, stretched over the row; text, arrow circle. No transform
 * on anything inside the row: it would become the containing block of the
 * stretched a::after and shrink the click area to the title on hover.
 * ---------------------------------------------------------------------- */

.cs-start__intro {
	align-self: flex-start;
}

@media (min-width: 782px) {
	.cs-start__intro {
		position: sticky;
		top: calc(var(--cs-admin-offset) + 96px);
	}
}

.cs-start__intro > * + * {
	margin-block-start: 1rem;
}

.cs-start__intro h2 {
	max-width: 12ch;
}

.cs-start__rows {
	border-top: 1.5px solid var(--wp--preset--color--contrast);
}

.cs-start__rows > .wp-block-group {
	margin-block-start: 0;
}

.wp-block-group.is-style-link-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 56px;
	column-gap: 20px;
	row-gap: 6px;
	align-items: center;
}

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

.is-style-link-row > h3,
.is-style-link-row > p {
	grid-column: 1;
}

.is-style-link-row > p {
	max-width: 46ch;
	color: var(--wp--preset--color--court-side-muted);
}

.is-style-link-row h3 {
	transition: padding-inline-start 400ms var(--wp--custom--ease--spring);
}

.is-style-link-row h3 a {
	color: inherit;
	text-decoration: none;
}

.is-style-link-row h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-group.is-style-link-row::after,
.wp-block-group.is-style-link-row::before {
	content: "";
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-self: center;
	transition: background-color 300ms var(--wp--custom--ease--spring), transform 400ms var(--wp--custom--ease--spring);
}

.wp-block-group.is-style-link-row::after {
	width: 56px;
	height: 56px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
}

.wp-block-group.is-style-link-row::before {
	z-index: 1;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--cs-icon-arrow) center / contain no-repeat;
	mask: var(--cs-icon-arrow) center / contain no-repeat;
}

.wp-block-group.is-style-link-row:hover::after {
	background: var(--wp--preset--color--contrast);
	transform: translateX(4px);
}

.wp-block-group.is-style-link-row:hover::before {
	background: var(--wp--preset--color--base);
	transform: translateX(4px);
}

.is-style-link-row:hover h3 {
	padding-inline-start: 6px;
}

.is-style-link-row:focus-within {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 4px;
}

.is-style-link-row h3 a:focus-visible {
	outline: none;
}

@media (max-width: 781px) {
	.wp-block-group.is-style-link-row {
		grid-template-columns: minmax(0, 1fr) 48px;
		column-gap: 16px;
		padding-block: 1.375rem;
	}

	.is-style-link-row > p {
		font-size: var(--wp--preset--font-size--small);
	}

	.wp-block-group.is-style-link-row::after,
	.wp-block-group.is-style-link-row::before {
		grid-row: 1 / span 2;
	}

	.wp-block-group.is-style-link-row::after {
		width: 48px;
		height: 48px;
	}
}

/* -------------------------------------------------------------------------
 * Bezel — styles/block/group-bezel.json. A series-coloured frame around a sand
 * core; the colour is the group's background (palette). Radii are concentric:
 * 24 → 16 → 10.
 * ---------------------------------------------------------------------- */

.cs-feature {
	gap: clamp(24px, 3vw, 48px) !important;
	margin: 0 !important;
}

.cs-feature > .wp-block-column {
	margin: 0 !important;
}

.cs-feature__photo {
	height: 100%;
}

.cs-feature__photo .wp-block-cover__image-background {
	transition: transform 900ms var(--wp--custom--ease--spring);
}

.is-style-bezel:hover .cs-feature__photo .wp-block-cover__image-background {
	transform: scale(1.03);
}

.cs-feature__text {
	padding: clamp(16px, 2.5vw, 40px) clamp(8px, 2.5vw, 40px) clamp(16px, 2.5vw, 32px) 0;
}

.cs-feature__text > * + * {
	margin-block-start: 1.125rem;
}

.cs-feature__text h2 {
	max-width: 12ch;
}

.cs-feature__text .has-large-font-size {
	max-width: 40ch;
}

.cs-note {
	max-width: 26ch;
	font-weight: 600;
	line-height: 1.35;
}

@media (max-width: 781px) {
	.cs-feature {
		padding: 8px 8px 20px !important;
	}

	/* core/cover renders min-height + aspect-ratio:unset inline. */
	.cs-feature__photo {
		height: auto;
		min-height: 0 !important;
		aspect-ratio: 4 / 3 !important;
	}

	.cs-feature__text {
		padding: 12px 10px 0;
	}
}

/* -------------------------------------------------------------------------
 * Check list — styles/block/list-check.json. Lime circle + check icon.
 * ---------------------------------------------------------------------- */

.wp-block-list.is-style-check {
	display: grid;
	gap: 14px 24px;
	margin-block-start: 1.375rem;
	list-style: none;
}

.cs-check-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.is-style-check > li {
	position: relative;
	padding-left: 36px;
}

.is-style-check > li::before,
.is-style-check > li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
}

.is-style-check > li::before {
	border-radius: 50%;
	background: var(--wp--preset--color--match-point);
}

.is-style-check > li::after {
	background: var(--wp--preset--color--contrast);
	-webkit-mask: var(--cs-icon-check) center / 13px no-repeat;
	mask: var(--cs-icon-check) center / 13px no-repeat;
}

.is-style-check > li strong {
	display: block;
	margin-bottom: 2px;
	font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 1099px) {
	.cs-check-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Steps — styles/block/group-outline-card.json in patterns/coaching.php.
 * ---------------------------------------------------------------------- */

.cs-steps {
	margin-block-start: 20px !important;
}

.cs-steps .is-style-outline-card {
	height: 100%;
	box-sizing: border-box;
}

.cs-step__num {
	flex: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
}

.cs-step__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

/* -------------------------------------------------------------------------
 * Section heads — heading left, lead right, bottom-aligned.
 * ---------------------------------------------------------------------- */

.cs-section-head {
	margin-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}

.cs-section-head h2 {
	max-width: 16ch;
}

.cs-row-head {
	margin-bottom: 1.75rem;
}

/* -------------------------------------------------------------------------
 * Testimonials — styles/block/quote-testimonial.json, patterns/testimonials.php.
 * ---------------------------------------------------------------------- */

.cs-quotes > .wp-block-column {
	display: flex;
}

.wp-block-quote.is-style-testimonial {
	flex: 1;
	display: grid;
	align-content: start;
	gap: 1.25rem;
	margin: 0;
	border-left: 0;
}

.wp-block-quote.is-style-testimonial::before {
	content: "\201C";
	display: block;
	height: 0.5em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 5rem;
	line-height: 0.6;
}

.wp-block-quote.is-style-testimonial > p {
	margin: 0;
}

.wp-block-quote.is-style-testimonial cite {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
}

.wp-block-quote.is-style-testimonial cite::before {
	content: "";
	width: 24px;
	height: 2px;
	background: currentColor;
}

/* -------------------------------------------------------------------------
 * Programs — patterns/programs.php. Bezel cards at small scale; the title link
 * is stretched over the card.
 * ---------------------------------------------------------------------- */

.cs-program {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	transition: transform 400ms var(--wp--custom--ease--spring);
}

.cs-program:hover {
	transform: translateY(-2px);
}

.cs-program__photo {
	flex: 0 0 128px;
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
}

.cs-program__photo img {
	width: 100%;
	height: 100%;
	min-height: 128px;
	object-fit: cover;
	transition: transform 900ms var(--wp--custom--ease--spring);
}

.cs-program:hover .cs-program__photo img {
	transform: scale(1.05);
}

.cs-program__body {
	flex: 1;
	display: grid;
	align-content: center;
}

.cs-program__tag {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cs-program__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

.cs-program__title a {
	color: inherit;
	text-decoration: none;
}

.cs-program__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cs-program:focus-within {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.cs-program__title a:focus-visible {
	outline: none;
}

.cs-program__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cs-program__go::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--cs-icon-arrow) center / contain no-repeat;
	mask: var(--cs-icon-arrow) center / contain no-repeat;
	transition: transform 300ms var(--wp--custom--ease--spring);
}

.cs-program:hover .cs-program__go::after {
	transform: translateX(3px);
}

@media (max-width: 781px) {
	.cs-program__photo {
		flex-basis: 104px;
	}
}

/* -------------------------------------------------------------------------
 * Archive bento — styles/block/post-template-bento.json in patterns/archive-bento.php.
 * Spans 7/5/5/7 on a 12-column grid; stacks below 782px.
 * ---------------------------------------------------------------------- */

.wp-block-post-template.is-style-bento {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 20px;
}

.is-style-bento > li {
	position: relative;
	display: grid;
	align-content: start;
	gap: 12px;
}

.is-style-bento > li > * {
	margin: 0;
}

.is-style-bento > li:nth-child(4n + 1),
.is-style-bento > li:nth-child(4n + 4) {
	grid-column: span 7;
}

.is-style-bento > li:nth-child(4n + 2),
.is-style-bento > li:nth-child(4n + 3) {
	grid-column: span 5;
}

/* Three items (fewer than a full set): the third spans the row as a wide card. */
.is-style-bento > li:nth-child(4n + 3):last-child {
	grid-column: 1 / -1;
}

.is-style-bento > li:nth-child(4n + 3):last-child .wp-block-post-featured-image img {
	aspect-ratio: 21 / 9;
}

.is-style-bento .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 16px;
}

.is-style-bento .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 900ms var(--wp--custom--ease--spring);
}

.is-style-bento > li:nth-child(4n + 1) .wp-block-post-featured-image img {
	aspect-ratio: 5 / 4;
}

.is-style-bento > li:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.is-style-bento > li > .wp-block-post-terms.cs-chip {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	background: var(--wp--preset--color--base);
}

.is-style-bento > li:nth-child(4n + 1) .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.is-style-bento .wp-block-post-title a,
.cs-card-grid .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.is-style-bento .wp-block-post-title a:hover,
.cs-card-grid .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.is-style-bento .wp-block-post-excerpt__excerpt {
	max-width: 44ch;
}

@media (max-width: 781px) {
	.wp-block-post-template.is-style-bento {
		grid-template-columns: minmax(0, 1fr);
	}

	.is-style-bento > li {
		grid-column: 1 !important;
	}

	.is-style-bento > li:nth-child(4n + 1) .wp-block-post-featured-image img {
		aspect-ratio: 16 / 10;
	}
}

/* Listing grid (home, archive, search). */
.cs-card-grid > li {
	display: grid;
	align-content: start;
	gap: 10px;
}

.cs-card-grid > li > * {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Instagram strip — styles/block/gallery-strip.json, patterns/instagram.php.
 * Square tiles edge to edge; snap-scroll row on mobile. Core's gallery width
 * rule uses :not(#individual-image) (id specificity) — matched here.
 * ---------------------------------------------------------------------- */

.wp-block-gallery.is-style-strip {
	position: relative;
	flex-wrap: nowrap;
	padding-inline: 8px;
	box-sizing: border-box;
}

.wp-block-gallery.is-style-strip figure.wp-block-image:not(#individual-image) {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
}

.wp-block-gallery.is-style-strip figure.wp-block-image img {
	aspect-ratio: 1;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 900ms var(--wp--custom--ease--spring);
}

.wp-block-gallery.is-style-strip figure.wp-block-image:hover img {
	transform: scale(1.05);
}

.wp-block-gallery.is-style-strip figure.wp-block-image a::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 300ms var(--wp--custom--ease--spring), transform 300ms var(--wp--custom--ease--spring);
}

.wp-block-gallery.is-style-strip figure.wp-block-image a::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 21px;
	right: 21px;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--contrast);
	-webkit-mask: var(--cs-icon-instagram) center / contain no-repeat;
	mask: var(--cs-icon-instagram) center / contain no-repeat;
	opacity: 0;
	transition: opacity 300ms var(--wp--custom--ease--spring);
}

.wp-block-gallery.is-style-strip figure.wp-block-image a:hover::after,
.wp-block-gallery.is-style-strip figure.wp-block-image a:focus-visible::after,
.wp-block-gallery.is-style-strip figure.wp-block-image a:hover::before,
.wp-block-gallery.is-style-strip figure.wp-block-image a:focus-visible::before {
	opacity: 1;
	transform: none;
}

@media (max-width: 781px) {
	.wp-block-gallery.is-style-strip {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-inline: var(--wp--preset--spacing--inset);
		scrollbar-width: none;
	}

	.wp-block-gallery.is-style-strip::-webkit-scrollbar {
		display: none;
	}

	.wp-block-gallery.is-style-strip.has-nested-images figure.wp-block-image:not(#individual-image) {
		flex: 0 0 62vw;
		width: 62vw;
		scroll-snap-align: start;
	}
}

/* -------------------------------------------------------------------------
 * Exercise library — templates archive-exercise.html, taxonomy.html,
 * single-exercise.html. Chips: styles/block/categories-chips.json.
 * ---------------------------------------------------------------------- */

.wp-block-categories.is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-categories.is-style-chips li {
	margin: 0;
}

.wp-block-categories.is-style-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 9999px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color var(--wp--custom--motion--default), color var(--wp--custom--motion--default);
}

.wp-block-categories.is-style-chips a:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-categories.is-style-chips .current-cat > a {
	background: var(--wp--preset--color--match-point);
	border-color: var(--wp--preset--color--match-point);
}

.cs-filter-row .is-style-eyebrow {
	min-width: 7.5rem;
}

.cs-exercise-grid {
	gap: 20px;
}

.cs-exercise-grid > li {
	position: relative;
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 1.25rem;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 16px;
	transition: border-color var(--wp--custom--motion--default), transform 400ms var(--wp--custom--ease--spring);
}

.cs-exercise-grid > li:hover {
	border-color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}

.cs-exercise-grid > li > * {
	margin: 0;
}

.cs-exercise-grid .wp-block-post-featured-image {
	margin: -0.5rem -0.5rem 0.25rem;
	overflow: hidden;
	border-radius: 10px;
}

/* Portrait 3/4 crop of the app's upright clips' posters: focus lower, where
 * the movement is (Henrik 2026-10-21). The block sets object-fit inline. */
.cs-exercise-grid .wp-block-post-featured-image img {
	object-position: center 80%;
}

.cs-exercise-grid .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.cs-exercise-grid .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cs-exercise-grid > li:focus-within {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.cs-exercise-grid .wp-block-post-title a:focus-visible {
	outline: none;
}

.cs-exercise-amount {
	font-weight: 600;
}

.cs-exercise-grid .cs-exercise-amount {
	color: var(--wp--preset--color--court-side-muted);
}

.cs-exercise-alias::before {
	content: "Også kjent som ";
}

/* An amount card whose bound amount is empty (paragraph removed server-side) hides. */
.cs-amount-card:not(:has(.cs-exercise-amount)) {
	display: none;
}

.cs-chip--line.wp-block-post-terms {
	padding: 6.5px 10.5px;
	border: 1.5px solid var(--wp--preset--color--contrast);
	background: transparent;
}

/*
 * Single exercise (single-exercise.html, Henrik 2026-10-21): the upright clip
 * and «Slik gjør du den» on screen together on desktop.
 * DOM order head → video → text is the phone order (title, watch, read).
 * From 782px a grid puts head and text in the left column and the video in
 * the right column across both rows, sticky and never taller than the
 * viewport, so it starts right under the header. Items that span the 1fr row
 * don't inflate the auto row, so the text follows the head without a gap.
 * No video (cs/exercise-video renders nothing, e.g. staging): one column at
 * the normal reading width.
 */
.cs-exercise-layout {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.cs-exercise-layout > * {
	min-width: 0;
	margin: 0 !important;
}

.cs-exercise-body > :first-child {
	margin-block-start: 0;
}

.cs-exercise-layout:not(:has(.cs-exercise-video)) {
	max-width: var(--wp--style--global--content-size);
}

@media (min-width: 782px) {
	.cs-exercise-layout:has(.cs-exercise-video) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"head media"
			"text media";
		column-gap: var(--wp--preset--spacing--60);
	}

	.cs-exercise-layout:has(.cs-exercise-video) > .cs-exercise-head {
		grid-area: head;
	}

	.cs-exercise-layout:has(.cs-exercise-video) > .cs-exercise-layout__text {
		grid-area: text;
	}

	.cs-exercise-layout__media {
		grid-area: media;
		position: sticky;
		top: calc(var(--cs-admin-offset) + 108px);
		align-self: start;
	}

	.cs-exercise-layout__media.is-portrait video {
		max-height: min(calc(100svh - var(--cs-admin-offset) - 140px), 760px);
	}
}

.cs-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--court-side-muted);
}

.cs-breadcrumbs a {
	color: inherit;
}

/* In the chip row: «Øvelser» first, a slash before the chips. */
.cs-exercise-terms .cs-breadcrumbs {
	display: flex;
	gap: 0.5em;
	align-items: center;
}

.cs-exercise-terms .cs-breadcrumbs::after {
	content: "/" / "";
	font-weight: 400;
	color: var(--wp--preset--color--line);
}

.cs-breadcrumbs__sep {
	color: var(--wp--preset--color--line);
}

/*
 * Exercise archives (archive-exercise.html, taxonomy.html; Henrik 2026-10-21):
 * portrait 3/4 photos, four cards across on desktop, three on tablets, two on
 * phones (one per row meant endless scrolling). Each card is a size container:
 * the title scales with the card so the longest word in any title
 * («Håndleddsmobilitet», 8.9× the font size in Cal Sans) never breaks, capped
 * at h3 size on desktop and 17px on phones; the card's inner column is
 * minmax(0, 1fr) so nothing inside can widen the grid. The related exercises
 * under a single exercise are three text-only cards and keep their layout.
 */
.cs-exercise-grid:not(.cs-related-exercises) > li {
	container-type: inline-size;
	grid-template-columns: minmax(0, 1fr);
}

.cs-exercise-grid:not(.cs-related-exercises) .wp-block-post-title {
	font-size: min(var(--wp--preset--font-size--x-large), 10.8cqi) !important;
	line-height: 1.15;
}

/* «Vis flere øvelser» / «Vis tidligere øvelser» (core query-pagination links,
 * assets/js/load-more.js): the outline button look — pill, 2px border,
 * uppercase 700, 48px. No arrow: they load, they don't lead away. */
.cs-load-more,
.cs-load-prev {
	margin-block: var(--wp--preset--spacing--50) 0;
}

.cs-load-prev {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.cs-load-more a,
.cs-load-prev a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: calc(0.875rem - 2px) calc(1.75rem - 2px);
	border: 2px solid currentColor;
	border-radius: 9999px;
	color: var(--wp--preset--color--contrast);
	font-size: clamp(0.9375rem, 0.915rem + 0.094vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.25;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--wp--custom--motion--default), color var(--wp--custom--motion--default);
}

.cs-load-more a:hover,
.cs-load-prev a:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.cs-load-more a:focus-visible,
.cs-load-prev a:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.cs-load-more a[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* One body part when the card is too narrow for the whole list: a chip
 * doesn't wrap, and «Helkropp, Kjerne, Skulder» needs ~230px. The exercise
 * page lists them all. */
@container (max-width: 239px) {
	.cs-exercise-grid:not(.cs-related-exercises) .cs-chip .wp-block-post-terms__separator,
	.cs-exercise-grid:not(.cs-related-exercises) .cs-chip .wp-block-post-terms__separator ~ a {
		display: none;
	}
}

@media (min-width: 782px) and (max-width: 1099px) {
	.cs-exercise-grid:not(.cs-related-exercises) {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 781px) {
	.cs-exercise-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px;
	}

	.cs-exercise-grid.cs-related-exercises {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.cs-exercise-grid:not(.cs-related-exercises) > li {
		gap: 8px;
		padding: 0.625rem 0.625rem 0.875rem;
		border-radius: 12px;
	}

	.cs-exercise-grid:not(.cs-related-exercises) .wp-block-post-featured-image {
		margin: -0.625rem -0.625rem 0.125rem;
		border-radius: 11px 11px 6px 6px;
	}

	.cs-exercise-grid:not(.cs-related-exercises) .wp-block-post-title {
		font-size: min(1.0625rem, 10.8cqi) !important;
	}
}

/* -------------------------------------------------------------------------
 * Footer — patterns/footer.php. Light, line on top (no court-side surface).
 * ---------------------------------------------------------------------- */

.cs-footer {
	border-top: 1.5px solid var(--wp--preset--color--contrast);
}

.cs-footer__logo {
	margin: 0;
}

.cs-footer__logo img {
	width: clamp(200px, 22vw, 320px);
	height: auto;
	border-radius: 0;
}

.cs-footer__tagline {
	margin-top: 1.125rem;
	max-width: 10ch;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	text-transform: uppercase;
}

.cs-footer__title {
	margin-bottom: 0.875rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.8125rem, 0.79rem + 0.094vw, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.3;
}

.cs-footer__links {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.cs-footer__links a {
	text-decoration: none;
}

.cs-footer__links a:hover {
	text-decoration: underline;
}

.cs-footer__bottom {
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--court-side-muted);
	font-weight: 600;
}

.cs-footer__bottom a {
	color: inherit;
}

@media (max-width: 781px) {
	.cs-footer__top {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cs-footer__brand {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
 * Forms — WPForms with base styling only (populate sets disable-css = 2).
 * Forms are content/forms/*.json; patterns form-application.php,
 * form-free-program.php, form-contact.php, exit-intent.php. cs-brand §6:
 * 52 px fields on sand, 1.5 px court-side-muted border, labels above, errors
 * bold court-side prefixed «!». Radio questions render as tap rows.
 * ---------------------------------------------------------------------- */

.cs-form {
	--cs-field-border: var(--wp--preset--color--court-side-muted);
	margin-block-start: var(--wp--preset--spacing--40);
}

/* .wpforms-container in the selector: wpforms-base.css sets 15px padding with
   the same specificity and loads after theme.css. */
.wpforms-container.cs-form .wpforms-field {
	padding: 0;
	margin-block-end: var(--wp--preset--spacing--30);
}

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

.cs-form legend {
	padding: 0;
}

.cs-form .wpforms-field-label,
.cs-form legend.wpforms-field-label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.cs-form .wpforms-required-label {
	color: inherit;
	font-weight: 400;
}

.cs-form input[type="text"],
.cs-form input[type="email"],
.cs-form input[type="tel"],
.cs-form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 52px;
	padding: 0 16px;
	border: 1.5px solid var(--cs-field-border);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.cs-form textarea {
	min-height: 120px;
	padding-block: 12px;
	resize: vertical;
}

.cs-form input:focus-visible,
.cs-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.cs-form .wpforms-field-description {
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--court-side-muted);
}

/* Radio questions: each choice a full-width tap row (min 52 px). */
.cs-form .wpforms-field-radio ul {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-form .wpforms-field-radio li {
	position: relative;
	margin: 0;
	padding: 0;
}

.cs-form .wpforms-field-radio input[type="radio"] {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 18px;
	width: 18px;
	height: 18px;
	margin: -9px 0 0;
	accent-color: var(--wp--preset--color--contrast);
}

.cs-form .wpforms-field-radio .wpforms-field-label-inline {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 52px;
	padding: 12px 16px 12px 48px;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	cursor: pointer;
	transition: border-color var(--wp--custom--motion--default), background-color var(--wp--custom--motion--default);
}

.cs-form .wpforms-field-radio .wpforms-field-label-inline:hover {
	border-color: var(--wp--preset--color--contrast);
}

.cs-form .wpforms-field-radio input:checked + .wpforms-field-label-inline {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--match-point);
	font-weight: 700;
}

/* The row carries the focus ring; the radio itself would draw a second one. */
.cs-form .wpforms-field-radio input:focus-visible {
	outline: none;
}

.cs-form .wpforms-field-radio input:focus-visible + .wpforms-field-label-inline {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* Consent / newsletter checkboxes. */
.cs-form .wpforms-field-checkbox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-form .wpforms-field-checkbox li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
}

.cs-form .wpforms-field-checkbox input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--contrast);
}

.cs-form .wpforms-field-checkbox .wpforms-field-label-inline {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Errors: bold court-side, prefixed «!» (never colour alone). */
.cs-form .wpforms-error,
.cs-form em.wpforms-error,
.cs-form label.wpforms-error,
.cs-wizard__error {
	display: block;
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.cs-form .wpforms-error:not(:empty)::before {
	content: "! ";
}

.cs-form input.wpforms-error,
.cs-form textarea.wpforms-error {
	border-width: 2px;
	border-color: var(--wp--preset--color--contrast);
}

.cs-form .wpforms-submit-container {
	margin-block-start: var(--wp--preset--spacing--40);
	padding: 0;
}

/* Small print under the button (inc/forms.php cs_forms_submit_note). */
.cs-form .cs-form__note {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--court-side-muted);
}

.cs-form .cs-form__note a {
	color: inherit;
}

.cs-form .wpforms-submit {
	min-height: 48px;
	padding: 8px 8px 8px 1.75rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.9375rem, 0.915rem + 0.094vw, 1rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.cs-form .wpforms-submit:hover {
	background: var(--wp--custom--hover--contrast);
}

.cs-form .wpforms-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.cs-form .wpforms-confirmation-container {
	padding: var(--wp--preset--spacing--40);
	border: 0;
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--seaglass);
	color: var(--wp--preset--color--contrast);
}

.cs-form .wpforms-confirmation-container h3 {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.cs-form .wpforms-confirmation-container p {
	margin: 0;
}

/* Wizard — assets/js/wizard.js on .cs-wizard (application form). */
#sok,
.cs-start__panel {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px);
}

.cs-wizard__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: var(--wp--preset--spacing--30);
}

.cs-wizard__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--court-side-muted);
}

.cs-wizard__back {
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cs-wizard__back[hidden] {
	display: block;
	visibility: hidden;
}

.cs-wizard__form .wpforms-field-radio legend.wpforms-field-label {
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.15; /* As h3: the questions read as headings, sentence case since 2026-10-21. */
}

.cs-wizard__form .cs-step .wpforms-required-label {
	display: none;
}

/* Answers: plain pill buttons that wrap, not radio rows (wizard.js builds them
   and hides the WPForms list). A click goes straight to the next question. */
/* display:grid on the radio list would otherwise beat the hidden attribute. */
.cs-form .wpforms-field-radio ul[hidden] {
	display: none;
}

.cs-choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.cs-choice {
	min-height: 52px;
	padding: 12px 24px;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--default), color var(--wp--custom--motion--default);
}

.cs-choice:hover {
	background: var(--wp--preset--color--match-point);
}

.cs-choice[aria-pressed="true"] {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.cs-choice:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.cs-wizard__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	align-items: center;
}

/* display:flex above would otherwise beat the hidden attribute. */
.cs-wizard__nav[hidden] {
	display: none;
}

.cs-wizard__nav .cs-wizard__error {
	margin: 0;
}

.cs-wizard__track {
	display: flex;
	gap: 6px;
	margin-block-end: var(--wp--preset--spacing--20);
}

.cs-wizard__track i {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--line);
	transition: background-color var(--wp--custom--motion--default);
}

.cs-wizard__track i.is-done {
	background: var(--wp--preset--color--contrast);
}

/* No-JS radio rows in two columns from tablet up (design 4 «.opts»). */
@media (min-width: 600px) {
	.cs-wizard__form .cs-step ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cs-wizard__form .cs-final-intro h3 {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.cs-wizard__form .cs-final-intro p {
	margin: 0;
}

/* Panel mode — the form inside «Hvor starter du?» (patterns/start-picker.php).
   The rows are step 1; the form appears in their place after the first click
   (wizard.js toggles is-flow). Without JS the form stays hidden and the rows
   link to /coaching/#sok. min-height keeps the page from jumping between steps. */
.cs-start__panel .wpforms-container.cs-wizard {
	display: none;
	margin-block-start: 0;
}

.cs-start__panel.is-flow .wpforms-container.cs-wizard {
	display: block;
}

.cs-start__panel.is-flow > .is-style-link-row {
	display: none;
}

@media (min-width: 782px) {
	.cs-start__panel {
		min-height: 560px;
	}
}

/* On seaglass, court-side-muted fails contrast (see «Contrast guard»). */
.cs-start__panel :is(.cs-wizard__count, .wpforms-field-description, .cs-final-intro p, .cs-form__note) {
	color: var(--wp--preset--color--contrast);
}

.cs-start__panel .cs-wizard__track i {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

.cs-start__panel .cs-wizard__track i.is-done {
	background: var(--wp--preset--color--contrast);
}

.cs-start__panel .cs-form .wpforms-confirmation-container {
	background: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: no-preference) {
	.cs-wizard__form .wpforms-field:not([hidden]) {
		animation: cs-step-in 250ms var(--wp--custom--ease--standard);
	}
}

@keyframes cs-step-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* -------------------------------------------------------------------------
 * Exit-intent — inc/exit-intent.php (native <dialog>), patterns/exit-intent.php,
 * assets/js/exit-intent.js. Pink bezel (free-program series colour) around a
 * sand core; pink is a frame only, never behind text (cs-brand §2).
 * ---------------------------------------------------------------------- */

.cs-exit {
	box-sizing: border-box;
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 8px;
	border: 0;
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--double-bounce);
	color: var(--wp--preset--color--contrast);
	overflow: auto;
}

.cs-exit::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);
}

.cs-exit__frame {
	position: relative;
	padding: var(--wp--preset--spacing--card);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--base);
}

.cs-exit__body > :first-child {
	margin-block-start: 0;
}

.cs-exit__body h2 {
	padding-inline-end: 40px;
}

.cs-exit__close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.cs-exit__close:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.cs-exit__dismiss {
	display: block;
	min-height: 44px;
	margin: var(--wp--preset--spacing--20) auto 0;
	padding: 0 8px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--court-side-muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cs-exit .cs-form {
	margin-block-start: var(--wp--preset--spacing--30);
}

.cs-exit .cs-form .wpforms-field {
	margin-block-end: var(--wp--preset--spacing--30);
}

@media (prefers-reduced-motion: no-preference) {
	.cs-exit[open] {
		animation: cs-step-in 250ms var(--wp--custom--ease--standard);
	}
}

/* Smash Balloon feed (patterns/instagram.php once cs_instagram_feed is set).
 * Same strip as the placeholder gallery: 8px gaps, 16px radius, one
 * snap-scroll row under 782px. Tile height follows the feed's aspect ratio
 * (3:4 «Insta Official», Henrik 2026-10-19); Smash Balloon's JS sizes it. */
.cs-instagram__feed #sb_instagram {
	padding: 0 !important; /* Smash Balloon writes inline padding. */
}

.cs-instagram__feed #sb_instagram #sbi_images {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px !important; /* Inline gap from the feed's image padding. */
	padding: 0 8px;
	box-sizing: border-box;
}

.cs-instagram__feed #sb_instagram .sbi_photo_wrap {
	overflow: hidden;
	border-radius: 16px;
}

@media (max-width: 781px) {
	.cs-instagram__feed #sb_instagram #sbi_images {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 62vw;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--preset--spacing--inset);
		padding-inline: var(--wp--preset--spacing--inset);
		scrollbar-width: none;
	}

	.cs-instagram__feed #sb_instagram #sbi_images::-webkit-scrollbar {
		display: none;
	}

	.cs-instagram__feed #sb_instagram .sbi_item {
		scroll-snap-align: start;
	}
}

/* -------------------------------------------------------------------------
 * Reveal — .cs-reveal children fade up (theme.js adds html.cs-js-reveal only
 * when motion is allowed, so no-JS and reduced-motion users see everything).
 * Never on the hero (LCP).
 * ---------------------------------------------------------------------- */

.cs-js-reveal .cs-reveal > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms var(--wp--custom--ease--standard), transform 700ms var(--wp--custom--ease--standard);
}

.cs-js-reveal .cs-reveal > :nth-child(2) {
	transition-delay: 90ms;
}

.cs-js-reveal .cs-reveal > :nth-child(3) {
	transition-delay: 180ms;
}

.cs-js-reveal .cs-reveal > :nth-child(4) {
	transition-delay: 270ms;
}

.cs-js-reveal .cs-reveal > .is-in {
	opacity: 1;
	transform: none;
}

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