/* ============================================================
   Homa — inner page furniture + contact form
   Uses the same tokens as the rest of the site (assets/header.css).
   ============================================================ */

/* --- compact page header ------------------------------------
   The homepage hero is tall and carries the night sky; inner pages get this
   quieter version so they read as secondary without leaving the system. */
.hw-pagehead {
	background: var(--hw-hero-bg);
	color: #fff;
	padding-block: 48px 52px;
	margin-block: 0;
}

.hw-pagehead__t {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.55;
	color: #fff;
	margin: 0;
}

.hw-pagehead__d {
	font-size: 15px;
	line-height: 1.9;
	color: var(--hw-hero-lede);
	max-width: 620px;
	margin: 12px 0 0;
}

/* ============================================================
   About page
   ============================================================ */

/* --- text + image split -------------------------------------- */
.hw-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: center;
	margin-block: 0;
}

.hw-split > * { margin-block: 0; }

.hw-split__media { margin: 0; }

.hw-split__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hw-r-panel);
	border: 1px solid var(--hw-line);
}

.hw-split__t {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.55;
	color: var(--hw-ink);
	margin: 0 0 14px;
}

.hw-split__p {
	font-size: 14.5px;
	line-height: 2;
	color: var(--hw-ink-70);
	margin: 0 0 12px;
}

.hw-split__p:last-child { margin-bottom: 0; }

/* ============================================================
   Country page hero
   The flag is the identity of the page, so it leads — big, on the
   navy, with a soft shadow so it reads as an object rather than a
   sticker. The tri-colour bar under the hero carries the same idea
   into the page edge and gives each destination its own accent.
   ============================================================ */

.hw-chero {
	background: var(--hw-hero-bg);
	color: #fff;
	padding-block: 52px 56px;
	margin-block: 0;
}

/* --- breadcrumb ---
   Country pages sit two levels deep and are entered from search as often as
   from the menu, so they need to say where they are.
   The separator is a middot, not a chevron: ‹ and › are bidi-mirrored
   characters, so an angle quote flips direction inside an RTL container and
   ends up pointing the wrong way. A middot has no direction to get wrong. */
.hw-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.8;
}

.hw-crumb li { color: rgba(255, 255, 255, .55); }
.hw-crumb li + li::before { content: "·"; margin-inline-end: 8px; color: rgba(255, 255, 255, .32); }
.hw-crumb a { color: var(--hw-hero-eyebrow); text-decoration: none; }
.hw-crumb a:hover { text-decoration: underline; }

.hw-chero__flag {
	display: block;
	width: 108px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
	margin: 0 0 22px;
}

.hw-chero__flag svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hw-chero__t {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.5;
	color: #fff;
	margin: 0;
}

.hw-chero__d {
	font-size: 15px;
	line-height: 1.95;
	color: var(--hw-hero-lede);
	max-width: 640px;
	margin: 14px 0 0;
}

/* pathways this destination offers, straight off the nav config */
.hw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

/* homa_icon() emits 22px icons; chips need them at 15px. The hand-built
   Germany page hardcodes 15 in its SVG attributes — this makes the generated
   pages match without a second icon size in the library. */
.hw-chips a svg {
	width: 15px;
	height: 15px;
	flex: none;
}

.hw-chips a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.8;
	color: var(--hw-hero-eyebrow);
	background: rgba(242, 137, 156, .14);
	border: 1px solid rgba(242, 137, 156, .28);
	border-radius: 999px;
	padding: 7px 15px;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease;
}

.hw-chips a:hover {
	background: rgba(242, 137, 156, .24);
	border-color: rgba(242, 137, 156, .55);
}

/* --- inline CTA ---
   Sits right after the "which route is yours?" router, i.e. at the moment the
   visitor has just recognised their own situation. The band at the foot of the
   page is too late for someone who decides mid-scroll, and a page this long
   should not have only one exit toward the evaluation. */
.hw-inline-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 22px;
	background: var(--hw-accent-tint);
	border: 1px solid rgba(232, 93, 117, .45);
	border-radius: 16px;
	padding: 18px 22px;
	margin: 24px 0 0;
}

.hw-inline-cta p {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.85;
	color: var(--hw-ink);
}

.hw-inline-cta span {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--hw-muted);
}

.hw-inline-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hw-accent-btn);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.8;
	border-radius: var(--hw-r-cta);
	padding: 11px 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .16s ease;
}

/* white on salmon (4.56:1); the hover deepens rather than lightens, so the
   text contrast only ever improves */
.hw-inline-cta__btn:hover { background: var(--hw-accent-deep); color: #fff; }
.hw-inline-cta__btn svg { width: 16px; height: 16px; flex: none; }

/* --- national colour bar ------------------------------------- */
.hw-flagbar {
	display: flex;
	height: 5px;
	margin-block: 0;
	/* Germany's bar is black/red/gold, but most flags here have a white stripe
	   and the section below the bar is white — the stripe vanished into it.
	   Same hairline trick the nav flags use to keep Poland visible on a white
	   row; on a dark stripe it is invisible. */
	box-shadow: inset 0 -1px 0 rgba(45, 42, 94, .12);
}

.hw-flagbar span { flex: 1; }

/* --- key points block ---------------------------------------- */
.hw-keys {
	background: var(--hw-accent-tint);
	border: 1px solid rgba(232, 93, 117, .35);
	border-radius: 16px;
	padding: 22px 26px;
	margin-block: 0;
}

.hw-keys > * { margin-block: 0; }

.hw-keys__t {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--hw-accent-deep);
	margin: 0 0 10px;
}

.hw-keys ul {
	margin: 0;
	padding-inline-start: 1.15em;
}

.hw-keys li {
	font-size: 13.5px;
	line-height: 2;
	color: var(--hw-ink);
}

.hw-keys li::marker { color: var(--hw-accent); }

/* --- "who it's for" line on a route card ---------------------- */
.hw-card__for {
	font-size: 12px;
	line-height: 1.8;
	color: var(--hw-accent-deep);
	background: var(--hw-accent-tint);
	border-radius: 8px;
	padding: 7px 11px;
	margin: 12px 0 0;
}

/* --- self-identification signals ------------------------------ */
.hw-signals {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 28px;
	margin-block: 0;
}

.hw-signals > * { margin-block: 0; }

.hw-signal {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--hw-ink-70);
	margin: 0;
}

.hw-signal svg {
	width: 17px;
	height: 17px;
	color: var(--hw-accent);
	flex: none;
	margin-top: 4px;
}

/* --- two-column prose + aside -------------------------------- */
.hw-cols2 {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 40px;
	align-items: start;
	margin-block: 0;
}

.hw-cols2 > * { margin-block: 0; }

.hw-prose p {
	font-size: 14.5px;
	line-height: 2;
	color: var(--hw-ink-70);
	margin: 0 0 14px;
}

.hw-prose p:last-child { margin-bottom: 0; }

/* --- comparison rows ----------------------------------------- */
.hw-vs { display: grid; gap: 12px; margin-block: 0; }
.hw-vs > * { margin-block: 0; }

.hw-vsrow {
	background: #fff;
	border: 1px solid var(--hw-line);
	border-inline-start: 3px solid var(--hw-accent);
	border-radius: 12px;
	padding: 16px 20px;
}

.hw-vsrow__t {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--hw-ink);
	margin: 0 0 4px;
}

.hw-vsrow__d {
	font-size: 13px;
	line-height: 1.9;
	color: var(--hw-muted);
	margin: 0;
}

/* --- facts strip --------------------------------------------- */
.hw-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-block: 0;
}

.hw-facts > * { margin-block: 0; }

.hw-fact {
	background: #fff;
	border: 1px solid var(--hw-line);
	border-radius: 16px;
	padding: 22px 18px;
	text-align: center;
}

.hw-fact__n {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--hw-accent-deep);
	margin: 0;
}

.hw-fact__l {
	font-size: 13px;
	line-height: 1.8;
	color: var(--hw-muted);
	margin: 4px 0 0;
}

/* --- team ----------------------------------------------------- */
.hw-team {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-block: 0;
}

.hw-team > * { margin-block: 0; }

.hw-person { text-align: center; }

.hw-person__media { margin: 0; }

.hw-person__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid var(--hw-line);
}

.hw-person__n {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--hw-ink);
	margin: 12px 0 2px;
}

.hw-person__r {
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--hw-muted);
	margin: 0;
}

/* --- contact layout ------------------------------------------ */
.wp-block-columns.hw-contact {
	gap: 28px;
	margin-block: 0;
	align-items: flex-start;
}

/* --- info card ----------------------------------------------- */
.hw-infocard {
	background: var(--hw-canvas);
	border: 1px solid var(--hw-line);
	border-radius: 16px;
	padding: 24px;
}

.hw-infocard__h {
	font-size: 15px;
	font-weight: 700;
	color: var(--hw-ink);
	margin: 0 0 16px;
}

.hw-infocard__label {
	display: block;
	font-size: 12px;
	color: var(--hw-muted);
	margin: 0 0 2px;
}

.hw-infocard__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 21px;
	font-weight: 800;
	color: var(--hw-accent-deep);
	text-decoration: none;
	line-height: 1.6;
}

.hw-infocard__phone:hover { color: var(--hw-ink); }
.hw-infocard__phone svg { width: 18px; height: 18px; flex: none; }

.hw-infocard__hours {
	font-size: 13px;
	line-height: 1.9;
	color: var(--hw-ink-70);
	margin: 0;
}

.hw-infocard hr {
	border: 0;
	border-top: 1px solid var(--hw-line);
	margin: 18px 0;
}

/* ============================================================
   Evaluation wizard
   The form is plain CF7; assets/wizard.js adds .is-on and only
   then does anything get hidden — so with JS off every step
   stays visible and the form still works.
   ============================================================ */

.hw-wizard {
	max-width: 720px;
	margin-inline: auto;
	background: #fff;
	border: 1px solid var(--hw-line);
	border-radius: var(--hw-r-panel);
	box-shadow: var(--hw-sh-panel);
	padding: 32px;
}

.hw-wizard__head { margin-bottom: 24px; }

.hw-wizard__bar {
	height: 5px;
	border-radius: 99px;
	background: var(--hw-canvas);
	overflow: hidden;
}

.hw-wizard__bar span {
	display: block;
	height: 100%;
	width: 25%;
	border-radius: 99px;
	background: var(--hw-accent);
	transition: width .28s var(--hw-ease);
}

.hw-wizard__count {
	font-size: 12.5px;
	color: var(--hw-muted);
	margin: 8px 0 0;
}

/* fieldset carries browser default chrome — strip it */
.hw-step {
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

.hw-step__t {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.6;
	color: var(--hw-ink);
	padding: 0;
	margin: 0 0 6px;
}

.hw-step__t:focus-visible { outline: 2px solid var(--hw-accent); outline-offset: 4px; }

.hw-step__d {
	font-size: 13px;
	line-height: 1.9;
	color: var(--hw-muted);
	margin: 0 0 22px;
}

.hw-q { margin-bottom: 20px; }

.hw-q__label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--hw-ink);
	margin-bottom: 8px;
}

/* --- answers as cards, not bare radios --- */
.hw-q .wpcf7-radio {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.hw-q .wpcf7-list-item { margin: 0; }

.hw-q .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--hw-ink-70);
	border: 1px solid var(--hw-line);
	border-radius: 12px;
	padding: 11px 14px;
	cursor: pointer;
	transition: border-color .16s var(--hw-ease), background .16s var(--hw-ease);
}

.hw-q .wpcf7-list-item label:hover { border-color: var(--hw-accent); background: var(--hw-hover); }

/* :has() styles the whole card from the input's state. Where it is
   unsupported the native radio dot still shows the selection. */
.hw-q .wpcf7-list-item label:has(input:checked) {
	border-color: var(--hw-accent);
	background: var(--hw-accent-tint);
	color: var(--hw-ink);
	font-weight: 600;
}

.hw-q input[type="radio"] { accent-color: var(--hw-accent-deep); flex: none; margin: 0; }
.hw-q .wpcf7-list-item label:focus-within { outline: 2px solid var(--hw-accent); outline-offset: 2px; }

/* --- step error --- */
.hw-step__error {
	display: none;
	font-size: 13px;
	line-height: 1.8;
	color: #B23A3A;
	background: #FDF4F3;
	border: 1px solid #C24545;
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0;
}

.hw-step__error.is-shown { display: block; }

/* --- nav --- */
.hw-wizard__nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--hw-line);
}

.hw-btn {
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	border-radius: var(--hw-r-cta);
	padding: 12px 26px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .16s var(--hw-ease), border-color .16s var(--hw-ease);
}

.hw-btn--next {
	background: var(--hw-accent-btn);
	color: #fff;
	box-shadow: var(--hw-sh-cta);
	margin-inline-start: auto;
}

.hw-btn--next:hover { background: var(--hw-accent-deep); }

.hw-btn--ghost {
	background: #fff;
	color: var(--hw-ink-70);
	border-color: var(--hw-line);
}

.hw-btn--ghost:hover { background: var(--hw-hover); color: var(--hw-ink); }
.hw-btn:focus-visible { outline: 2px solid var(--hw-accent-deep); outline-offset: 2px; }

[data-wizard-submit] { margin-inline-start: auto; }
[data-wizard-submit][hidden] { display: none; }

.hw-wizard__privacy {
	font-size: 12px;
	line-height: 1.8;
	color: var(--hw-muted);
	margin: 4px 0 0;
}

/* ---- no-JS fallback ----
   .is-on is added by wizard.js. Until then the form is one long page of
   questions, which is exactly what it must degrade to. The stepper chrome is
   hidden here rather than in the markup, so a visitor without JS never sees a
   progress bar that cannot move or a "next" button that does nothing.

   The [hidden] guards matter: fieldset and button both carry theme display
   rules that would otherwise beat the UA stylesheet's [hidden] and leave every
   step on screen at once. */
.hw-wizard__head,
.hw-wizard__nav [data-wizard-next],
.hw-wizard__nav [data-wizard-back] { display: none; }

.hw-wizard.is-on .hw-wizard__head { display: block; }

.hw-wizard.is-on .hw-wizard__nav [data-wizard-next]:not([hidden]),
.hw-wizard.is-on .hw-wizard__nav [data-wizard-back]:not([hidden]) { display: inline-block; }

.hw-wizard.is-on .hw-step[hidden] { display: none; }

/* separate the steps when they are all stacked */
.hw-wizard:not(.is-on) .hw-step + .hw-step {
	margin-top: 28px;
	padding-top: 26px;
	border-top: 1px solid var(--hw-line);
}

/* ============================================================
   Contact Form 7
   CF7 prints its own wrappers and control classes; these rules
   bend them to the design system rather than fighting them.
   ============================================================ */

.hw-form__row { margin-bottom: 16px; }

.hw-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.hw-form__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--hw-ink);
	margin-bottom: 6px;
}

.hw-form__req { color: var(--hw-accent-deep); }
.hw-form__opt { font-weight: 400; color: var(--hw-muted); }

/* CF7 wraps every control in a span — it has to be a block for width to work */
.hw-form .wpcf7-form-control-wrap { display: block; }

.hw-form .hw-input,
.hw-form input.wpcf7-form-control,
.hw-form textarea.wpcf7-form-control,
.hw-form select.wpcf7-form-control {
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.8;
	color: var(--hw-ink);
	background: #fff;
	border: 1px solid var(--hw-line);
	border-radius: 10px;
	padding: 11px 14px;
	transition: border-color .16s var(--hw-ease), box-shadow .16s var(--hw-ease);
}

.hw-form textarea.wpcf7-form-control { min-height: 140px; resize: vertical; }

.hw-form .hw-input:focus,
.hw-form input.wpcf7-form-control:focus,
.hw-form textarea.wpcf7-form-control:focus,
.hw-form select.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--hw-accent);
	box-shadow: 0 0 0 3px rgba(232, 93, 117, .18);
}

/* the phone number reads left-to-right even in an RTL form */
.hw-form input[type="tel"],
.hw-form input[type="email"] {
	direction: ltr;
	text-align: start;
}

/* --- submit: white on salmon, 4.56:1 on --hw-accent-btn --- */
.hw-form__actions { margin-top: 22px; }

/* not scoped to .hw-form: the evaluation wizard renders its submit outside that
   wrapper, so it was falling through to Blocksy's own button styling */
input.hw-submit,
.hw-form input.wpcf7-submit {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--hw-accent-btn);
	border: 0;
	border-radius: var(--hw-r-cta);
	padding: 13px 30px;
	box-shadow: var(--hw-sh-cta);
	cursor: pointer;
	transition: background .16s var(--hw-ease);
	/* explicit: Blocksy styles form inputs at width:100%, which would stretch
	   the submit across the whole column */
	width: auto;
}

input.hw-submit:hover,
.hw-form input.wpcf7-submit:hover { background: var(--hw-accent-deep); }

input.hw-submit:focus-visible,
.hw-form input.wpcf7-submit:focus-visible {
	outline: 2px solid var(--hw-accent-deep);
	outline-offset: 2px;
}

/* --- validation + response --- */
.wpcf7 form .wpcf7-not-valid-tip {
	font-size: 12px;
	line-height: 1.8;
	color: #B23A3A;
	margin-top: 6px;
}

.hw-form input.wpcf7-not-valid,
.hw-form textarea.wpcf7-not-valid,
.hw-form select.wpcf7-not-valid {
	border-color: #C24545;
	box-shadow: 0 0 0 3px rgba(194, 69, 69, .12);
}

.wpcf7 form .wpcf7-response-output {
	font-size: 13.5px;
	line-height: 1.9;
	border-width: 1px;
	border-style: solid;
	border-radius: 12px;
	padding: 12px 16px;
	margin: 18px 0 0;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #3C8A5B;
	background: #F1F8F3;
	color: #2E7048;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #E85D75;
	background: var(--hw-accent-tint);
	color: var(--hw-accent-deep);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #C24545;
	background: #FDF4F3;
	color: #B23A3A;
}

.wpcf7-spinner { margin-inline-start: 10px; }

/* --- responsive ---------------------------------------------- */
@media (max-width: 1023px) {
	.hw-facts { grid-template-columns: repeat(2, 1fr); }
	.hw-team { grid-template-columns: repeat(2, 1fr); }
	.hw-split { grid-template-columns: 1fr; gap: 28px; }
	/* image after the text on narrow screens — the words carry the message */
	.hw-split__media { order: 2; }

	.hw-cols2 { grid-template-columns: 1fr; gap: 26px; }
	.hw-signals { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 781px) {
	.hw-pagehead { padding-block: 30px 34px; }
	.hw-pagehead__t { font-size: 24px; }
	.hw-pagehead__d { font-size: 13.5px; }

	.hw-chero { padding-block: 32px 36px; }
	.hw-chero__flag { width: 84px; height: 56px; margin-bottom: 18px; }
	.hw-chero__t { font-size: 25px; }
	.hw-chero__d { font-size: 13.5px; }
	.hw-crumb { font-size: 12px; margin-bottom: 16px; }

	/* the button goes full width rather than sitting alone on a second line
	   looking like an orphan */
	.hw-inline-cta { padding: 16px 18px; }
	.hw-inline-cta__btn { width: 100%; justify-content: center; }

	.hw-split__t { font-size: 20px; }
	.hw-split__p { font-size: 13.5px; }
	.hw-facts { gap: 14px; }
	.hw-fact { padding: 18px 14px; }
	.hw-fact__n { font-size: 25px; }
	.hw-team { gap: 14px; }

	.hw-form__grid { grid-template-columns: 1fr; gap: 0; }
	input.hw-submit,
	.hw-form input.wpcf7-submit { width: 100%; }

	.hw-wizard { padding: 20px 16px; border-radius: 16px; }
	.hw-step__t { font-size: 17px; }
	.hw-q .wpcf7-radio { grid-template-columns: 1fr; }
	.hw-wizard__nav { flex-wrap: wrap; }
	.hw-btn { padding: 12px 20px; font-size: 13.5px; }
}