/* ==========================================================================
   Travel Platform — Design System
   Written with CSS logical properties (margin-inline, text-align: start,
   etc.) wherever possible specifically so the layout mirrors correctly
   under RTL without duplicating rules — rtl.css only overrides the small
   number of cases logical properties can't reach (icon direction, etc).
   ========================================================================== */

:root {
	/* Color — restrained, premium-travel palette (spec section 70) */
	--tp-color-accent: #1F5D50;
	--tp-color-accent-dark: #14413A;
	--tp-color-text: #211D17;
	--tp-color-text-muted: #6B675F;
	--tp-color-background: #FBFAF7;
	--tp-color-surface: #FFFFFF;
	--tp-color-surface-alt: #F6F3EC;
	--tp-color-border: #E4E0D5;
	--tp-color-danger: #B3261E;
	--tp-color-success: #23572A;

	/* Typography — Latin + Arabic pairing */
	--tp-font-body: "Newsreader", Georgia, "Times New Roman", serif;
	--tp-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--tp-font-arabic: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

	--tp-radius-sm: 6px;
	--tp-radius-md: 12px;
	--tp-radius-lg: 20px;
	--tp-radius-xl: 28px;

	--tp-space-1: 0.5rem;
	--tp-space-2: 1rem;
	--tp-space-3: 1.5rem;
	--tp-space-4: 2.5rem;
	--tp-space-5: 4rem;
	--tp-space-6: 6rem;

	/* A small curated set of destination-art gradients — used only when
	   a country/city/destination/article has no featured image, so an
	   empty card reads as an intentional editorial placeholder ("a
	   place waiting for its photo") rather than a broken grey box. Each
	   entity is assigned one deterministically by title (see
	   tp_placeholder_art_class() in inc/template-tags.php), so the same
	   entity always gets the same treatment and a grid of several
	   entities shows visual variety without any images existing yet. */
	--tp-art-1-a: #1F5D50; --tp-art-1-b: #0E3A31;
	--tp-art-2-a: #B3742C; --tp-art-2-b: #7A4B15;
	--tp-art-3-a: #2B5C8A; --tp-art-3-b: #163752;
	--tp-art-4-a: #7A4A6B; --tp-art-4-b: #4A2740;
	--tp-art-5-a: #4A6B3C; --tp-art-5-b: #29401F;

	--tp-max-width: 1280px;
	--tp-shadow-card: 0 8px 24px rgba(33, 29, 23, 0.06);
	--tp-shadow-elevated: 0 20px 48px rgba(33, 29, 23, 0.12);

	/* Form control surface — deliberately its OWN fixed token set, not
	   an alias of --tp-color-text/--tp-color-surface. Those two flip
	   independently under dark mode elsewhere in this file, and an
	   input that mixes a variable text color with a hardcoded white
	   background (or vice versa) goes invisible the moment only one
	   side of the pair changes. Keeping every form control on this
	   dedicated, always-light pair — by design, like most editing
	   surfaces (code editors, admin panels) — guarantees strong,
	   predictable contrast regardless of the surrounding page theme. */
	--tp-input-bg: #FFFFFF;
	--tp-input-text: #1A1712;
	--tp-input-placeholder: #6B675F;
	--tp-input-border: #B8B0A0;
	--tp-input-border-hover: #8F8776;
	--tp-input-border-focus: #1F5D50;
	--tp-input-focus-ring: rgba(31, 93, 80, 0.28);
	--tp-input-hover-bg: #F3F1EA;
	--tp-input-disabled-bg: #EDEAE1;
	--tp-input-disabled-text: #948F82;
	--tp-input-disabled-border: #D8D3C8;
	--tp-input-error-border: #B3261E;
	--tp-input-error-ring: rgba(179, 38, 30, 0.22);

	/* Forces browser-native controls (date/time pickers, select arrows,
	   number spinners, checkboxes) to render with light-mode chrome —
	   this is what keeps a native date picker's calendar icon dark and
	   visible instead of the browser auto-rendering a dark-on-dark icon
	   under OS dark mode. Applied again, redundantly but explicitly, on
	   date/time inputs directly further down for browsers that only
	   honor it per-element. */
	color-scheme: light;
}

/* A prefers-color-scheme:dark override used to live here, silently
   swapping the entire palette to a dark theme for any visitor whose OS
   or browser was set to dark mode — with no toggle, no opt-out, and no
   visual QA ever done against it. That's the real cause behind
   "sometimes the site looks dark and closed instead of the light
   premium design in every screenshot": every screenshot in this
   project was taken from a light-mode browser, so it never showed what
   a dark-mode visitor actually saw. FANOUSS ships ONE finished visual
   design — the light, warm, editorial one — deliberately, for every
   visitor regardless of their system preference. If a real dark theme
   is ever wanted, it needs its own full design pass (every hardcoded
   dark photo-overlay color in this file assumes a light page around
   it) and an explicit visitor-facing toggle, not a silent OS-driven
   switch. */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
	/* Safety net against page-level horizontal scroll. Components that
	   need horizontal scrolling on purpose (.tp-card-row__scroller, wide
	   tables) declare their own `overflow-x: auto` on a bounded child —
	   this rule only stops something ELSE from ever widening the page
	   itself, which is exactly what was happening on mobile before this
	   was added.
	   `clip`, not `hidden`: per the CSS Overflow spec, setting
	   `overflow-x: hidden` while `overflow-y` is left at its default
	   (`visible`) forces the COMPUTED value of overflow-y to `auto` —
	   turning body into its own scroll container and breaking every
	   `position: sticky` element on the page (confirmed: the sticky
	   header stopped sticking with `hidden`). `clip` suppresses
	   horizontal overflow without that x/y coupling side effect. */
	overflow-x: clip;
}
body {
	margin: 0;
	font-family: var(--tp-font-ui);
	color: var(--tp-color-text);
	background: var(--tp-color-background);
	font-size: 16px;
	line-height: 1.6;
}
html[lang^="ar"] body { font-family: var(--tp-font-arabic); }

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

/* ---------- Form controls (global baseline) ----------
   Every native form control on the site — tool calculators, the
   contact form, header/inline search, blog comments, anything not
   yet built — gets its contrast from THIS one place. Component-level
   rules (.tp-tool, .tp-form-row, .tp-search-field) below only add
   layout (padding, radius, width); they must never re-set color or
   background, or they'd silently reopen the exact bug this fixes. */
label {
	color: var(--tp-color-text);
	font-weight: 600;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="password"],
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], input[type="week"], select, textarea {
	background: var(--tp-input-bg);
	color: var(--tp-input-text);
	border: 1px solid var(--tp-input-border);
	border-radius: var(--tp-radius-sm);
	padding: 0.65rem 0.8rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	/* Locks native control chrome (date-picker icon, select arrow,
	   number spinners) to light rendering so they stay visible even
	   when the surrounding page is in dark mode. */
	color-scheme: light;
}

input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], input[type="week"] {
	/* WebKit/Blink only reliably apply color-scheme to the picker
	   indicator when it's also set directly on the date/time input
	   itself, not just inherited from :root. */
	color-scheme: light;
}

::placeholder { color: var(--tp-input-placeholder); opacity: 1; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
	border-color: var(--tp-input-border-hover);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--tp-input-border-focus);
	box-shadow: 0 0 0 3px var(--tp-input-focus-ring);
}

input:disabled, select:disabled, textarea:disabled {
	background: var(--tp-input-disabled-bg);
	color: var(--tp-input-disabled-text);
	border-color: var(--tp-input-disabled-border);
	cursor: not-allowed;
}

input:invalid:not(:placeholder-shown):not(:focus),
[aria-invalid="true"] {
	border-color: var(--tp-input-error-border);
}
input:invalid:not(:placeholder-shown):focus,
[aria-invalid="true"]:focus {
	border-color: var(--tp-input-error-border);
	box-shadow: 0 0 0 3px var(--tp-input-error-ring);
}

select {
	/* Custom arrow guarantees a visible, on-brand indicator instead of
	   depending on each browser's own (sometimes low-contrast) default. */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23211D17' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 14px;
	padding-inline-end: 2.25rem;
}
[dir="rtl"] select {
	background-position: left 0.75rem center;
}

h1, h2, h3, h4 { font-family: var(--tp-font-body); line-height: 1.2; margin: 0 0 var(--tp-space-2); font-weight: 600; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 var(--tp-space-2); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.tp-skip-link {
	position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
	background: var(--tp-color-accent); color: #fff; padding: 0.75rem 1.25rem;
}
.tp-skip-link:focus { inset-inline-start: 0; }

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

.tp-container { max-width: var(--tp-max-width); margin-inline: auto; padding-inline: var(--tp-space-2); }

.tp-section { margin-block: var(--tp-space-5); }
.tp-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--tp-space-2); margin-bottom: var(--tp-space-3); }
.tp-section__head h2 { margin-bottom: 0; }
.tp-see-all { font-family: var(--tp-font-ui); font-weight: 600; font-size: 0.9rem; white-space: nowrap; text-decoration: none; color: var(--tp-color-accent); }

/* Small uppercase kicker above a section heading — the editorial-
   magazine device that signals "this is a distinct section", not a
   generic WordPress list of blocks. */
.tp-eyebrow {
	display: block; font-family: var(--tp-font-ui); font-size: 0.78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.08em; color: var(--tp-color-accent);
	margin-bottom: 0.35rem;
}

/* ---------- Forms: shared notice + honeypot (contact) ---------- */
.tp-field-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.tp-form-notice {
	padding: 0.75rem 1rem; border-radius: var(--tp-radius-sm); font-size: 0.9rem; margin-bottom: var(--tp-space-2);
}
.tp-form-notice--success { background: #E4F1E0; color: var(--tp-color-success); }
.tp-form-notice--error { background: #F8E4E1; color: var(--tp-color-danger); }
.tp-form-row { margin-bottom: var(--tp-space-2); }
.tp-form-row label { display: block; margin-bottom: 0.35rem; }
.tp-form-row input, .tp-form-row textarea { width: 100%; }.tp-prose :where(h2, h3) { margin-top: var(--tp-space-4); }
.tp-prose p { max-width: 72ch; }
.tp-prose ul, .tp-prose ol { max-width: 72ch; padding-inline-start: 1.25rem; }
.tp-note { font-size: 0.9rem; color: var(--tp-color-text-muted); }

/* ---------- Buttons ---------- */
.tp-button {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.75rem 1.4rem; border-radius: 999px; font-weight: 600;
	font-family: var(--tp-font-ui); text-decoration: none; font-size: 0.95rem;
	border: 1px solid transparent; cursor: pointer;
}
.tp-button--primary { background: var(--tp-color-accent); color: #fff; }
.tp-button--primary:hover { background: var(--tp-color-accent-dark); }
.tp-button--ghost { background: transparent; border-color: var(--tp-color-border); color: var(--tp-color-text); }
.tp-button--ghost:hover { background: var(--tp-color-surface-alt); }

.tp-badge {
	display: inline-block; padding: 0.3rem 0.75rem; border-radius: 999px;
	background: var(--tp-color-surface-alt); color: var(--tp-color-text);
	font-size: 0.8rem; font-weight: 600; text-decoration: none;
}
.tp-badge--muted { background: transparent; border: 1px solid var(--tp-color-border); }

/* ---------- Header ---------- */
.tp-site-header { background: var(--tp-color-surface); border-bottom: 1px solid var(--tp-color-border); position: sticky; top: 0; z-index: 50; }
.tp-site-header__row { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--tp-space-2); padding-block: 0.9rem; }
.tp-site-header__brand { flex-shrink: 0; min-width: 0; }
.tp-site-header__brand-text {
	font-family: var(--tp-font-body); font-size: 1.4rem; font-weight: 700; text-decoration: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 46vw;
}
.tp-primary-nav { flex: 1; display: none; }
.tp-menu { list-style: none; display: flex; gap: var(--tp-space-3); margin: 0; padding: 0; }
.tp-menu-item { position: relative; }
.tp-menu-item__link { text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 0.5rem 0; display: inline-flex; align-items: center; gap: 0.3rem; }
.tp-menu-item__caret { font-size: 0.6rem; }

.tp-mega-panel {
	display: none; position: absolute; top: 100%; inset-inline-start: 0;
	background: var(--tp-color-surface); border: 1px solid var(--tp-color-border);
	border-radius: var(--tp-radius-md); box-shadow: var(--tp-shadow-elevated);
	min-width: 560px; z-index: 60;
}
.tp-menu-item--has-mega:hover .tp-mega-panel,
.tp-menu-item--has-mega:focus-within .tp-mega-panel { display: block; }
.tp-mega-panel__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--tp-space-3); padding: var(--tp-space-3); }
.tp-mega-panel__column-title { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tp-color-text-muted); margin-bottom: 0.5rem; text-decoration: none; }
.tp-mega-panel__column-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.tp-mega-panel__column-links a { text-decoration: none; font-size: 0.92rem; }
.tp-mega-panel__column-links a:hover { color: var(--tp-color-accent); }

/* ---------- Dynamic Destinations mega menu ----------
   Built from live taxonomy/CPT queries (continents, countries, travel
   styles) in inc/mega-menu.php, not a hand-authored menu — see
   tp_render_destinations_mega_panel(). */
.tp-mega-panel--destinations { min-width: 900px; }
.tp-mega-panel--destinations .tp-mega-panel__inner {
	grid-template-columns: 1fr 1fr 0.85fr 1fr;
	gap: var(--tp-space-4);
	padding: var(--tp-space-4);
}
.tp-mega-panel__featured {
	position: relative; display: block; border-radius: var(--tp-radius-md); overflow: hidden;
	text-decoration: none; color: #fff; min-height: 190px;
}
.tp-mega-panel__featured-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-mega-panel__featured::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.2) 60%, rgba(10,10,10,0.05) 100%);
}
.tp-mega-panel__featured-body { position: absolute; z-index: 1; inset-inline: 0; bottom: 0; padding: var(--tp-space-2); display: flex; flex-direction: column; gap: 0.15rem; }
.tp-mega-panel__featured-body .tp-eyebrow { color: rgba(255,255,255,0.85); }
.tp-mega-panel__featured-title { font-family: var(--tp-font-body); font-weight: 700; font-size: 1rem; }
.tp-mega-panel__continent-link {
	display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
	padding: 0.4rem 0; text-decoration: none; font-size: 0.92rem;
}
.tp-mega-panel__continent-link:hover { color: var(--tp-color-accent); }
.tp-mega-panel__count {
	font-size: 0.72rem; color: var(--tp-color-text-muted); background: var(--tp-color-surface-alt);
	border-radius: 999px; padding: 0.1rem 0.5rem;
}
.tp-mega-panel__country-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; text-decoration: none; font-size: 0.92rem; }
.tp-mega-panel__country-link:hover { color: var(--tp-color-accent); }
.tp-mega-panel__flag { font-size: 1.05rem; line-height: 1; }
.tp-mega-panel__style-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tp-mega-panel__style-grid a {
	font-size: 0.82rem; padding: 0.3rem 0.7rem; border-radius: 999px;
	background: var(--tp-color-surface-alt); text-decoration: none; color: var(--tp-color-text);
}
.tp-mega-panel__style-grid a:hover { background: var(--tp-color-accent); color: #fff; }
.tp-mega-panel__footer {
	grid-column: 1 / -1; border-top: 1px solid var(--tp-color-border); margin-top: var(--tp-space-2);
	padding-top: var(--tp-space-2); display: flex; justify-content: space-between; align-items: center;
}

/* ---------- Travel Tools mega menu (mini) ---------- */
.tp-mega-panel--tools { min-width: 460px; }
.tp-mega-panel--tools .tp-mega-panel__inner { grid-template-columns: repeat(2, 1fr); gap: 0.25rem var(--tp-space-3); padding: var(--tp-space-2); }
.tp-mega-panel__tool-link {
	display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.5rem; border-radius: var(--tp-radius-sm);
	text-decoration: none; color: var(--tp-color-text); font-size: 0.88rem;
}
.tp-mega-panel__tool-link:hover { background: var(--tp-color-surface-alt); }
.tp-mega-panel__tool-icon {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 1.9rem; height: 1.9rem; border-radius: 50%;
}
.tp-mega-panel__tool-icon svg { width: 1.05rem; height: 1.05rem; }

.tp-site-header__actions { display: flex; align-items: center; gap: var(--tp-space-2); flex-shrink: 0; }
.tp-search-field { position: relative; }
.tp-search-field--header { display: none; }
.tp-search-field input[type="search"] {
	padding: 0.55rem 0.9rem; border: 1px solid var(--tp-color-border); border-radius: 999px;
	font-size: 0.9rem; width: 220px; background: var(--tp-color-surface-alt);
}
.tp-search-field--header button { position: absolute; inset-inline-end: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--tp-color-text-muted); }

/* Language switcher — deliberately a plain, always-visible row of
   short codes ("EN · FR · ES · AR") rather than a menu tucked behind a
   click, per the requirement that language switching not be hidden in
   an obscure place. */
.tp-lang-switcher {
	border-inline-start: 1px solid var(--tp-color-border);
	padding-inline-start: var(--tp-space-2);
}
.tp-lang-switcher ul {
	list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0;
	font-family: var(--tp-font-ui); font-size: 0.82rem; font-weight: 700;
}
.tp-lang-switcher a {
	display: inline-block; text-decoration: none; padding: 0.3rem 0.55rem; border-radius: 999px;
	color: var(--tp-color-text-muted); letter-spacing: 0.02em; text-transform: uppercase;
}
.tp-lang-switcher a:hover { background: var(--tp-color-surface-alt); color: var(--tp-color-text); }
.tp-lang-switcher li.is-current a { background: var(--tp-color-accent); color: #fff; }

@media (max-width: 480px) {
	.tp-lang-switcher { border-inline-start: none; padding-inline-start: 0; }
	.tp-lang-switcher a { padding: 0.3rem 0.4rem; font-size: 0.78rem; }
}

/* Duplicate switcher inside the mobile menu panel — same links, styled
   more spaciously since there's no header-row width pressure there.
   Keeping both means the switcher is never lost regardless of viewport. */
.tp-mobile-nav__lang {
	margin-top: var(--tp-space-2); padding-top: var(--tp-space-2);
	border-top: 1px solid var(--tp-color-border);
}
.tp-mobile-nav__lang-label {
	display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.04em; color: var(--tp-color-text-muted); margin-bottom: 0.5rem;
}
.tp-mobile-nav__lang .tp-lang-switcher { border-inline-start: none; padding-inline-start: 0; }
.tp-mobile-nav__lang .tp-lang-switcher ul { gap: 0.5rem; }
.tp-mobile-nav__lang .tp-lang-switcher a { font-size: 0.9rem; padding: 0.45rem 0.9rem; border: 1px solid var(--tp-color-border); }
.tp-mobile-nav__lang .tp-lang-switcher li.is-current a { border-color: var(--tp-color-accent); }

.tp-mobile-nav-toggle { display: inline-flex; flex-direction: column; gap: 4px; background: none; border: none; padding: 0.5rem; cursor: pointer; }
.tp-mobile-nav-toggle span { width: 22px; height: 2px; background: var(--tp-color-text); display: block; }
.tp-mobile-nav { border-top: 1px solid var(--tp-color-border); padding: var(--tp-space-2); }
.tp-mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tp-mobile-nav__list a { display: block; padding: 0.6rem 0; text-decoration: none; font-weight: 600; }
.tp-mobile-nav__list ul { list-style: none; padding-inline-start: 1rem; }

/* Mobile nav accordions (Destinations / Countries / Travel Guides / Travel
   Tools). Closed by default; the whole summary row (chevron included) is
   the toggle. The panel animates with the grid 0fr -> 1fr technique rather
   than a max-height guess, so a section with 20 links and one with 4 both
   open at their own real height. `.is-animated` is added by JS, so with JS
   off the panel simply appears -- never a collapsed, unreachable submenu. */
.tp-mobile-nav__list > li { border-bottom: 1px solid var(--tp-color-border); }
.tp-mobile-nav__list > li:last-child { border-bottom: none; }
.tp-mobile-nav__list > .tp-mobile-nav__item > a { padding: 0.9rem 0; font-weight: 600; }
.tp-mobile-acc { margin: 0; }
.tp-mobile-acc__summary {
	display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
	padding: 0.65rem 0; font-weight: 600; cursor: pointer; list-style: none;
	-webkit-tap-highlight-color: transparent;
}
.tp-mobile-acc__summary::-webkit-details-marker { display: none; }
.tp-mobile-acc__summary::marker { content: ''; }
.tp-mobile-acc__summary:focus-visible { outline: 2px solid var(--tp-color-accent); outline-offset: 3px; border-radius: 4px; }
.tp-mobile-acc__label { flex: 1 1 auto; min-width: 0; }
/* A round tap target, not a bare 10px chevron: this is the control the
   whole submenu hangs off, and it has to be hittable with a thumb. */
.tp-mobile-acc__icon {
	flex: 0 0 auto; position: relative; width: 2rem; height: 2rem; border-radius: 50%;
	background: var(--tp-color-surface-alt); transition: background-color 0.2s ease;
}
.tp-mobile-acc__icon::before {
	content: ''; position: absolute; top: 50%; left: 50%;
	width: 0.5rem; height: 0.5rem; margin: -0.35rem 0 0 -0.25rem;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform 0.26s ease, margin-top 0.26s ease;
}
.tp-mobile-acc[open] > .tp-mobile-acc__summary { color: var(--tp-color-accent); }
.tp-mobile-acc[open] > .tp-mobile-acc__summary .tp-mobile-acc__icon::before { transform: rotate(-135deg); margin-top: -0.14rem; }
.tp-mobile-acc__panel { display: grid; grid-template-rows: 1fr; }
.tp-mobile-acc__panel-inner { overflow: hidden; min-height: 0; }
.tp-mobile-acc.is-animated .tp-mobile-acc__panel { grid-template-rows: 0fr; transition: grid-template-rows 0.26s ease; }
.tp-mobile-acc.is-animated.is-open .tp-mobile-acc__panel { grid-template-rows: 1fr; }
.tp-mobile-nav__list .tp-mobile-acc__list {
	list-style: none; margin: 0; padding: 0.15rem 0 0.8rem; padding-inline-start: 0.9rem;
	border-inline-start: 2px solid var(--tp-color-border);
}
.tp-mobile-nav__list .tp-mobile-acc__list a { font-weight: 500; font-size: 0.95rem; padding: 0.42rem 0; color: var(--tp-color-text-muted); }
.tp-mobile-nav__list .tp-mobile-acc__list a:hover, .tp-mobile-nav__list .tp-mobile-acc__list a:focus-visible { color: var(--tp-color-text); }
.tp-mobile-nav__list .tp-mobile-acc__list a.tp-mobile-acc__all { font-weight: 600; color: var(--tp-color-accent); }
@media (prefers-reduced-motion: reduce) {
	.tp-mobile-acc.is-animated .tp-mobile-acc__panel,
	.tp-mobile-acc__icon,
	.tp-mobile-acc__icon::before { transition: none; }
}

/* 1180px, not 960px: with 6 primary-nav links, a search field, and a
   4-language switcher all sharing one row, 960–1179px is wide enough
   to LOOK like desktop but too narrow to actually fit everything —
   "Plan Your Trip" wraps to two lines and the language switcher gets
   clipped at common tablet-landscape widths like 1024px. Tablets keep
   the mobile hamburger nav (already designed for narrow widths) until
   there's genuinely enough room for the full desktop header. */
@media (min-width: 1180px) {
	.tp-primary-nav { display: block; }
	.tp-search-field--header { display: block; }
	.tp-mobile-nav-toggle, .tp-mobile-nav { display: none; }
}

/* ---------- Hero ---------- */
.tp-hero { position: relative; color: #fff; padding-block: var(--tp-space-5); overflow: hidden; }
.tp-hero__media { position: absolute; inset: 0; background: var(--tp-color-accent-dark); }
.tp-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.tp-hero__content { position: relative; max-width: 720px; }
.tp-hero__content h1 { color: #fff; }
.tp-hero__content p { color: rgba(255,255,255,0.9); font-size: 1.1rem; max-width: 56ch; }
.tp-hero__search { display: flex; gap: 0.6rem; margin-block: var(--tp-space-3); max-width: 560px; }
.tp-hero__search input { flex: 1; padding: 0.9rem 1.1rem; border-radius: 999px; border: none; font-size: 1rem; }
.tp-hero__quick-links { display: flex; gap: var(--tp-space-2); flex-wrap: wrap; }
.tp-hero__quick-links a { color: #fff; text-decoration: underline; font-size: 0.9rem; }

/* ---------- Cards ---------- */
.tp-card-grid, .tp-post-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--tp-space-3);
}
.tp-card {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	background: var(--tp-color-surface); border-radius: var(--tp-radius-md); overflow: hidden;
	box-shadow: var(--tp-shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tp-card:hover { transform: translateY(-3px); box-shadow: var(--tp-shadow-elevated); }
.tp-card__media { aspect-ratio: 4 / 3; background: var(--tp-color-surface-alt); overflow: hidden; position: relative; }
.tp-card__image { width: 100%; height: 100%; object-fit: cover; }
.tp-card__body { padding: var(--tp-space-2); display: flex; flex-direction: column; gap: 0.3rem; }
.tp-card__meta { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tp-color-text-muted); }
.tp-card__title { margin: 0; font-size: 1.05rem; }
.tp-card__excerpt { font-size: 0.9rem; color: var(--tp-color-text-muted); margin: 0; }
.tp-card--compact .tp-card__media { aspect-ratio: 16 / 10; }

.tp-card-row__scroller {
	display: flex; gap: var(--tp-space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem;
}
.tp-card-row__item { flex: 0 0 260px; scroll-snap-align: start; }

/* A short row (few enough cards to fit one line) renders as a plain
   wrapping grid instead of a horizontal scroller — see
   tp_render_card_row()'s $force_grid logic. A 1440px-wide scroller
   holding two 260px cards is the single biggest source of the
   "excessive empty space" this pass was asked to fix. */
.tp-card-row__scroller--grid {
	flex-wrap: wrap;
	overflow-x: visible;
}
.tp-card-row__scroller--grid .tp-card-row__item { flex: 1 1 260px; max-width: 320px; }

/* ---------- Placeholder art ----------
   Shown in place of a featured image whenever one hasn't been uploaded
   yet. A flat grey box reads as "broken"; a deliberate gradient +
   monogram reads as "this place is waiting for its photo" — an
   editorial placeholder, not a bug. The palette is picked
   deterministically per entity (same title → same look every time) by
   tp_placeholder_art_class() in inc/template-tags.php. */
.tp-placeholder-art {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.tp-placeholder-art::before {
	content: "";
	position: absolute; inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 26px);
}
.tp-placeholder-art__mark {
	position: relative; z-index: 1;
	font-family: var(--tp-font-body); font-weight: 700; color: rgba(255,255,255,0.92);
	font-size: clamp(1.5rem, 4vw, 2.75rem);
	line-height: 1;
}
.tp-placeholder-art--1 { background: linear-gradient(135deg, var(--tp-art-1-a), var(--tp-art-1-b)); }
.tp-placeholder-art--2 { background: linear-gradient(135deg, var(--tp-art-2-a), var(--tp-art-2-b)); }
.tp-placeholder-art--3 { background: linear-gradient(135deg, var(--tp-art-3-a), var(--tp-art-3-b)); }
.tp-placeholder-art--4 { background: linear-gradient(135deg, var(--tp-art-4-a), var(--tp-art-4-b)); }
.tp-placeholder-art--5 { background: linear-gradient(135deg, var(--tp-art-5-a), var(--tp-art-5-b)); }

.tp-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--tp-space-2); }

/* ---------- Featured destination (homepage) ---------- */
.tp-featured-card { display: grid; grid-template-columns: 1fr; text-decoration: none; color: inherit; background: var(--tp-color-surface); border-radius: var(--tp-radius-lg); overflow: hidden; box-shadow: var(--tp-shadow-elevated); }
.tp-featured-card__media { position: relative; aspect-ratio: 16/9; background: var(--tp-color-surface-alt); }
.tp-featured-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tp-featured-card__body { padding: var(--tp-space-3); }
@media (min-width: 768px) {
	.tp-featured-card { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
	.tp-featured-card__body { display: flex; flex-direction: column; justify-content: center; }
}

/* A full-bleed tinted section band — breaks the homepage's otherwise
   constant white background so a section (city mosaic, etc.) reads as
   its own visual "beat" rather than blending into the one before it. */
.tp-band { background: var(--tp-color-surface-alt); padding-block: var(--tp-space-5); }

/* ---------- Featured destination: full-width immersive banner ----------
   Priority-4 replacement for the old in-container card: this is meant
   to be the homepage's one big "stop and look" photographic moment —
   full viewport width, a real destination photo, editorial overlay
   text — the "full-width photography" + "immersive imagery" the
   redesign spec asked for, not another bordered card in a column. */
.tp-featured-band { position: relative; overflow: hidden; color: #fff; }
.tp-featured-band__link { display: block; text-decoration: none; color: inherit; }
.tp-featured-band__media { position: relative; inset: 0; min-height: 460px; }
.tp-featured-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-featured-band::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8,8,6,0.88) 0%, rgba(8,8,6,0.35) 48%, rgba(8,8,6,0.05) 75%);
}
.tp-featured-band__content {
	position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
	padding-block: var(--tp-space-4) var(--tp-space-5); max-width: 620px;
}
.tp-featured-band__content .tp-eyebrow { color: rgba(255,255,255,0.85); }
.tp-featured-band__content h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.tp-featured-band__content p { color: rgba(255,255,255,0.9); max-width: 56ch; }

/* ---------- Country spotlight (homepage "Popular Countries") ----------
   One large photographic hero country + a compact scannable list for
   the rest, instead of the same card scroller as every other row. */
.tp-country-spotlight__grid { display: grid; grid-template-columns: 1fr; gap: var(--tp-space-3); }
.tp-country-spotlight__hero {
	position: relative; display: block; min-height: 320px; border-radius: var(--tp-radius-lg);
	overflow: hidden; text-decoration: none; color: #fff;
}
.tp-country-spotlight__hero-media { position: absolute; inset: 0; }
.tp-country-spotlight__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.tp-country-spotlight__hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8,8,6,0.82) 0%, rgba(8,8,6,0.15) 60%, transparent 100%);
}
.tp-country-spotlight__hero-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: var(--tp-space-3); }
.tp-country-spotlight__flag { display: block; font-size: 1.6rem; margin-bottom: 0.3rem; }
.tp-country-spotlight__hero-body h3 { color: #fff; font-size: 1.6rem; margin-bottom: 0.2rem; }
.tp-country-spotlight__meta { color: rgba(255,255,255,0.85); font-size: 0.9rem; }
.tp-country-spotlight__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--tp-color-border); border-radius: var(--tp-radius-lg); overflow: hidden; }
.tp-country-spotlight__list li:not(:last-child) { border-bottom: 1px solid var(--tp-color-border); }
.tp-country-spotlight__list a {
	display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem;
	text-decoration: none; color: inherit; transition: background 0.15s ease;
}
.tp-country-spotlight__list a:hover { background: var(--tp-color-surface-alt); }
.tp-country-spotlight__list-flag { font-size: 1.2rem; line-height: 1; }
.tp-country-spotlight__list-name { flex: 1; font-weight: 600; }
.tp-country-spotlight__list-arrow { color: var(--tp-color-accent); opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; }
.tp-country-spotlight__list a:hover .tp-country-spotlight__list-arrow { opacity: 1; transform: translateX(0); }
@media (min-width: 900px) {
	.tp-country-spotlight__grid { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
	.tp-country-spotlight__hero { min-height: 100%; }
	.tp-country-spotlight__list { justify-content: center; }
}
[dir="rtl"] .tp-country-spotlight__list-arrow { transform: translateX(4px); }
[dir="rtl"] .tp-country-spotlight__list a:hover .tp-country-spotlight__list-arrow { transform: translateX(0); }

/* ---------- City mosaic (homepage "Trending Cities") ----------
   One large tile + four smaller ones filling a 4-column, 2-row grid
   exactly (see tp_render_city_mosaic()) — a deliberate photo moment,
   not a complete index. */
.tp-city-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; grid-auto-flow: dense; gap: var(--tp-space-2); }
.tp-city-mosaic__tile {
	position: relative; display: flex; align-items: flex-end; border-radius: var(--tp-radius-md);
	overflow: hidden; text-decoration: none; color: #fff;
}
.tp-city-mosaic__tile img, .tp-city-mosaic__tile .tp-placeholder-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-city-mosaic__tile::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8,8,6,0.75) 0%, rgba(8,8,6,0.05) 65%);
}
.tp-city-mosaic__tile-body { position: relative; z-index: 1; padding: 0.85rem; display: flex; flex-direction: column; }
.tp-city-mosaic__tile-name { font-weight: 700; font-size: 1rem; }
.tp-city-mosaic__tile-country { font-size: 0.78rem; color: rgba(255,255,255,0.85); }
.tp-city-mosaic__tile--large { grid-column: span 2; grid-row: span 2; }
.tp-city-mosaic__tile--large .tp-city-mosaic__tile-name { font-size: 1.4rem; }
@media (min-width: 700px) {
	.tp-city-mosaic { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Magazine preview (homepage "Travel Guides") ----------
   One hero story + secondary headlines, previewing the full Travel
   Magazine's editorial hierarchy instead of another card scroller. */
.tp-magazine-preview__grid { display: grid; grid-template-columns: 1fr; gap: var(--tp-space-3); }
.tp-magazine-preview__hero { display: block; text-decoration: none; color: inherit; border-radius: var(--tp-radius-lg); overflow: hidden; background: var(--tp-color-surface); box-shadow: var(--tp-shadow-card); }
.tp-magazine-preview__hero-media { position: relative; aspect-ratio: 16/9; background: var(--tp-color-surface-alt); }
.tp-magazine-preview__hero-media img, .tp-magazine-preview__hero-media .tp-placeholder-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-magazine-preview__hero-body { padding: var(--tp-space-3); }
.tp-magazine-preview__hero-body h3 { font-size: 1.5rem; margin: 0.3rem 0; }
.tp-magazine-preview__hero-body p { color: var(--tp-color-text-muted); margin: 0; }
.tp-magazine-preview__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tp-space-2); }
.tp-magazine-preview__list a { display: flex; gap: 0.8rem; text-decoration: none; color: inherit; align-items: center; }
.tp-magazine-preview__list-media { position: relative; flex: 0 0 76px; width: 76px; aspect-ratio: 4/3; border-radius: var(--tp-radius-sm); overflow: hidden; background: var(--tp-color-surface-alt); }
.tp-magazine-preview__list-media img, .tp-magazine-preview__list-media .tp-placeholder-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-magazine-preview__list-media .tp-placeholder-art__mark { font-size: 1.2rem; }
.tp-magazine-preview__list-body { display: flex; flex-direction: column; gap: 0.15rem; }
.tp-magazine-preview__list-cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tp-color-accent); font-weight: 600; }
.tp-magazine-preview__list-title { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
@media (min-width: 900px) {
	.tp-magazine-preview__grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
}

/* ---------- Travel Magazine index masthead ----------
   The full magazine page reuses the homepage preview's hero card
   styling (same visual language) but at full width, with three
   secondary stories as real cards below it instead of a compact list —
   a proper "front page" for the page 1 of the archive, not another
   card grid repeated top to bottom. */
.tp-magazine-hub__masthead { display: flex; flex-direction: column; gap: var(--tp-space-3); margin-bottom: var(--tp-space-5); }
.tp-magazine-hub__hero .tp-magazine-preview__hero-media { aspect-ratio: 21/9; }
.tp-magazine-hub__hero .tp-magazine-preview__hero-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.tp-magazine-hub__secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--tp-space-3); }

/* ---------- Country page: highlights strip ----------
   Sits between the hero and the first text section so a country page
   doesn't go straight from photo to a wall of paragraphs — real photos
   of the country's own top city/destination, not decoration. */
.tp-country-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tp-space-2); margin-block: var(--tp-space-3); }
.tp-country-highlights__tile {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 160px; border-radius: var(--tp-radius-md); overflow: hidden; text-decoration: none; color: #fff;
}
.tp-country-highlights__media { position: absolute; inset: 0; }
.tp-country-highlights__media img, .tp-country-highlights__media .tp-placeholder-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-country-highlights__tile::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8,8,6,0.78) 0%, rgba(8,8,6,0.1) 65%);
}
.tp-country-highlights__label { position: relative; z-index: 1; padding-inline: 1rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.85); }
.tp-country-highlights__name { position: relative; z-index: 1; padding: 0 1rem 0.9rem; font-weight: 700; font-size: 1.15rem; }

/* ---------- Cultural Discovery (homepage) ----------
   An even tile grid rather than a hero+list — the homepage already
   uses that hierarchy for the country spotlight and magazine preview
   sections above and below this one, so this stays visually distinct:
   uniform cards, a colored category tag over the photo instead of a
   plain meta line. */
.tp-cultural-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--tp-space-3); }
.tp-cultural-card {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	background: var(--tp-color-surface); border-radius: var(--tp-radius-md); overflow: hidden;
	box-shadow: var(--tp-shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tp-cultural-card:hover { transform: translateY(-3px); box-shadow: var(--tp-shadow-elevated); }
.tp-cultural-card__media { position: relative; aspect-ratio: 4/3; background: var(--tp-color-surface-alt); }
.tp-cultural-card__media img, .tp-cultural-card__media .tp-placeholder-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-cultural-card__tag {
	position: absolute; inset-block-start: 0.7rem; inset-inline-start: 0.7rem; z-index: 1;
	background: rgba(8,8,6,0.62); color: #fff; font-size: 0.72rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.03em; padding: 0.3rem 0.6rem; border-radius: 999px;
}
.tp-cultural-card__body { padding: var(--tp-space-2); display: flex; flex-direction: column; gap: 0.3rem; }
.tp-cultural-card__body h3 { margin: 0; font-size: 1.05rem; }
.tp-cultural-card__body p { margin: 0; font-size: 0.9rem; color: var(--tp-color-text-muted); }

/* ---------- Continents grid (premium editorial cards) ----------
   Each continent gets the same gradient-art treatment as an image-less
   destination card (see .tp-placeholder-art above) so "Explore by
   Continent" reads as a designed section instead of a row of flat
   grey buttons — real data (name + live country count), just given
   the same intentional visual language as the rest of the homepage. */
.tp-continent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tp-space-3); }
.tp-continent-card {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 180px; padding: var(--tp-space-3); border-radius: var(--tp-radius-lg);
	overflow: hidden; text-decoration: none; color: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tp-continent-card:hover { transform: translateY(-3px); box-shadow: var(--tp-shadow-elevated); }
.tp-continent-card::before {
	content: ""; position: absolute; inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 26px);
}
.tp-continent-card__name { position: relative; z-index: 1; font-family: var(--tp-font-body); font-size: 1.35rem; font-weight: 700; }
.tp-continent-card__count { position: relative; z-index: 1; font-family: var(--tp-font-ui); font-size: 0.8rem; opacity: 0.85; margin-top: 0.2rem; }

/* Photographic variant: a real representative image with a dark
   gradient for text legibility, replacing the flat gradient-only card
   for continents that have one (see tp_continent_image() — reuses an
   existing destination/city photo rather than a decorative stock shot,
   so "Africa" is genuinely the Sahara, not an unrelated pretty picture). */
.tp-continent-card--photo { background: var(--tp-color-accent-dark); }
.tp-continent-card--photo::before { background-image: none; }
.tp-continent-card__image {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.35s ease;
}
.tp-continent-card--photo:hover .tp-continent-card__image { transform: scale(1.06); }
.tp-continent-card--photo::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.25) 55%, rgba(10,10,10,0.05) 100%);
}

/* ---------- Tools hub ----------
   Each of the 7 tools carries its own accent pair (--tp-tool-accent /
   --tp-tool-accent-soft, set inline per card by tp_render_tool_card())
   plus a purpose-drawn line icon, so the grid reads as 7 distinct tools
   rather than one card repeated with different labels. The icon appears
   twice: small and solid in the badge, huge and near-invisible as a
   watermark — the "subtle illustration" the card earns from its own
   function rather than a stock photo. */
.tp-tool-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--tp-space-2); }
.tp-tool-hub-card {
	position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: var(--tp-space-3);
	border: 1px solid var(--tp-color-border); border-radius: var(--tp-radius-md);
	text-decoration: none; color: inherit; background: var(--tp-color-surface-alt, #fff);
	overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tp-tool-hub-card:hover { border-color: var(--tp-tool-accent, var(--tp-color-accent)); transform: translateY(-3px); box-shadow: var(--tp-shadow-card); }
.tp-tool-hub-card__motif {
	position: absolute; right: -0.8rem; bottom: -1rem; width: 5.5rem; height: 5.5rem;
	color: var(--tp-tool-accent, var(--tp-color-accent)); opacity: 0.09; pointer-events: none;
	transform: rotate(-8deg); transition: transform 0.25s ease, opacity 0.25s ease;
}
.tp-tool-hub-card__motif svg { width: 100%; height: 100%; }
.tp-tool-hub-card:hover .tp-tool-hub-card__motif { opacity: 0.16; transform: rotate(-2deg) scale(1.06); }
.tp-tool-hub-card__badge {
	position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
	width: 2.6rem; height: 2.6rem; border-radius: 50%;
	background: var(--tp-tool-accent-soft, var(--tp-color-surface-alt));
	color: var(--tp-tool-accent, var(--tp-color-accent));
	transition: transform 0.18s ease;
}
.tp-tool-hub-card__badge svg { width: 1.4rem; height: 1.4rem; }
.tp-tool-hub-card:hover .tp-tool-hub-card__badge { transform: scale(1.08); }
.tp-tool-hub-card h2, .tp-tool-hub-card h3 { position: relative; z-index: 2; margin: 0; font-size: 1rem; }
.tp-tool-hub-card p { position: relative; z-index: 2; margin: 0; font-size: 0.85rem; color: var(--tp-color-text-muted); }
.tp-tool-hub-card--compact p { display: none; }

/* Photo treatment: a real, tool-specific photo (see tp_render_tool_card()
   and assets/seed-images/travel_tool/) fills the card, with a bottom-up
   gradient scrim so the title/excerpt stay readable over any image, and
   a top accent bar carrying the tool's own colour so the grid still
   reads as one designed set rather than a wall of unrelated stock
   photos. Fixed aspect-ratio (not just min-height) so the image's own
   load timing never shifts surrounding layout. */
.tp-tool-hub-card--photo {
	aspect-ratio: 4 / 3; justify-content: flex-end; color: #fff;
	border-color: transparent; background: #111;
}
.tp-tool-hub-card--photo::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(0deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.45) 45%, rgba(10,10,10,0.05) 75%);
}
.tp-tool-hub-card--photo::after {
	content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; z-index: 3;
	background: var(--tp-tool-accent, var(--tp-color-accent));
}
.tp-tool-hub-card__photo { position: absolute; inset: 0; z-index: 0; }
.tp-tool-hub-card__image {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.35s ease;
}
.tp-tool-hub-card--photo:hover .tp-tool-hub-card__image { transform: scale(1.06); }
.tp-tool-hub-card--photo .tp-tool-hub-card__badge {
	position: absolute; top: var(--tp-space-3); right: var(--tp-space-3);
	background: rgba(255,255,255,0.94); color: var(--tp-tool-accent, var(--tp-color-accent));
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.tp-tool-hub-card--photo p { color: rgba(255,255,255,0.88); }
.tp-tool-hub-card--flat { aspect-ratio: 4 / 3; }
@media (prefers-reduced-motion: reduce) {
	.tp-tool-hub-card, .tp-tool-hub-card__image, .tp-tool-hub-card__badge { transition: none; }
}
.tp-tool-wrapper { margin-block: var(--tp-space-3); }

/* Homepage featured-tool media: the same accent-driven treatment as
   the hub's spotlight card, sized to fill the existing 16:9 media box
   instead of the generic crc32 gradient every other placeholder uses —
   a tool is not an untranslated country, it always has a real icon. */
.tp-tool-hero-art {
	position: relative; width: 100%; height: 100%; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--tp-tool-accent, var(--tp-color-accent)), color-mix(in srgb, var(--tp-tool-accent, var(--tp-color-accent)) 60%, #000));
}
.tp-tool-hero-art__motif {
	position: absolute; right: -10%; bottom: -20%; width: 65%; height: 130%;
	color: #fff; opacity: 0.16; transform: rotate(-10deg);
}
.tp-tool-hero-art__motif svg, .tp-tool-hero-art__icon svg { width: 100%; height: 100%; }
.tp-tool-hero-art__icon { position: relative; z-index: 1; width: 3.4rem; height: 3.4rem; color: #fff; }
/* When the featured tool has a real photo, the icon becomes a small
   corner badge over it instead of the full-box motif treatment above. */
.tp-tool-hero-art__icon--over-photo {
	position: absolute; top: var(--tp-space-2); right: var(--tp-space-2); z-index: 1;
	width: 2.4rem; height: 2.4rem; padding: 0.5rem; box-sizing: content-box;
	background: rgba(255,255,255,0.92); border-radius: 50%;
	color: var(--tp-tool-accent, var(--tp-color-accent));
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ---------- Tools hub: spotlight + categories ---------- */
.tp-tool-spotlight {
	position: relative; overflow: hidden;
	display: flex; align-items: center; gap: var(--tp-space-3); text-decoration: none; color: #fff;
	background: linear-gradient(135deg, var(--tp-tool-accent, var(--tp-color-accent)), color-mix(in srgb, var(--tp-tool-accent, var(--tp-color-accent)) 55%, #000));
	border-radius: var(--tp-radius-xl); padding: var(--tp-space-4); margin-bottom: var(--tp-space-4);
}
.tp-tool-spotlight__motif {
	position: absolute; right: -1.5rem; top: 50%; transform: translateY(-50%) rotate(-8deg);
	width: 9rem; height: 9rem; color: #fff; opacity: 0.14; pointer-events: none;
}
.tp-tool-spotlight__motif svg, .tp-tool-spotlight__icon svg { width: 100%; height: 100%; }
.tp-tool-spotlight__icon { position: relative; z-index: 1; font-size: 3rem; width: 3rem; height: 3rem; flex-shrink: 0; color: #fff; }
.tp-tool-spotlight__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.4rem; }

/* Photo variant: the featured tool's real photo fills the banner behind
   a diagonal-ish dark scrim (kept as the same accent gradient, just
   layered over the image rather than standing alone) so the eyebrow/
   title/excerpt/button keep full contrast regardless of the photo. */
.tp-tool-spotlight--photo { background: #111; }
.tp-tool-spotlight__photo { position: absolute; inset: 0; z-index: 0; }
.tp-tool-spotlight__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-tool-spotlight--photo::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(100deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.6) 45%, color-mix(in srgb, var(--tp-tool-accent, var(--tp-color-accent)) 55%, rgba(0,0,0,0.35)) 100%);
}
.tp-tool-spotlight--photo .tp-tool-spotlight__icon {
	background: rgba(255,255,255,0.16); border-radius: 50%; padding: 0.6rem; width: 3rem; height: 3rem;
	box-sizing: content-box; backdrop-filter: blur(3px);
}
.tp-tool-spotlight .tp-eyebrow { color: rgba(255,255,255,0.85); }
.tp-tool-spotlight__title { font-family: var(--tp-font-body); font-size: 1.5rem; font-weight: 700; }
.tp-tool-spotlight__excerpt { color: rgba(255,255,255,0.9); max-width: 60ch; }
.tp-tool-spotlight .tp-button--primary { background: #fff; color: var(--tp-color-accent-dark); align-self: flex-start; margin-top: 0.3rem; }
.tp-tool-spotlight .tp-button--primary:hover { background: rgba(255,255,255,0.85); }
@media (max-width: 640px) {
	.tp-tool-spotlight { flex-direction: column; align-items: flex-start; text-align: start; }
}
.tp-tool-category:not(:last-child) { border-bottom: 1px solid var(--tp-color-border); padding-bottom: var(--tp-space-4); }

/* ---------- Homepage: Travel Inspiration sub-rows ---------- */
.tp-inspiration-group { display: flex; flex-direction: column; gap: var(--tp-space-3); }
.tp-inspiration-group__row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tp-space-2); margin-bottom: var(--tp-space-2); }
.tp-inspiration-group__row-head h3 { margin: 0; font-size: 1.15rem; }

   Full-bleed (outside .tp-container in front-page.php) so it closes
   the homepage the same way the featured-destination section opens
   the middle of it: a full-width photographic moment, not another
   boxed card — the last "visual call-to-action" beat before the footer. */* ---------- Breadcrumbs ---------- */
.tp-breadcrumbs { margin-block: var(--tp-space-2); font-size: 0.85rem; color: var(--tp-color-text-muted); }
.tp-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.tp-breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 0.4rem; }
.tp-breadcrumbs a { text-decoration: none; color: var(--tp-color-text-muted); }
.tp-breadcrumbs a:hover { color: var(--tp-color-accent); }

/* ---------- Filter bar ---------- */
.tp-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--tp-space-2); }
.tp-filter-bar__label { font-weight: 700; font-size: 0.85rem; }
.tp-filter-bar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.tp-filter-chip { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--tp-color-border); text-decoration: none; font-size: 0.85rem; color: var(--tp-color-text); }
.tp-filter-chip.is-active, .tp-filter-chip:hover { background: var(--tp-color-accent); color: #fff; border-color: var(--tp-color-accent); }

/* ---------- Entity pages (country/city/destination) ---------- */
.tp-entity-hero { position: relative; color: #fff; padding-block: var(--tp-space-4) var(--tp-space-4); min-height: 280px; display: flex; align-items: flex-end; }
.tp-entity-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, var(--tp-color-accent-dark) 0%, var(--tp-color-accent) 100%);
}
.tp-entity-hero__media { position: absolute; inset: 0; z-index: 0; }
.tp-entity-hero__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.35) 100%);
}
.tp-entity-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.tp-entity-hero .tp-container { position: relative; z-index: 1; width: 100%; }
.tp-entity-hero .tp-breadcrumbs, .tp-entity-hero .tp-breadcrumbs a { color: rgba(255,255,255,0.75); }
.tp-entity-hero__title { color: #fff; margin-bottom: 0.5rem; font-size: clamp(2rem, 4vw, 3rem); }
.tp-entity-hero__deck { color: rgba(255,255,255,0.9); font-size: 1.1rem; max-width: 60ch; }
.tp-entity-hero__deck a { color: #fff; text-decoration: underline; }
.tp-entity-hero--large { min-height: 360px; padding-block: var(--tp-space-5) var(--tp-space-4); }
.tp-entity-hero__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }

.tp-entity-layout { display: grid; grid-template-columns: 1fr; gap: var(--tp-space-4); padding-block: var(--tp-space-4); }
@media (min-width: 960px) {
	.tp-entity-layout { grid-template-columns: 2.2fr 1fr; align-items: start; }
	.tp-entity-layout__sidebar { position: sticky; top: 90px; }
}

.tp-quick-facts { background: var(--tp-color-surface-alt); border-radius: var(--tp-radius-lg); padding: var(--tp-space-3); }
.tp-quick-facts h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--tp-space-2); }
.tp-quick-facts dl { margin: 0; }
.tp-quick-facts__row { display: flex; justify-content: space-between; align-items: center; gap: var(--tp-space-2); padding: 0.65rem 0; border-bottom: 1px solid var(--tp-color-border); font-size: 0.9rem; }
.tp-quick-facts__row:last-child { border-bottom: none; }
.tp-quick-facts dt { display: flex; align-items: center; gap: 0.5rem; color: var(--tp-color-text-muted); }
.tp-quick-facts dt .dashicons { font-size: 1.1rem; width: 1.1rem; height: 1.1rem; color: var(--tp-color-accent); flex-shrink: 0; }
.tp-quick-facts dd { margin: 0; font-weight: 600; text-align: end; }
.tp-sidebar-cta { display: flex; flex-direction: column; gap: 0.6rem; margin-top: var(--tp-space-2); }

/* ---------- Local time widget (country/city pages) ----------
   Server-rendered once with a real, IANA-timezone-accurate value (see
   tp_render_single_timezone_row()), then ticked every second by
   assets/js/local-time.js — never a value baked in and left to go
   stale, and correct across a daylight-saving transition since both
   the PHP and JS sides read the offset live rather than storing one. */
.tp-local-time-widget { background: var(--tp-color-accent-dark); color: #fff; border-radius: var(--tp-radius-lg); padding: var(--tp-space-3); margin-bottom: var(--tp-space-3); }
.tp-local-time-widget h2 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--tp-space-2); }
.tp-local-time { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tp-space-2); padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
.tp-local-time:last-of-type { border-bottom: none; }
.tp-local-time__zone { display: flex; flex-direction: column; min-width: 0; }
.tp-local-time__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.65); }
.tp-local-time__place { font-size: 0.85rem; color: rgba(255,255,255,0.9); overflow-wrap: anywhere; }
.tp-local-time__value { font-family: var(--tp-font-body); font-size: 1.6rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.tp-local-time__offset { font-size: 0.72rem; color: rgba(255,255,255,0.75); white-space: nowrap; text-align: end; }
.tp-local-time-widget__note { font-size: 0.78rem; color: rgba(255,255,255,0.7); margin: var(--tp-space-2) 0 0; }

.tp-homepage-worldtime__deck { color: var(--tp-color-text-muted); margin: -0.5rem 0 var(--tp-space-3); font-size: 1.05rem; }
.tp-homepage-worldtime .tp-button { margin-top: var(--tp-space-2); }

/* ---------- World Time: search box ---------- */
.tp-worldtime-search { position: relative; max-width: 420px; margin-bottom: var(--tp-space-3); }
.tp-worldtime-search input {
	width: 100%; padding: 0.85rem 1.1rem; border-radius: var(--tp-radius-md);
	border: 1px solid var(--tp-color-border); font-size: 1rem; font-family: var(--tp-font-body);
	background: var(--tp-color-surface, #fff);
}
.tp-worldtime-search input:focus { outline: none; border-color: var(--tp-color-accent); box-shadow: 0 0 0 3px rgba(31,93,80,0.15); }
.tp-worldtime-search__suggestions {
	position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
	background: var(--tp-color-surface, #fff); border: 1px solid var(--tp-color-border);
	border-radius: var(--tp-radius-md); box-shadow: var(--tp-shadow-elevated); overflow: hidden;
}
.tp-worldtime-search__suggestion {
	display: flex; justify-content: space-between; gap: var(--tp-space-2); width: 100%;
	padding: 0.6rem 1rem; border: none; background: none; cursor: pointer; text-align: start;
	font-family: var(--tp-font-body); font-size: 0.92rem; color: var(--tp-color-text);
}
.tp-worldtime-search__suggestion:hover, .tp-worldtime-search__suggestion:focus { background: var(--tp-color-surface-alt); }
.tp-worldtime-search__suggestion-country { color: var(--tp-color-text-muted); font-size: 0.85rem; }
.tp-worldtime-search__result:not([hidden]) { display: grid; grid-template-columns: minmax(180px, 260px); margin-bottom: var(--tp-space-3); }

/* ---------- World Time: cards ---------- */
.tp-worldtime-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--tp-space-2); margin-bottom: var(--tp-space-1); }
.tp-worldtime-card {
	position: relative; overflow: hidden; border-radius: var(--tp-radius-lg); padding: var(--tp-space-2) var(--tp-space-2) 1rem;
	color: #fff; display: flex; flex-direction: column; gap: 0.6rem; min-height: 150px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tp-worldtime-card:hover { transform: translateY(-2px); box-shadow: var(--tp-shadow-elevated); }
/* Day: warm sky gradient. Night: deep indigo with a faint "stars" texture — a
   deliberately different visual state per card, not just a text change, so
   the section reads as alive rather than a static dashboard. */
.tp-worldtime-card.is-day { background: linear-gradient(160deg, #ff9f6b 0%, #f4c568 45%, #6fb8d9 100%); }
.tp-worldtime-card.is-night {
	background:
		radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.9) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,0.7) 50%, transparent 51%),
		radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.8) 50%, transparent 51%),
		radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.6) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 55% 45%, rgba(255,255,255,0.7) 50%, transparent 51%),
		linear-gradient(160deg, #1a1c3d 0%, #10122b 60%, #060714 100%);
}
.tp-worldtime-card__top { display: flex; align-items: center; justify-content: space-between; }
.tp-worldtime-card__flag { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.tp-worldtime-card__daynight { display: inline-flex; padding: 0.3rem; border-radius: 999px; background: rgba(255,255,255,0.2); }
.tp-worldtime-card.is-day .tp-worldtime-card__daynight { color: #7a4a00; }
.tp-worldtime-card.is-night .tp-worldtime-card__daynight { color: #fff; }
.tp-worldtime-card__place { display: flex; flex-direction: column; text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.tp-worldtime-card__city { font-family: var(--tp-font-body); font-weight: 700; font-size: 1.05rem; }
.tp-worldtime-card__country { font-size: 0.75rem; opacity: 0.85; }
.tp-worldtime-card__time { font-family: var(--tp-font-body); font-size: 1.9rem; font-weight: 700; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.tp-worldtime-card__offset { font-size: 0.72rem; opacity: 0.85; }

.tp-inline-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tp-inline-list a { display: inline-block; padding: 0.4rem 0.9rem; background: var(--tp-color-surface-alt); border-radius: 999px; text-decoration: none; font-size: 0.9rem; }

.tp-map { width: 100%; height: 360px; border-radius: var(--tp-radius-md); z-index: 0; }
.tp-map__attribution { font-size: 0.75rem; color: var(--tp-color-text-muted); }

.tp-accordion__item { border-bottom: 1px solid var(--tp-color-border); padding: 0.75rem 0; }
.tp-accordion__item summary { cursor: pointer; font-weight: 600; }
.tp-accordion__content { padding-top: 0.5rem; }

.tp-table-list { display: flex; flex-direction: column; border: 1px solid var(--tp-color-border); border-radius: var(--tp-radius-md); overflow: hidden; }
.tp-table-list__row { display: flex; justify-content: space-between; align-items: center; gap: var(--tp-space-2); padding: 0.85rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--tp-color-border); }
.tp-table-list__row:last-child { border-bottom: none; }
.tp-table-list__row:hover { background: var(--tp-color-surface-alt); }
.tp-table-list__meta { color: var(--tp-color-text-muted); font-size: 0.9rem; }

/* ---------- Article / single post ---------- */
.tp-page-layout { padding-block: var(--tp-space-3) var(--tp-space-5); }
.tp-page-layout--narrow { max-width: 860px; }
.tp-page-header { margin-bottom: var(--tp-space-3); }
.tp-page-header__deck { color: var(--tp-color-text-muted); font-size: 1.05rem; }
.tp-page-header--with-logo { display: flex; align-items: center; gap: var(--tp-space-2); }
.tp-airline-logo img { max-height: 60px; width: auto; }

.tp-article__categories { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
.tp-article__deck { font-size: 1.15rem; color: var(--tp-color-text-muted); font-family: var(--tp-font-body); }
.tp-article__byline { font-size: 0.85rem; color: var(--tp-color-text-muted); display: flex; gap: 0.5rem; }
.tp-article__hero-image { margin-block: var(--tp-space-3); }
.tp-article__hero-image figcaption { font-size: 0.8rem; color: var(--tp-color-text-muted); margin-top: 0.4rem; }
.tp-article__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--tp-space-3); }

.tp-toc { background: var(--tp-color-surface-alt); border-radius: var(--tp-radius-md); padding: var(--tp-space-2) var(--tp-space-3); margin-bottom: var(--tp-space-3); }
.tp-toc h2 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.tp-toc ol { margin: 0; padding-inline-start: 1.1rem; font-size: 0.9rem; }
.tp-toc .tp-toc__level-3 { padding-inline-start: 1rem; list-style: circle; }

.tp-article__adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tp-space-2); margin-block: var(--tp-space-4); }
.tp-article__adjacent-link { text-decoration: none; padding: var(--tp-space-2); border: 1px solid var(--tp-color-border); border-radius: var(--tp-radius-md); display: block; }
.tp-article__adjacent-link span { display: block; font-size: 0.75rem; color: var(--tp-color-text-muted); text-transform: uppercase; }
.tp-article__adjacent-link--next { text-align: end; }

/* ---------- Forms & misc ---------- */
.tp-empty-state { text-align: center; padding: var(--tp-space-5) 0; }
.tp-empty-state__links { display: flex; gap: var(--tp-space-2); justify-content: center; margin-top: var(--tp-space-2); }

.tp-404__hero { text-align: center; padding-block: var(--tp-space-4); max-width: 620px; margin-inline: auto; }
.tp-404__links { display: flex; gap: var(--tp-space-2); justify-content: center; margin-top: var(--tp-space-4); }

.tp-social-placeholder { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin-top: var(--tp-space-2); }
.tp-social-placeholder__item { display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--tp-color-border); border-radius: 999px; font-size: 0.75rem; color: var(--tp-color-text-muted); }

/* ---------- Footer ---------- */
.tp-site-footer { background: var(--tp-color-surface-alt); border-top: 1px solid var(--tp-color-border); margin-top: var(--tp-space-5); padding-block: var(--tp-space-4); }
.tp-site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--tp-space-4); }
.tp-site-footer__nav-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tp-space-3); }
.tp-footer-brand__desc { color: var(--tp-color-text-muted); font-size: 0.9rem; max-width: 40ch; }
.tp-footer-nav__contact { margin: 0.85rem 0 0; font-size: 0.9rem; }
.tp-footer-nav__contact a { color: var(--tp-color-text-muted); text-decoration: none; overflow-wrap: break-word; }
.tp-footer-nav__contact a:hover, .tp-footer-nav__contact a:focus-visible { color: var(--tp-color-accent); text-decoration: underline; }
.tp-contact-form__direct { margin: 0 0 var(--tp-space-2); }
.tp-contact-form__direct a { font-weight: 600; }
/* Featured tool card and the tool grid below it must never touch/overlap */
.tp-homepage-tools .tp-featured-card + .tp-tool-hub-grid { margin-top: var(--tp-space-3); }
.tp-footer-nav h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.75rem; }
.tp-footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.tp-footer-nav a { text-decoration: none; color: var(--tp-color-text-muted); font-size: 0.9rem; }
.tp-footer-nav a:hover { color: var(--tp-color-accent); }.tp-site-footer__bottom { margin-top: var(--tp-space-4); padding-top: var(--tp-space-2); border-top: 1px solid var(--tp-color-border); font-size: 0.85rem; color: var(--tp-color-text-muted); }

@media (min-width: 640px) {
	.tp-site-footer__nav-columns { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
	.tp-site-footer__grid { grid-template-columns: 1.2fr 2.4fr; align-items: start; }
	.tp-site-footer__nav-columns { grid-template-columns: repeat(5, 1fr); }}

/* ---------- Print & reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.tp-card { transition: none; }
}

/* Key-takeaways box. Sits above the table of contents, because the reader
   who only reads one thing should read this one. Logical properties, so the
   accent rail moves to the right in Arabic without a separate RTL rule. */
.tp-keytakeaways {
	margin: 0 0 var(--tp-space-4);
	padding: 1.1rem 1.3rem 1.2rem;
	background: var(--tp-color-surface-alt);
	border-inline-start: 3px solid var(--tp-color-accent);
	border-radius: 4px;
}
.tp-keytakeaways__title {
	margin: 0 0 0.55rem;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tp-color-accent);
}
.tp-keytakeaways ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.38rem; }
.tp-keytakeaways li { font-size: 0.95rem; }

/* Sources block. Deliberately plain: it is a verification trail, not a
   design element, and it has to read identically on a country, a
   destination and an article. */
.tp-sources__list { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.33rem; }
.tp-sources__list li { font-size: 0.92rem; }
.tp-sources__list a { overflow-wrap: break-word; }
.tp-sources__reviewed { margin-top: 0.75rem; font-size: 0.85rem; color: var(--tp-color-text-muted); }

/* Homepage statistics band. Sits directly under the hero because it
   answers the question the hero raises — what does this site actually
   cover — before the visitor has scrolled anywhere. The figures carry the
   section: display serif, accent colour, four times the size of the
   labels. Hairline rules between tiles rather than boxes, so it reads as
   an editorial strip and not as a table of results. */
.tp-stats {
	background: var(--tp-color-surface-alt);
	border-bottom: 1px solid var(--tp-color-border);
	padding-block: var(--tp-space-4);
}
.tp-stats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.tp-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.75rem;
	text-align: center;
	border-inline-start: 1px solid var(--tp-color-border);
}
.tp-stat:nth-child(4n + 1) { border-inline-start: none; }
.tp-stat__value {
	font-family: var(--tp-font-body);
	font-size: clamp(2.5rem, 6vw, 3.9rem);
	font-weight: 500;
	line-height: 1;
	color: var(--tp-color-accent);
	font-variant-numeric: tabular-nums;
	/* Digits are bidi-neutral: isolating them stops the value being
	   reordered by the Arabic text around it. */
	unicode-bidi: isolate;
}
.tp-stat__label {
	font-family: var(--tp-font-ui);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--tp-color-text-muted);
}
@media (max-width: 780px) {
	.tp-stats { padding-block: var(--tp-space-3); }
	.tp-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 1.35rem; }
	.tp-stat:nth-child(4n + 1) { border-inline-start: 1px solid var(--tp-color-border); }
	.tp-stat:nth-child(2n + 1) { border-inline-start: none; }
	.tp-stat__label { font-size: 0.71rem; letter-spacing: 0.08em; }
}

/* Home hero slideshow.
   Slides stack in the same box and crossfade. The active opacity is the same
   0.55 the single hero image always used, so the white heading keeps exactly
   the contrast it had. Mid-crossfade two slides are each partly transparent
   over the dark accent behind them, which composites darker than one slide at
   0.55 -- the text never gets less readable during a transition than it is at
   rest. Sizing is inherited from .tp-hero__media img (object-fit: cover), so
   the same rules hold at every viewport width. */
.tp-hero__slides { position: absolute; inset: 0; }
.tp-hero__slides .tp-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1200ms ease-in-out;
}
.tp-hero__slides .tp-hero__slide.is-active { opacity: 0.55; }

@media ( prefers-reduced-motion: reduce ) {
	/* The script does not rotate at all in this mode; killing the transition
	   too means nothing animates even if a slide class is toggled elsewhere. */
	.tp-hero__slides .tp-hero__slide { transition: none; }
}

/* Hero legibility scrim.
   With one fixed hero image the 0.55 slide opacity was enough by inspection.
   With five rotating images it is not: measured against the h1 box, the worst
   pixel of the brightest slides (snow, reef) fell to 2.46:1 against white,
   below the 3:1 large-text minimum. This darkens only the side the text sits
   on and fades out well before the far edge, so the photograph still reads as
   a photograph. Measured worst case after this: 3.87:1 on the h1 (large text, 3:1
   minimum) and 4.80:1 on the paragraph (normal text, 4.5:1 minimum).
   .tp-hero__content is position: relative, so it paints above this layer. */
.tp-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Literal rgba rather than the token: a gradient stop needs the alpha, and
	   a color-mix() fallback would fail silently to no scrim at all. Keep this
	   in sync with --tp-color-accent-dark. */
	background: linear-gradient( to right, rgba( 20, 65, 58, 0.70 ) 0%, rgba( 20, 65, 58, 0.55 ) 55%, rgba( 20, 65, 58, 0.10 ) 90%, rgba( 20, 65, 58, 0 ) 100% );
}

@media ( max-width: 780px ) {
	/* Hero scrim on narrow screens.
	   The horizontal fade works on desktop because the text column occupies
	   roughly the left two thirds. On a phone the heading spans about 91% of
	   the hero, so its right-hand end lands where the gradient has faded out --
	   measured 2.75:1 there, worse than having no carousel at all. A flat wash
	   is the honest answer at this width: measured 5.12:1 on the h1 and 5.04:1
	   on the paragraph across all five slides. Uniform, so RTL needs no
	   mirrored override here. */
	.tp-hero__media::after {
		background: rgba( 20, 65, 58, 0.50 );
	}
}

/* ---------- Card row geometry ----------
   Scoped to .tp-card-row so no other card context is touched.

   Three separate things made these cards ragged (measured 271px to 365px in
   the same row): the card did not fill the height its flex item already
   stretched to, the title could take one line or two, and the excerpt could
   take two lines, three lines, or be missing entirely.

   The body is therefore a grid with three explicitly sized rows. A row
   declared in grid-template-rows exists whether or not an element occupies
   it, so a card with no excerpt reserves exactly the same space as one with
   an excerpt -- no placeholder text invented. minmax(..., auto) means a
   longer string can still grow rather than being cut off mid-word, and the
   line clamps stop that growth at the reserved height.

   Row heights track the theme scale: title is 1.05rem at 1.2 line-height
   (two lines), excerpt 0.9rem at 1.6 (three lines), which is what the
   longest current excerpt actually uses. Images were already consistent --
   .tp-card__media pins 4/3 and the image covers it -- so they are untouched.
   Everything here is logical or direction-neutral, so RTL needs no mirror. */
.tp-card-row .tp-card-row__item {
	display: flex;
}

.tp-card-row .tp-card-row__item > .tp-card {
	width: 100%;
	height: 100%;
}

.tp-card-row .tp-card__body {
	flex: 1 1 auto;
	display: grid;
	grid-template-rows: auto minmax( calc( 1.05rem * 1.2 * 2 ), auto ) minmax( calc( 0.9rem * 1.6 * 3 ), auto );
	align-content: start;
}

.tp-card-row .tp-card__title,
.tp-card-row .tp-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tp-card-row .tp-card__title {
	-webkit-line-clamp: 2;
	line-height: 1.2;
}

.tp-card-row .tp-card__excerpt {
	-webkit-line-clamp: 3;
	line-height: 1.6;
}

/* ---------- Home hero: trip planner ---------- */
/* Laid out with flex-wrap rather than a fixed grid so the fields and the
   button reflow on their own at any width: there is no column count to keep
   in sync with the number of selects, and a taxonomy with no terms (whose
   select is not printed at all) simply leaves one fewer item in the row.
   Everything here is logical properties and flex order, so the Arabic RTL
   build mirrors without a single direction-specific rule. */
.tp-hero__planner {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.75rem;
	margin-block: 1.25rem 1rem;
	padding: 0.85rem;
	background: rgba( 255, 255, 255, 0.12 );
	border: 1px solid rgba( 255, 255, 255, 0.24 );
	border-radius: 12px;
}
.tp-hero__planner-field {
	display: flex;
	flex: 1 1 9rem;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}
.tp-hero__planner-field--wide { flex: 2 1 15rem; }
.tp-hero__planner label {
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.tp-hero__planner input[type="search"],
.tp-hero__planner select {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.7rem;
	padding: 0.55rem 0.7rem;
	color: #14413A;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.3;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.14 );
	border-radius: 8px;
}
/* The selects keep their native appearance deliberately: the browser then
   draws the arrow on the correct side under RTL, which a background-image
   pinned to one side would not. */
.tp-hero__planner-submit {
	flex: 0 0 auto;
	height: 2.7rem;
	min-height: 2.7rem;
	padding-block: 0;
	line-height: 1;
	white-space: nowrap;
}
.tp-hero__planner :is( input, select, button ):focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* ---------- Home hero: compact block ---------- */
/* The hero is a flex container so its single in-flow child is centred against
   a min-height, rather than positioned by symmetric padding. Padding cannot
   centre a block whose own height changes with the heading's line count, and
   that mismatch is what clipped the first line of the title at some widths.
   The media layer is absolutely positioned, so it takes no part in this. */
.tp-hero {
	display: flex;
	align-items: center;
	min-height: clamp( 18rem, 38vh, 22rem );
	padding-block: var( --tp-space-3 );
}
/* Wide enough that the four planner controls sit on one row at every desktop
   and tablet width, down to the 780px stacking breakpoint. */
.tp-hero__content {
	width: 100%;
	max-width: 880px;
}
.tp-hero__content h1 {
	margin-block: 0 0.6rem;
	font-size: clamp( 1.8rem, 4.2vw, 2.5rem );
}
.tp-hero__content .tp-hero__quick-links { margin-block-start: 0; }

@media ( max-width: 780px ) {
	.tp-hero {
		min-height: 0;
		padding-block: var( --tp-space-3 );
	}
	.tp-hero__planner {
		gap: 0.6rem;
		padding: 0.75rem;
	}
	.tp-hero__planner-field,
	.tp-hero__planner-field--wide { flex: 1 1 100%; }
	.tp-hero__planner-submit { width: 100%; }
}

/* ---------- Home: statistics band, compact ---------- */
/* Type scale and spacing only. The counter reads its target from the
   data-tp-count attribute and writes the running figure into the same
   element, so the animation is untouched by anything here -- and the
   numbers themselves come from the content, not from CSS. The band is
   centred text in a symmetric grid, so the Arabic build mirrors without a
   direction-specific rule. */
.tp-stats { padding-block: var( --tp-space-3 ); }
.tp-stats .tp-stat {
	gap: 0.2rem;
	padding: 0.2rem 0.5rem;
}
.tp-stats .tp-stat__value {
	font-size: clamp( 1.55rem, 2.4vw, 2rem );
	line-height: 1.15;
}
.tp-stats .tp-stat__label {
	font-size: 0.7rem;
	line-height: 1.3;
}

@media ( max-width: 780px ) {
	.tp-stats { padding-block: var( --tp-space-2 ); }
	.tp-stats .tp-stat__value { font-size: clamp( 1.4rem, 5.5vw, 1.8rem ); }
}


/* ==========================================================================
   FANOUSS - Mobile-first refit (appended 2026-09-18)
   Self-contained block. Deleting everything below this banner restores the
   previous design exactly.
   ========================================================================== */

@media ( max-width: 1179.98px ) {

	.tp-mobile-nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 10px;
		border-radius: 10px;
	}

	.tp-nav-overlay {
		position: fixed;
		inset: 0;
		background: rgba( 15, 23, 42, 0.55 );
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.28s ease;
		z-index: 1000;
	}

	body.tp-nav-open .tp-nav-overlay {
		opacity: 1;
		pointer-events: auto;
	}

	body.tp-nav-lock {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		overflow: hidden;
	}

	.tp-mobile-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min( 86vw, 360px );
		max-width: 360px;
		margin: 0;
		padding: 0 0 40px;
		background: #ffffff;
		box-shadow: -12px 0 32px rgba( 15, 23, 42, 0.18 );
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		transform: translateX( 103% );
		transition: transform 0.28s cubic-bezier( 0.4, 0, 0.2, 1 );
		z-index: 1001;
	}

	body.tp-nav-open .tp-mobile-nav { transform: translateX( 0 ); }

	.tp-nav-panel-head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 8px 10px 16px;
		background: #ffffff;
		border-bottom: 1px solid rgba( 15, 23, 42, 0.10 );
	}

	.tp-nav-panel-title {
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		opacity: 0.6;
	}

	.tp-nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: inherit;
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	.tp-nav-close:hover,
	.tp-nav-close:focus-visible { background: rgba( 15, 23, 42, 0.07 ); }

	.tp-mobile-nav__list { padding: 6px 0 0; }

	.tp-mobile-nav__list > li + li { border-top: 1px solid rgba( 15, 23, 42, 0.07 ); }

	.tp-mobile-nav__list a,
	.tp-mobile-acc__summary {
		min-height: 48px;
		padding: 12px 16px;
		font-size: 1rem;
		line-height: 1.35;
	}

	.tp-mobile-nav__list a { display: flex; align-items: center; }

	.tp-mobile-acc__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 600;
	}

	.tp-mobile-acc__panel a {
		min-height: 46px;
		padding-left: 30px;
		font-size: 0.9375rem;
	}

	.tp-mobile-nav a:active { background: rgba( 15, 23, 42, 0.05 ); }

	body.admin-bar .tp-mobile-nav { top: 32px; }
}

@media ( max-width: 782px ) {
	body.admin-bar .tp-mobile-nav { top: 46px; }
}

@media ( max-width: 1179.98px ) {
	[dir="rtl"] .tp-mobile-nav {
		right: auto;
		left: 0;
		box-shadow: 12px 0 32px rgba( 15, 23, 42, 0.18 );
		transform: translateX( -103% );
	}
	[dir="rtl"] body.tp-nav-open .tp-mobile-nav { transform: translateX( 0 ); }
	[dir="rtl"] .tp-nav-panel-head { padding: 10px 16px 10px 8px; }
	[dir="rtl"] .tp-mobile-acc__panel a { padding-left: 16px; padding-right: 30px; }
}

@media ( max-width: 767.98px ) {

	.tp-site-header__row { padding-top: 8px; padding-bottom: 8px; }
	.tp-site-header__brand .custom-logo { height: 40px; width: auto; }

	.tp-hero { padding-top: 14px; padding-bottom: 18px; }

	footer li > a,
	header li > a,
	.tp-hero__quick-links a,
	.tp-see-all {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.tp-card__excerpt,
	.tp-section p,
	.tp-entry-content p,
	.tp-entry-content li { font-size: 1rem; line-height: 1.65; }

	input, select, textarea, button { font-size: 16px; }

	input:not( [type="checkbox"] ):not( [type="radio"] ):not( [type="hidden"] ),
	select,
	.tp-button,
	button[type="submit"] { min-height: 48px; }

	.tp-card-row__scroller {
		scroll-snap-type: x mandatory;
		scroll-padding-left: 16px;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
	}

	.tp-card-row__item { scroll-snap-align: start; }

	img, video, iframe { max-width: 100%; height: auto; }

	.tp-entry-content table { display: block; overflow-x: auto; max-width: 100%; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tp-mobile-nav,
	.tp-nav-overlay { transition: none; }
}


/* --- Mobile-first refit, part 2: tablets, form controls, hero density --- */

@media ( max-width: 1023.98px ) {

	footer li > a,
	header li > a,
	.tp-hero__quick-links a,
	.tp-see-all {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.tp-card__excerpt,
	.tp-section p,
	.tp-entry-content p,
	.tp-entry-content li { font-size: 1rem; line-height: 1.65; }

	.tp-card-row__scroller {
		scroll-snap-type: x mandatory;
		scroll-padding-left: 16px;
		-webkit-overflow-scrolling: touch;
	}

	.tp-card-row__item { scroll-snap-align: start; }
}

@media ( max-width: 767.98px ) {

	/* 16px on every real control keeps iOS from zooming the page on focus. */
	.tp-hero__planner input,
	.tp-hero__planner select,
	.tp-hero__planner button,
	form input:not( [type="checkbox"] ):not( [type="radio"] ):not( [type="hidden"] ),
	form select,
	form textarea,
	form button { font-size: 16px; }

	.tp-hero__planner input,
	.tp-hero__planner select,
	.tp-hero__planner button { min-height: 44px; }

	form input:not( [type="checkbox"] ):not( [type="radio"] ):not( [type="hidden"] ),
	form select,
	form button[type="submit"] { min-height: 46px; }

	.tp-hero__planner label,
	.tp-hero__planner-field label { font-size: 0.8125rem; }

	/* Hero density: the planner stays, the empty space around it does not. */
	.tp-hero { padding-top: 10px; padding-bottom: 14px; }
	.tp-hero__content h1 { margin-bottom: 6px; }
	.tp-hero__planner { margin-top: 12px; margin-bottom: 10px; gap: 8px; }
	.tp-hero__planner-field { gap: 4px; }
}


/* --- Mobile-first refit, part 3: whole burger range + small-text legibility --- */

@media ( max-width: 1179.98px ) {

	footer li > a,
	header li > a,
	.tp-hero__quick-links a,
	.tp-see-all {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.tp-card-row__scroller {
		scroll-snap-type: x mandatory;
		scroll-padding-left: 16px;
		-webkit-overflow-scrolling: touch;
	}

	.tp-card-row__item { scroll-snap-align: start; }
}

@media ( max-width: 767.98px ) {

	.tp-see-all { font-size: 0.9375rem; }

	footer a,
	footer p,
	footer li { font-size: 0.9375rem; line-height: 1.6; }

	.tp-eyebrow { font-size: 0.8125rem; }

	.tp-cultural-card__tag { font-size: 0.8125rem; }
}


/* --- Mobile-first refit, part 4: in-content controls --- */

@media ( max-width: 1179.98px ) {

	.tp-main summary,
	.tp-entry-content summary {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.tp-badge,
	.tp-tool__swap,
	footer p > a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}


/* --- Mobile-first refit, part 5: submenu hierarchy --- */

@media ( max-width: 1179.98px ) {

	.tp-mobile-nav .tp-mobile-acc__panel li a {
		min-height: 46px;
		padding: 10px 16px 10px 32px;
		display: flex;
		align-items: center;
		font-size: 0.9375rem;
	}

	[dir="rtl"] .tp-mobile-nav .tp-mobile-acc__panel li a {
		padding: 10px 32px 10px 16px;
	}
}


/* ==========================================================================
   FANOUSS - Visual refit, part 6 (2026-09-18)
   Mobile-first composition: header, hero, search, rhythm, grids, cards.
   Self-contained. Deleting everything below this banner restores part 5.
   ========================================================================== */

/* --- Header: compact and balanced --- */
@media ( max-width: 1179.98px ) {

	.tp-site-header__row {
		padding-top: 8px;
		padding-bottom: 8px;
		gap: 12px;
	}

	.tp-site-header .custom-logo-link .custom-logo {
		height: 44px;
		width: auto;
	}

	.tp-site-header header li > a,
	.tp-site-header li > a {
		min-height: 40px;
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media ( max-width: 479.98px ) {

	.tp-site-header .custom-logo-link .custom-logo { height: 38px; }

	.tp-site-header li > a {
		min-height: 38px;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 0.8125rem;
	}
}

/* --- Hero: photography first, form second --- */
@media ( max-width: 767.98px ) {

	.tp-hero {
		padding-top: 8px;
		padding-bottom: 16px;
	}

	.tp-hero__content h1 {
		font-size: clamp( 1.55rem, 6.6vw, 2rem );
		line-height: 1.16;
		letter-spacing: -0.012em;
		margin-bottom: 10px;
	}

	.tp-hero__planner {
		margin-top: 14px;
		margin-bottom: 12px;
		padding: 14px;
		gap: 10px;
		border-radius: 16px;
		background: rgba( 9, 38, 33, 0.58 );
		border: 1px solid rgba( 255, 255, 255, 0.14 );
		-webkit-backdrop-filter: blur( 10px );
		backdrop-filter: blur( 10px );
	}

	.tp-hero__planner-field { gap: 5px; }

	.tp-hero__planner > .tp-hero__planner-field { width: calc( 50% - 5px ); }

	.tp-hero__planner > .tp-hero__planner-field--wide { width: 100%; }

	.tp-hero__planner label {
		font-size: 0.75rem;
		letter-spacing: 0.09em;
		opacity: 0.85;
	}

	.tp-hero__planner input,
	.tp-hero__planner select {
		min-height: 44px;
		padding: 10px 12px;
		border-radius: 10px;
	}

	.tp-hero__planner-submit {
		width: 100%;
		min-height: 46px;
		border-radius: 10px;
	}

	/* Quick links become a single compact chip row instead of a wrapped block. */
	.tp-hero__quick-links {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		padding-bottom: 2px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.tp-hero__quick-links::-webkit-scrollbar { display: none; }

	.tp-hero__quick-links a {
		flex: 0 0 auto;
		min-height: 38px;
		padding: 8px 14px;
		border-radius: 999px;
		background: rgba( 255, 255, 255, 0.14 );
		border: 1px solid rgba( 255, 255, 255, 0.24 );
		text-decoration: none;
		font-size: 0.875rem;
		white-space: nowrap;
	}
}

/* --- Vertical rhythm: breathe, do not sprawl --- */
@media ( max-width: 767.98px ) {

	.tp-main .tp-section,
	.tp-section {
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.tp-main .tp-section.tp-band,
	.tp-section.tp-band {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.tp-stats { padding-top: 14px; padding-bottom: 14px; }
}

@media ( min-width: 768px ) and ( max-width: 1023.98px ) {

	.tp-main .tp-section,
	.tp-section { margin-top: 48px; margin-bottom: 48px; }
}

/* --- Section heads: title first, link under it --- */
@media ( max-width: 767.98px ) {

	.tp-section__head,
	.tp-inspiration-group__row-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.tp-section__head .tp-see-all,
	.tp-inspiration-group__row-head .tp-see-all { align-self: flex-start; }

	.tp-section h2,
	.tp-section__head h2 {
		font-size: clamp( 1.3rem, 5.4vw, 1.6rem );
		line-height: 1.22;
		letter-spacing: -0.01em;
	}

	.tp-eyebrow {
		font-size: 0.75rem;
		letter-spacing: 0.12em;
	}
}

/* --- Grids designed for the phone, not inherited from the desktop --- */
@media ( max-width: 767.98px ) {

	.tp-continent-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 12px;
	}

	.tp-continent-card { border-radius: 14px; }

	.tp-continent-card--photo { aspect-ratio: 4 / 3; }
}

/* --- Carousels: edge to edge, no raw scrollbar --- */
@media ( max-width: 1179.98px ) {

	.tp-card-row__scroller {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.tp-card-row__scroller::-webkit-scrollbar { display: none; }
}

@media ( max-width: 767.98px ) {

	.tp-card-row__scroller {
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 16px;
		padding-right: 16px;
		scroll-padding-left: 16px;
	}
}

/* --- Cards: one visual language --- */
@media ( max-width: 1179.98px ) {

	.tp-card { border-radius: 14px; }

	.tp-card__body { padding: 14px; gap: 6px; }

	.tp-button {
		border-radius: 10px;
		padding: 11px 18px;
		font-size: 0.9375rem;
	}
}

/* --- Forms --- */
@media ( max-width: 767.98px ) {

	form input:not( [type="checkbox"] ):not( [type="radio"] ):not( [type="hidden"] ),
	form select,
	form textarea { border-radius: 10px; }

	.tp-site-footer__grid { gap: 28px; }
}


/* --- Visual refit, part 7: overrides that need to beat the base flex/width --- */

@media ( max-width: 767.98px ) {

	.tp-hero__planner > .tp-hero__planner-field {
		flex: 0 0 calc( 50% - 5px );
		width: calc( 50% - 5px );
	}

	.tp-hero__planner > .tp-hero__planner-field--wide {
		flex: 0 0 100%;
		width: 100%;
	}

	.tp-continent-grid .tp-continent-card {
		width: 100%;
		min-width: 0;
		aspect-ratio: 1 / 1;
	}
}


/* --- Visual refit, part 8: hero breathing room and chip-row bleed --- */

@media ( max-width: 767.98px ) {

	.tp-hero { padding-top: 18px; }

	.tp-hero__quick-links {
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	[dir="rtl"] .tp-hero__quick-links { scroll-padding-right: 16px; }
}


/* --- Visual refit, part 9: let the hero photograph read on phones/tablets --- */

@media ( max-width: 1023.98px ) {

	.tp-hero__slide.is-active { opacity: 0.85; }

	.tp-hero__media::after {
		background: linear-gradient(
			180deg,
			rgba( 12, 42, 37, 0.78 ) 0%,
			rgba( 12, 42, 37, 0.44 ) 42%,
			rgba( 12, 42, 37, 0.66 ) 100%
		);
	}
}


/* --- Visual refit, part 10: hero photograph (supersedes part 9) --- */

@media ( max-width: 1023.98px ) {

	.tp-hero .tp-hero__media .tp-hero__slide.is-active { opacity: 1; }

	.tp-hero .tp-hero__media::after {
		background: linear-gradient(
			180deg,
			rgba( 10, 38, 33, 0.70 ) 0%,
			rgba( 10, 38, 33, 0.38 ) 38%,
			rgba( 10, 38, 33, 0.62 ) 100%
		);
	}

	.tp-hero__content h1 { text-shadow: 0 1px 12px rgba( 0, 0, 0, 0.35 ); }
}


/* --- Visual refit, part 11: entity layout must not exceed the phone width ---
   The single-column entity grid was sized by its widest child (425px), so
   country / city / destination content was clipped below ~440px of container. */

@media ( max-width: 1023.98px ) {

	.tp-entity-layout { grid-template-columns: minmax( 0, 1fr ); }

	.tp-entity-layout > * { min-width: 0; }
}


/* --- Visual refit, part 12: badges are labels, not touch targets --- */

@media ( max-width: 1179.98px ) {

	span.tp-badge,
	span.tp-cultural-card__tag {
		min-height: 0;
		display: inline-flex;
		align-items: center;
	}

	a.tp-badge,
	button.tp-badge { min-height: 44px; }
}

@media ( max-width: 767.98px ) {

	.tp-tool__meta {
		font-size: 0.875rem;
		line-height: 1.6;
	}

	.tp-tool__meta .tp-badge {
		display: flex;
		width: -moz-max-content;
		width: max-content;
		max-width: 100%;
		margin-bottom: 8px;
	}
}


/* --- Visual refit, part 13: legibility floor for micro-labels on phones --- */

@media ( max-width: 767.98px ) {

	.tp-eyebrow,
	.tp-stat__label,
	.tp-continent-card__count,
	.tp-worldtime-card__country,
	.tp-worldtime-card__offset,
	.tp-magazine-preview__list-cat,
	.tp-city-mosaic__tile-country,
	.tp-country-highlights__label,
	.tp-local-time__place,
	.tp-local-time__offset,
	.tp-cultural-card__tag,
	.tp-card__meta,
	.tp-badge { font-size: 0.8125rem; }

	.tp-tool__meta,
	.tp-tool__note,
	p.tp-tool__meta { font-size: 0.875rem; line-height: 1.6; }
}


/* --- Visual refit, part 14 --- */

@media ( max-width: 767.98px ) {

	.tp-stats .tp-stat__label { font-size: 0.8125rem; letter-spacing: 0.1em; }

	.tp-stats .tp-stat__value { line-height: 1.1; }
}


/* --- Visual refit, part 15: language pills inside the mobile panel --- */

@media ( max-width: 1179.98px ) {

	.tp-mobile-nav li > a {
		min-height: 44px;
		min-width: 44px;
	}
}


/* --- Visual refit, part 16: long source URLs must wrap on narrow screens --- */

@media ( max-width: 1023.98px ) {

	.tp-prose a,
	.tp-entity-layout__main a,
	.tp-entry-content a {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}


/* --- Visual refit, part 17: a .tp-button with no modifier had no visual style
   (transparent background AND transparent border). It now reads as primary. --- */

.tp-button:not( [class*="tp-button--" ] ) {
	background: #1f5d50;
	border-color: #1f5d50;
	color: #ffffff;
}

.tp-button:not( [class*="tp-button--" ] ):hover,
.tp-button:not( [class*="tp-button--" ] ):focus-visible {
	background: #17473d;
	border-color: #17473d;
}


/* ==========================================================================
   FANOUSS - Navigation and mobile search, part 18 (2026-09-18)
   ========================================================================== */

/* --- Mobile Trip Planner: Destination + Search only.
       Travel Style and Region stay in the DOM (they still submit their
       default "Any" value) but are not shown on phones. --- */
@media ( max-width: 767.98px ) {

	.tp-hero__planner > .tp-hero__planner-field:not( .tp-hero__planner-field--wide ) {
		display: none;
	}

	.tp-hero__planner {
		flex-wrap: nowrap;
		align-items: flex-end;
		gap: 8px;
		padding: 12px;
	}

	.tp-hero__planner > .tp-hero__planner-field--wide {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.tp-hero__planner-submit {
		flex: 0 0 auto;
		width: auto;
		min-width: 96px;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* --- Mobile menu: the category name is a link, the chevron is the toggle --- */
@media ( max-width: 1179.98px ) {

	.tp-mobile-acc__summary {
		padding: 0;
		gap: 0;
	}

	.tp-mobile-acc__summary::-webkit-details-marker { display: none; }

	.tp-mobile-nav .tp-mobile-acc__parent {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 12px 8px 12px 16px;
		font-size: 1rem;
		font-weight: 600;
		text-decoration: none;
		color: inherit;
	}

	.tp-mobile-acc__toggle {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		min-height: 48px;
		padding: 0;
		border: 0;
		border-left: 1px solid rgba( 15, 23, 42, 0.07 );
		background: transparent;
		color: inherit;
		cursor: pointer;
	}

	.tp-mobile-acc__toggle:hover,
	.tp-mobile-acc__toggle:focus-visible { background: rgba( 15, 23, 42, 0.05 ); }

	[dir="rtl"] .tp-mobile-nav .tp-mobile-acc__parent { padding: 12px 16px 12px 8px; }

	[dir="rtl"] .tp-mobile-acc__toggle {
		border-left: 0;
		border-right: 1px solid rgba( 15, 23, 42, 0.07 );
	}
}

/* --- Desktop dropdown: no wrapped labels in the Travel Tools panel --- */
@media ( min-width: 1180px ) {

	.tp-mega-panel--tools { width: 540px; }

	.tp-menu-item__link:focus-visible,
	.tp-mega-panel a:focus-visible {
		outline: 2px solid #1f5d50;
		outline-offset: 2px;
		border-radius: 4px;
	}
}


/* --- Part 19: one-line mobile search. The visible label is redundant next to
       the placeholder on a single-field row; it stays for screen readers. --- */

@media ( max-width: 767.98px ) {

	.tp-hero__planner > .tp-hero__planner-field--wide > label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		clip-path: inset( 50% );
		white-space: nowrap;
		border: 0;
	}

	.tp-hero__planner { align-items: center; }

	.tp-hero__planner-submit {
		min-width: 88px;
		font-size: 0.9375rem;
	}
}