/* Mobile-first. The desktop layout is a max-width and a two-column breakpoint, not a
   separate design — the same shell carries the form on one page and a finished plan on
   the other. */
:root {
	--ink: #16202c;
	--muted: #5a6875;
	--line: #dde3ea;
	--bg: #f6f8fa;
	--card: #fff;
	--accent: #1a56db;
	--accent-soft: #eef3fd;
	--accent-ink: #fff;
	--ok: #0b7a4b;
	--warn: #8a5a00;
	--danger: #b3261e;
	--radius: 10px;
}

/* Official Google Material Symbols, subset to the glyphs this site uses and self-hosted
   so rendering does not depend on a third-party request. */
@font-face {
	font-family: "Material Symbols Outlined";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("../fonts/material-symbols-outlined-2AtujlK.woff2") format("woff2");
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ink);
	background: var(--bg);
}

main { max-width: 64rem; margin: 0 auto; padding: 1rem 1rem 3rem; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.lede { color: var(--muted); margin: 0; }

/* Material Symbols are ligatures: readable names in the markup become official glyphs
   once the small self-hosted subset loads. */
.material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-weight: normal; font-style: normal; line-height: 1;
	letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal;
	direction: ltr; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}
.icon {
	display: inline-block; width: 1em; height: 1em; flex: none;
	font-size: 1.15em; vertical-align: -.15em;
}

/* ---- Header and footer --------------------------------------------------- */

.site-header { background: var(--card); border-bottom: 1px solid var(--line); }
/* Over a hero the header is transparent and its contents go white. Absolute rather than
   fixed: it should scroll away with the image, as ParkoLow's does. */
.has-hero .site-header {
	position: absolute; top: 0; left: 0; right: 0; z-index: 10;
	background: transparent; border-bottom: 0;
}
.has-hero .brand,
.has-hero .brand strong,
.has-hero .site-nav a { color: #fff; }
.has-hero .brand-logo { filter: brightness(0) invert(1); }
.has-hero .brand-tagline { color: rgb(255 255 255 / 78%); }
.has-hero .site-nav a:hover { color: #fff; text-decoration: underline; }
.has-hero .lang-trigger {
	color: #fff; background: rgb(255 255 255 / 14%); border-color: rgb(255 255 255 / 40%);
}
.has-hero .lang-trigger:hover { background: rgb(255 255 255 / 24%); color: #fff; }
.site-header-inner {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	max-width: 64rem; margin: 0 auto; padding: .4rem 1rem;
}
.brand { color: inherit; text-decoration: none; font-size: 1.05rem; min-width: 0; }
.brand-logo {
	display: block; width: 9rem; height: 3rem;
	object-fit: contain; object-position: left center;
}
.brand strong { color: var(--accent); }
.brand-tagline { display: block; font-size: .75rem; color: var(--muted); }

.site-nav { margin-left: auto; display: flex; gap: 1rem; flex-wrap: wrap; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.site-nav a:hover { color: var(--ink); }

/* Globe + current code + chevron, opening the full list — the ParkoLow shape.
   Without JavaScript the .lang-menu below is just a visible row of links, which is why
   the dropdown positioning is scoped to .lang-enhanced: the controller adds that class
   only once it can actually open and close the thing. */
.lang-switcher { position: relative; }
.lang-trigger {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .4rem .6rem; font: inherit; font-size: .85rem; color: var(--ink);
	background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.lang-trigger:hover { border-color: var(--accent); color: var(--accent); }
.lang-chevron { width: .85em; height: .85em; font-size: .85em; transition: transform .15s ease; }
.lang-switcher.is-open .lang-chevron { transform: rotate(180deg); }

.lang-menu { display: flex; flex-wrap: wrap; gap: .3rem; }
.lang-enhanced .lang-menu {
	position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20;
	display: none; flex-direction: column; gap: .1rem; min-width: 6rem; padding: .3rem;
	background: #fff; border: 1px solid var(--line); border-radius: 8px;
	box-shadow: 0 8px 24px rgb(16 24 40 / 12%);
}
.lang-enhanced.is-open .lang-menu { display: flex; }
.lang-opt {
	display: block; padding: .3rem .55rem; border-radius: 6px;
	font-size: .8rem; text-decoration: none; color: var(--muted);
}
.lang-opt:hover { background: var(--accent-soft); color: var(--accent); }
.lang-opt-active { background: var(--accent); color: var(--accent-ink); }

.site-footer { border-top: 1px solid var(--line); background: var(--card); }
.site-footer-inner {
	max-width: 64rem; margin: 0 auto; padding: 1.25rem 1rem;
	font-size: .78rem; color: var(--muted); text-align: center;
}
.site-footer a { color: inherit; }
.assurances {
	list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
	gap: .5rem 1.75rem; margin: 0 0 .75rem; padding: 0;
}
.assurances li { display: flex; align-items: center; gap: .4rem; }
.attribution { margin: 0; }

/* ---- Layout -------------------------------------------------------------- */

.card {
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem;
	box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
}
.card-title { font-size: 1rem; margin: 0 0 1rem; }
.narrow { max-width: 34rem; }

.hero { margin: 1.5rem 0 1.25rem; }
.hero-copy { max-width: 32rem; }

/* Full-bleed header band. The top padding clears the header sitting on top of it, and the
   bottom padding leaves room for the cards that overlap its lower edge. */
.hero-full {
	position: relative; overflow: hidden;
	padding: 4.5rem 1rem 4rem;
    text-align: center; color: #fff;
	background: var(--accent);
}

.hero-media { display: block; }
.hero-full img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 62%;
}
/* Neutral, not brand-tinted: the photograph's own sunrise colour is the point, so this
   only darkens enough to hold the white header and the card edge — heavier top and bottom,
   lightest across the middle where the picture is doing the work. */
.hero-full::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to bottom,
		rgb(11 18 32 / 42%) 0%, rgb(11 18 32 / 18%) 45%, rgb(11 18 32 / 48%) 100%);
}

/* The copy sits on frosted glass rather than on a heavier wash of the whole image: the
   photograph stays sharp and its colour intact, and the heading gets a predictable
   background whatever happens to be behind it. Browsers without backdrop-filter still get
   the flat tint underneath, which is legible on its own. */
.hero-inner {
	position: relative; z-index: 1; max-width: calc(64rem - 2rem); margin: 0 auto;
	padding: 1.5rem 1.75rem; border-radius: 14px;
	background: rgb(11 18 32 / 30%);
	border: 1px solid rgb(255 255 255 / 14%);
	backdrop-filter: blur(10px) saturate(115%);
	-webkit-backdrop-filter: blur(10px) saturate(115%);
}
.hero-full h1 { color: #fff; font-size: 2rem; text-shadow: 0 1px 12px rgb(11 18 32 / 35%); }
.hero-full .lede { color: rgb(255 255 255 / 88%); }
.hero-full .journey-steps {
	justify-content: center; color: rgb(255 255 255 / 82%); margin-top: 1.25rem;
}
.hero-full .journey-dot { background: transparent; border-color: rgb(255 255 255 / 85%); }
.hero-full .journey-end .journey-dot { background: #fff; }
.hero-full .journey-steps li + li::before { background: rgb(255 255 255 / 35%); }

/* The cards ride up over the bottom of the band. */
.has-hero main { position: relative; z-index: 2; margin-top: -3.5rem; }

/* Form beside its explainer on a laptop, stacked on a phone. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }

/* The plan page: timeline on the left, answer and detail on the right.

   Source order is answer -> timeline -> summary -> map so a phone reads the answer first;
   the desktop grid is what moves the timeline into the left column. Do not reorder the
   markup to suit the desktop view. */
.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }

/* ---- Journey steps ------------------------------------------------------- */

.journey-steps {
	list-style: none; display: flex; flex-wrap: wrap; gap: .65rem;
	margin: 1rem 0 0; padding: 0; font-size: .78rem; color: var(--muted);
}
.journey-steps li { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.journey-steps li + li::before {
	content: ""; width: .9rem; height: 1px; background: var(--line); margin-right: .25rem;
}
.journey-dot {
	width: .5rem; height: .5rem; border-radius: 50%;
	background: var(--card); border: 2px solid var(--accent);
}
.journey-end .journey-dot { background: var(--accent); }

/* ---- Form ---------------------------------------------------------------- */

.field { margin-bottom: 1.1rem; border: 0; padding: 0; }
.field > label, .field > legend { display: block; font-weight: 600; margin-bottom: .35rem; }
.field input[type="datetime-local"],
.field input[type="number"],
.field input[type="text"],
.field select {
	width: 100%; padding: .6rem; font: inherit; font-size: 16px; /* 16px stops iOS zooming */
	border: 1px solid var(--line); border-radius: 6px; background: #fff; color: inherit;
}
.field input:focus-visible, .field select:focus-visible {
	outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon .icon { position: absolute; left: .7rem; color: var(--muted); pointer-events: none; }
/* Specificity has to beat .field input[type="text"], whose padding shorthand would
   otherwise reset the room made here for the icon. */
.field .input-with-icon input { padding-left: 2.4rem; }

.help { font-size: .8rem; color: var(--muted); margin: .3rem 0 0; }
/* Announced, never shown. A live region has to be in the layout for assistive tech to
   read it, so it cannot be display:none — it is clipped to nothing instead. */
.visually-hidden {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.error { font-size: .85rem; color: var(--danger); margin: .3rem 0 0; }
.optional { font-weight: 400; color: var(--muted); font-size: .85em; }
.form-note { font-size: .78rem; color: var(--muted); margin: .75rem 0 0; }

/* Radio groups as tappable cards: bigger targets than a native radio, and the selected
   option is legible at a glance. The input stays focusable, so keyboard use is unaffected. */
.choice-grid { display: grid; gap: .5rem; }
.choice-grid-2,
.choice-grid-3 { grid-template-columns: minmax(0, 1fr); }
.choice-label { font-weight: 500; }

.choice {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem;
	border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem;
	background: #fff; font-weight: 500; cursor: pointer;
}
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-icon { width: 3rem; height: 3rem; font-size: 3rem; color: var(--muted); }
.choice-check { opacity: 0; color: var(--accent); }
.choice:has(input:checked) {
	border-color: var(--accent); background: var(--accent-soft);
	box-shadow: inset 0 0 0 1px var(--accent);
}
.choice:has(input:checked) .choice-icon,
.choice:has(input:checked) .choice-label { color: var(--accent); }
.choice:has(input:checked) .choice-check { opacity: 1; }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Three abreast needs roughly 9rem an option before "Tömegközlekedéssel" starts losing
   the fight with the icon beside it. Narrower than that they stack, one per row, where
   there is width to spare and the plain icon-then-label line reads better.

   Both groups change together and to the same size: they sit a few rows apart in one
   form, so a tall centred card above a short lopsided row looks like a mistake. */
@media (min-width: 30rem) {
	.choice-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.choice-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* A third of the form column is not enough for an icon and a long label side by
	   side, so the label goes under the icon and the tick moves into the corner, which
	   also keeps the boxes reading as one row rather than three separate things. */
	.choice-grid .choice {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		align-content: center; justify-items: center;
		gap: .4rem; padding: .85rem .55rem; text-align: center;
		min-height: 5.25rem;
	}
	/* Hungarian and Polish both have compounds longer than the button is wide. Hyphenate
	   where the browser knows how, and break the word rather than spill it where it does
	   not. */
	.choice-grid .choice-label {
		font-size: .9rem; line-height: 1.25;
		hyphens: auto; overflow-wrap: break-word;
	}
	.choice-grid .choice-check {
		position: absolute; top: .5rem; right: .5rem;
		width: .9rem; height: .9rem; font-size: .9rem;
	}
}

.stepper { display: flex; align-items: center; gap: .5rem; }
.stepper-enhanced input { text-align: center; }
/* The native spinner is redundant once there are real buttons, and it is tiny on touch. */
.stepper-enhanced input { appearance: textfield; -moz-appearance: textfield; }
.stepper-enhanced input::-webkit-outer-spin-button,
.stepper-enhanced input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-button {
	flex: none; width: 2.75rem; height: 2.75rem; font: inherit; font-size: 1.25rem;
	border: 1px solid var(--line); border-radius: 8px; background: #fff;
	color: var(--ink); cursor: pointer;
}
.stepper-button:disabled { opacity: .4; cursor: default; }

.btn-primary, .btn-secondary {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	width: 100%; padding: .85rem 1rem; font: inherit; font-weight: 600;
	border-radius: 8px; text-align: center; text-decoration: none; cursor: pointer;
}
.btn-primary { color: var(--accent-ink); background: var(--accent); border: 0; }
.btn-secondary {
	color: var(--accent); background: #fff; border: 1px solid var(--line);
	margin-top: 1rem; font-size: .9rem; padding: .6rem 1rem;
}
.btn-secondary:hover { border-color: var(--accent); background: var(--accent-soft); }

.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.alert-error { background: #fdecea; color: #8c1d18; }
.alert-info { background: var(--accent-soft); color: #14357f; }

/* ---- Address autocomplete ------------------------------------------------ */

.suggestions {
	list-style: none; margin: .25rem 0 0; padding: 0;
	border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden;
}
.suggestions [role="option"] {
	display: block; width: 100%; text-align: left; padding: .55rem .7rem;
	border: 0; background: none; font: inherit; cursor: pointer;
}
.suggestions [role="option"]:hover,
.suggestions [role="option"].is-active { background: var(--accent-soft); }
.suggestion-primary { display: block; }
.suggestion-secondary { display: block; font-size: .8rem; color: var(--muted); }

.address-field.is-selected .input-with-icon input { border-color: var(--ok); }
.address-field.is-loading .input-with-icon input { padding-right: 2.4rem; }
.address-field.is-loading .input-with-icon::after {
	content: ""; position: absolute; right: .75rem;
	width: .85rem; height: .85rem; border: 2px solid var(--line);
	border-top-color: var(--accent); border-radius: 50%;
	animation: address-spin .7s linear infinite;
}
@keyframes address-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.address-field.is-loading .input-with-icon::after { animation: none; border-color: var(--accent); }
}

/* ---- The answer ---------------------------------------------------------- */

.answer { text-align: center; }
.answer-label { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--muted); margin: 0; }
.answer-time {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	font-size: 3rem; font-weight: 700; margin: .1rem 0; font-variant-numeric: tabular-nums;
}
.answer-icon { width: 2rem; height: 2rem; font-size: 2rem; color: var(--ok); }
.answer-origin { margin: 0 0 .75rem; color: var(--muted); }
.answer-caveat { font-size: .82rem; color: var(--warn); margin: .35rem 0 0; }

.stat-bar {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
	margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
	text-align: left;
}
.stat-bar dt { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; }
.stat-bar dd { margin: .1rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-flight dd { color: var(--accent); }

/* ---- Timeline ------------------------------------------------------------ */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
	position: relative;
	display: grid; grid-template-columns: 3.25rem 1.5rem minmax(0, 1fr) auto;
	gap: .5rem; align-items: start; padding: .55rem 0;
}
/* One continuous rail: each row draws its own full-height segment, and the first and last
   are trimmed back to their dots so the line starts and ends on a marker. */
.timeline li::before {
	content: ""; position: absolute; left: 4.5rem; transform: translateX(-50%);
	top: 0; bottom: 0; width: 2px; background: var(--line);
}
.timeline li:first-child::before { top: 1.05rem; }
.timeline li:last-child::before { bottom: calc(100% - 1.05rem); }
.timeline time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .95rem; }
.timeline-dot {
	position: relative; z-index: 1; justify-self: center; margin-top: .3rem;
	width: .8rem; height: .8rem; border-radius: 50%;
	border: 2px solid var(--ink); background: var(--card);
}
.timeline li:first-child .timeline-dot { border-color: var(--ok); }
.timeline .step-label { font-size: .95rem; }
.timeline .step-label small { display: block; font-size: .78rem; color: var(--muted); }
.timeline .step-minutes { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.timeline .flight time { color: var(--accent); }
.timeline .flight .timeline-dot {
	border: 0; background: none; width: 1.1rem; height: 1.1rem;
	color: var(--accent); margin-top: .15rem;
}
.timeline .flight .timeline-dot .icon { width: 1.1rem; height: 1.1rem; font-size: 1.1rem; }

/* ---- Breakdown and summary ------------------------------------------------ */

.groups { list-style: none; margin: 0; padding: 0; }
.groups li {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem;
	padding: .5rem 0; border-bottom: 1px solid var(--line);
}
.groups .icon { color: var(--muted); }
.groups li:last-child { border-bottom: 0; }
.groups li:has(+ .total) { border-bottom: 0; }
.groups li.total {
	grid-template-columns: minmax(0, 1fr) auto;
	border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700;
	margin-top: .25rem; padding-top: .7rem; font-size: 1.02rem;
}
.groups li.total strong { color: var(--accent); }

.plan-summary p { margin: 0 0 .5rem; }
.tz-note { font-size: .82rem; color: var(--muted); }
.plan-meta {
	font-size: .8rem; color: var(--muted);
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line);
}
.plan-meta .btn-secondary { margin-top: 0; }

/* ---- Explainer ------------------------------------------------------------ */

.explainer-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--muted); }
.explainer-list li {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem;
	padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.explainer-list li:last-child { border-bottom: 0; }
.explainer-list .icon { color: var(--accent); margin-top: .15rem; }
.explainer-list strong { display: block; color: var(--ink); font-size: .88rem; }

/* ---- Prose --------------------------------------------------------------- */

.prose { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.prose-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.prose h2 { font-size: .95rem; }
.prose p { margin: 0; color: var(--muted); font-size: .9rem; }

/* ---- Notices ------------------------------------------------------------- */

/* Informational rather than alarming: the answer is correct, just deliberately cautious,
   and one action would sharpen it. */
.notice {
	background: #fff8e6; border: 1px solid #f0d999; border-left-width: 4px;
	border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem;
}
.notice p { margin: 0 0 .4rem; font-size: .9rem; }
.notice-title { font-weight: 700; color: var(--warn); }
.notice-action { font-size: .9rem; font-weight: 600; color: var(--accent); }

/* ---- Wider screens ------------------------------------------------------- */

@media (min-width: 40rem) {
	.stat-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.prose-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hero-banner { height: 300px; }
	.hero-banner-short { height: 170px; }
	.hero-banner .hero-copy { padding: 1.75rem; }
}

@media (min-width: 60rem) {
	.layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
	.plan-layout {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-areas:
			"main answer"
			"main summary";
		column-gap: 1.25rem;
	}
	.plan-answer { grid-area: answer; }
	.plan-main { grid-area: main; }
	.plan-summary { grid-area: summary; }
}