/* ============================================================================
   OSKAR SYSTEMS — THEME STYLES
   ----------------------------------------------------------------------------
   The WordPress counterpart of src/app/globals.css in the Next.js site.

   Design tokens live in theme.json and arrive here as CSS custom properties
   (--wp--preset--color--brand-600, --wp--custom--section-y, and so on). This
   file holds only what theme.json cannot express.

   Almost everything below is keyed to a BLOCK STYLE — a named style the editor
   offers in the block's Styles panel (registered in inc/block-styles.php). That
   is what keeps "every page editable" practical: a person editing a page picks
   "Dark band" or "Card" from a list rather than remembering class names.

   Colours and sizes chosen in the editor win over the defaults here. Where a
   rule has to beat WordPress's own styles, it steps aside for a block that has
   had a colour chosen (.has-text-color, .has-link-color), and the header and
   footer take their shades from variables that such a choice resets. Brand
   colours come from the palette, so changing one in Styles changes it here.

   Contrast (WCAG 2.2 AA, against white), carried over from the Next.js site:
     brand-600 #0075C9  4.79:1  AA — button fill with white text
     brand-700 #005A9E  7.10:1  AAA — link text on light surfaces
     ink-700   #334155 10.87:1  AAA — body copy
     ink-500   #64748B  4.76:1  AA — captions only, never below 14px
     teal-500  #00A88F  3.00:1  DECORATION ONLY — never text on white
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------ */

:root {
	--oskar-header-h: var(--wp--custom--header-height, 4.5rem);
	scroll-padding-top: calc(var(--oskar-header-h) + 1.5rem);
	color-scheme: light;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* The diagonal bands and glows extend past their boxes by design. */
	overflow-x: clip;
}

* {
	min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-600);
	outline-offset: 3px;
	border-radius: 2px;
}

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

::selection {
	background-color: var(--wp--preset--color--brand-600);
	color: #ffffff;
}

/* Bands sit edge to edge. Without this, the default block gap puts a white
   strip between every coloured section. */
.wp-site-blocks > * + *,
.oskar-bands > * + * {
	margin-block-start: 0 !important;
}

/* ---------------------------------------------------------------------------
   Skip link
   ------------------------------------------------------------------------ */

.oskar-skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 100000;
	padding: 0.625rem 1rem;
	border-radius: 6px;
	background: var(--wp--preset--color--ink-900);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

.oskar-skip-link:focus {
	top: 1rem;
	color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------ */

/* Sticky goes on the template-part WRAPPER, not the group inside it. A sticky
   element only sticks within its parent's box, and the wrapper is exactly as
   tall as the header — so sticky on the inner group would scroll away with it.
   The wrapper is a direct child of .wp-site-blocks, which spans the page. */
.oskar-header-wrap {
	position: sticky;
	/* Sits under the admin bar when an editor is logged in, rather than behind it. */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.oskar-header {
	/* Variables, so a colour chosen in the Site Editor can replace them. */
	--oskar-strong: var(--wp--preset--color--ink-900);
	--oskar-link: var(--wp--preset--color--ink-700);
	--oskar-link-hover: var(--wp--preset--color--brand-700);
	min-height: var(--oskar-header-h);
	/* Centre the logo, menu and button in the bar, as the Next.js header did.
	   Until 1.1 they sat near the top, held there by a paragraph WordPress
	   wrapped round the old [oskar_logo] shortcode. */
	align-content: center;
	background-color: rgb(255 255 255 / 0.88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--ink-200);
}

.oskar-header .oskar-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
	border-radius: 2px;
}

.oskar-logo svg {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--wp--preset--color--brand-600);
	flex-shrink: 0;
}

.oskar-logo__word {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
}

.oskar-logo__word span {
	color: var(--wp--preset--color--brand-600);
}

.oskar-logo--dark {
	color: #ffffff;
}

.oskar-logo--dark svg {
	color: var(--wp--preset--color--brand-400);
}

.oskar-logo--dark .oskar-logo__word span {
	color: var(--wp--preset--color--brand-400);
}

/* Site identity: the Site Logo and Site Title blocks, side by side in the
   header and the footer. The title's size, weight and letter case are block
   settings, so they change in the Site Editor. Its colour comes from the
   header or footer it sits in — so a new text colour for either reaches it —
   unless one is chosen for the title itself. The blue first word is added by
   oskar_wordmark_accent() in inc/identity.php. */
.oskar-brand {
	flex-shrink: 0;
}

.wp-block-site-title.oskar-wordmark {
	margin: 0;
	white-space: nowrap;
}

.oskar-header .wp-block-site-title.oskar-wordmark,
.oskar-footer .wp-block-site-title.oskar-wordmark {
	color: var(--oskar-strong);
}

.wp-block-site-title.oskar-wordmark a {
	color: inherit;
	text-decoration: none;
}

.oskar-wordmark__accent {
	color: var(--wp--preset--color--brand-600);
}

.oskar-footer .oskar-wordmark__accent {
	color: var(--wp--preset--color--brand-400);
}

/* The Site Logo's "Light (for dark backgrounds)" style, used in the footer:
   the logo as a white silhouette. Right for a logo on a transparent
   background, which is what the theme installs. A logo saved as a JPEG has a
   solid background of its own and would turn into a white rectangle — give
   that one the Default style instead. */
.wp-block-site-logo.is-style-oskar-light img {
	filter: brightness(0) invert(1);
}

/* No colour here: core's `color: inherit` on menu links outranks this selector
   anyway, which is what lets a text colour chosen for the header or the
   Navigation block reach the menu. */
.oskar-header .wp-block-navigation a {
	text-decoration: none;
}

.oskar-header .wp-block-navigation a:hover,
.oskar-header .wp-block-navigation .current-menu-item > a {
	color: var(--oskar-link-hover);
}

.oskar-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 16rem;
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--ink-200) !important;
	border-radius: 10px;
	box-shadow: var(--wp--preset--shadow--lg);
}

.oskar-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
}

.oskar-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background-color: var(--wp--preset--color--ink-50);
}

.oskar-header-phone a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* Deliberately low specificity, so a link colour chosen for this paragraph in
   the Site Editor outranks it. */
.oskar-header-phone :where(a) {
	color: var(--oskar-link);
}

.oskar-header-phone :where(a:hover) {
	color: var(--oskar-link-hover);
}

/* A text colour chosen in the Site Editor — for the whole header, the
   Navigation block, a submenu or the phone number — takes over the link
   colours inside it, instead of being overruled by the blue hover. With no
   colour change left to show on hover, an underline does the job. */
.oskar-header.has-text-color,
.oskar-header .has-text-color {
	--oskar-strong: currentColor;
	--oskar-link: currentColor;
	--oskar-link-hover: currentColor;
}

.oskar-header.has-text-color .wp-block-navigation a:hover,
.oskar-header .has-text-color:not(.wp-block-site-title) a:not(.wp-element-button):hover {
	text-decoration: underline;
}

.oskar-header-cta .wp-block-button__link {
	white-space: nowrap;
}

/* Collapse to the overlay menu below 1080px, not WordPress's default 600px.
   Core only swaps the full menu for the hamburger at 600px, so on a tablet the
   whole menu is squeezed into the header and wraps onto a second line. The
   Next.js site collapsed at 1024px; this matches it. The extra .oskar-nav class
   is what outranks core's own min-width: 600px rules. */
@media (max-width: 1080px) {
	.oskar-header-phone {
		display: none;
	}

	.oskar-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.oskar-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 600px) {
	.oskar-header .oskar-header-cta {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Eyebrow and rule
   ------------------------------------------------------------------------ */

.is-style-oskar-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--eyebrow) !important;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-700);
}

/* The short gradient rule under section headings. */
.wp-block-separator.is-style-oskar-rule {
	width: 2.5rem !important;
	max-width: 2.5rem;
	height: 3px;
	margin-left: 0 !important;
	border: 0 !important;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--brand-600), var(--wp--preset--color--teal-500)) !important;
	opacity: 1;
}

.has-text-align-center + .wp-block-separator.is-style-oskar-rule,
.oskar-centred .wp-block-separator.is-style-oskar-rule {
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-style-oskar-lead,
p.is-style-oskar-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-600);
}

/* ---------------------------------------------------------------------------
   Bands — full-width sections
   ------------------------------------------------------------------------ */

.is-style-oskar-hero,
.is-style-oskar-band-dark,
.is-style-oskar-cta,
.is-style-oskar-cloud,
.oskar-band {
	position: relative;
	padding-top: var(--wp--custom--section-y);
	padding-bottom: var(--wp--custom--section-y);
}

.oskar-band-sm {
	padding-top: var(--wp--custom--section-y-sm);
	padding-bottom: var(--wp--custom--section-y-sm);
}

.is-style-oskar-cloud {
	background-color: var(--wp--preset--color--ink-50);
}

/* Dark bands. Roughly 20% of page area, per the brand guide's allocation. */
.is-style-oskar-hero,
.is-style-oskar-band-dark,
.is-style-oskar-cta {
	isolation: isolate;
	overflow: hidden;
	background-color: var(--wp--preset--color--ink-900);
	color: rgb(255 255 255 / 0.68);
}

/* Engineered grid. A pair of gradients, not an image. */
.is-style-oskar-hero::before,
.is-style-oskar-band-dark::before,
.is-style-oskar-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
	background-size: 4rem 4rem;
	pointer-events: none;
}

.is-style-oskar-hero::before,
.is-style-oskar-band-dark::before {
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* Single soft brand glow. */
.is-style-oskar-hero::after,
.is-style-oskar-cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--wp--preset--color--brand-600) 12%, transparent);
	filter: blur(64px);
	pointer-events: none;
}

.is-style-oskar-hero::after {
	right: -8rem;
	top: -6rem;
	width: 34rem;
	height: 34rem;
}

.is-style-oskar-cta::after {
	left: 50%;
	top: 50%;
	width: 46rem;
	height: 26rem;
	transform: translate(-50%, -50%);
}

.is-style-oskar-hero :where(h1, h2, h3, h4),
.is-style-oskar-band-dark :where(h1, h2, h3, h4),
.is-style-oskar-cta :where(h1, h2, h3, h4) {
	color: #ffffff;
}

.is-style-oskar-hero :where(p),
.is-style-oskar-band-dark :where(p),
.is-style-oskar-cta :where(p) {
	color: rgb(255 255 255 / 0.65);
}

.is-style-oskar-hero .is-style-oskar-eyebrow,
.is-style-oskar-band-dark .is-style-oskar-eyebrow,
.is-style-oskar-cta .is-style-oskar-eyebrow {
	color: var(--wp--preset--color--brand-400);
}

/* The Lead and muted styles set body-copy grey for light backgrounds, and
   `p.is-style-oskar-lead` outranks the dark bands' `:where(p)` rule above,
   because :where() carries no specificity. Result, measured in the browser: the
   lead on the hero, the dark band and the CTA band rendered dark grey on dark
   slate at 2.11:1 — a WCAG AA failure on the most prominent paragraph of each
   page. Two classes here outrank one class plus an element, restoring the
   Next.js site's values: white at 65% (7.48:1) and at 55% (5.76:1). */
.is-style-oskar-hero .is-style-oskar-lead,
.is-style-oskar-band-dark .is-style-oskar-lead,
.is-style-oskar-cta .is-style-oskar-lead {
	color: rgb(255 255 255 / 0.65);
}

.is-style-oskar-hero .oskar-muted,
.is-style-oskar-band-dark .oskar-muted,
.is-style-oskar-cta .oskar-muted {
	color: rgb(255 255 255 / 0.55);
}

.is-style-oskar-hero a:not(.wp-element-button),
.is-style-oskar-band-dark a:not(.wp-element-button),
.is-style-oskar-cta a:not(.wp-element-button) {
	color: rgb(255 255 255 / 0.85);
}

.is-style-oskar-hero a:not(.wp-element-button):hover,
.is-style-oskar-band-dark a:not(.wp-element-button):hover,
.is-style-oskar-cta a:not(.wp-element-button):hover {
	color: #ffffff;
}

.is-style-oskar-cta {
	text-align: center;
}

.is-style-oskar-cta .wp-block-buttons {
	justify-content: center;
}

/* The 45° motif: the diagonal through the "O" in the mark, meaning current
   state to optimised state. Used as the edge of the dark bands. */
.is-style-oskar-hero {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5rem), 0 100%);
	padding-bottom: calc(var(--wp--custom--section-y) + 2.5rem);
}

.is-style-oskar-band-dark {
	clip-path: polygon(0 3.5rem, 100% 0, 100% calc(100% - 3.5rem), 0 100%);
	padding-top: calc(var(--wp--custom--section-y) + 2rem);
	padding-bottom: calc(var(--wp--custom--section-y) + 2rem);
}

.is-style-oskar-cta {
	clip-path: polygon(0 3.5rem, 100% 0, 100% 100%, 0 100%);
	padding-top: calc(var(--wp--custom--section-y) + 2rem);
}

@media (min-width: 1024px) {
	.is-style-oskar-hero {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6rem), 0 100%);
		padding-bottom: calc(var(--wp--custom--section-y) + 4rem);
	}

	.is-style-oskar-band-dark {
		clip-path: polygon(0 6rem, 100% 0, 100% calc(100% - 6rem), 0 100%);
		padding-top: calc(var(--wp--custom--section-y) + 3.5rem);
		padding-bottom: calc(var(--wp--custom--section-y) + 3.5rem);
	}

	.is-style-oskar-cta {
		clip-path: polygon(0 6rem, 100% 0, 100% 100%, 0 100%);
		padding-top: calc(var(--wp--custom--section-y) + 3.5rem);
	}
}

/* Inside the editor the clip would hide the block toolbar and make the edge
   awkward to select, so it is off while editing. */
.editor-styles-wrapper .is-style-oskar-hero,
.editor-styles-wrapper .is-style-oskar-band-dark,
.editor-styles-wrapper .is-style-oskar-cta {
	clip-path: none;
}

/* ---------------------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------------------ */

.oskar-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: rgb(255 255 255 / 0.45);
}

.oskar-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.oskar-breadcrumbs li + li::before {
	content: "/";
	color: rgb(255 255 255 / 0.25);
}

.oskar-breadcrumbs a {
	display: inline-block;
	padding-block: 0.25rem;
	color: rgb(255 255 255 / 0.55) !important;
	text-decoration: none;
}

.oskar-breadcrumbs a:hover {
	color: #ffffff !important;
	text-decoration: underline;
}

.oskar-breadcrumbs [aria-current="page"] {
	color: rgb(255 255 255 / 0.75);
}

/* ---------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------ */

.is-style-oskar-card {
	position: relative;
	height: 100%;
	padding: 1.75rem;
	background-color: #ffffff;
	border: 1px solid var(--wp--preset--color--ink-200);
	border-radius: var(--wp--custom--radius--xl);
	transition:
		transform 0.3s var(--wp--custom--ease),
		box-shadow 0.3s var(--wp--custom--ease),
		border-color 0.3s var(--wp--custom--ease);
}

.is-style-oskar-card > * + * {
	margin-block-start: 0.625rem;
}

.oskar-card-linked {
	position: relative;
}

/* Linked tiles on a dark band: white titles, no lift, a lighter slate on hover. */
.oskar-dark-tile.oskar-card-linked .wp-block-heading a {
	color: #ffffff;
}

.oskar-dark-tile.oskar-card-linked:hover {
	transform: none;
	box-shadow: none;
	background-color: var(--wp--preset--color--ink-800);
}

.oskar-dark-tile.oskar-card-linked:hover .wp-block-heading a {
	color: #ffffff;
}

.oskar-dark-tile .oskar-card-cue:not(.has-text-color) {
	color: var(--wp--preset--color--brand-400) !important;
}

.oskar-dark-tile p.oskar-muted:not(.has-text-color) {
	color: rgb(255 255 255 / 0.55) !important;
}

/* A linked card: the heading link is stretched over the whole card, so the
   entire surface is clickable while the accessible name stays the heading. */
.oskar-card-linked:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--ink-300, #a6b8c8);
	box-shadow: var(--wp--preset--shadow--lg);
}

.oskar-card-linked .wp-block-heading a {
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
}

.oskar-card-linked .wp-block-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.oskar-card-linked:hover .wp-block-heading a {
	color: var(--wp--preset--color--brand-700);
}

.oskar-card-linked:focus-within {
	outline: 2px solid var(--wp--preset--color--brand-600);
	outline-offset: 3px;
}

.oskar-card-linked .wp-block-heading a:focus-visible {
	outline: none;
}

.oskar-card-cue {
	margin-top: auto !important;
	padding-top: 1.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem !important;
	font-weight: 700;
}

.oskar-card-cue:not(.has-text-color) {
	color: var(--wp--preset--color--brand-700) !important;
}

.oskar-card-cue::after {
	content: " \2192";
	display: inline-block;
	transition: transform 0.3s var(--wp--custom--ease);
}

.oskar-card-linked:hover .oskar-card-cue::after {
	transform: translateX(4px);
}

.is-style-oskar-card.oskar-card-linked,
.is-style-oskar-card.oskar-card-flex {
	display: flex;
	flex-direction: column;
}

/* Brand-bordered feature panel with the 45° corner motif. */
.is-style-oskar-card-feature {
	position: relative;
	overflow: hidden;
	padding: 1.75rem;
	background-color: #ffffff;
	border: 2px solid var(--wp--preset--color--brand-600);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--brand);
}

.is-style-oskar-card-feature::before {
	content: "";
	position: absolute;
	right: -2rem;
	top: -2rem;
	width: 6rem;
	height: 6rem;
	transform: rotate(45deg);
	background: color-mix(in srgb, var(--wp--preset--color--brand-600) 8%, transparent);
	pointer-events: none;
}

/* Quiet grey panel. */
.is-style-oskar-panel {
	padding: 1.75rem;
	background-color: var(--wp--preset--color--ink-50);
	border: 1px solid var(--wp--preset--color--ink-200);
	border-radius: var(--wp--custom--radius--xl);
}

.is-style-oskar-panel > * + *,
.is-style-oskar-card-feature > * + * {
	margin-block-start: 0.75rem;
}

/* Cards on a dark band. */
.oskar-dark-tile {
	height: 100%;
	padding: 1.75rem;
	background-color: var(--wp--preset--color--ink-900);
}

.oskar-dark-tiles {
	gap: 1px !important;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--xl);
	background-color: rgb(255 255 255 / 0.1);
}

.oskar-dark-tile h3 {
	font-size: 1rem !important;
}

/* ---------------------------------------------------------------------------
   Lists
   ------------------------------------------------------------------------ */

.is-style-oskar-dash,
.is-style-oskar-check,
.is-style-oskar-dot {
	list-style: none;
	padding-left: 0;
}

.is-style-oskar-dash > li,
.is-style-oskar-check > li,
.is-style-oskar-dot > li {
	position: relative;
	padding-left: 1.5rem;
}

.is-style-oskar-dash > li + li,
.is-style-oskar-check > li + li,
.is-style-oskar-dot > li + li {
	margin-top: 0.625rem;
}

.is-style-oskar-dash > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 0.75rem;
	height: 1px;
	background-color: var(--wp--preset--color--brand-600);
}

.is-style-oskar-check > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1rem;
	height: 1rem;
	background-color: var(--wp--preset--color--teal-700);
	-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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.is-style-oskar-dot > li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.72em;
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--ink-400);
}

/* On a dark band the check turns teal-400 and text lightens. */
.is-style-oskar-hero .is-style-oskar-check > li,
.is-style-oskar-band-dark .is-style-oskar-check > li,
.is-style-oskar-band-dark .is-style-oskar-dot > li {
	color: rgb(255 255 255 / 0.6);
}

.is-style-oskar-hero .is-style-oskar-check > li::before {
	background-color: var(--wp--preset--color--teal-400);
}

.is-style-oskar-band-dark .is-style-oskar-dot > li::before {
	background-color: var(--wp--preset--color--brand-400);
}

/* Horizontal proof-point row under a hero. */
.oskar-inline-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem 1.75rem;
}

.oskar-inline-list > li + li {
	margin-top: 0 !important;
}

.oskar-inline-list > li {
	font-size: 0.8125rem;
}

/* Jump links to each sector, as outlined chips on the dark hero. */
.oskar-anchor-list {
	gap: 0.625rem !important;
	margin-top: 1rem;
}

.oskar-anchor-list > li {
	padding-left: 0 !important;
}

.oskar-anchor-list > li::before {
	display: none;
}

.oskar-anchor-list a {
	display: inline-flex;
	padding: 0.5rem 1rem;
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
}

.oskar-anchor-list:not(.has-link-color) a {
	color: rgb(255 255 255 / 0.8) !important;
}

.oskar-anchor-list a:hover {
	border-color: rgb(255 255 255 / 0.5);
	background-color: rgb(255 255 255 / 0.05);
}

.oskar-anchor-list:not(.has-link-color) a:hover {
	color: #ffffff !important;
}

/* Numbered rows: 01, 02, 03 — problems and next steps. */
.is-style-oskar-numbered {
	counter-reset: oskar-step;
	list-style: none;
	padding-left: 0;
}

.is-style-oskar-numbered > li {
	counter-increment: oskar-step;
	position: relative;
	padding: 1.5rem 0 0 2.75rem;
	border-top: 1px solid var(--wp--preset--color--ink-200);
}

.is-style-oskar-numbered > li::before {
	content: counter(oskar-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.625rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--brand-600);
}

.is-style-oskar-numbered > li > strong:first-child {
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink-900);
}

@media (min-width: 782px) {
	.is-style-oskar-numbered.oskar-two-col {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.5rem;
		row-gap: 2rem;
	}
}

/* ---------------------------------------------------------------------------
   Numbered grid — "why businesses call us" and similar
   ----------------------------------------------------------------------------
   Built from Group blocks each holding a real Heading 3 and a paragraph, so the
   heading hierarchy survives. The 01, 02, 03 numbering is a CSS counter: add,
   remove or reorder an item in the editor and the numbers follow.
   ------------------------------------------------------------------------ */

.oskar-numbered-grid {
	counter-reset: oskar-item;
}

.oskar-numbered-grid > .wp-block-group {
	counter-increment: oskar-item;
	position: relative;
	padding: 1.5rem 0 0 2.75rem;
	border-top: 1px solid var(--wp--preset--color--ink-200);
}

.oskar-numbered-grid > .wp-block-group::before {
	content: counter(oskar-item, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.625rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--brand-600);
}

.oskar-numbered-grid > .wp-block-group > * + * {
	margin-block-start: 0.375rem;
}

/* ---------------------------------------------------------------------------
   Process steps
   ------------------------------------------------------------------------ */

.oskar-steps {
	counter-reset: oskar-step;
}

.oskar-steps > .wp-block-group {
	counter-increment: oskar-step;
}

.oskar-steps > .wp-block-group > .wp-block-heading:first-child::before {
	content: counter(oskar-step, decimal-leading-zero);
	display: inline-block;
	margin-right: 0.75rem;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--wp--preset--color--brand-600) 25%, transparent);
	vertical-align: -0.1em;
}

.oskar-steps > .wp-block-group > * + * {
	margin-block-start: 0.75rem;
}

.oskar-step__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem !important;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.oskar-step__num:not(.has-text-color) {
	color: color-mix(in srgb, var(--wp--preset--color--brand-600) 25%, transparent) !important;
}

.oskar-step__body {
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--ink-200);
}

/* ---------------------------------------------------------------------------
   Definition-style rows (scope, contact details)
   ------------------------------------------------------------------------ */

.oskar-rows > .wp-block-group {
	padding-block: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--ink-200);
}

.oskar-rows > .wp-block-group:last-child {
	border-bottom: 1px solid var(--wp--preset--color--ink-200);
}

.oskar-rows .oskar-row__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink-900);
}

@media (min-width: 640px) {
	.oskar-rows > .wp-block-group {
		display: grid;
		grid-template-columns: minmax(0, 11rem) 1fr;
		gap: 1.5rem;
	}

	.oskar-rows > .wp-block-group > * {
		margin: 0 !important;
	}
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */

.wp-element-button,
.wp-block-button__link {
	box-shadow: var(--wp--preset--shadow--brand);
	transition:
		background-color 0.2s var(--wp--custom--ease),
		color 0.2s var(--wp--custom--ease),
		transform 0.2s var(--wp--custom--ease);
}

.wp-block-button__link:active {
	transform: translateY(1px);
}

.wp-block-button.is-style-oskar-on-dark .wp-block-button__link {
	background-color: #ffffff;
	color: var(--wp--preset--color--ink-900);
	box-shadow: none;
}

.wp-block-button.is-style-oskar-on-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink-50);
	color: var(--wp--preset--color--ink-900);
}

.wp-block-button.is-style-oskar-outline .wp-block-button__link {
	background-color: #ffffff;
	color: var(--wp--preset--color--ink-900);
	border: 2px solid var(--wp--preset--color--ink-200);
	box-shadow: none;
}

.wp-block-button.is-style-oskar-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink-900);
	background-color: var(--wp--preset--color--ink-50);
}

.wp-block-button.is-style-oskar-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--ink-900);
	color: #ffffff;
	box-shadow: none;
}

.wp-block-button.is-style-oskar-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink-800);
}

.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-700);
	outline-offset: 3px;
}

.is-style-oskar-hero .wp-block-button__link:focus-visible,
.is-style-oskar-cta .wp-block-button__link:focus-visible,
.is-style-oskar-band-dark .wp-block-button__link:focus-visible {
	outline-color: #ffffff;
}

.oskar-arrow .wp-block-button__link::after {
	content: " \2192";
}

/* ---------------------------------------------------------------------------
   FAQ accordion — core Details block
   ------------------------------------------------------------------------ */

.wp-block-details.is-style-oskar-faq {
	padding-block: 0.25rem;
	border-bottom: 1px solid var(--wp--preset--color--ink-200);
}

.oskar-faqs > .wp-block-details.is-style-oskar-faq:first-child {
	border-top: 1px solid var(--wp--preset--color--ink-200);
}

.wp-block-details.is-style-oskar-faq summary {
	position: relative;
	padding: 1.25rem 2.5rem 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink-900);
}

.wp-block-details.is-style-oskar-faq summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-oskar-faq summary::after {
	content: "";
	position: absolute;
	right: 0.25rem;
	top: 1.5rem;
	width: 1.125rem;
	height: 1.125rem;
	background-color: var(--wp--preset--color--brand-600);
	-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='m6 9 6 6 6-6'/%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='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s var(--wp--custom--ease);
}

.wp-block-details.is-style-oskar-faq[open] summary::after {
	transform: rotate(180deg);
}

.wp-block-details.is-style-oskar-faq summary:hover {
	color: var(--wp--preset--color--brand-700);
}

.wp-block-details.is-style-oskar-faq > :not(summary) {
	padding-right: 2.5rem;
	padding-bottom: 1.25rem;
	margin-top: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-600);
}

/* ---------------------------------------------------------------------------
   Comparison table and article tables
   ------------------------------------------------------------------------ */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	min-width: 36rem;
	border-collapse: collapse;
}

.wp-block-table thead {
	border-bottom: 2px solid var(--wp--preset--color--ink-900) !important;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.875rem 1.5rem 0.875rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--ink-200);
	text-align: left;
	vertical-align: top;
	font-size: 0.9375rem;
}

.wp-block-table th,
.wp-block-table tbody td:first-child {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--ink-900);
}

.wp-block-table figcaption {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-500);
}

/* ---------------------------------------------------------------------------
   Articles
   ------------------------------------------------------------------------ */

.oskar-article .wp-block-post-content {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.oskar-article .wp-block-post-content h2 {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--wp--preset--color--ink-200);
	font-size: var(--wp--preset--font-size--h-3);
}

.oskar-article .wp-block-post-content h3 {
	margin-top: 2.5rem;
	font-size: 1.125rem;
}

.oskar-article .wp-block-post-content ul:not([class*="is-style-"]) li::marker {
	color: var(--wp--preset--color--brand-600);
}

.oskar-callout {
	margin-block: 2.5rem !important;
}

.oskar-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.8125rem;
	color: rgb(255 255 255 / 0.45);
}

.oskar-meta a {
	color: rgb(255 255 255 / 0.6) !important;
}

/* Article hero: category, standfirst and meta. */
.oskar-hero-terms a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.oskar-hero-terms:not(.has-link-color) a {
	color: var(--wp--preset--color--brand-400) !important;
}

.oskar-standfirst .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	color: rgb(255 255 255 / 0.65);
}

.oskar-post-card .wp-block-post-date {
	margin-top: auto;
	padding-top: 1rem;
	color: var(--wp--preset--color--ink-500);
}

/* Insights index cards. */
.oskar-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.oskar-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
}

.oskar-post-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.oskar-post-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--brand-700);
}

.oskar-post-card .wp-block-post-terms a {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--brand-700);
}

/* ---------------------------------------------------------------------------
   Enquiry form
   ------------------------------------------------------------------------ */

.oskar-form {
	display: grid;
	gap: 2rem;
}

.oskar-form fieldset {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.oskar-form legend {
	margin-bottom: 1rem;
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-700);
}

.oskar-form__grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.oskar-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.oskar-form__hint {
	margin: -0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-600);
}

.field-label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink-900);
}

.field-optional {
	font-weight: 500;
	color: var(--wp--preset--color--ink-500);
}

.field-input {
	display: block;
	/* Padding and border sit inside the declared width. Without this the
	   fields measure 380px inside a 350px column on a 390px phone and push
	   the whole page sideways. WordPress does not reset form controls, and
	   these are the only full-width controls in the theme. */
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-900);
	background-color: #ffffff;
	border: 1px solid var(--wp--preset--color--ink-400);
	border-radius: 6px;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.field-input::placeholder {
	color: var(--wp--preset--color--ink-400);
}

.field-input:hover {
	border-color: var(--wp--preset--color--ink-500);
}

.field-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-600);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand-600) 15%, transparent);
}

.field-input[aria-invalid="true"] {
	border-color: #b42318;
}

textarea.field-input {
	min-height: 8rem;
	resize: vertical;
}

select.field-input {
	appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
}

.field-error {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	color: #b42318;
}

.oskar-checks {
	display: grid;
	gap: 0.5rem 1.5rem;
}

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

.oskar-check {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	min-height: 2rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-700);
	cursor: pointer;
}

.oskar-check input {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.2rem;
	accent-color: var(--wp--preset--color--brand-600);
}

/* Off-screen rather than display:none: naive bots skip hidden fields but fill
   positioned ones. Never focusable, never announced. */
.oskar-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.oskar-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--ink-200);
}

.oskar-form__privacy {
	max-width: 28rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-600);
}

.oskar-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: 6px;
	background-color: var(--wp--preset--color--brand-600);
	box-shadow: var(--wp--preset--shadow--brand);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}

.oskar-form__submit:hover {
	background-color: var(--wp--preset--color--brand-700);
}

.oskar-form__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-700);
	outline-offset: 3px;
}

.oskar-alert {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	border-radius: 10px;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.oskar-alert--error {
	border: 1px solid #f0c2be;
	background-color: #fef4f3;
	color: #7a271a;
}

.oskar-alert--success {
	display: block;
	padding: 2rem;
	border: 2px solid var(--wp--preset--color--teal-700);
	background-color: #ffffff;
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wp--preset--color--ink-700);
}

.oskar-alert--success h2 {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--h-3);
}

.oskar-alert:focus {
	outline: 2px solid var(--wp--preset--color--brand-600);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Diagram
   ------------------------------------------------------------------------ */

.oskar-diagram svg {
	display: block;
	width: 100%;
	max-width: 34rem;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 1023px) {
	.oskar-hide-below-lg {
		display: none !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.oskar-diagram .oskar-pulse {
		animation: oskar-dash 5s linear infinite;
	}
}

@keyframes oskar-dash {
	to {
		stroke-dashoffset: -164;
	}
}

/* ---------------------------------------------------------------------------
   Reveal on scroll — progressive enhancement only
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.oskar-reveal > * {
			animation: oskar-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
	}
}

@keyframes oskar-reveal {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */

.oskar-footer {
	/* The design's shades of white, as variables so a colour chosen in the
	   Site Editor can replace them. Body text needs no variable: it inherits
	   the footer's own colour. */
	--oskar-strong: var(--wp--preset--color--white);
	--oskar-link: rgb(255 255 255 / 0.6);
	--oskar-link-hover: var(--wp--preset--color--white);
	position: relative;
	isolation: isolate;
	background-color: var(--wp--preset--color--ink-900);
	/* Rules and the grid are drawn in the text colour, faintly, so they stay
	   visible on whatever background the footer is given. */
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	color: rgb(255 255 255 / 0.55);
}

/* A text colour chosen in the Site Editor — for the whole footer, or any group
   or paragraph inside it — replaces the shades of white for everything within,
   so a footer given a light background can be made readable in two clicks. */
.oskar-footer.has-text-color,
.oskar-footer .has-text-color {
	--oskar-strong: currentColor;
	--oskar-link: currentColor;
	--oskar-link-hover: currentColor;
}

.oskar-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, color-mix(in srgb, currentColor 9%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, currentColor 9%, transparent) 1px, transparent 1px);
	background-size: 4rem 4rem;
}

.oskar-footer h2 {
	margin: 0 0 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oskar-strong);
}

/* Unless a size has been chosen for that heading in the editor. */
.oskar-footer h2:not([class*="-font-size"]) {
	font-size: 0.75rem !important;
}

.oskar-footer p,
.oskar-footer li {
	font-size: 0.875rem;
}

.oskar-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oskar-footer li + li {
	margin-top: 0.125rem;
}

/* Links in the footer's text and lists — not the logo or the site title.
   Low specificity on purpose, so a link colour chosen in the editor wins. */
.oskar-footer :where(p:not(.wp-block-site-title), li) :where(a) {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--oskar-link);
	text-decoration: none;
}

.oskar-footer :where(p:not(.wp-block-site-title), li) :where(a:hover) {
	color: var(--oskar-link-hover);
	text-decoration: underline;
}

.oskar-footer .oskar-footer__tagline {
	margin-top: 0.875rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: color-mix(in srgb, var(--oskar-strong) 80%, transparent);
}

.oskar-footer__legal {
	padding-top: 1.75rem;
	border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}

.oskar-footer:not(.has-text-color) .oskar-footer__legal:not(.has-text-color) {
	--oskar-link: rgb(255 255 255 / 0.42);
	color: rgb(255 255 255 / 0.42);
}

.oskar-footer__legal p,
.oskar-footer__legal a {
	font-size: 0.8125rem;
}

.oskar-footer__disclaimer {
	max-width: 48rem;
	line-height: 1.6;
}

.oskar-footer .oskar-footer__disclaimer:not([class*="-font-size"]) {
	font-size: 0.75rem;
}

.oskar-footer:not(.has-text-color) .oskar-footer__disclaimer:not(.has-text-color) {
	color: rgb(255 255 255 / 0.35);
}

/* ---------------------------------------------------------------------------
   Sidebar — the "Page with sidebar" and "Article with sidebar" templates
   ------------------------------------------------------------------------ */

/* Stays in view beside long content once the two columns sit side by side.
   Below 782px the columns stack and the sidebar simply follows the content. */
@media (min-width: 782px) {
	.oskar-with-sidebar > .wp-block-column > .oskar-sidebar-wrap {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--oskar-header-h) + 1.5rem);
	}
}

.oskar-sidebar h2 {
	margin: 0;
}

.oskar-latest-posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oskar-latest-posts li + li {
	margin-top: 0.875rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--wp--preset--color--ink-200);
}

.oskar-latest-posts :where(a) {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
}

.oskar-latest-posts :where(a:hover) {
	color: var(--wp--preset--color--brand-700);
	text-decoration: underline;
}

/* ink-600, not ink-500: the design system keeps ink-500 for 14px and up. */
.oskar-latest-posts .wp-block-latest-posts__post-date {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-600);
}

/* ---------------------------------------------------------------------------
   Utilities used by generated content
   ------------------------------------------------------------------------ */

.oskar-measure {
	max-width: 48rem;
}

/* The Next.js site put 3.5rem between a section heading and the grid or
   columns under it — far more than the default block gap. Paragraphs directly
   under a heading keep the normal, closer spacing. */
.oskar-section-heading + .wp-block-group,
.oskar-section-heading + .wp-block-columns {
	margin-block-start: 3rem !important;
}

.oskar-centred {
	margin-inline: auto;
	text-align: center;
}

.oskar-muted {
	color: var(--wp--preset--color--ink-600);
}

.oskar-tight > * + * {
	margin-block-start: 0.5rem !important;
}

/* ---------------------------------------------------------------------------
   Print — content must never be invisible because of decoration
   ------------------------------------------------------------------------ */

@media print {
	.oskar-reveal > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.is-style-oskar-hero,
	.is-style-oskar-band-dark,
	.is-style-oskar-cta {
		clip-path: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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