/* ==========================================================================
   Tourism Month
   Layout uses CSS logical properties throughout (margin-inline, inset-inline,
   border-start-*) so RTL works from `dir="rtl"` alone - there is no rtl.css
   to keep in sync.

   PLACEHOLDER TOKENS: the colours and type below are neutral stand-ins.
   They get replaced from the real brand assets.
   ========================================================================== */

:root {
	/* --- Colour (placeholder) --- */
	--c-ink:        #14181f;
	--c-ink-soft:   #4a5260;
	--c-line:       #e5e0d2;
	--c-bg:         #ffffff;
	--c-ground:     #f5f4f0;   /* page background; neither reference uses pure white */
	--c-bg-alt:     #f9f5ea;
	--c-panel:      #e8ecf3;   /* listing-card panel; the navy hover state is its inverse */
	--c-brand:      #083258;
	--c-brand-dark: #051f38;
	--c-accent:     #345ffc;
	--c-accent-2:   #0e3a51;

	/* Sampled from the campaign logo, so accents come from the brand rather
	   than from generic UI convention. The logo carries no green at all. */
	--c-logo-teal:   #00aacb;
	--c-logo-aqua:   #00a99e;
	--c-logo-blue:   #0070b8;
	--c-logo-orange: #f97400;
	--c-logo-yellow: #fccf00;

	/* --- Type (placeholder - swap once the Hebrew font is licensed) --- */
	--font-sans: "Noto Sans Hebrew", -apple-system, "Segoe UI", Arial, sans-serif;
	--font-display: "Rubik", "Noto Sans Hebrew", Arial, sans-serif;

	--fs-xs:   0.8125rem;
	--fs-sm:   0.9375rem;
	--fs-base: 1.0625rem;
	--fs-lg:   1.25rem;
	--fs-xl:   1.625rem;
	--fs-2xl:  2.25rem;
	--fs-3xl:  clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

	/* --- Space --- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-7: 1.75rem;
	--sp-8: 2rem;
	--sp-12: 3rem;
	--sp-16: 4rem;

	/* One measure for the whole site: header, hero and every section share
	   the same rail. Mixing 1360 with a wider band for the picture sections
	   made the page read as assembled from parts. */
	--wrap: 1680px;
	--wrap-narrow: 1100px;   /* prose, where long measures hurt reading */
	--gutter: clamp(1rem, 4vw, 3.5rem);
	/* One radius scale. Every rounded surface picks from these four so the
	   page does not mix 10, 14, 16 and 18px as it previously did. */
	--radius-sm:   8px;    /* inputs, small controls */
	--radius-md:   12px;   /* cards, tiles, notices */
	--radius-lg:   18px;   /* large panels: gallery, booking box */
	--radius-pill: 999px;  /* pills, chips, circular buttons */

	/* Kept so older rules resolve; prefer the scale above. */
	--radius: var(--radius-sm);
	--shadow: 0 1px 2px rgb(20 24 31 / 6%), 0 8px 24px rgb(20 24 31 / 8%);
}

/* --- Base ---------------------------------------------------------------- */

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.65;
	color: var(--c-ink);
	/* Through a variable, because .site-body has to paint the same colour to
	   cover the footer behind it - and one template changes what that is. */
	--page-bg: var(--c-ground);
	background: var(--page-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0 0 var(--sp-4);
	line-height: 1.2;
	font-weight: 700;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

p { margin: 0 0 var(--sp-4); }

a { color: var(--c-brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-brand-dark); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
	outline: 2px solid var(--c-brand);
	outline-offset: 2px;
}

/* --- Utilities ----------------------------------------------------------- */

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

/* Reading measure for body copy inside a wide page. */
.wrap--narrow {
	width: min(100% - 2 * var(--gutter), var(--wrap-narrow));
	margin-inline: auto;
}

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

.skip-link:focus {
	position: fixed;
	inset-block-start: var(--sp-2);
	inset-inline-start: var(--sp-2);
	z-index: 999;
	width: auto; height: auto;
	clip-path: none;
	padding: var(--sp-2) var(--sp-4);
	background: var(--c-bg);
	box-shadow: var(--shadow);
	border-radius: var(--radius);
}

.btn {
	display: inline-block;
	padding: var(--sp-3) var(--sp-6);
	border: 0;
	border-radius: var(--radius);
	background: var(--c-brand);
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease;
}
.btn:hover { background: var(--c-brand-dark); color: #fff; }

/* --- Header ---------------------------------------------------------------
   One bar, not two. Over the hero it is transparent and the page shows
   through; once scrolled, or on any other page, it becomes solid navy.
   ------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: var(--c-brand);
	color: #fff;
	transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}

.site-header--overlay {
	position: fixed;
	inset-inline: 0;
	background: transparent;
}

/* Enough shade for white type to hold over a photograph, without a hard edge.
   55% at the top was not enough over the pale rock in the hero: the controls
   sit at the header's midpoint, where that gradient had already thinned to a
   quarter. It now holds most of its weight to the foot of the bar and fades
   out below it, so the fade is not visible as a line. */
.site-header--overlay::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	/* Taller than the bar, so the gradient ends in open sky. */
	height: 190%;
	background: linear-gradient(
		to bottom,
		rgb(8 50 88 / 78%) 0%,
		rgb(8 50 88 / 62%) 45%,
		rgb(8 50 88 / 30%) 72%,
		rgb(8 50 88 / 0%) 100%
	);
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.site-header.is-stuck {
	background: var(--c-brand);
	box-shadow: 0 2px 20px rgb(8 50 88 / 22%);
}

.site-header.is-stuck::before { opacity: 0; }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	min-height: 92px;
	transition: min-height 0.35s ease;
}

.site-header.is-stuck .site-header__inner { min-height: 68px; }

/* --- Brand ---------------------------------------------------------------- */

.site-header__brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.site-header__brand .custom-logo-link,
.site-header__brand .brand--text {
	display: block;
	max-width: min(300px, 46vw);
	transition: max-width 0.35s ease;
}

.site-header.is-stuck .site-header__brand .custom-logo-link { max-width: min(210px, 40vw); }

.site-header__brand img {
	display: block;
	width: 100%;
	height: auto;
	/* The logo is a sticker; give it a shadow so it sits on the photograph
	   rather than looking pasted flat against it. */
	filter: drop-shadow(0 2px 10px rgb(8 50 88 / 35%));
}

.brand--text {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 900;
	color: #fff;
	text-decoration: none;
}

/* --- Navigation ------------------------------------------------------------ */

.site-nav { flex: 1 1 auto; }

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list > li + li { border-inline-start: 0; }

/* --- The contact link is not a fifth region ---------------------------------
   It answers a different question from the four beside it: those are "where do
   you want to go", this one is "I need to reach a person". Sitting in the same
   row, in the same type, at the same spacing, it read as another category.

   Pushed to the far end of the bar instead - the left corner, in Hebrew - with
   a hairline between it and the regions. The row then reads as two groups and
   nothing had to change typeface to say so. The rule is currentColor, so it
   follows the link's own colour: white over the navy bar, navy over the pale
   hero, without a second rule for either.

   Only where the bar is a row. Below 1051px the nav is the phone sheet, one
   item per line, and an auto margin there would shove it against a wall.
   ------------------------------------------------------------------------- */
@media (min-width: 1051px) {
	.site-nav__list > .menu-item-object-page { margin-inline-start: auto; }

	.site-nav__list > .menu-item-object-page > a {
		position: relative;
		margin-inline-start: var(--sp-3);
	}

	.site-nav__list > .menu-item-object-page > a::before {
		content: "";
		position: absolute;
		inset-block: 24%;
		inset-inline-start: calc(var(--sp-3) * -1);
		width: 1px;
		background: currentColor;
		opacity: 0.3;
	}
}

.site-nav__list > li > a {
	position: relative;
	display: block;
	padding: var(--sp-2) var(--sp-4);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* The underline draws from the reading edge rather than fading in. */
.site-nav__list > li > a::after {
	content: "";
	position: absolute;
	inset-block-end: 2px;
	inset-inline-start: var(--sp-4);
	width: calc(100% - 2 * var(--sp-4));
	height: 2px;
	background: var(--c-logo-yellow);
	transform: scaleX(0);
	transform-origin: var(--tm-origin, right);
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.site-nav__list > li > a:hover::after,
.site-nav__list > li.current-menu-item > a::after {
	transform: scaleX(1);
}

.site-nav__list > li > a:hover,
.site-nav__list > li.current-menu-item > a {
	color: #fff;
	background: none;
}

/* --- Actions --------------------------------------------------------------- */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-inline-start: auto;
	flex: 0 0 auto;
}

.pill {
	padding: var(--sp-2) var(--sp-5);
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pill:hover { background: #fff; border-color: #fff; color: var(--c-brand); }

/* Over a photograph a hairline border is not enough on its own: the pale rock
   in the hero sits at nearly the same value as white, so the pill and the
   cart ring vanished into it. Both take a translucent navy fill there, which
   guarantees the contrast whatever the photograph happens to be. */
.site-header--overlay .pill,
.site-header--overlay .cart-link {
	background: rgb(8 50 88 / 42%);
	border-color: rgb(255 255 255 / 72%);
	backdrop-filter: blur(6px);
}

.site-header--overlay .pill:hover {
	background: #fff;
	border-color: #fff;
	color: var(--c-brand);
}

.site-header--overlay .cart-link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--c-brand);
}

/* Once the bar is solid navy there is nothing to fight, so they go back to
   being outlines. */
.site-header.is-stuck .pill,
.site-header.is-stuck .cart-link {
	background: none;
	backdrop-filter: none;
	border-color: rgb(255 255 255 / 45%);
}

/* --- Cart ------------------------------------------------------------------
   A ticket in a ring, not a word with a number beside it. The count only
   appears when there is something to count: an empty badge reading 0 is a
   permanent invitation to look at nothing.
   ------------------------------------------------------------------------- */

.cart-link {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgb(255 255 255 / 45%);
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cart-link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--c-brand);
	transform: translateY(-1px);
}

.cart-link__icon {
	width: 22px;
	height: 22px;
}

/* The badge sits on the ring rather than inside it, so it never crowds the
   ticket. Orange because it is the one thing here that should interrupt. */
.cart-link__count {
	position: absolute;
	inset-block-start: -5px;
	inset-inline-start: -5px;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	border-radius: var(--radius-pill);
	background: var(--c-logo-orange);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px var(--c-brand);
	transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.2s ease;
}

/* Over the hero there is no navy behind the badge to cut it out against, so
   the ring becomes a shadow instead. */
.site-header--overlay .cart-link__count {
	box-shadow: 0 1px 6px rgb(8 50 88 / 55%);
}

.cart-link:hover .cart-link__count { transform: scale(1.1); }

/* A cart with something in it should not look like an empty one. */
.cart-link--full {
	border-color: rgb(255 255 255 / 75%);
	background: rgb(255 255 255 / 12%);
}

.nav-toggle { display: none; }

@media (max-width: 1050px) {
	.site-header__inner { min-height: 76px; }

	/* --- The phone menu ---------------------------------------------------
	   A sheet that fills what is left of the screen under the bar, rather than
	   a panel of small links hanging off it. Room to read, one region a line,
	   and the way back to the ministry at the foot of it.

	   It is not display:none any more: a box that does not exist cannot fade,
	   and this one arrives rather than appearing.
	   -------------------------------------------------------------------- */
	.site-nav {
		position: fixed;

		/* Under the bar, wherever the bar actually ends. 76px is its minimum
		   and not its height: the logo carries it to 92, the admin bar drops
		   the page 46 further down again, and it condenses to 68 once the page
		   is scrolled - every one of which left a strip of header showing above
		   the sheet, or a strip of sheet lying over the bar. The script measures
		   it; the 76 is what happens without one, which is the shortest the bar
		   is ever drawn. */
		inset-block-start: var(--nav-top, 76px);
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
		/* --sp-10 is not one of the tokens: the scale runs 1 to 8, then 12 and
		   16. A var() that resolves to nothing does not quietly fall back on
		   that one side - it throws the whole shorthand away. So this padding
		   was not 24/16/40 but nothing at all, on every side, and the menu ran
		   into both edges of the glass.

		   The gutter is 16px at this width, which is right for a column of text
		   and mean for a sheet of 1.3rem headings; sp-6 is the floor. */
		padding: var(--sp-6) max(var(--gutter), var(--sp-6))
			 calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(to bottom, #0d4171 0%, var(--c-brand) 62%);
		visibility: hidden;
		opacity: 0;

		/* Visibility flips instantly on the way in and waits for the fade on the
		   way out. Transitioning it like a number is the usual mistake: the
		   property is discrete, and a browser that resolves it late leaves a menu
		   that is open and cannot be seen. */
		transition: opacity 0.26s ease, visibility 0s linear 0.26s;
	}

	/* Faded out is not gone: without this a stray tap in the top half of the
	   page lands on an invisible menu instead of the page under it. */
	.site-nav:not(.is-open) { pointer-events: none; }

	.site-nav.is-open {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.26s ease, visibility 0s;
	}

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

	.site-nav .site-nav__list > li + li {
		border-block-start: 1px solid rgb(255 255 255 / 14%);
	}

	.site-nav .site-nav__list > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: var(--sp-5);
		padding-inline: 0;
		font-family: var(--font-display);
		font-size: 1.3rem;
		font-weight: 800;
		color: #fff;

		/* Each line arrives a beat after the one before it. */
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 0.32s ease, transform 0.32s ease;
	}

	/* The arrow points the way the language runs.

	   This pseudo-element already had a job on a wide screen: it is the
	   yellow underline that draws in on hover, absolutely positioned along
	   the foot of the link. Giving it a size and two borders here did not
	   replace that rule, it joined it - so what appeared was a 9px yellow
	   square turned 45 degrees, pinned low and out of the flow: a diamond
	   under every line instead of an arrow at the end of it. The first
	   three properties below are the ones that have to be given back. */
	.site-nav .site-nav__list > li > a::after {
		content: "";
		position: static;
		inset: auto;
		background: none;
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		border-top: 2px solid currentColor;
		border-left: 2px solid currentColor;
		transform: rotate(-45deg);
		opacity: 0.45;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.site-nav .site-nav__list > li > a:hover::after {
		opacity: 1;
		transform: rotate(-45deg) translate(2px, -2px);
	}

	.site-nav.is-open .site-nav__list > li > a {
		opacity: 1;
		transform: none;
	}

	.site-nav.is-open .site-nav__list > li:nth-child(1) > a { transition-delay: 0.04s; }
	.site-nav.is-open .site-nav__list > li:nth-child(2) > a { transition-delay: 0.08s; }
	.site-nav.is-open .site-nav__list > li:nth-child(3) > a { transition-delay: 0.12s; }
	.site-nav.is-open .site-nav__list > li:nth-child(4) > a { transition-delay: 0.16s; }
	.site-nav.is-open .site-nav__list > li:nth-child(5) > a { transition-delay: 0.20s; }
	.site-nav.is-open .site-nav__list > li:nth-child(n+6) > a { transition-delay: 0.24s; }

	.site-nav__parent {
		display: block;
		margin-block-start: var(--sp-8);
		padding: var(--sp-4);
		border: 1px solid rgb(255 255 255 / 45%);
		border-radius: var(--radius-pill);
		color: #fff;
		font-size: var(--fs-sm);
		font-weight: 600;
		text-align: center;
		text-decoration: none;
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 0.32s ease 0.28s, transform 0.32s ease 0.28s, background 0.2s ease;
	}

	.site-nav.is-open .site-nav__parent { opacity: 1; transform: none; }

	.site-nav__parent:hover { background: rgb(255 255 255 / 12%); }

	/* Over the booking bar, which floats at z-index 60 outside this header.
	   Raising the sheet alone would not do it: the header is a stacking
	   context of its own, so the whole bar has to come up while it is open. */
	.site-header:has(.site-nav.is-open) { z-index: 90; }

	.site-header__inner { position: relative; }
	.pill { display: none; }

	.nav-toggle {
		display: inline-grid;
		place-items: center;
		width: 42px; height: 42px;
		border: 1px solid rgb(255 255 255 / 55%);
		border-radius: var(--radius-pill);
		background: transparent;
		cursor: pointer;
	}
	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		display: block;
		width: 18px; height: 2px;
		background: #fff;
		content: "";
		transition: transform 0.25s ease, opacity 0.2s ease;
	}
	.nav-toggle__bars { position: relative; }
	.nav-toggle__bars::before { position: absolute; inset-block-start: -6px; }
	.nav-toggle__bars::after  { position: absolute; inset-block-start: 6px; }

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }
}

/* --- Cards / grid -------------------------------------------------------- */

.site-main { padding-block: var(--sp-12); }

/* Elementor and the full-width template own their own layout: no centred
   wrapper, no vertical padding fighting their section spacing. */
.site-main--full,
.tm-elementor-page .site-main {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-block: 0;
}


.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--sp-8);
}

.card {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-bg);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.card__link { display: block; color: inherit; text-decoration: none; }
.card__media { margin: 0; }
.card__title { margin: var(--sp-4) var(--sp-4) var(--sp-2); font-size: var(--fs-lg); }
.card__excerpt { margin: 0 var(--sp-4) var(--sp-6); color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* --- Footer ---------------------------------------------------------------
   Navy panel of columns over a slightly deeper bottom bar, matching the
   official site. Columns are auto-fit rather than a fixed four, so the
   layout stays correct if a column is removed.
   ------------------------------------------------------------------------- */

.site-footer {
	margin-block-start: var(--sp-16);
	background: var(--c-brand);
	color: #fff;
}

.footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--sp-8) var(--sp-6);
	padding-block: var(--sp-12);
}

.footer-col__title {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 900;
	color: #fff;
}

.footer-col__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sp-2);
}

.footer-col__list a {
	color: rgb(255 255 255 / 82%);
	font-size: var(--fs-sm);
	text-decoration: none;
	/* Underline only on hover, but reserve the space so nothing shifts. */
	border-block-end: 1px solid transparent;
	padding-block-end: 1px;
	transition: color 0.16s ease, border-color 0.16s ease;
}

.footer-col__list a:hover,
.footer-col__list a:focus-visible {
	color: #fff;
	border-block-end-color: rgb(255 255 255 / 55%);
}

/* --- Bottom bar ----------------------------------------------------------- */

.footer-bar {
	background: var(--c-accent-2);
}

.footer-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3) var(--sp-6);
	padding-block: var(--sp-4);
}

.footer-bar__copy,
.footer-bar__credit {
	margin: 0;
	font-size: var(--fs-xs);
	color: rgb(255 255 255 / 72%);
}

.footer-bar__credit {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	unicode-bidi: isolate;
}

.footer-bar__credit a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-block-end: 1px solid rgb(255 255 255 / 45%);
}

.footer-bar__credit a:hover {
	border-block-end-color: #fff;
}

@media (max-width: 600px) {
	.footer-cols {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		padding-block: var(--sp-8);
	}
	.footer-bar__inner {
		justify-content: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- The cart panel --------------------------------------------------------
   Hangs off the cart button rather than sliding in from the edge: it holds
   two or three lines and a total, and a full-height drawer for that would be
   a lot of theatre for a small amount of information.
   ------------------------------------------------------------------------- */

.tm-cart { position: relative; }

/* The header is a stacking context of its own at z-index 50, so the panel
   inside it cannot rise above the sticky filter bar or the floating booking
   bar - both at z-index 60 - no matter what z-index the panel itself carries.
   Lift the whole header while the cart is open, the same way the nav sheet
   does. Without this the panel unfolds *behind* whichever of those bars is
   pinned over it once the page is scrolled, so on a phone the cart looks like
   it will not open at all. */
body.has-cart-open .site-header { z-index: 90; }

.mini-cart {
	position: absolute;
	inset-block-start: calc(100% + 12px);
	/* The cart sits at the far end of the bar, so the panel has to open back
	   into the page. Anchoring its start edge would send it off the screen. */
	inset-inline-end: 0;
	z-index: 60;
	width: min(21rem, calc(100vw - 2 * var(--sp-4)));
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	background: var(--c-bg);
	color: var(--c-ink);
	box-shadow: 0 18px 44px rgb(8 50 88 / 26%);
	text-align: start;

	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.mini-cart.is-open {
	opacity: 1;
	transform: none;
}

/* A small point at the top, so the panel reads as belonging to the button
   above it rather than floating loose. */
.mini-cart::before {
	content: "";
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: 18px;
	width: 12px;
	height: 12px;
	background: var(--c-bg);
	transform: rotate(45deg);
	border-radius: 2px;
}

.mini-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-block-end: var(--sp-4);
	padding-block-end: var(--sp-3);
	border-block-end: 1px solid var(--c-line);
}

.mini-cart__title {
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: 800;
	color: var(--c-brand);
}

.mini-cart__close {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-panel);
	color: var(--c-brand);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.16s ease;
}

.mini-cart__close:hover { background: var(--c-line); }

/* WooCommerce's own mini-cart markup, brought into the theme's measurements.
   The inline padding keeps the remove buttons clear of the scrollbar, which
   in RTL runs down the same edge they sit on. */
.mini-cart .woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	padding-inline-end: var(--sp-3);
	list-style: none;
	max-height: 15rem;
	overflow-y: auto;
}

/* Two rows, not four stacked blocks: the picture beside the name, the stepper
   and the price sharing the line below it. WooCommerce puts the image inside
   the product link rather than beside it, so the link is the grid that pairs
   them - placing the image from the row above never worked, because the image
   is not a child of that row. */
.mini-cart .woocommerce-mini-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	padding-block: var(--sp-3);
	padding-inline-end: 24px;
	border-block-end: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	line-height: 1.35;
}

.mini-cart .woocommerce-mini-cart-item:last-child { border-block-end: 0; }

.mini-cart .woocommerce-mini-cart-item a:not(.remove) {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: center;
	gap: var(--sp-3);
	color: var(--c-brand);
	font-weight: 700;
	text-decoration: none;

	/* Two lines at most, so one long departure name cannot make the panel
	   taller than the tour it is selling. */
	overflow: hidden;
}

.mini-cart .woocommerce-mini-cart-item img {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

.mini-cart .woocommerce-mini-cart-item .variation {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
}

.mini-cart .woocommerce-mini-cart-item .variation dt,
.mini-cart .woocommerce-mini-cart-item .variation dd {
	display: inline;
	margin: 0;
}

.mini-cart .woocommerce-mini-cart-item .remove {
	position: absolute;
	inset-block-start: var(--sp-3);
	inset-inline-end: 0;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--c-panel);
	color: var(--c-brand) !important;
	font-size: 0.85rem;
	line-height: 1;
	text-decoration: none;
}

.mini-cart .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	margin: var(--sp-4) 0;
	padding-block-start: var(--sp-3);
	border-block-start: 1px solid var(--c-line);
	font-weight: 800;
	color: var(--c-brand);
}

.mini-cart .woocommerce-mini-cart__total strong { font-weight: 800; }

.mini-cart .woocommerce-mini-cart__buttons {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
}

.mini-cart .woocommerce-mini-cart__buttons a {
	display: block;
	padding: var(--sp-3) var(--sp-5);
	border: 1px solid var(--c-brand);
	border-radius: var(--radius-pill);
	color: var(--c-brand);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background 0.16s ease, color 0.16s ease;
}

/* The second button is the checkout: it should be the one that looks like a
   decision. */
.mini-cart .woocommerce-mini-cart__buttons a.checkout {
	background: var(--c-brand);
	color: #fff;
}

.mini-cart .woocommerce-mini-cart__buttons a:hover {
	background: var(--c-logo-teal);
	border-color: var(--c-logo-teal);
	color: #fff;
}

.mini-cart .woocommerce-mini-cart__empty-message {
	margin: 0;
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
}

@media (max-width: 700px) {
	.mini-cart {
		position: fixed;
		inset-block-start: auto;
		inset-inline: var(--sp-4);
		width: auto;
	}

	.mini-cart::before { display: none; }
}

/* --- Quantity stepper in the cart panel ------------------------------------ */

.mini-cart .mini-qty {
	grid-column: 1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);

	padding: 2px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	transition: opacity 0.15s ease;
}

.mini-cart .mini-qty.is-busy {
	opacity: 0.45;
	pointer-events: none;
}

.mini-cart .mini-qty__btn {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-panel);
	color: var(--c-brand);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.mini-cart .mini-qty__btn:hover:not(:disabled) {
	background: var(--c-brand);
	color: #fff;
}

/* Disabled at the last remaining place for that departure, not greyed into
   invisibility - it still has to read as a button that is simply at its end. */
.mini-cart .mini-qty__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.mini-cart .mini-qty__value {
	min-width: 1.6rem;
	text-align: center;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--c-brand);
}

.mini-cart .mini-qty__price {
	grid-column: 2;
	justify-self: end;
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
}

.mini-cart .mini-qty__price .amount { font-weight: 700; }

/* Hover over the scrolled header.

   .site-header.is-stuck .cart-link is three classes and beat .cart-link:hover
   at two, so hovering the scrolled bar put the navy icon back on a transparent
   circle over the navy bar, and it vanished. These have to carry that same
   weight to undo it. .search-toggle is styled in search.css, which loads after
   this - but a rule with :hover outweighs the one there whatever the order. */
.site-header.is-stuck .pill:hover,
.site-header.is-stuck .cart-link:hover,
.site-header.is-stuck .search-toggle:hover {
	background: #fff;
	border-color: #fff;
	color: var(--c-brand);
}


/* --- The band between the phone menu and a wide screen --------------------
   The bar carries a logo, five regions, a "back to the main site" pill, a
   search and a cart. At 1280px those come to exactly the width available and
   the menu wrapped onto a second line - which is what a browser at 150% zoom
   on a 1920px screen gives you, and it is a common way to read a website
   rather than an edge case.

   Nothing is dropped: the logo is capped and the menu tightened, which buys
   back about 140px and puts it all on one line again.
   ------------------------------------------------------------------------- */

@media (min-width: 1051px) and (max-width: 1360px) {
	.site-header__inner { gap: var(--sp-4); }

	/* The one thing here that is not navigation. It comes back above 1360. */
	.pill { display: none; }

	.site-header__brand .custom-logo-link,
	.site-header__brand img { max-width: 220px; }

	.site-nav__list { gap: 2px; }

	.site-nav__list > li > a {
		padding-inline: var(--sp-2);
		font-size: 0.875rem;
	}

	.pill {
		padding-inline: var(--sp-4);
		font-size: 0.8125rem;
	}
}

/* A menu is one line or it is a menu that has gone wrong. Below 1050px it is a
   hamburger instead, so this only ever applies where the row is real. */
@media (min-width: 1051px) {
	.site-nav__list { flex-wrap: nowrap; }
	.site-nav__list > li > a { white-space: nowrap; }
}

/* The menu's own way back to the ministry belongs to the phone sheet. Above
   that width the pill in the bar does the same job. */
@media (min-width: 1051px) {
	.site-nav__parent { display: none; }
}

/* Nothing may push the page sideways.

   A right-to-left page that is briefly wider than the window opens scrolled to
   its right edge and then snaps back when the width settles - which reads as
   the whole page sliding. The cause was WooCommerce's magnifier, a 1,500px
   copy of the photograph dropped in on load before it is positioned, and it is
   gone; this makes sure the next thing that overflows cannot do it again.

   clip rather than hidden: it does not make a scroll container, so the sticky
   folds and the bar keep working against the window as before. */
.site { overflow-x: clip; }

/* --- The footer, awake ----------------------------------------------------
   After web-oz.com, where the thing that makes the foot of the page feel
   alive is not an effect on the fold above it: it is what the footer itself
   is doing. A giant ghost wordmark that rises into place as you arrive at it,
   a dot that says somebody is home, and a number that is different every
   second you look at it.

   The number is the one this whole site is about - how long until the next
   tour sets off - and it is read from the tours themselves, so it can never
   say anything that is not true.
   ------------------------------------------------------------------------- */

.site-footer {
	position: relative;
	/* The wordmark starts 70px low and is eased up. Without this it would
	   lengthen the page for as long as it was travelling. */
	overflow: hidden;
	background: radial-gradient(120% 130% at 50% 0%, #0e4576 0%, var(--c-brand) 58%);
}

/* The campaign colours as a hairline along the top edge, drawn to the left,
   which is the way the language runs. */
.site-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(
		to left,
		var(--c-logo-teal) 0%,
		var(--c-logo-aqua) 42%,
		var(--c-logo-yellow) 100%
	);
}

/* --- The counter ---------------------------------------------------------- */

.footer-lede {
	position: relative;
	z-index: 1;
	padding-block: var(--sp-12) var(--sp-8);
	text-align: center;
}

.footer-lede__inner {
	display: grid;
	justify-items: center;
	gap: var(--sp-4);
}

.footer-lede__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	padding: 0.4em 1em;
	border: 1px solid rgb(255 255 255 / 26%);
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 7%);
	color: rgb(255 255 255 / 90%);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
}

/* Somebody is home. The ring travels outwards and fades rather than the dot
   changing size, so nothing around it moves. */
.footer-lede__pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-logo-aqua);
	animation: tm-pulse 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}

@keyframes tm-pulse {
	0%   { box-shadow: 0 0 0 0 rgb(0 169 158 / 65%); }
	70%  { box-shadow: 0 0 0 11px rgb(0 169 158 / 0%); }
	100% { box-shadow: 0 0 0 0 rgb(0 169 158 / 0%); }
}

/* A sentence with one large number in it, not four boxes with the seconds in
   them. Four boxes is the furniture of a flash sale, and it read as one: the
   same information set as language says it without the pressure.

   Ordinary inline flow rather than a flex row, so the figure sits on the
   sentence's own baseline and the line wraps where the words do. */
.footer-lede__title {
	max-width: 26ch;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	font-weight: 600;
	line-height: 1.15;
	color: rgb(255 255 255 / 82%);
}

.footer-lede__days {
	margin-inline: 0.06em;
	font-size: 2.4em;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--c-logo-aqua);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.footer-lede__when {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.5em;
	margin: 0;
	font-size: var(--fs-sm);
	color: rgb(255 255 255 / 60%);
}

/* The part that is actually moving. Isolated because a run of digits and
   colons inside a right-to-left line is at the mercy of whatever sits next
   to it. */
.footer-lede__clock {
	font-family: var(--font-display);
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: rgb(255 255 255 / 82%);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	unicode-bidi: isolate;
}

.footer-lede__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-block-start: var(--sp-2);
	padding: var(--sp-3) var(--sp-8);
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--c-brand);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
		box-shadow 0.2s ease;
}

/* Two sides of a square turned 45 degrees: an arrow pointing the way the
   language runs, with no glyph that would need flipping. */
.footer-lede__cta::after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.footer-lede__cta:hover {
	background: var(--c-logo-teal);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgb(0 0 0 / 28%);
}

.footer-lede__cta:hover::after { transform: rotate(-45deg) translate(2px, -2px); }

/* --- The columns ---------------------------------------------------------- */

.footer-cols {
	position: relative;
	z-index: 1;
	border-block-start: 1px solid rgb(255 255 255 / 12%);
}

/* A tick of campaign colour on each heading. */
.footer-col__title {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.footer-col__title::before {
	content: "";
	width: 3px;
	height: 0.95em;
	border-radius: 2px;
	background: var(--c-logo-teal);
}

/* --- The wordmark --------------------------------------------------------- */

.footer-mark {
	position: relative;
	z-index: 0;
	display: grid;
	justify-items: center;
	margin-block-start: var(--sp-4);
	text-align: center;
	line-height: 0.92;
	user-select: none;
	pointer-events: none;
}

.footer-mark__small {
	font-family: var(--font-display);
	font-size: clamp(0.8rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: rgb(255 255 255 / 24%);
}

.footer-mark__big {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 16.5vw, 14rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	/* What it falls back to where the gradient cannot be cut out of the
	   letters, which is the whole word rather than nothing at all. */
	color: rgb(255 255 255 / 15%);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.footer-mark__big {
		background: linear-gradient(to left, var(--c-logo-teal), var(--c-logo-aqua));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		opacity: 0.38;
	}
}

/* --- Arriving -------------------------------------------------------------
   is-lively is added by the script, so a page with no script gets a footer
   that is simply there rather than one that is permanently invisible.
   ------------------------------------------------------------------------- */

.site-footer.is-lively .footer-col,
.site-footer.is-lively .footer-lede__inner > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.site-footer.is-lively.is-near .footer-col,
.site-footer.is-lively.is-near .footer-lede__inner > * {
	opacity: 1;
	transform: none;
}

.site-footer.is-lively .footer-lede__inner > :nth-child(2) { transition-delay: 0.06s; }
.site-footer.is-lively .footer-lede__inner > :nth-child(3) { transition-delay: 0.12s; }
.site-footer.is-lively .footer-lede__inner > :nth-child(4) { transition-delay: 0.18s; }
.site-footer.is-lively .footer-lede__inner > :nth-child(5) { transition-delay: 0.24s; }

.site-footer.is-lively .footer-col:nth-child(2) { transition-delay: 0.07s; }
.site-footer.is-lively .footer-col:nth-child(3) { transition-delay: 0.14s; }
.site-footer.is-lively .footer-col:nth-child(4) { transition-delay: 0.21s; }

@media (max-width: 700px) {
	.footer-lede { padding-block: var(--sp-8) var(--sp-6); }
	.footer-mark__small { letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
	.footer-lede__pulse { animation: none; }
	.footer-mark { transform: none !important; }
}

/* --- A plain page ---------------------------------------------------------
   page.php renders the legal pages, the FAQ, the cart and the checkout, and
   until now not one of its three classes was styled: the title was whatever
   size the block library gives an unclaimed h1, in the body face, in near
   black. Every page that is not the home page, a tour or the catalogue was
   wearing WordPress's clothes.
   ------------------------------------------------------------------------- */

.page-article {
	padding-block: var(--sp-8) var(--sp-16);
}

.page-article__header {
	margin-block-end: var(--sp-8);
}

.page-article__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--c-brand);
}

.page-article__content {
	color: var(--c-ink);
	font-size: var(--fs-base);
	line-height: 1.75;
}

/* One rhythm for the whole page rather than a margin per element. */
.page-article__content > * + * { margin-block-start: var(--sp-4); }

.page-article__content h2,
.page-article__content h3 {
	margin-block-start: var(--sp-8);
	margin-block-end: var(--sp-2);
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.25;
	color: var(--c-brand);
}

.page-article__content h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
.page-article__content h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }

.page-article__content a {
	color: var(--c-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.page-article__content a:hover { color: var(--c-logo-teal); }

.page-article__content ul,
.page-article__content ol {
	margin-block: var(--sp-4);
	padding-inline-start: 1.3em;
}

.page-article__content li + li { margin-block-start: var(--sp-2); }

.page-article__content strong { font-weight: 700; color: var(--c-brand); }

.page-article__content hr {
	margin-block: var(--sp-8);
	border: 0;
	border-block-start: 1px solid var(--c-line);
}

.page-article__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.page-article__content th,
.page-article__content td {
	padding: var(--sp-3);
	border-block-end: 1px solid var(--c-line);
	text-align: start;
}

.page-article__content th { color: var(--c-brand); font-weight: 700; }

/* --- 404 -------------------------------------------------------------------
   A wrong turn on a shop is a place to redirect, not to apologise at length.
   The big 404 carries the news at a glance; below it the page hands back the
   search and the four regions so the visitor is looking at a way forward
   rather than a dead end.
   ------------------------------------------------------------------------- */

.error-404 {
	max-width: 640px;
	margin-inline: auto;
	padding-block: var(--sp-10, 2.5rem) var(--sp-12);
	text-align: center;
}

.error-404__code {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(5rem, 3rem + 12vw, 9rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--c-brand);

	/* The zeros carry the campaign's yellow through them, so the number reads
	   as part of the brand rather than a browser default. */
	background: linear-gradient(180deg, var(--c-brand) 60%, var(--c-logo-teal));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.error-404__title {
	margin: var(--sp-3) 0 0;
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 800;
	color: var(--c-brand);
}

.error-404__text {
	margin: var(--sp-3) auto 0;
	max-width: 46ch;
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: var(--c-ink-soft);
}

/* The search sits in the flow of the page here rather than on a dark hero, so
   it gets its own breathing room and a sensible cap on width. */
.error-404 .tour-search {
	margin-block-start: var(--sp-8);
	text-align: start;
}

.error-404__regions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2) var(--sp-3);
	margin-block-start: var(--sp-8);
}

.error-404__regions-label {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--c-ink-soft);
}

.error-404__region-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.error-404__region {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid rgb(8 50 88 / 20%);
	border-radius: var(--radius-pill);
	background: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-brand);
	text-decoration: none;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.error-404__region:hover,
.error-404__region:focus-visible {
	background: var(--c-brand);
	border-color: var(--c-brand);
	color: #fff;
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	margin-block-start: var(--sp-9, 2.25rem);
}

.error-404__home {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.error-404__home:hover {
	color: var(--c-brand-dark);
}

.error-404__search {
	display: flex;
	gap: var(--sp-2);
	max-width: 420px;
	margin: var(--sp-8) auto 0;
}

.error-404__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 16px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	background: #fff;
	font-family: inherit;
	font-size: var(--fs-base);
	color: var(--c-ink);
}

.error-404__search input[type="search"]:focus {
	outline: none;
	border-color: var(--c-logo-teal);
	box-shadow: 0 0 0 3px rgb(0 170 203 / 25%);
}

.error-404__search button {
	flex: 0 0 auto;
	padding: 11px 22px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-brand);
	color: #fff;
	font-family: inherit;
	font-size: var(--fs-base);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.16s ease;
}

.error-404__search button:hover {
	background: var(--c-brand-dark);
}