/* ===== CSS Reset (Eric Meyer) ===== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, b, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ===== Společné nastavení a proměnné ===== */
:root { --cb-font: "CzechiaSans", Roboto, Arial, sans-serif; --font-family: var(--cb-font); --font-family-primary: var(--cb-font); --cb-blue: #00469b; --cb-red: #d70c0f; --cb-red-dark: #b50817; --cb-red-soft: #fff4f2; --cb-text: var(--color-neutral-950, #262626); --cb-muted: var(--color-neutral-600, #5d5d5d); --cb-border: var(--color-neutral-200, #d1d1d1); --cb-surface: var(--color-neutral-0, #ffffff); --cb-surface-soft: var(--color-primary-50, #f2f6fc); --cb-shadow: 0 1.5rem 4rem rgba(10, 36, 80, 0.12); --cb-radius: 0.5rem; }
html { scroll-behavior: smooth; }
body { color: var(--cb-text); font-family: var(--cb-font); background: var(--cb-surface); }
a { text-underline-offset: 0.18em; }
button { font: inherit; }

/* Skryje obsah vizuálně, ale ponechá jej dostupný čtečkám obrazovky */
.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Odkaz pro přeskočení navigace klávesnicí - viditelný až po zaostření */
.skip-link {
	background: var(--cb-blue);
	border-radius: 0 0 var(--cb-radius) var(--cb-radius);
	color: #ffffff;
	left: 1rem;
	padding: 0.75rem 1.25rem;
	position: absolute;
	top: -3.5rem;
	transition: top 0.15s ease-in-out;
	z-index: 100;
}

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

/* ===== Layout ===== */
.page-shell { width: min(100% - 3rem, 70rem); margin: 0 auto; }
.site-hero { padding: 4.75rem 0 4rem; text-align: center; background: linear-gradient(180deg, #ffffff 0%, #ffffff 72%, var(--cb-surface-soft) 100%); border-bottom: 1px solid var(--cb-border); }
.hero-content { max-width: 52rem; }
.transition-section { padding: 4.5rem 0 4rem; background: var(--cb-surface); }
.faq-section { padding: 4.5rem 0; background: var(--color-neutral-50, #f6f6f6); }
.contact-section { padding: 4.5rem 0 5rem; background: var(--cb-surface); }
.section-grid { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
.site-footer { background: var(--cb-blue); color: #ffffff; }
.footer-content { display: grid; gap: 1.5rem; padding: 3rem 0 2rem; text-align: center; }

/* ===== Jednotlivé komponenty ===== */
.agency-kicker,
.section-label {
	color: var(--cb-red);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.site-hero h1 {
	color: var(--cb-red);
	font-size: clamp(2.35rem, 6vw, 4.75rem);
	font-weight: 700;
	line-height: 1.08;
	margin-bottom: 1.25rem;
}

.hero-lead {
	color: var(--cb-blue);
	font-size: clamp(1.35rem, 3.4vw, 2rem);
	font-weight: 700;
	line-height: 1.35;
	margin: 0 auto 1.75rem;
	max-width: 48rem;
}

.hero-copy {
	color: var(--cb-muted);
	font-size: 1.125rem;
	line-height: 1.65;
	margin: 0 auto 1rem;
	max-width: 47rem;
}

.agency-logos {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: 2.75rem;
}

.agency-logo {
	align-items: center;
	background: #ffffff;
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	display: flex;
	justify-content: center;
	min-height: 8.6rem;
	min-width: min(24rem, 45vw);
	padding: 1.35rem 2rem;
	text-decoration: none;
}

.agency-logo img {
	display: block;
	height: 4.5rem;
	max-width: 100%;
	width: auto;
}

.agency-logo:hover,
.agency-logo:focus-visible {
	border-color: var(--cb-red);
}

.logo-plus {
	align-items: center;
	background: var(--cb-red);
	border: 0.25rem solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 0.5rem 1.4rem rgba(215, 12, 15, 0.22);
	color: #ffffff;
	display: flex;
	flex: 0 0 auto;
	font-size: 1.8rem;
	font-weight: 700;
	height: 3.5rem;
	justify-content: center;
	margin: 0 -0.5rem;
	position: relative;
	width: 3.5rem;
	z-index: 1;
}

.logo-plus__glyph {
	display: block;
	/* optická korekce vertikálního středu znaku (metriky písma CzechiaSans) */
	padding-top: 0.1em;
}

.section-intro h2 {
	color: var(--cb-blue);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.15;
}

.section-intro h2::after {
	background: var(--cb-red);
	content: "";
	display: block;
	height: 0.25rem;
	margin-top: 1.2rem;
	width: 10.5rem;
}

.timeline {
	display: block;
}

.timeline .gov-stepper-item__prefix {
	--indicator-background: var(--cb-red);
	--color: #ffffff;
}

.timeline .gov-stepper-item__prefix-glyph {
	display: block;
	/* optická korekce vertikálního středu čísla (metriky písma CzechiaSans) */
	padding-top: 0.1em;
}

.timeline *[slot="annotation"] {
	display: inline-flex;
	margin: 0.35rem 0 0;
}

.timeline [slot="content"],
.faq-list p,
.contact-panel p,
.footer-content p {
	color: var(--cb-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.faq-list {
	background: var(--cb-surface);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius);
	overflow: hidden;
}

.faq-list p {
	padding-bottom: 1.25rem;
}

.faq-list .gov-accordion-item__arrow gov-icon {
	display: inline-flex;
	transition: transform 150ms ease-in-out;
}

.faq-list details[open] .gov-accordion-item__arrow gov-icon {
	transform: rotate(180deg);
}

.faq-item[open] summary,
.faq-item:has(details[open]) summary {
	background-color: var(--background-primary-subtle);
}

.contact-panel {
	background: var(--cb-blue);
	border-radius: var(--cb-radius);
	box-shadow: var(--cb-shadow);
	color: #ffffff;
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}

.contact-panel .section-label,
.contact-panel p,
.contact-panel a {
	color: #ffffff;
}

.contact-panel h2 {
	font-size: clamp(1.8rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0.85rem;
}

.contact-button {
	--background: var(--cb-red);
	--hover-background: var(--cb-red-dark);
	--active-background: var(--cb-red-dark);
	--color: #ffffff;
	--hover-color: #ffffff;
	display: inline-block;
	margin-top: 1.7rem;
}

.service-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.service-link {
	--border: var(--cb-red);
	--color: var(--cb-red);
	--height: auto;
	--hover-background: var(--cb-red-soft);
	--hover-color: var(--cb-red-dark);
	flex: 1 1 0;
	max-width: none;
	min-height: 5rem;
}

.service-link .element {
	justify-content: center;
	min-height: 5rem;
	text-align: center;
	white-space: normal;
	width: 100%;
}

.footer-content b {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.7rem;
}

.footer-content p {
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 52rem) {
	.page-shell {
		width: min(100% - 2rem, 70rem);
	}

	.site-hero {
		padding: 3.25rem 0 3rem;
	}

	.section-grid {
		gap: 2rem;
		grid-template-columns: 1fr;
	}

	.agency-logo {
		min-width: min(21rem, 46vw);
	}

	.service-actions {
		flex-direction: column;
	}
}

@media (max-width: 32rem) {
	.hero-copy {
		font-size: 1rem;
	}

	.agency-logos {
		flex-direction: column;
	}

	.logo-plus {
		margin: -0.35rem 0;
	}

	.faq-list p {
		padding: 0 1rem 1.25rem;
	}
}