/*
 * Šablona — the theme's only stylesheet.
 *
 * Loaded once on the front end and injected into the editor canvas with
 * add_editor_style(), so the editor and the site render from the same bytes.
 *
 * Design tokens live in theme.json. This file aliases them to short names with
 * hardcoded fallbacks (so the editor iframe still looks right before the
 * presets land) and then styles only what block supports cannot: the header,
 * the mobile nav, counters, and third-party form output.
 *
 * Class names use a SINGLE hyphen, never a double one. A `--` is illegal
 * inside an HTML comment, so a BEM class in a block's className attribute has
 * to be escaped as -- in the block JSON, and hand-written markup gets
 * that wrong every time. `is-style-*` variations and single-hyphen names make
 * the whole problem unreachable.
 */

/* ------------------------------------------------------------------ tokens */

:root,
.editor-styles-wrapper {
	--cream: var(--wp--preset--color--base, #f5f0e5);
	--sand: var(--wp--preset--color--base-2, #e7dcc6);
	--white: var(--wp--preset--color--surface, #fffcf7);
	--sage: var(--wp--preset--color--sage, #a3c49a);
	--green: var(--wp--preset--color--contrast, #23503a);
	--ink: var(--wp--preset--color--ink, #1c2620);
	--copper: var(--wp--preset--color--accent, #934a24);

	--sage-soft: var(--wp--custom--sage-soft, #e2ebdd);
	--ink-soft: var(--wp--custom--ink-soft, #4a5a4e);
	--peach: var(--wp--custom--peach, #e8b795);
	--blush: var(--wp--custom--blush, #ecd5c6);
	--amber: var(--wp--custom--amber, #e8c46a);
	--amber-soft: var(--wp--custom--amber-soft, #f4e6c4);
	--line: var(--wp--custom--line, #ded4c1);
	--line-strong: var(--wp--custom--line-strong, #c2b7a0);

	--radius-sm: var(--wp--custom--radius--sm, 6px);
	--radius-md: var(--wp--custom--radius--md, 14px);
	--radius-lg: var(--wp--custom--radius--lg, 24px);
	--pill: var(--wp--custom--radius--pill, 999px);

	--shell: var(--wp--custom--shell, 1180px);
	--narrow: var(--wp--custom--narrow, 760px);
	--gutter: var(--wp--preset--spacing--gutter, clamp(20px, 5vw, 48px));
	--space-s: var(--wp--preset--spacing--s, clamp(8px, 1vw, 12px));
	--space-m: var(--wp--preset--spacing--m, clamp(16px, 2vw, 24px));
	--space-l: var(--wp--preset--spacing--l, clamp(28px, 4vw, 48px));
	--section: var(--wp--preset--spacing--section, clamp(64px, 9vw, 120px));
	--section-tight: var(--wp--custom--section-tight, clamp(44px, 6vw, 80px));

	--header-h: 76px;

	--font-body: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--font-display: var(--wp--preset--font-family--display, Georgia, serif);
}

/* -------------------------------------------------------------------- base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/*
 * Every alignfull section gets the page gutter here rather than through
 * useRootPaddingAwareAlignments, which needs a root container a classic theme
 * does not have.
 */
.wp-block-group.alignfull {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/*
 * The shared inner width, for the parts that are PHP rather than blocks.
 * An alignfull section carries the gutter outside its wideSize content box,
 * so the shell adds the gutter to its own max-width — without it, border-box
 * sizing would eat the gutter and leave header and footer a gutter narrower
 * on each side than everything else on the page.
 */
.shell {
	width: 100%;
	max-width: calc(var(--shell) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/*
 * The content measure, for the parts that are PHP rather than blocks. It is
 * theme.json's contentSize, which is what a constrained pattern gives its text,
 * so PHP-rendered text lines up with pattern-rendered text.
 */
.shell-narrow,
.section-narrow {
	max-width: calc(var(--narrow) + 2 * var(--gutter));
}

.section-narrow {
	padding-block: var(--section);
}

/* ------------------------------------------------------------ a11y helpers */

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

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--ink);
	color: var(--cream);
	border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
	left: 0;
	top: 0;
}

:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 2px solid var(--copper);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--cream) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	min-height: var(--header-h);
}

.site-brand .brand-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--green);
}

.brand-name {
	font-family: var(--font-display);
	font-size: 1.35rem;
	line-height: 1.15;
}

.brand-role {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--space-l);
}

.nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-list a {
	color: var(--ink);
	text-decoration: none;
	padding-block: 4px;
	border-bottom: 1px solid transparent;
}

.nav-list a:hover,
.nav-list .current-menu-item > a {
	color: var(--green);
	border-bottom-color: var(--sage);
}

.site-nav-aside {
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

/*
 * The header button is olive, not terracotta: in the header it is a wayfinding
 * control, and the terracotta button is reserved for the one real call to
 * action inside the page content.
 */
.header-cta {
	display: inline-block;
	padding: 13px 30px;
	border-radius: var(--pill);
	background: var(--green);
	color: var(--white);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}

.header-cta:hover,
.header-cta:focus {
	background: var(--ink);
	color: var(--white);
}

/* --------------------------------------------------- language switcher pill */

.lang-switch {
	position: relative;
	flex: none;
}

/*
 * The collapsed control, shown only under the nav breakpoint and only once
 * site.js has marked the switcher collapsible. Sized like the burger beside it
 * so the two read as a pair.
 */
.lang-toggle {
	display: none;
	align-items: center;
	gap: 6px;
	height: 46px;
	min-height: 46px;
	padding: 0 14px;
	background: transparent;
	border: 1px solid var(--copper);
	border-radius: var(--pill);
	cursor: pointer;
}

.lang-toggle-caret {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--ink);
	border-bottom: 1.5px solid var(--ink);
	rotate: 45deg;
	translate: 0 -2px;
	transition: rotate 0.2s ease, translate 0.2s ease;
}

.lang-toggle[aria-expanded="true"] .lang-toggle-caret {
	rotate: 225deg;
	translate: 0 1px;
}

.lang-switch-list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 5px 7px;
	list-style: none;
	border: 1px solid var(--copper);
	border-radius: var(--pill);
}

.lang-switch-item a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-decoration: none;
	line-height: 1;
	transition: background-color 0.18s ease;
}

.lang-flag {
	font-size: 1.15rem;
	/* Emoji fonts first, so the regional-indicator pair draws as a flag. */
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.lang-switch-item.is-current a {
	background: var(--blush);
}

.lang-switch-item:not(.is-current) a:hover {
	background: var(--sage-soft);
}

/* ------------------------------------------------------- burger + mobile nav */

/*
 * `flex: none` plus the matching minimums: as a flex item next to a brand name
 * that can wrap to two lines, the button would otherwise be shrunk into an
 * oval on the narrowest screens.
 */
.nav-toggle {
	display: none;
	position: relative;
	flex: none;
	width: 46px;
	height: 46px;
	min-width: 46px;
	min-height: 46px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: var(--pill);
	cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	position: absolute;
	left: 50%;
	width: 18px;
	height: 1.5px;
	background: var(--ink);
	translate: -50% 0;
	transition: translate 0.24s ease, rotate 0.24s ease, background-color 0.16s ease;
}

.nav-toggle-bars {
	top: 50%;
}

/*
 * The two outer bars are offset with `translate`, not `top`, because translate
 * is what the open state animates — a transition cannot interpolate a property
 * the rule never touches. Rotating only after the bars have met in the middle
 * is what reads as a burger folding into a cross rather than two lines
 * swivelling past each other, hence the delay on `rotate` here and on
 * `translate` on the way back out.
 */
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	content: "";
	top: 0;
	left: 0;
	transition: translate 0.16s ease 0.16s, rotate 0.16s ease;
}

.nav-toggle-bars::before {
	translate: 0 -6px;
}

.nav-toggle-bars::after {
	translate: 0 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
	background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before,
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
	translate: 0 0;
	transition: translate 0.16s ease, rotate 0.16s ease 0.16s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
	rotate: 45deg;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
	rotate: -45deg;
}

@media (max-width: 860px) {
	.nav-toggle {
		display: block;
	}

	/*
	 * The header is translucent so content scrolls under it, but with the panel
	 * open that same translucency shows the page through the strip above the
	 * menu. Keyed off the button's aria-expanded so the open state lives in one
	 * place — the same attribute the burger animation reads.
	 */
	.site-header:has(.nav-toggle[aria-expanded="true"]) {
		background: var(--cream);
		backdrop-filter: none;
	}

	/*
	 * Absolute, not fixed: the header's backdrop-filter makes it the
	 * containing block for fixed descendants, so a fixed panel would resolve
	 * its offsets against the header instead of the viewport.
	 *
	 * The panel hangs off the header's bottom edge, so `100%` in the height
	 * calc is the header's own height — the panel reaches the bottom of the
	 * screen even on the narrow widths where the brand wraps and makes the
	 * header taller than usual.
	 */
	.site-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: calc(100vh - 100%);
		height: calc(100dvh - 100%);
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-m);
		padding: var(--space-l) var(--gutter);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--cream);
	}

	.site-nav.is-open {
		display: flex;
	}

	/*
	 * Three flags in a row do not fit beside the brand and the burger, so the
	 * list becomes a dropdown hanging off the button. It stays the same list of
	 * <a hreflang> links at every width — only the presentation changes — so
	 * hreflang, crawling and the no-JS case are unaffected.
	 *
	 * `align-items` has to be restated: the row layout centres the flags in the
	 * pill, and left as it is that same centring would shrink-wrap every row of
	 * the column and float it in the middle of the panel.
	 */
	.lang-switch.is-collapsible .lang-toggle {
		display: flex;
	}

	.lang-switch.is-collapsible .lang-switch-list {
		position: absolute;
		right: 0;
		top: calc(100% + 8px);
		z-index: 1;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 1px;
		min-width: 172px;
		padding: 6px;
		background: var(--cream);
		border-radius: var(--radius-md);
		box-shadow: 0 10px 24px rgb(0 0 0 / 10%);
	}

	.lang-switch.is-collapsible .lang-switch-list.is-open {
		display: flex;
	}

	.lang-switch.is-collapsible .lang-switch-item a {
		display: flex;
		justify-content: start;
		align-items: center;
		gap: 9px;
		width: auto;
		height: auto;
		padding: 9px 10px;
		border-radius: var(--radius-sm);
	}

	.lang-switch.is-collapsible .lang-flag {
		font-size: 1.05rem;
	}

	/*
	 * In a row of flags the language name is for screen readers only, because
	 * the flag is the whole visible control. In the dropdown there is room to
	 * show it, and a name beats a flag — a flag is a country, not a language.
	 */
	.lang-switch.is-collapsible .lang-switch-item .screen-reader-text {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		color: var(--ink);
		font-size: 0.9rem;
		line-height: 1.2;
	}

	.nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav-list a {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--line);
	}

	.site-nav-aside {
		justify-content: space-between;
	}
}

/* -------------------------------------------------------------- page frame */

.site-main {
	display: block;
	min-height: 40vh;
}

.page-head {
	padding-block: var(--section-tight);
	background: var(--sand);
}

.page-title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.15;
	color: var(--green);
	font-size: var(--wp--preset--font-size--display-1, clamp(2.2rem, 1.6rem + 2.8vw, 3.6rem));
}

.eyebrow {
	margin: 0 0 var(--space-s);
	color: var(--green);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lead {
	font-size: var(--wp--preset--font-size--lead, 1.2rem);
	color: color-mix(in srgb, var(--ink) 85%, var(--cream));
}

/* ------------------------------------------------------------- block bits */

.img-soft img {
	border-radius: var(--radius-lg);
}

/*
 * Testimonials. core/quote arrives with wp-block-library-theme's left rule and
 * indent, which reads as a nested quotation inside a card; a thin rule above
 * each one separates the three columns without boxing them in.
 */
.testimonial-list {
	display: grid;
	gap: var(--space-l);
	margin-top: var(--space-l);
}

/*
 * Core's flow layout gives every child but the first a margin-block-start. In
 * a grid that offsets the cells against each other — see .step-list; the
 * grid's own `gap` does the spacing.
 */
.testimonial-list > .testimonial {
	margin-block: 0;
}

/*
 * Flex column plus `margin-top: auto` on the name: the grid stretches every
 * testimonial to the tallest one, so the names sit on one line across the
 * three columns however long the quotes are.
 */
.testimonial {
	display: flex;
	flex-direction: column;
	border: 0;
	border-top: 1px solid color-mix(in srgb, currentcolor 30%, transparent);
	padding: var(--space-m) 0 0;
}

.testimonial p {
	font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
	line-height: 1.45;
}

.testimonial cite {
	display: block;
	margin-top: auto;
	padding-top: var(--space-m);
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.75;
}

@media (min-width: 700px) {
	.testimonial-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Checklist: a tick instead of a bullet. */
.check-list {
	list-style: none;
	padding-left: 0;
}

.check-list li {
	position: relative;
	padding-left: 2em;
	margin-bottom: var(--space-s);
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.85em;
	height: 0.45em;
	border-left: 2px solid var(--green);
	border-bottom: 2px solid var(--green);
	rotate: -45deg;
}

/*
 * Numbered steps via a CSS counter, so duplicating a step in the editor
 * renumbers the list by itself and nobody has to retype "4.".
 */
.step-list {
	counter-reset: sablona-step;
	display: grid;
	gap: var(--space-l);
	margin-top: var(--space-l);
	align-items: start;
}

/*
 * Core's flow layout gives every child but the first a margin-block-start, to
 * space stacked blocks. Inside a grid that margin offsets the cells against
 * each other and the steps come out staggered, so it is cancelled here — the
 * grid's own `gap` does the spacing.
 */
.step-list > .step {
	margin-block: 0;
}

.step {
	counter-increment: sablona-step;
	position: relative;
	padding-left: 4.25rem;
}

.step::before {
	content: counter(sablona-step);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--blush);
	color: var(--green);
	font-family: var(--font-display);
	font-size: 1.2rem;
}

.step :where(h3) {
	margin-top: 0;
}

@media (min-width: 700px) {
	.step-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Price rows. */
.price-list {
	margin-top: var(--space-l);
	border-top: 1px solid var(--line);
}

/* Block gap would add a margin to every row but the first — rows space themselves.
   Two classes deep to outweigh the inline layout style WordPress prints for blockGap. */
.price-list > .price-row {
	margin-block: 0;
}

.price-row {
	align-items: baseline;
	gap: var(--space-m);
	padding-block: var(--space-m);
	border-bottom: 1px solid var(--line);
}

.price-name {
	margin: 0;
}

.price-value {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--green);
	white-space: nowrap;
}

/* FAQ. */
.faq-list {
	margin-top: var(--space-l);
	display: grid;
	gap: var(--space-s);
}

.faq-list .wp-block-details {
	background: var(--white);
	border-radius: var(--radius-md);
	padding: var(--space-m) var(--space-l);
}

.faq-list summary {
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--green);
}

/* ---------------------------------------------------------------- articles */

.prose :where(h2) {
	margin-top: var(--space-l);
}

.post-list {
	display: grid;
	gap: var(--space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-list-wrap {
	padding-block: var(--section);
}

.post-list-item {
	padding-bottom: var(--space-l);
	border-bottom: 1px solid var(--line);
}

.post-list-title {
	margin: 0 0 var(--space-s);
	font-family: var(--font-display);
	font-weight: 400;
}

.post-list-title a {
	color: var(--green);
	text-decoration: none;
}

.post-meta {
	margin: 0 0 var(--space-s);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sage);
}

/*
 * A post body is loose content, not a pattern, so nothing above it carries
 * section padding of its own and the template takes the gap below the title
 * band itself. The gap above the footer comes from .page-content's last child.
 */
.post-body {
	padding-top: var(--section-tight);
}

.post-thumb {
	margin-block: 0 var(--space-l);
}

.post-thumb img {
	border-radius: var(--radius-lg);
}

/*
 * Loose content at the end of a page — a post body, a block the owner appended
 * below the last section — brings no section padding of its own, so it takes
 * the gap above the footer itself.
 */
.page-content > :last-child:not(.alignfull) {
	margin-bottom: var(--section);
}

/* ------------------------------------------------------------------ footer */

/*
 * No margin above the footer. Every page ends in a full-bleed section that
 * already carries its own section padding, so a margin here would only draw a
 * stripe of page background between a tinted section and the footer.
 */
.site-footer {
	padding-block: var(--section-tight) var(--space-l);
	background: var(--ink);
	color: color-mix(in srgb, var(--cream) 88%, transparent);
}

.footer-grid {
	display: grid;
	gap: var(--space-l);
}

@media (min-width: 720px) {
	.footer-grid {
		grid-template-columns: 1.4fr 1fr 1fr auto;
	}
}

.site-footer a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--cream) 35%, transparent);
}

.site-footer a:hover {
	color: var(--peach);
}

.footer-name {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.3rem;
	color: var(--cream);
}

.footer-claim {
	max-width: 34ch;
	font-size: 0.95rem;
	opacity: 0.8;
}

.footer-heading {
	margin: 0 0 var(--space-s);
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sage);
}

.site-footer p {
	margin: 0 0 0.5em;
}

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

.footer-menu li {
	margin-bottom: 0.4em;
}

.footer-legal {
	margin-top: var(--space-l);
	font-size: 0.85rem;
	opacity: 0.75;
}

/*
 * The rule is drawn inside the shell's gutter rather than as a border on the
 * shell itself, which would run one gutter wider than the text it separates.
 */
.footer-legal::before {
	content: "";
	display: block;
	margin-bottom: var(--space-m);
	border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
}

.footer-sep {
	margin-inline: 0.5em;
}

/*
 * The demo badge. It is a caveat, not a headline: the h1 under it has to win
 * the first look, so the badge sits a step below the smallest heading and
 * keeps the amber as a wash with a full-strength amber hairline, rather than
 * a full-strength fill.
 * The couple of degrees of tilt stay: they read as something stuck onto the
 * page, which is the point. What is gone is the hard offset that turned the
 * tilt into a stamp loud enough to beat the headline.
 *
 * Colour, type, padding and radius all come from styles/text-badge.json —
 * block supports can express those. What is left here is what theme.json has
 * no property for: the shrink-to-fit box (a paragraph at block width would
 * drag the fill across the whole column), the dot and the tilt.
 */
.is-style-text-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	width: fit-content;
	margin-bottom: var(--space-m);
	transform: rotate(-4deg);
}

/*
 * On the subpage headers the badge is parked at the right-hand edge of the
 * text column instead of above it, and it leans the other way so the tilt
 * runs into that corner rather than away from it. The placing is done by the
 * flex wrapper in the pattern; this only answers it. Keying off the layout
 * class means the tilt follows the badge if it is ever moved back left.
 */
.is-content-justification-right > .is-style-text-badge {
	transform: rotate(4deg);
	margin-bottom: 0;
}

.is-style-text-badge::before {
	content: "";
	flex: none;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

/* ----------------------------------------------------- third-party forms */

/*
 * Fluent Forms ships its own CSS. These rules only bring its controls into the
 * theme's shapes; they are deliberately the one place !important is allowed,
 * because the plugin's stylesheet loads after ours.
 */
.fluentform :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select) {
	width: 100%;
	padding: 12px 16px !important;
	background: var(--white) !important;
	border: 1px solid var(--line-strong) !important;
	border-radius: var(--radius-sm) !important;
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	color: var(--ink) !important;
}

.fluentform .ff-btn-submit {
	padding: 14px 28px !important;
	background: var(--copper) !important;
	border: 0 !important;
	border-radius: var(--pill) !important;
	color: var(--white) !important;
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	cursor: pointer;
}

.fluentform .ff-btn-submit:hover {
	background: var(--green) !important;
}

.fluentform .ff-el-input--label label {
	font-size: 0.9rem;
	color: var(--green);
}

/* --------------------------------------------------------- editor canvas */

/*
 * The editor has no header or footer, so sections would otherwise sit edge to
 * edge with no sense of the page's gutter.
 */
.editor-styles-wrapper {
	background: var(--cream);
}

/* ------------------------------------------------------------- motion */

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

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

/* ------------------------------------------------------------- news cards */

/*
 * The whole card is the link.
 *
 * Done by stretching the post title's own anchor over the card with a
 * pseudo-element, rather than wrapping the card in a second <a>: nesting an
 * anchor around a card that already contains one is invalid HTML, and screen
 * readers would announce the link twice. This way there is exactly one link,
 * its accessible name is the post title, and the whole card is the hit area.
 */
.news-card {
	position: relative;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.news-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Above the card's own background, below anything interactive inside it. */
	z-index: 1;
}

.news-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgb(63 64 58 / 8%);
}

.news-card .wp-block-post-title {
	margin-block: var(--space-s);
}

.news-card .wp-block-post-title a {
	color: var(--green);
	text-decoration: none;
}

.news-card:hover .wp-block-post-title a {
	color: var(--green);
}

/* Keyboard users get the card outlined, not just the title text. */
.news-card:focus-within {
	outline: 2px solid var(--copper);
	outline-offset: 3px;
}

.news-card .wp-block-post-title a:focus-visible {
	outline: none;
}

.news-card .wp-block-post-date {
	color: var(--sage);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.news-card .wp-block-post-excerpt {
	line-height: 1.55;
}

/* Any real link inside the card must sit above the stretched overlay. */
.news-card a:not(.wp-block-post-title a) {
	position: relative;
	z-index: 2;
}

/* ------------------------------------- the one menu item that is a button */

/*
 * Contact is an ordinary menu item that happens to look like the primary
 * control. Keeping it in the menu (rather than as a separate hard-coded button)
 * means the owner can reorder or rename it in Vzhled → Menu like anything else,
 * and it stays in the DOM order a keyboard user expects.
 *
 * Olive, not terracotta: in the header this is wayfinding, and the terracotta
 * button is reserved for the one real call to action inside the page content.
 */
.nav-list .nav-cta > a {
	display: inline-block;
	padding: 13px 30px;
	border: 0;
	border-radius: var(--pill);
	background: var(--green);
	color: var(--white);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}

.nav-list .nav-cta > a:hover,
.nav-list .nav-cta > a:focus {
	background: var(--ink);
	color: var(--white);
	border-color: transparent;
}

/*
 * Logo left; nav (links, then the Contact button) and the language switcher
 * right, in that order — the layout README.md specifies.
 */
.site-header-inner > .site-nav {
	margin-left: auto;
}

@media (max-width: 860px) {
	.site-header-inner > .site-nav {
		margin-left: 0;
	}

	/* Brand, switcher, burger on one row; the nav panel drops below. */
	.site-header-inner > .lang-switch {
		margin-left: auto;
	}

	.nav-list .nav-cta {
		margin-top: var(--space-l);
	}

	.nav-list .nav-cta > a {
		text-align: center;
	}
}

/* ------------------------------------------------------------ footer legal */

.footer-legal-company,
.footer-legal-register,
.footer-legal-meta {
	margin: 0 0 0.35em;
}

/*
 * The demo notice sits above the legal block and must not read as fine print:
 * it is the line that stops a visitor taking the company details below it for
 * a real business, so it keeps full opacity against .footer-legal's 0.75.
 */
.footer-legal-demo {
	margin: 0 0 0.75em;
	color: var(--cream);
	opacity: 1;
	font-weight: 600;
}

.footer-legal-name {
	color: var(--cream);
}

.footer-legal-register {
	opacity: 0.85;
}