@charset "UTF-8";
/*
 * PostOptimal – global styles.
 * Values come from docs/design/tokens.json (Figma 236:256). Block styles live in blocks/<name>/style.css.
 *
 * 1. Tokens  2. Base  3. Layout  4. Components  5. Header (5.1 Megamenu)  6. Mobile menu  7. Footer  8. Content  9. Utilities
 */

/* 1. Tokens ------------------------------------------------------------- */
:root {
	--color-navy: #22335c;
	--color-blue: #2364ad;
	--color-blue-light: #3d73c5;
	--color-orange: #f08319;
	--color-text: #595c65;
	--color-black: #000;
	--color-white: #fff;
	--color-surface-light: #f1f4f8;
	--color-surface-card: rgba(240, 240, 240, 0.07);
	--color-border: #dfdfdf;
	--color-footer-link: #8faaeb;
	--color-benefit-text: #becdef;
	--color-footer-divider: #3f517e;
	--color-icon-muted: #c0c7d0;
	/* Customer line status (not in the design, 2026-10-16): standard status green; closed = grey (icon-muted, text). */
	--color-status-open: #16a34a;
	--color-status-open-text: #15803d;

	--gradient-hero: linear-gradient(-73.544deg, #2364ad 41.045%, #22335c 99.955%);
	--gradient-benefits: linear-gradient(255.524deg, #22335c 40.852%, #3d73c5 106.51%);

	--font-family: var(--wp--preset--font-family--poppins, Poppins, system-ui, sans-serif);
	--font-size-h1: 55px;
	--font-size-h2: 32px;
	--font-size-card-title: 24px;
	--font-size-footer-heading: 20px;
	--font-size-body: 16px;
	--font-size-small: 14px;
	--font-size-more: 13px;
	--font-size-callout: 14px; /* Figma 236:317 12 → 14px (export 2026-10-20) */
	--font-size-legal: 11px;
	/* Figma line-height is 81 %, but the text boxes (H1 129px / 2 lines) render at ≈ 1.17 – see design-system.md. */
	--line-height-heading: 1.17;

	--container: 1370px;
	--container-narrow: 1320px;
	--gutter: 20px;
	--gap-cards: 32px;
	--radius: 8px;
	--shadow-button: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	/* Hover states – Figma component variants (Smart animate, ease-out, 150 ms). */
	--color-orange-hover: #d85a00;
	--color-blue-hover: #4d8acf;
	--color-mcdonalds: #ffbc0d;
	--shadow-button-hover: 0 1px 12.5px 0 rgba(0, 0, 0, 0.2);
	--shadow-image-hover: 0 4px 12.5px 0 rgba(0, 0, 0, 0.25);
	--transition: 150ms ease-out;
	--hover-lift: -10px;
	--hover-arrow-shift: 3px;
	--header-bar-height: 120px;
	--nav-height: 60px;

	/* Form fields – Figma 391:1168 (service hub inquiry form): white, 1px border, radius 8, padding 14/16,
	   placeholder #91A5BF. Also used by the search form. */
	--color-placeholder: #91a5bf;
	/* Form error (not in the design, 2026-10-20) – megamenu red theme colour. */
	--color-error: #d42000;
	--field-padding: 14px 16px;

	/* Megamenu – Figma 310:861, 332:1196, 333:1536. Values kept exactly as designed;
	   cleanup candidates (#f47700 / #ff8000 vs orange, #f3f6f9 vs surface-light, 23px title) – see design-system.md. */
	--color-megamenu-border: #e0e6ee;
	--color-megamenu-divider: #d7e0ec;
	--color-megamenu-card: #f3f6f9;
	--color-megamenu-orange: #f47700;
	--color-backdrop: rgba(0, 0, 0, 0.25);
	--shadow-megamenu: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
	/* Area colour themes of the megamenu (Figma 332:1196 red, 333:1536 purple). On the service hubs they colour
	   only small accents (decision 2026-10-21, not in the design): body.theme-{red|purple} (inc/megamenu.php). */
	--color-theme-red: #d42000;
	--color-theme-purple: #2e1097;
	--theme-accent: var(--color-orange);
	--theme-contact-icon: var(--color-megamenu-orange);
	/* Light contact box – Figma 391:1138 (service hub). */
	--shadow-contact: 0 0 30px 0 rgba(0, 0, 0, 0.15);
	--font-size-megamenu-title: 23px;
	--font-size-contact-name: 21px;
	/* Service detail – Figma 565:697 (Seznam bodů): row lines and the divider between Co zajišťujeme and Výhody. */
	--color-divider-light: #dfe5ed;
	/* About page – Figma 437:641: card border (Proč si…), value cards and the CTA banner (top to bottom). */
	--color-card-border: #cdd9e9;
	--gradient-card: linear-gradient(180deg, var(--color-blue-light), var(--color-navy));
	--gradient-banner: linear-gradient(180deg, var(--color-blue), var(--color-navy));
	/* Novinky – Figma 495:574: filter options and page numbers, badge of a purple category (featured article). */
	--color-chip: #cbdbef;
	--color-badge-purple: #e0d7ff;
	/* Kontakt – Figma 650:624: contact detail icon circles (776:1441), area badges of the specialists (665:1075,
	   667:1224; purple as above), VAT payer status (749:619). */
	--color-icon-bg: #fff3e6;
	--color-badge-orange: #ffedd5;
	--color-badge-red: #ffe2dd;
	--color-success: #59b13f;
	/* Nezávazná poptávka – Figma 810:600: selected area card. */
	--color-selected: #eef4fb;
	/* Novinky detail – Figma 957:831: quote box (961:628), box with sharing and tags (961:645). */
	--color-quote-bg: #f2f6fb;
	--color-quote-border: #d4deed;
	--color-share-border: #e0e5ed;
	/* Ke stažení – Figma 944:643, 944:656: format tiles (XLSX, PDF), card description and meta line. */
	--color-file-sheet-bg: #b8f0ba;
	--color-file-sheet: #236c39;
	--color-file-pdf-bg: #f0b8b8;
	--color-file-pdf: #883d45;
	--color-document-text: #526079;
	--color-document-meta: #647087;
	--megamenu-width: 1716px;
	--megamenu-width-narrow: 1410px;
	--megamenu-box-width: 440px;

	/* Sticky header (not in the design): the top bar scrolls away by 48px, 72px + nav 60px stay (132px). */
	--header-sticky-shift: 48px;
	--header-visible: calc(var(--header-bar-height) + var(--nav-height));
	/* WordPress admin bar of logged-in users: admin-bar.css defines the height on html; the bar is fixed
	   from 601px and scrolls away below. */
	--admin-bar-offset: var(--wp-admin--admin-bar--height, 0px);
}

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

/* Hub accents: card pictogram hover, light contact box icons and e-mail, inquiry form eyebrow. Blue = Figma. */
.theme-red {
	--theme-accent: var(--color-theme-red);
	--theme-contact-icon: var(--color-theme-red);
}

.theme-purple {
	--theme-accent: var(--color-theme-purple);
	--theme-contact-icon: var(--color-theme-purple);
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
	}
}

/* 2. Base --------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

/* Anchors and the skip link end below the sticky header (mobile bar 72px). :root beats WordPress'
   html { scroll-padding-top } from admin-bar.css, the admin bar is included here.
   In-page anchors (hero "Naše služby" → next section) scroll smoothly (decision 2026-10-15). */
:root {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--admin-bar-offset) + 72px);
}

@media (min-width: 1024px) {
	:root {
		scroll-padding-top: calc(var(--admin-bar-offset) + var(--header-bar-height) + var(--nav-height) - var(--header-sticky-shift));
	}
}

/* Footer always at the bottom: on short pages main grows to fill the viewport (minus the admin bar,
   which WordPress adds as margin-top on html). */
body {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	margin: 0;
	color: var(--color-black);
	background: var(--color-white);
	font-family: var(--font-family);
	font-size: var(--font-size-body);
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

img {
	height: auto;
}

svg.icon {
	display: block;
	flex-shrink: 0;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
	margin-top: 0;
}

/* Long words without spaces (e.g. a URL in a card title) wrap instead of overflowing the page (2026-10-21). */
h1,
h2,
h3,
h4,
p {
	overflow-wrap: break-word;
}

/* 3. Layout ------------------------------------------------------------- */
.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.container--narrow {
	width: min(100% - 2 * var(--gutter), var(--container-narrow));
}

/* Body is a flex column (2. Base): main takes the remaining height, header and footer keep theirs. */
.site-main {
	flex: 1 0 auto;
}

.site-header,
.site-footer {
	flex-shrink: 0;
}

.section-header {
	text-align: center;
}

.section-title {
	margin: 0;
	color: var(--color-navy);
	font-size: clamp(26px, 1.25rem + 1.2vw, var(--font-size-h2));
	font-weight: 500;
	line-height: var(--line-height-heading);
	text-align: center;
}

.section-text {
	margin: 28px 0 0;
}

/* 4. Components --------------------------------------------------------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	/* <button class="button"> (forms, map, cookie bar) does not inherit the font by default. */
	font-family: inherit;
	font-size: var(--font-size-body);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-button);
	transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.button:hover,
.button:focus-visible {
	box-shadow: var(--shadow-button-hover);
}

.button--primary {
	min-width: 248px;
	color: var(--color-white);
	background: var(--color-orange);
}

.button--primary:hover,
.button--primary:focus-visible {
	background: var(--color-orange-hover);
}

.button--outline {
	min-width: 175px;
	color: var(--color-white);
	border-color: var(--color-white);
	background: transparent;
}

/* Figma Button 2 / Variant2: fill #4D8ACF, no stroke (border kept transparent to avoid layout shift). */
.button--outline:hover,
.button--outline:focus-visible {
	border-color: transparent;
	background: var(--color-blue-hover);
}

/* Focus ring is not in the design – kept visible on orange/blue fills. */
.button:focus-visible {
	outline-color: var(--color-navy);
}

.hero .button:focus-visible {
	outline-color: var(--color-white);
}

.hero__button {
	min-width: 259px;
}

.more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-blue);
	font-size: var(--font-size-more);
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.65px;
	text-decoration: none;
	text-transform: uppercase;
}

/* Underline on hover / focus of the link itself (not in the design – decision 2026-10-15), same pattern as
   the header phone; the card hover stays as designed. */
.more-link span,
.megamenu__overview span {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--transition);
}

.more-link:hover span,
.more-link:focus-visible span,
.megamenu__overview:hover span,
.megamenu__overview:focus-visible span {
	text-decoration-color: currentColor;
}

.more-link .icon {
	margin-top: 2px;
	transition: transform var(--transition);
}

/* Arrow moves 3px right (Figma card Variant2); applied on the link and on the whole card. */
.more-link:hover .icon,
.more-link:focus-visible .icon {
	transform: translateX(var(--hover-arrow-shift));
}

/* Card with one link (2026-11-11): service areas, transport types, megamenu, positions (Kariéra) and documents
   (Ke stažení) – the whole card opens the link at every width, also on mobile. The link area is stretched over the
   card (::after); the link stays the only focusable element and its text the accessible name. News and search
   cards work the same way with their title link (news.css). */
.card-link {
	position: relative;
}

.card-link :is(.more-link, .card-link__target)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius);
}

.block-placeholder {
	padding: 24px;
	border: 1px dashed var(--color-border);
	text-align: center;
}

/* Editor only (main.css is also the editor style): links in ACF block previews must not navigate the editor
   canvas – a click selects the block, like the core server-rendered blocks (decision 2026-10-15). The same for
   the inquiry form fields (decision 2026-10-20): the preview is not filled in, settings are in the block panel. */
.acf-block-preview a,
.acf-block-preview .inquiry-form {
	pointer-events: none;
}

/* Dark gradient section – Proč spolupracovat (Figma 236:298) and Jak probíhá spolupráce (391:1086): benefits
   gradient, text #BECDEF, white H2, 3D decoration Po_3D_v2 831 × 831 at x 544 (centre − 416), y −165, opacity .21. */
.gradient-section {
	position: relative;
	overflow: hidden;
	color: var(--color-benefit-text);
	background: var(--gradient-benefits);
}

.gradient-section__decoration {
	position: absolute;
	top: -165px;
	left: calc(50% - 416px);
	width: 831px;
	height: 831px;
	max-width: none;
	opacity: 0.21;
	pointer-events: none;
}

.gradient-section .container {
	position: relative;
}

.gradient-section .section-title {
	color: var(--color-white);
}

/* Breadcrumbs (Figma 396:1315 in the service hub hero 391:1047): 14/400, links and separator #8FAAEB,
   current page 700 white. Separator "    >    " exactly as in Figma (4 spaces each side), hidden from screen
   readers. Link hover / focus (not in the design, decision 2026-10-20): white + underline like the footer links.
   Only the dark variant (on the hero) is designed. */
.breadcrumbs {
	font-size: var(--font-size-small);
	line-height: 1.5;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "    >    ";
	content: "    >    " / "";
	color: var(--color-footer-link);
	white-space: pre;
}

.breadcrumbs__link {
	color: var(--color-footer-link);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: color var(--transition), text-decoration-color var(--transition);
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
	color: var(--color-white);
	text-decoration-color: currentColor;
}

.breadcrumbs__link:focus-visible {
	outline-color: var(--color-white);
}

.breadcrumbs__current {
	color: var(--color-white);
	font-weight: 700;
}

/* Breadcrumb sibling switch (spec 3.3 "záložky mezi podslužbami", not in the design – decision 2026-10-23, variant B):
   the current page (white 700) gets the menu chevron and opens a list of the sibling pages. List from existing
   tokens like the form select list (kap. 2): white, 1px #DFDFDF, radius 8, shadow button-hover, padding 6/0; items
   10/16, 14/400 #595C65, hover / focus #F3F6F9, current navy 700 with the check (theme accent). <details> – works
   without JS; main.js closes it on Escape, outside click and when the focus leaves. */
.breadcrumbs {
	position: relative;
}

.breadcrumbs__switch {
	display: inline;
}

.breadcrumbs__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	cursor: pointer;
}

.breadcrumbs__toggle::-webkit-details-marker {
	display: none;
}

.breadcrumbs__toggle > span:first-child {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--transition);
}

.breadcrumbs__toggle:hover > span:first-child,
.breadcrumbs__toggle:focus-visible > span:first-child {
	text-decoration-color: currentColor;
}

.breadcrumbs__toggle:focus-visible {
	outline-color: var(--color-white);
}

.breadcrumbs__chevron {
	flex-shrink: 0;
	transition: rotate var(--transition);
}

.breadcrumbs__switch[open] .breadcrumbs__chevron {
	rotate: 180deg;
}

.breadcrumbs__menu {
	position: absolute;
	z-index: 5;
	top: calc(100% + 8px);
	left: 0;
	min-width: 240px;
	max-width: 100%;
	margin: 0;
	padding: 6px 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	box-shadow: var(--shadow-button-hover);
	list-style: none;
}

/* Opens like the megamenu (decision 2026-10-23): slides 8px down + fades in, 200 ms ease-out. Closing is instant
   (a closed <details> hides its content at once; the megamenu closes in 120 ms). */
.breadcrumbs__switch[open] .breadcrumbs__menu {
	transition: opacity 200ms ease-out, translate 200ms ease-out;
}

@starting-style {
	.breadcrumbs__switch[open] .breadcrumbs__menu {
		opacity: 0;
		translate: 0 -8px;
	}
}

.breadcrumbs__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 16px;
	color: var(--color-text);
	font-weight: 400;
	text-decoration: none;
	transition: background-color var(--transition);
}

.breadcrumbs__option:hover,
.breadcrumbs__option:focus-visible {
	background: var(--color-megamenu-card);
	outline: none;
}

.breadcrumbs__option.is-current {
	color: var(--color-navy);
	font-weight: 700;
}

.breadcrumbs__check {
	flex-shrink: 0;
	color: var(--theme-accent);
}

/* From 768px the list opens under the current page (on mobile under the whole breadcrumb, full width). */
@media (min-width: 768px) {
	.breadcrumbs__item--switch {
		position: relative;
	}

	.breadcrumbs__menu {
		max-width: none;
		white-space: nowrap;
	}
}

/* Mobile (< 768, decision 2026-10-23, not in the design): shorter separators (2 spaces each side instead of 4); an item
   never breaks inside and the separator stays at the end of the line (::after) instead of hanging at the start of
   the next one. The current page with the sibling switch gets its own line with a 44px touch target, its list spans
   the breadcrumb width. */
@media (max-width: 767px) {
	.breadcrumbs__item {
		white-space: nowrap;
	}

	.breadcrumbs__item + .breadcrumbs__item::before {
		content: none;
	}

	.breadcrumbs__item:not(:last-child)::after {
		content: "  >  ";
		content: "  >  " / "";
		color: var(--color-footer-link);
		white-space: pre;
	}

	.breadcrumbs__item--switch {
		flex-basis: 100%;
		white-space: normal;
	}

	/* The switch reads as a button (2026-11-13, decision of the user, design chybí): 44px, light border and a white
	   10 % fill on the hero, border white on hover / when open. */
	.breadcrumbs__toggle {
		min-height: 44px;
		margin-top: 10px;
		padding: 0 14px;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: var(--radius);
		background: rgba(255, 255, 255, 0.1);
		transition: border-color var(--transition), background-color var(--transition);
	}

	.breadcrumbs__toggle:hover,
	.breadcrumbs__switch[open] .breadcrumbs__toggle {
		border-color: var(--color-white);
		background: rgba(255, 255, 255, 0.16);
	}

	.breadcrumbs__menu {
		width: 100%;
		min-width: 0;
	}

	/* A long current page (article title) ends with "…" inside the content instead of running off the page. */
	.breadcrumbs__item:last-child:not(.breadcrumbs__item--switch) {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Back to top (not in the design – decision 2026-10-15, revised): white square with a navy chevron
   (menu chevron rotated), 1px border and the image hover shadow so it stays visible on white, light
   and navy sections; hover/focus = orange fill, white chevron. Shown after half a viewport height
   (JS .is-visible); hidden = not focusable. Near the page end JS sets --scroll-top-lift so the button
   stays above the footer legal row. z-index 8 keeps it under the header and the megamenu backdrop. */
.scroll-top {
	position: fixed;
	right: var(--gutter);
	bottom: calc(var(--gutter) + var(--scroll-top-lift, 0px));
	z-index: 8;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	box-shadow: var(--shadow-image-hover);
	color: var(--color-navy);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	translate: 0 8px;
	transition: opacity 200ms ease-out, translate 200ms ease-out, visibility 200ms, color var(--transition), background-color var(--transition), border-color var(--transition);
}

.scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
}

/* Hover / focus orange (primary button colour, changed from navy 2026-10-15); focus ring navy like buttons. */
.scroll-top:hover,
.scroll-top:focus-visible {
	border-color: var(--color-orange);
	background: var(--color-orange);
	color: var(--color-white);
}

.scroll-top:focus-visible {
	outline-color: var(--color-navy);
}

.scroll-top .icon {
	width: 16px;
	height: 9px;
	rotate: 180deg;
}

body.has-mobile-menu-open .scroll-top,
body.has-cookie-bar .scroll-top {
	visibility: hidden;
	opacity: 0;
}

/* Secondary button (not in the design – cookie bar 2026-11-11): navy outline on white, hover navy fill.
   Same size as the primary one, so "Odmítnout vše" has the same weight as "Přijmout vše". */
.button--secondary {
	color: var(--color-navy);
	border-color: var(--color-navy);
	background: var(--color-white);
}

.button--secondary:hover,
.button--secondary:focus-visible {
	color: var(--color-white);
	background: var(--color-navy);
}

/* Cookie bar and settings (not in the design – decision 2026-11-11; inc/consent.php). White card like the light
   contact box (radius 12, shadow-contact) fixed at the bottom within the 1370 container; above the header and
   the megamenu (z-index 10 / 9 / 20), below the skip link (100). Buttons 48 px (bar is compact). */
.cookie-bar {
	position: fixed;
	right: var(--gutter);
	bottom: var(--gutter);
	left: var(--gutter);
	z-index: 30;
	max-width: var(--container);
	margin-inline: auto;
	padding: 24px 32px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-white);
	box-shadow: var(--shadow-contact);
	font-size: var(--font-size-small);
	line-height: 1.5;
}

.cookie-bar[hidden] {
	display: none;
}

.cookie-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 40px;
}

.cookie-bar__copy {
	flex: 1 1 480px;
}

.cookie-bar__title,
.cookie-settings__title {
	margin: 0;
	color: var(--color-navy);
	font-weight: 600;
	line-height: 1.3;
}

.cookie-bar__title {
	margin-bottom: 4px;
	font-size: 18px;
}

.cookie-bar__text,
.cookie-settings__intro {
	margin: 0;
}

.cookie-bar a,
.cookie-settings a {
	color: var(--color-blue);
	text-underline-offset: 3px;
}

.cookie-bar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.cookie-bar .button,
.cookie-settings .button {
	min-width: 0;
	min-height: 48px;
	padding: 11px 24px;
}

.cookie-bar__settings,
.footer-legal__cookies {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.cookie-bar__settings {
	padding: 12px 8px;
	color: var(--color-blue);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--transition);
}

.cookie-bar__settings:hover,
.cookie-bar__settings:focus-visible {
	text-decoration-color: currentColor;
}

.cookie-settings {
	width: min(640px, 100% - 2 * var(--gutter));
	max-height: calc(100% - 2 * var(--gutter));
	padding: 32px;
	border: 0;
	border-radius: 12px;
	background: var(--color-white);
	box-shadow: var(--shadow-contact);
	color: var(--color-text);
	font-size: var(--font-size-small);
	line-height: 1.5;
}

.cookie-settings::backdrop {
	background: var(--color-backdrop);
}

.cookie-settings__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.cookie-settings__title {
	font-size: var(--font-size-card-title);
}

.cookie-settings__close {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: var(--color-navy);
	cursor: pointer;
	transition: color var(--transition);
}

.cookie-settings__close:hover,
.cookie-settings__close:focus-visible {
	color: var(--color-orange);
}

.cookie-settings__close:focus-visible {
	outline-color: var(--color-navy);
}

.cookie-settings__close .icon {
	width: 24px;
	height: 24px;
}

.cookie-settings__list {
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

.cookie-category {
	padding-block: 16px;
	border-top: 1px solid var(--color-divider-light);
}

.cookie-category:last-child {
	border-bottom: 1px solid var(--color-divider-light);
}

.cookie-category__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cookie-category__title {
	flex: 1;
	color: var(--color-navy);
	font-size: var(--font-size-body);
	font-weight: 600;
	cursor: pointer;
}

.cookie-category__always {
	color: var(--color-status-open-text);
	font-size: var(--font-size-more);
	font-weight: 500;
}

.cookie-category__text {
	margin: 6px 0 0;
}

/* Switch: 44 × 24, off = muted grey, on = orange (checked consent checkbox), knob white. */
.cookie-switch {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 24px;
	margin: 0;
	border-radius: 12px;
	background: var(--color-icon-muted);
	cursor: pointer;
	appearance: none;
	transition: background-color var(--transition);
}

.cookie-switch::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: var(--shadow-button);
	transition: translate var(--transition);
}

.cookie-switch:checked {
	background: var(--color-orange);
}

.cookie-switch:checked::before {
	translate: 20px 0;
}

.cookie-switch:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.cookie-category:has(.cookie-switch:disabled) .cookie-category__title {
	cursor: default;
}

.cookie-switch:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

.cookie-settings__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
}

/* Focus target after a decision in the bar (assets/js/consent.js) – no ring around the whole page. */
.site-main[tabindex="-1"]:focus {
	outline: none;
}

@media (max-width: 767px) {
	.cookie-bar {
		padding: 20px;
	}

	.cookie-bar__copy {
		flex-basis: 100%;
	}

	.cookie-bar__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	.cookie-bar__settings {
		grid-column: 1 / -1;
		order: 1;
	}

	.cookie-settings {
		padding: 24px 20px;
	}

	.cookie-settings__title {
		font-size: 20px;
	}

	.cookie-settings__actions {
		display: grid;
	}
}

@media (max-width: 379px) {
	.cookie-bar__actions {
		grid-template-columns: 1fr;
	}
}

/* 5. Header ------------------------------------------------------------- */
/* Sticky header (not in the design – decision 2026-10-15). Mobile: the whole 72px bar sticks.
   Desktop: the header sticks 48px above the viewport, so only the lower 72px of the top bar and the
   navigation stay visible (132px); its height never changes, so the content does not jump. */
.site-header {
	position: sticky;
	top: var(--admin-bar-offset);
	z-index: 10;
	background: var(--color-white);
	transition: box-shadow 200ms ease-out;
}

/* Scrolled (JS .is-compact, scrollY ≥ 48 at every width): the header gets the button hover shadow
   (tokens shadow.button-hover) so it does not blend with white sections below. */
.site-header.is-compact {
	box-shadow: var(--shadow-button-hover);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
}

.site-logo {
	display: block;
	flex-shrink: 1;
	max-width: 273px;
}

.site-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.site-header__actions {
	display: none;
	align-items: center;
	gap: 30px;
}

.header-phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--color-black);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* Hover / focus not in the design (decision 2026-10-15): underline of the number as for the phone and
   e-mail in the footer and the megamenu contact box; also in the mobile menu. */
.header-phone span {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--transition);
}

.header-phone:hover span,
.header-phone:focus-visible span {
	text-decoration-color: currentColor;
}

/* Header phone with the customer line status (not in the design, decisions 2026-10-16, variant C;
   template-parts/components/header-contact.php): phone icon from the footer (phone.svg, Figma, outline; 22px blue)
   in a 44px circle (surface-light) spanning both
   rows, status dot badge on the circle; number 16/700 and below it the state text 14/500 (green / text grey),
   "·" and the opening hours 14/400 #595C65. Closed state is grey, not red (decent). */
.header-contact {
	--header-contact-bg: var(--color-white);
	--header-contact-circle: var(--color-surface-light);

	display: grid;
	grid-template-columns: 44px auto;
	column-gap: 12px;
	row-gap: 2px;
	align-items: center;
}

.header-contact__icon {
	position: relative;
	display: flex;
	grid-row: 1 / span 2;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--header-contact-circle);
}

.header-contact__icon .icon {
	width: 22px;
	height: 22px;
	color: var(--color-blue);
}

.header-contact .header-phone {
	justify-self: start;
}

.line-status {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	column-gap: 6px;
	justify-self: start;
	margin: 0;
	color: var(--color-text);
	font-size: var(--font-size-small);
	font-weight: 400;
	line-height: 1.45;
	cursor: default;
}

.line-status__text,
.line-status__hours {
	white-space: nowrap;
}

.line-status__text {
	color: var(--color-text);
	font-weight: 500;
}

.is-open .line-status__text {
	color: var(--color-status-open-text);
}

.line-status__sep {
	margin-right: 6px;
}

/* Badge: 10px dot with a 2px ring in the background colour, bottom right on the circle. */
.line-status__dot {
	position: absolute;
	right: 0;
	bottom: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-icon-muted);
	box-shadow: 0 0 0 2px var(--header-contact-bg);
}

.is-open .line-status__dot {
	background: var(--color-status-open);
}

/* Pulse: SVG ring in the dot – r 5 → 13, opacity 0.5 → 0, 2s, SMIL with spline 0 0 0.2 1. SVG geometry is
   antialiased at subpixel sizes; a scaled ::after (with will-change) and an animated box-shadow spread
   stuttered in Firefox (snapped to whole pixels). */
.line-status__pulse {
	position: absolute;
	top: -8px;
	left: -8px;
	display: none;
	max-width: none;
	overflow: visible;
	fill: var(--color-status-open);
	pointer-events: none;
}

.is-open .line-status__pulse {
	display: block;
}

/* Mobile menu (surface-light box): white circle, hours always on their own line without the separator. */
.mobile-menu .header-contact {
	--header-contact-bg: var(--color-surface-light);
	--header-contact-circle: var(--color-white);
}

.mobile-menu .line-status {
	flex-direction: column;
}

.mobile-menu .line-status__sep {
	display: none;
}

/* Tooltip (not in the design): navy box, white 14/400, radius 8, button hover shadow, below the row;
   fade + 4px slide, 150ms. */
.line-status__tooltip {
	position: absolute;
	top: calc(100% + 8px);
	left: -8px;
	z-index: 20;
	width: max-content;
	max-width: min(400px, calc(100vw - 32px));
	padding: 8px 12px;
	border-radius: var(--radius);
	background: var(--color-navy);
	box-shadow: var(--shadow-button-hover);
	color: var(--color-white);
	font-size: var(--font-size-small);
	line-height: 1.45;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	pointer-events: none;
}

.line-status__tooltip::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 12px;
	border: 6px solid transparent;
	border-bottom-color: var(--color-navy);
}

.line-status:hover .line-status__tooltip,
.header-contact__icon:hover ~ .line-status .line-status__tooltip {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-navy);
	cursor: pointer;
}

/* Mobile: call button + hamburger (call button from wf-mobile.pdf, not in Figma – decision 2026-10-20).
   Looks like the header phone circle (44px #F1F4F8, phone.svg 22px blue); 48px touch target. */
.site-header__mobile {
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-call {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--color-blue);
}

.header-call::before {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-surface-light);
	transition: background-color var(--transition);
}

.header-call .icon {
	position: relative;
	width: 22px;
	height: 22px;
}

.header-call:hover::before,
.header-call:focus-visible::before {
	background: var(--color-megamenu-border);
}

/* Hamburger drawn in CSS (no icon in the design). */
.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after,
.menu-toggle__icon span {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

.menu-toggle__icon {
	position: relative;
	background: transparent;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	transition: transform 0.2s ease;
}

.menu-toggle__icon::before {
	top: -7px;
}

.menu-toggle__icon::after {
	top: 7px;
}

/* The middle bar fades with the turning outer bars (2026-11-13; before it disappeared at once). */
.menu-toggle__icon span {
	transition: opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
	transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
	display: none;
	position: relative;
	padding-top: 1px;
}

/* Top border (#DFDFDF). On the homepage only (body .home) it is drawn from the left once on page load
   (not in the design – decision 2026-10-15): 1100 ms ease-in-out (easeInOutCubic) after 200 ms – starts and
   ends softly; ends at 1300 ms, when the hero headlights flash (blocks/hero/style.css). */
.site-nav::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--color-border);
	transform-origin: left center;
}

.home .site-nav::before {
	animation: nav-line 1100ms cubic-bezier(0.65, 0, 0.35, 1) 200ms both;
}

@keyframes nav-line {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.site-nav__list {
	display: flex;
	justify-content: center;
	min-height: calc(var(--nav-height) - 1px);
	margin: 0;
	padding: 0 21px;
	list-style: none;
}

/* Figma gap 80px is split into item padding so the open-state line spans the item + half gaps (Figma Line 1). */
.site-nav__list > .menu-item {
	display: flex;
	align-items: center;
	padding-inline: clamp(20px, 2.1vw, 40px);
	color: var(--color-black);
	/* 2px line drawn as a background so the item needs no positioning (the megamenu is positioned to .site-nav). */
	background: linear-gradient(var(--color-orange), var(--color-orange)) no-repeat center bottom / 0 2px;
	transition: color var(--transition), background-size 250ms ease-out;
}

/* Open megamenu (Figma 310:718 …): orange text + chevron, 2px orange line on the bottom edge.
   Also used for hover / focus of all items and for the current page or section (not in the design).
   The line grows from the centre to the sides in 250 ms (not in the design). */
.site-nav__list > .menu-item:hover,
.site-nav__list > .menu-item:focus-within,
.site-nav__list > .menu-item.is-open,
.site-nav__list > .current-menu-item,
.site-nav__list > .current-menu-ancestor,
.site-nav__list > .current-menu-parent,
.site-nav__list > .current-page-ancestor,
.site-nav__list > .current_page_parent {
	color: var(--color-orange);
	background-size: 100% 2px;
}

.site-nav__list > .menu-item > a {
	display: inline-flex;
	align-items: center;
	min-height: calc(var(--nav-height) - 1px);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

/* Chevron button: 24px hit area, chevron ≈ 10px after the text (Figma), negative margin keeps the item width = text. */
.megamenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0 -26px 0 2px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* Figma: chevron rotated 180° in the open state (310:738, 332:1074, 333:1634). */
.megamenu-toggle .menu-chevron {
	transition: rotate var(--transition);
}

.megamenu-toggle[aria-expanded="true"] .menu-chevron {
	rotate: 180deg;
}

@media (min-width: 1024px) {
	.site-header {
		top: calc(var(--admin-bar-offset) - var(--header-sticky-shift));
	}

	.site-header.is-compact {
		--header-visible: calc(var(--header-bar-height) + var(--nav-height) - var(--header-sticky-shift));
	}

	.site-header__bar {
		min-height: var(--header-bar-height);
	}

	/* Compact state: logo and actions move to the centre of the visible 72px and the logo shrinks
	   (transform only, no reflow). */
	.site-logo,
	.site-header__actions {
		transition: transform 200ms ease-out;
	}

	.site-logo {
		transform-origin: left center;
	}

	.site-header.is-compact .site-header__actions {
		transform: translateY(calc(var(--header-sticky-shift) / 2));
	}

	.site-header.is-compact .site-logo {
		transform: translateY(calc(var(--header-sticky-shift) / 2)) scale(0.75);
	}

	/* The compact transform makes the actions a stacking context, which traps the status tooltip (z-index 20)
	   inside it; z-index 1 lifts the whole group above the later navigation (its top line is positioned and,
	   on the homepage, keeps the animation transform), so the tooltip is not crossed by the line. */
	.site-header__actions {
		position: relative;
		z-index: 1;
		display: flex;
	}

	.site-header__mobile {
		display: none;
	}

	.site-nav {
		display: block;
	}

	.mobile-menu {
		display: none;
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.site-logo {
		max-width: 220px;
	}

	.site-nav__list > .menu-item > a {
		font-size: var(--font-size-small);
	}
}

/* 5.1 Megamenu ---------------------------------------------------------- */
/* Figma 310:861 (4 cards, 1716 × 480), 332:1196 (red), 333:1536 (2 cards, 1410 × 528). */
.megamenu--blue {
	--megamenu-accent: var(--color-orange);
	--megamenu-gradient: linear-gradient(180deg, #22335c 0%, #2364ad 100%);
	--megamenu-muted: #9cbfef;
}

.megamenu--red {
	--megamenu-accent: var(--color-theme-red);
	--megamenu-gradient: linear-gradient(180deg, #d42000 0%, #8b210e 100%);
	--megamenu-muted: #f59b8b;
}

.megamenu--purple {
	--megamenu-accent: var(--color-theme-purple);
	--megamenu-gradient: linear-gradient(180deg, #2e1199 0%, #190752 100%);
	--megamenu-muted: #8d76de;
}

.megamenu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 1;
	width: min(var(--megamenu-width), 100% - 2 * var(--gutter));
	/* Low viewports (e.g. 2 × 2 cards below 1440px): the panel ends a gutter above the viewport bottom
	   and scrolls inside. The visible part of the sticky header (180px / compact 132px) and the admin bar
	   are subtracted. */
	max-height: calc(100dvh - var(--admin-bar-offset) - var(--header-visible) - var(--gutter));
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Figma: stroke inside, content 28px from the outer edge → 27px + 1px border. */
	padding: 27px;
	border: 1px solid var(--color-megamenu-border);
	border-radius: var(--radius);
	background: var(--color-white);
	box-shadow: var(--shadow-megamenu);
	color: var(--color-black);
	translate: -50% 0;
	/* Not in the design: slides 8px down + fades in (200 ms), out faster (120 ms); display kept until the fade ends. */
	transition: opacity 200ms ease-out, translate 200ms ease-out, display 200ms allow-discrete;
}

.megamenu--cards-2 {
	width: min(var(--megamenu-width-narrow), 100% - 2 * var(--gutter));
}

.megamenu[hidden] {
	display: none;
	opacity: 0;
	pointer-events: none;
	translate: -50% -8px;
	transition-duration: 120ms;
}

@starting-style {
	.megamenu:not([hidden]) {
		opacity: 0;
		translate: -50% -8px;
	}

	.megamenu-backdrop:not([hidden]) {
		opacity: 0;
	}
}

/* Switching between items: panels swap without animation (JS adds .is-instant). */
.megamenu.is-instant {
	transition: none;
}

.megamenu__main {
	display: grid;
	grid-template-columns: 1fr minmax(0, 360px);
	gap: 14px;
}

.megamenu__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Below 1440px the cards wrap to 2 × 2 – the contact box keeps its own height instead of stretching to both rows. */
@media (max-width: 1439px) {
	.megamenu__main > .contact-card {
		align-self: start;
	}
}

@media (min-width: 1440px) {
	.megamenu__main {
		grid-template-columns: 1fr var(--megamenu-box-width);
	}

	.megamenu__cards {
		grid-template-columns: repeat(var(--megamenu-cards, 4), minmax(0, 1fr));
	}
}

.megamenu-card {
	display: flex;
	flex-direction: column;
	min-height: 351px;
	/* Figma padding-bottom is 35px, but the link sits 24px above the card edge in every card (y 307) – 24px used. */
	padding: 20px 14px 24px 32px;
	border-radius: var(--radius);
	background: var(--color-megamenu-card);
	transition: background-color var(--transition), box-shadow var(--transition);
}

/* Hover – service area card pattern (Component 4–7 Variant2: icon −10px, arrow +3px). The background change
   #F3F6F9 → #F1F4F8 was barely visible, so the card lifts like the transport card (Component 8–11 Variant2:
   white background) with the button hover shadow (decision 2026-10-15). Mouse and keyboard only (2026-11-11). */
@media (hover: hover) {
	.megamenu-card:is(:hover, :has(:focus-visible)) {
		background: var(--color-white);
		box-shadow: var(--shadow-button-hover);
	}

	.megamenu-card:is(:hover, :has(:focus-visible)) .more-link .icon {
		transform: translateX(var(--hover-arrow-shift));
	}

	.megamenu-card:is(:hover, :has(:focus-visible)) .megamenu-card__icon {
		transform: translateY(var(--hover-lift));
	}
}

/* Current page or its subpage (not in the design – 2026-11-11): the card background lightened by half towards
   white and a 3px line in the megamenu accent along the bottom edge, like the line under the current top-level
   item. Hover keeps the white card. */
.megamenu-card.is-current {
	background: color-mix(in srgb, var(--color-megamenu-card) 50%, var(--color-white));
	box-shadow: inset 0 -3px 0 var(--megamenu-accent);
}

@media (hover: hover) {
	.megamenu-card.is-current:is(:hover, :has(:focus-visible)) {
		box-shadow: inset 0 -3px 0 var(--megamenu-accent), var(--shadow-button-hover);
	}
}

/* Icons differ in size in Figma (43 × 50 … 60 × 60) – 60px box, aligned bottom left. */
.megamenu-card__icon {
	display: flex;
	align-items: flex-end;
	height: 60px;
	margin-top: 13px;
	color: var(--megamenu-accent);
	transition: transform var(--transition);
}

/* Shared transport icons scaled to the Figma megamenu size (stroke stays 3 / 2.7 px – non-scaling-stroke). */
.megamenu-card__icon .icon--truck {
	width: 58px;
	height: auto;
}

.megamenu-card__icon .icon--plane {
	width: 56px;
	height: auto;
}

.megamenu-card__icon .icon--ship {
	width: 55px;
	height: auto;
}

.megamenu-card__icon .icon--train {
	width: 41px;
	height: auto;
}

/* Icon library (2026-10-22): icons not designed for the megamenu fit a 60 × 53 box (the tallest card icons). */
.megamenu-card__icon .icon:not(.icon--truck, .icon--plane, .icon--ship, .icon--train, .icon--courier, .icon--charter, .icon--direct-mail, .icon--print) {
	width: auto;
	height: 53px;
	max-width: 60px;
}

.megamenu-card__title {
	margin: 14px 0 0;
	color: var(--color-navy);
	font-size: var(--font-size-megamenu-title);
	font-weight: 700;
	line-height: 1.2;
}

.megamenu-card__text {
	margin: 28px 0 0;
	color: var(--color-text);
	line-height: 1.55;
}

.megamenu-card .more-link {
	margin-top: auto;
	padding-top: 20px;
}

.megamenu__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 21px 34px;
	margin: 27px 4px 0;
	padding-top: 21px;
	border-top: 1px solid var(--color-megamenu-divider);
}

.megamenu__prompt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--color-navy);
}

.megamenu__overview {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--color-blue);
	font-weight: 700;
	text-decoration: none;
}

.megamenu__overview .icon {
	transition: transform var(--transition);
}

.megamenu__overview:hover .icon,
.megamenu__overview:focus-visible .icon {
	transform: translateX(var(--hover-arrow-shift));
}

/* Figma Rectangle 7: page dimmed below the navigation; the header stays above (z-index 10). */
.megamenu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9;
	background: var(--color-backdrop);
	transition: opacity 200ms ease-out, display 200ms allow-discrete;
}

.megamenu-backdrop[hidden] {
	display: none;
	opacity: 0;
	pointer-events: none;
	transition-duration: 120ms;
}

/* Contact box – dark variant (megamenu). Gradient and muted colour come from the megamenu theme. */
.contact-card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 27px 26px 26px;
	border-radius: var(--radius);
}

.contact-card p {
	margin: 0;
}

.contact-card--dark {
	color: var(--color-white);
	background: var(--megamenu-gradient, linear-gradient(180deg, #22335c 0%, #2364ad 100%));
}

.contact-card__title {
	font-size: var(--font-size-card-title);
	font-weight: 700;
	line-height: 1.2;
}

.contact-card__text,
.contact-card__position,
.contact-card__link--email {
	color: var(--megamenu-muted, #9cbfef);
}

.contact-card__person {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 11px 0 6px;
}

.contact-card__name {
	font-size: var(--font-size-contact-name);
	font-weight: 700;
	line-height: 1.5;
}

.contact-card__position {
	line-height: 1.3;
}

.contact-card__link {
	display: flex;
	align-items: center;
	gap: 17px;
	min-height: 26px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

/* Shared phone / mail icons (13px in the footer) at 26px, Figma colour #F47700. */
.contact-card__link .icon {
	width: 26px;
	height: 26px;
	color: var(--color-megamenu-orange);
}

.contact-card__link--phone {
	min-height: 34px;
	font-weight: 700;
}

.contact-card__link:hover span {
	text-decoration: underline;
}

.contact-card__action {
	margin-top: auto;
	padding-top: 24px;
}

.contact-card__button {
	width: 100%;
	min-width: 0;
}

/* Figma override #F47700 on the button instance; hover state is not designed → primary button hover. */
.contact-card .button--primary {
	background: var(--color-megamenu-orange);
}

.contact-card .button--primary:hover,
.contact-card .button--primary:focus-visible {
	background: var(--color-orange-hover);
}

.contact-card--dark :focus-visible {
	outline-color: var(--color-white);
}

/* Contact box – light variant (service hub, Figma 391:1138 / 391:1154): white, shadow 0 0 30 rgba(0,0,0,.15),
   heading and name navy, description, position and phone #595C65, e-mail orange #F08319, icons #F47700, no button.
   Photo (not in the design, decision 2026-10-20): 80px circle above the name, only when set. */
.contact-card--light {
	color: var(--color-text);
	background: var(--color-white);
	box-shadow: var(--shadow-contact);
}

.contact-card--light .contact-card__title,
.contact-card--light .contact-card__name {
	color: var(--color-navy);
}

.contact-card--light .contact-card__title {
	margin: 0;
}

.contact-card--light .contact-card__text,
.contact-card--light .contact-card__position {
	color: var(--color-text);
}

.contact-card--light .contact-card__link--email {
	color: var(--theme-accent);
}

.contact-card--light .contact-card__link .icon {
	color: var(--theme-contact-icon);
}

/* Kontakt specialists (Figma 665:1057): area badge above the name – height 29, radius 6, 13/700 uppercase, tracking
   0.65 (as the Novinky category badge); colours of the area themes on a light fill. Button orange #F08319 (Button
   15:5 with shadow), width of its text, left. */
.contact-card__badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	min-height: 29px;
	padding: 0 12px;
	border-radius: 6px;
	color: var(--color-orange);
	background: var(--color-badge-orange);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.65px;
	text-transform: uppercase;
}

.contact-card__badge--red {
	color: var(--color-theme-red);
	background: var(--color-badge-red);
}

.contact-card__badge--purple {
	color: var(--color-theme-purple);
	background: var(--color-badge-purple);
}

/* Mobile (2026-11-13, decision of the user, design chybí): a long badge wrapped to the full width with a short last
   line ("… EXPRESNÍ / LETY"); tighter letter spacing, balanced lines and 4px vertical padding for two lines. */
@media (max-width: 767px) {
	.contact-card__badge {
		padding-block: 4px;
		letter-spacing: 0.3px;
		text-wrap: balance;
	}
}

.contact-card--light .contact-card__button {
	width: auto;
	min-width: 0;
}

.contact-card--light .button--primary {
	background: var(--color-orange);
}

/* Variant row – Nezávazná poptávka (Figma 820:1189): a person inside the light box – padding 27/0/26 (Figma right
   26 is the box padding), bottom line 1px #D7E0EC, no own background or shadow; no position and photo (template). */
.contact-card--row {
	padding: 27px 0 26px;
	border-bottom: 1px solid var(--color-megamenu-divider);
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.contact-card__photo {
	width: 80px;
	height: 80px;
	margin-bottom: 7px;
	border-radius: 50%;
	object-fit: cover;
}

@media (max-width: 1023px) {
	.megamenu-backdrop {
		display: none;
	}
}

/* 6. Mobile menu -------------------------------------------------------- */
.mobile-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* Whole admin bar height also below 601px, where it is not fixed but may be above the header. */
	max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 72px);
	overflow-y: auto;
	padding: 16px var(--gutter) 0; /* the bottom gap is the sticky button band (.mobile-menu__actions) */
	border-top: 1px solid var(--color-border);
	background: var(--color-white);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	/* The page below does not scroll on when the menu reaches its end (iOS, 2026-11-13). */
	overscroll-behavior: contain;
}

.mobile-menu[hidden] {
	display: none;
}

.mobile-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Mobile menu (2026-11-13, decision of the user, no design): the service areas as cards, the other items as text
   tiles below, everything left-aligned. */
/* Layout: both menus share one flex row (the lists are display: contents) – cards full width, the other items as
   tiles two per row, 8px apart; a lone last tile takes the whole row (flex-grow). */
.mobile-menu__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mobile-menu__list {
	display: contents;
}

.mobile-menu__list > li {
	flex: 1 1 calc(50% - 4px);
	min-width: 0;
}

.mobile-menu__list > li:has(> a > .mobile-menu__icon) {
	flex-basis: 100%;
}

/* Tablet (2026-11-13, decision of the user, no design): from 768px the cards two per row (4 services = 2 × 2; at
   640px the descriptions did not fit), equal heights in a row; a lone card takes the whole row. */
@media (min-width: 768px) {
	.mobile-menu__list > li:has(> a > .mobile-menu__icon) {
		flex-basis: calc(50% - 4px);
	}
}

/* Cards first, then a line break (empty full-width item; with the two gaps 16px between the groups), then the
   tiles – a card left alone in its row never shares the row with a tile. */
.mobile-menu__list > li {
	order: 2;
}

.mobile-menu__list > li:has(> a > .mobile-menu__icon) {
	order: 0;
}

.mobile-menu__nav::before {
	content: "";
	flex-basis: 100%;
	order: 1;
}

/* Tiles – items without an icon (2026-11-13, decision of the user, no design): light surface #F1F4F8, radius 8,
   52px high, navy 16/500 (desktop navigation weight, Figma); hover a #CDD9E9 border, current page or section
   orange border and text. */
.mobile-menu__list a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--color-surface-light);
	color: var(--color-navy);
	font-size: var(--font-size-body);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color var(--transition), background-color var(--transition);
}

.mobile-menu__list a:hover {
	border-color: var(--color-card-border);
}

.mobile-menu__list > :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor, .current_page_parent) > a {
	border-color: var(--color-orange);
	color: var(--color-orange);
}

/* Cards – items with an icon (inc/megamenu.php): white, 1px border, radius 8, padding 12/14; icon tile 44px in the
   badge colours of the megamenu theme (blue = orange as on the homepage cards), title 16/700 navy, description
   14/400 (3 lines at most, as the opening hours below), grey chevron. Hover light background, current page /
   section orange border. */
.mobile-menu__list a:has(.mobile-menu__icon) {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	transition: background-color var(--transition), border-color var(--transition);
}

.mobile-menu__list a:has(.mobile-menu__icon):hover {
	background: var(--color-surface-light);
}

.mobile-menu__list > :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor, .current_page_parent) > a:has(.mobile-menu__icon) {
	border-color: var(--color-orange);
	color: var(--color-navy);
}

.mobile-menu__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius);
	background: var(--color-badge-orange);
	color: var(--color-orange);
}

.mobile-menu__icon--red {
	background: var(--color-badge-red);
	color: var(--color-theme-red);
}

.mobile-menu__icon--purple {
	background: var(--color-badge-purple);
	color: var(--color-theme-purple);
}

.mobile-menu__icon .icon {
	width: auto;
	max-width: 26px;
	height: 24px;
}

.mobile-menu__icon .icon :is(path, circle, line, polyline, polygon, rect, ellipse) {
	stroke-width: 1.8px;
}

.mobile-menu__card-text {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 0;
}

.mobile-menu__card-title {
	font-weight: 700;
	line-height: 1.3;
}

.mobile-menu__card-desc {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color-text);
	font-size: var(--font-size-small);
	font-weight: 400;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.mobile-menu__chevron {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-icon-muted);
}

/* Sub-services (2026-11-13, decision of the user, no design; inc/megamenu.php + main.js). The card keeps its
   link to the hub; the right 52px is the expand button (line on the left, chevron turning down / up), the list opens
   below the card with a 2px line in the theme colour. On tablet (2 × 2) an open card takes the whole row, so no
   empty space appears next to its list; the card left alone in the row above grows to the full width too. */
.mobile-menu__list > li:has(> .mobile-menu__expand[aria-expanded="true"]) {
	flex-basis: 100%;
}

.mobile-menu__list a:has(.mobile-menu__icon) {
	min-height: 88px;
}

.mobile-menu__list > li:has(> .mobile-menu__expand) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 52px;
}

.mobile-menu__list > li:has(> .mobile-menu__expand) > a {
	grid-row: 1;
	grid-column: 1 / -1;
	padding-right: 64px;
}

.mobile-menu__expand {
	display: grid;
	z-index: 1;
	grid-row: 1;
	grid-column: 2;
	place-items: center;
	margin: 1px 1px 1px 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--color-border);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: transparent;
	color: var(--color-icon-muted);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.mobile-menu__expand:hover {
	background: var(--color-surface-light);
	color: var(--color-navy);
}

.mobile-menu__expand-icon {
	width: 20px;
	height: 20px;
	rotate: 90deg;
	transition: rotate var(--transition);
}

.mobile-menu__expand[aria-expanded="true"] .mobile-menu__expand-icon {
	rotate: -90deg;
}

.mobile-menu__sub {
	grid-column: 1 / -1;
	margin: 6px 0 0 35px;
	padding: 0 0 0 16px;
	border-left: 2px solid var(--color-orange);
	list-style: none;
}

.mobile-menu__sub--red {
	border-left-color: var(--color-theme-red);
}

.mobile-menu__sub--purple {
	border-left-color: var(--color-theme-purple);
}

.mobile-menu__sub[hidden] {
	display: none;
}

/* An opened list fades in like the menu (200 ms, opacity only – a height animation stutters in Firefox); closing is
   instant. No fade with reduced motion. */
.mobile-menu__sub {
	transition: opacity 200ms ease-out;
}

@starting-style {
	.mobile-menu__sub:not([hidden]) {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu__sub,
	.menu-toggle__icon span {
		transition: none;
	}
}

/* Sub-service links: plain text 16/400 navy, 8px rows (not the tiles of .mobile-menu__list a). */
.mobile-menu__list .mobile-menu__sub a {
	display: block;
	height: auto;
	min-height: 0;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--color-navy);
	font-weight: 400;
}

.mobile-menu__list .mobile-menu__sub a:hover {
	color: var(--color-orange);
}

.mobile-menu__list .mobile-menu__sub a.is-current {
	color: var(--color-orange);
	font-weight: 500;
}

.mobile-menu__contact {
	display: grid;
	gap: 8px;
	margin-top: 24px;
	padding: 16px;
	border-radius: var(--radius);
	background: var(--color-surface-light);
}

.mobile-menu__contact-title {
	margin: 0;
	/* Box centred (2026-11-11, kept 2026-11-13 – decision of the user): the title centred, the phone and e-mail
	   rows centred as blocks (icon and text inside keep their alignment). */
	text-align: center;
	color: var(--color-navy);
	font-weight: 700;
}

/* Quick contact (no design, decision 2026-10-15): the e-mail row matches the phone row above it –
   24px icon (mail.svg, blue like the phone icon gradient), gap 9px, black text 16/400 (contact box e-mail
   weight), underline on hover / focus like the phone. */
.mobile-menu__contact > a,
.mobile-menu__contact > .header-contact {
	justify-self: center;
}

/* Optical centring (2026-11-12): the light 44px icon circle makes the centred phone row look shifted right. */
.mobile-menu__contact > .header-contact {
	translate: -12px 0;
}

.mobile-menu__email {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--color-black);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mobile-menu__email .icon {
	width: 24px;
	height: 24px;
	color: var(--color-blue);
}

.mobile-menu__email span {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--transition);
}

.mobile-menu__email:hover span,
.mobile-menu__email:focus-visible span {
	text-decoration-color: currentColor;
}

/* The button stays visible at the bottom of the menu while the cards scroll (2026-11-13, decision of the user):
   sticky at the bottom of the scrolling panel (which has no bottom padding, so Chrome and Firefox place it alike),
   full panel width, a white band with a top line and the iPhone home indicator area below the button. */
.mobile-menu__actions {
	position: sticky;
	bottom: 0;
	z-index: 1;
	margin: 24px calc(-1 * var(--gutter)) 0;
	padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--color-border);
	background: var(--color-white);
}

.mobile-menu__actions .button {
	width: 100%;
}

body.has-mobile-menu-open {
	overflow: hidden;
}

/* Page below the mobile menu (tall phones, where the menu ends above the bottom) dimmed like under the megamenu
   (2026-11-12, design chybí); the header with the menu stays above (z-index 10), a click there closes it (main.js). */
body.has-mobile-menu-open::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9;
	background: var(--color-backdrop);
}

/* Opening (2026-11-13, decision of the user): the menu and the dimmed page fade in like the megamenu (200 ms
   ease-out), opacity only – small movements stutter in Firefox; closing is instant. No fade with reduced motion. */
.mobile-menu,
body.has-mobile-menu-open::after {
	transition: opacity 200ms ease-out;
}

@starting-style {
	.mobile-menu:not([hidden]),
	body.has-mobile-menu-open::after {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu,
	body.has-mobile-menu-open::after {
		transition: none;
	}
}

/* 7. Footer ------------------------------------------------------------- */
.footer-callout {
	background: var(--color-surface-light);
}

.footer-callout__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 150px;
	padding-block: 32px;
}

.footer-callout__copy {
	max-width: 735px;
	color: var(--color-blue);
}

.footer-callout__title {
	margin: 0 0 10px;
	font-size: var(--font-size-card-title);
	font-weight: 700;
	line-height: 1.3;
}

.footer-callout__text {
	margin: 0;
	font-size: var(--font-size-callout);
	line-height: 1.45;
}

/* Figma 236:318: the button instance has no shadow (effects overridden, export 2026-10-20); hover keeps Button Variant2. */
.footer-callout .button--primary:not(:hover, :focus-visible) {
	box-shadow: none;
}

.footer-body {
	padding-top: 70px;
	color: var(--color-white);
	background: var(--color-navy);
	font-size: var(--font-size-small);
}

.footer-body__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-bottom: 40px;
}

.footer-heading {
	margin: 0;
	font-size: var(--font-size-footer-heading);
	font-weight: 500;
	line-height: 1.35;
}

.footer-heading--accent {
	color: var(--color-footer-link);
}

.footer-brand__logo {
	display: block;
	width: 222px;
}

.footer-brand__logo img {
	display: block;
}

.footer-brand__details {
	display: grid;
	gap: 21px;
	max-width: 274px;
	margin-top: 28px;
	line-height: 1.6;
}

.footer-brand__details p {
	margin: 0;
}

.footer-brand__claim {
	font-weight: 700;
}

.footer-nav__list {
	display: grid;
	gap: 20px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	color: var(--color-footer-link);
	line-height: 1.35;
}

.footer-nav--company .footer-nav__list {
	gap: 15px;
	margin-top: 20px;
}

/* Hover / focus not in the design (decision 2026-10-14, design-system.md kap. 9):
   muted links #8FAAEB → white (Figma benefit pattern), white contacts get an underline (megamenu contact box). */
.footer-nav__list a,
.footer-legal a,
.footer-social a {
	text-decoration: none;
	transition: color var(--transition);
}

.footer-nav__list a:hover,
.footer-nav__list a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-social a:hover,
.footer-social a:focus-visible {
	color: var(--color-white);
}

.footer-contact a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--transition);
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
	text-decoration-color: currentColor;
}

/* Orange ring is only ≈ 4.7 : 1 on navy – white (≈ 12.4 : 1) like the hero and the dark contact box. */
.footer-body :focus-visible {
	outline-color: var(--color-white);
}

.footer-contact__groups {
	display: grid;
	gap: 29px;
	margin-top: 15px;
}

.footer-contact p {
	margin: 0;
	line-height: 1.45;
}

.footer-contact__item {
	display: grid;
	gap: 4px;
}

.footer-contact__label,
.footer-contact__inline {
	display: flex;
	align-items: center;
	gap: 7px;
	line-height: 1.35;
}

.footer-contact__label {
	font-weight: 700;
}

/* Shared icons use currentColor (assets/images/icons/phone.svg, mail.svg). */
.footer-contact .icon {
	color: var(--color-orange);
}

.footer-contact__direct {
	display: grid;
	gap: 5px;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	min-height: 68px;
	padding-block: 13px 16px;
	border-top: 1px solid var(--color-footer-divider);
	color: var(--color-footer-link);
	font-size: var(--font-size-legal);
	line-height: 1.4;
}

.footer-legal p {
	margin: 0;
}

.footer-legal__author a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.footer-legal__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-legal__list li + li::before {
	content: "|";
	margin-inline: 0.5em;
}

/* "Nastavení cookies" (cookie bar 2026-11-11): a button after the legal menu, the same separator and hover. */
.footer-legal__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.footer-legal__cookies {
	transition: color var(--transition);
}

.footer-legal__cookies::before {
	content: "|";
	margin-inline: 0.5em;
	color: var(--color-footer-link);
}

.footer-legal__cookies:hover,
.footer-legal__cookies:focus-visible {
	color: var(--color-white);
}

/* Mobile (2026-11-12, no design): the legal links do not fit one line (a wrapped item started with the "|"
   separator), so they are stacked without separators, 8px apart; the whole legal row is one left-aligned column. */
@media (max-width: 767px) {
	.footer-legal,
	.footer-legal__nav,
	.footer-legal__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.footer-legal__list li + li::before,
	.footer-legal__cookies::before {
		content: none;
	}

	/* Legal row (2026-11-13, decision of the user, design chybí): the legal links first, in the footer link size with
	   12px gaps (touch), then © and Created by at the end in the small legal text, 8px apart. */
	.footer-legal {
		padding-block: 24px 32px;
	}

	.footer-legal__nav {
		order: 1;
		margin-bottom: 16px;
		font-size: var(--font-size-small);
	}

	.footer-legal__nav,
	.footer-legal__list {
		gap: 12px;
	}

	.footer-legal__copyright {
		order: 2;
	}

	.footer-legal__author {
		order: 3;
	}

	/* Contacts title white like the other footer titles (Figma desktop has it in the link colour). */
	.footer-heading--accent {
		color: var(--color-white);
	}
}

/* Social links under the contacts on mobile, in the legal row from 768px (site-footer.php renders both; the
   double class beats the later .footer-social display). */
.footer-social.footer-social--contact {
	margin-top: 24px;
}

/* Not the orange contact icons: the link colour like in the legal row. */
.footer-contact .footer-social a {
	color: var(--color-footer-link);
	text-decoration: none;
}

.footer-contact .footer-social a:is(:hover, :focus-visible) {
	color: var(--color-white);
}

.footer-contact .footer-social .icon {
	color: inherit;
}

@media (min-width: 768px) {
	.footer-social.footer-social--contact {
		display: none;
	}
}

@media (max-width: 767px) {
	.footer-social.footer-social--legal {
		display: none;
	}
}

.footer-social {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Shared icons use currentColor (linkedin.svg, facebook.svg, chsoft.svg). */
.footer-legal__author .icon {
	width: 58px;
	height: 14px;
}

.footer-social a {
	display: block;
	border-radius: 50%;
}

.footer-social .icon {
	width: 32px;
	height: 32px;
}

@media (min-width: 640px) {
	.footer-body__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	/* Column offsets from Figma: 0 / 295 / 605 / 1029 within 1370. */
	.footer-body__columns {
		grid-template-columns: 295fr 310fr 424fr 341fr;
		gap: 0;
		min-height: 294px;
		padding-bottom: 13px;
	}

	.footer-nav--services {
		max-width: 255px;
	}
}

@media (max-width: 767px) {
	.footer-callout__inner .button {
		width: 100%;
	}

	.footer-body {
		padding-top: 48px;
	}
}

/* 8. Content (text pages – design pending, spec 3.13) ------------------- */
.content-area {
	padding-block: 48px 80px;
}

.page-title {
	color: var(--color-navy);
	font-size: clamp(30px, 1.5rem + 1.5vw, 40px);
	font-weight: 500;
	line-height: var(--line-height-heading);
}

.entry > * {
	max-width: 870px;
}

.entry a {
	color: var(--color-blue);
}

/* Page hero band – 404 and search (no design, decision 2026-10-15): the homepage hero without the photo
   (hero gradient, white text, H1 hero typography). Symmetric padding: 48px (hero on mobile), from 768px
   78px (section padding-top of Druhy přepravy) – the hero's 143/76 belong to its fixed 630px height.
   The hero block style is loaded only with the block, so the values are repeated here. */
.page-hero {
	color: var(--color-white);
	background: var(--gradient-hero);
}

.page-hero__inner {
	padding-block: 48px;
}

.page-hero__title {
	margin: 0;
	max-width: 669px;
	font-size: clamp(34px, 1.6rem + 2.6vw, var(--font-size-h1));
	font-weight: 500;
	line-height: var(--line-height-heading);
}

/* Spacing as in the hero: title → text 24px (from 768px 51px), text → form 28px (hero text → buttons),
   form → button 19px (hero buttons gap). */
.page-hero__text {
	margin: 24px 0 0;
	max-width: 530px;
}

/* Search results count (2026-11-13, decision of the user): never broken inside, its own line on mobile. */
.page-hero__count {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.page-hero__count {
		display: block;
	}
}

.page-hero .search-form {
	margin-top: 28px;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 19px;
	margin-top: 19px;
}

.page-hero :focus-visible,
.page-hero .button:focus-visible {
	outline-color: var(--color-white);
}

/* A page that is only the band (404): the band fills the space down to the footer. */
.site-main:has(> .page-hero:only-child) {
	display: flex;
	flex-direction: column;
}

.site-main > .page-hero:only-child {
	flex: 1 0 auto;
}

@media (min-width: 768px) {
	.page-hero__inner {
		padding-block: 78px;
	}

	.page-hero__text {
		margin-top: 51px;
	}
}

/* Search form (no design): field styled as the form fields of Figma 391:1168 (padding 14/16, placeholder
   #91A5BF – decision 2026-10-20); height stays 60px like the button next to it (Figma field 52px). */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 19px;
	width: 100%;
	max-width: 760px;
}

.search-form__input {
	flex: 1 1 280px;
	min-width: 0;
	min-height: 60px;
	padding: var(--field-padding);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-black);
	font: inherit;
	font-size: var(--font-size-body);
}

.search-form__input::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

@media (max-width: 479px) {
	.search-form__submit,
	.page-hero__actions .button {
		width: 100%;
	}
}

/* Pagination (the_posts_pagination): blue links, current page navy 700. */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 32px;
}

.pagination .page-numbers {
	color: var(--color-blue);
	font-weight: 500;
	text-decoration: none;
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
	text-decoration: underline;
}

.pagination .page-numbers.current {
	color: var(--color-navy);
	font-weight: 700;
}

/* 9. Utilities ---------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	padding: 12px 16px;
	clip: auto;
	color: var(--color-white);
	background: var(--color-navy);
}