/* Travel Legacy — what theme.json can't express.
   Direction after the owner's "it looks AI made": fewer ornaments, real
   content doing the work. Photos carry the colour; the page stays plain paper
   and logo navy. The kasbah crenellation appears once, on the footer. */

:root {
	--tl-crenel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cpath d='M0 24H48V20H37V13H33V7H29V1H19V7H15V13H11V20H0Z'/%3E%3C/svg%3E");
	--tl-rule: var(--wp--preset--color--rule);
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; }

/* Kasbah wall edge — footer only. */
.is-style-crenel-top { position: relative; }
.is-style-crenel-top::before {
	content: ""; position: absolute; left: 0; right: 0; top: -21px; height: 22px;
	background-color: inherit;
	-webkit-mask: var(--tl-crenel) repeat-x 0 0 / 44px 22px; mask: var(--tl-crenel) repeat-x 0 0 / 44px 22px;
	pointer-events: none;
}

/* Small factual label (not a decorative eyebrow): used sparingly. */
.tl-label { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--s); font-weight: 600; color: var(--wp--preset--color--muted); }

/* ── Header ────────────────────────────────────────────────────────── */
.tl-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--tl-rule); }
.admin-bar .tl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tl-header { top: 0; position: relative; } }
.tl-brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--wp--preset--color--navy); }
.tl-brand img { width: 50px; height: auto; display: block; }
.tl-brand-name { font-family: var(--wp--preset--font-family--heading); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.tl-header .wp-block-navigation a { text-decoration: none; }
.tl-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tl-header .wp-block-navigation__submenu-container { border: 1px solid var(--tl-rule) !important; padding: 0.3rem 0; min-width: 220px !important; }
.tl-header .wp-block-button__link { background: var(--wp--preset--color--green); padding: 0.6rem 1rem; }
.tl-header .wp-block-button__link:hover { background: #17603c; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.tl-btn-wa .wp-block-button__link { background: var(--wp--preset--color--green); }
.tl-btn-wa .wp-block-button__link:hover { background: #17603c; }
.wp-block-button.is-style-outline > .wp-block-button__link { border-width: 1.5px; background: transparent; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.tl-hero { min-height: min(78vh, 680px); }
.tl-hero .wp-block-cover__inner-container { width: 100% !important; max-width: 1200px; margin-inline: auto !important; }
.tl-hero .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: 0 !important; }
.tl-hero h1 { color: #fff; max-width: 17ch; }
.tl-hero p { color: #fff; max-width: 44ch; }
.tl-hero .tl-facts { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--s); color: rgba(255, 255, 255, 0.88); max-width: none; }
.tl-photo-credit { position: absolute; right: 1rem; bottom: 0.75rem; z-index: 2; font-family: var(--wp--preset--font-family--heading); font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); }

/* ── Featured real tour ────────────────────────────────────────────── */
.tl-tour { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--tl-rule); background: var(--wp--preset--color--paper); }
.tl-tour figure { margin: 0; min-height: 280px; }
.tl-tour img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-tour-body { padding: clamp(1.25rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 0.8rem; }
.tl-tour-body h3 { margin: 0; font-size: var(--wp--preset--font-size--xl); }
.tl-tour dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.2rem; margin: 0.4rem 0 0; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--s); }
.tl-tour dt { color: var(--wp--preset--color--muted); }
.tl-tour dd { margin: 0; color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }
.tl-tour .tl-source { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); margin-top: auto; }
@media (max-width: 760px) { .tl-tour { grid-template-columns: 1fr; } .tl-tour figure { aspect-ratio: 16 / 10; min-height: 0; } }

/* ── What we do: a plain list, not a card grid ─────────────────────── */
.tl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tl-rule); }
.tl-list li { border-bottom: 1px solid var(--tl-rule); }
.tl-list a { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr auto; gap: 0.3rem 1.5rem; align-items: baseline; padding: 1.1rem 0; text-decoration: none; color: inherit; }
.tl-list .tl-list-name { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.2rem; color: var(--wp--preset--color--navy); }
.tl-list .tl-list-note { color: var(--wp--preset--color--muted); }
.tl-list .tl-list-go { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--navy); }
.tl-list a:hover .tl-list-name { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) { .tl-list a { grid-template-columns: 1fr auto; } .tl-list .tl-list-note { grid-column: 1 / -1; grid-row: 2; } }

/* ── Real reviews ──────────────────────────────────────────────────── */
.tl-reviews { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tl-review { margin: 0; }
.tl-review blockquote { margin: 0; font-size: var(--wp--preset--font-size--l); line-height: 1.5; }
.tl-review figcaption { margin-top: 0.8rem; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--muted); }
.tl-review figcaption b { color: var(--wp--preset--color--ink); font-weight: 600; }
.tl-stars { color: var(--wp--preset--color--gold); letter-spacing: 0.1em; }

/* ── Photo diary: captions under the photos, like prints in an album ─ */
.tl-album { display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(12, 1fr); }
.tl-album figure { margin: 0; }
.tl-album img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.tl-album figcaption { margin-top: 0.45rem; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.tl-album .w8 { grid-column: span 8; }
.tl-album .w4 { grid-column: span 4; }
/* the wide and the tall print share one height so their captions line up */
.tl-album .w8 img, .tl-album .w4 img { aspect-ratio: auto; height: clamp(240px, 30vw, 430px); }
.tl-album .w6 { grid-column: span 6; }
.tl-album .w3 { grid-column: span 3; }
@media (max-width: 760px) { .tl-album { grid-template-columns: 1fr 1fr; } .tl-album figure { grid-column: span 1 !important; } .tl-album .w8, .tl-album .w4 { grid-column: span 2 !important; } .tl-album .w8 img, .tl-album .w4 img { height: auto; aspect-ratio: 3 / 2; } }

/* ── Destinations ──────────────────────────────────────────────────── */
.tl-places { list-style: none; margin: 0; padding: 0; columns: 2 16rem; column-gap: 2.5rem; }
.tl-places li { break-inside: avoid; padding: 0.7rem 0; border-bottom: 1px solid var(--tl-rule); }
.tl-places a { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.1rem; color: var(--wp--preset--color--navy); text-decoration: none; }
.tl-places a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tl-places span { display: block; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--muted); }

/* ── Contact card ──────────────────────────────────────────────────── */
.tl-contact { font-family: var(--wp--preset--font-family--heading); }
.tl-contact dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; margin: 0; }
.tl-contact dt { color: rgba(255, 255, 255, 0.7); }
.tl-contact dd { margin: 0; }
.tl-contact a { color: #fff; }

/* ── Posts ─────────────────────────────────────────────────────────── */
.tl-post-card .wp-block-post-featured-image { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.tl-post-card .wp-block-post-featured-image img { height: 100%; object-fit: cover; }
.tl-post-card .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--navy); }
.tl-post-card .wp-block-post-title a:hover { text-decoration: underline; }
.tl-prose > * + h2 { margin-top: 2.4rem; }
.tl-prose > * + h3 { margin-top: 1.8rem; }

/* ── Page title band ───────────────────────────────────────────────── */
.tl-band { background: var(--wp--preset--color--mist); border-bottom: 1px solid var(--tl-rule); }
.tl-band .wp-block-post-title { margin: 0; }

/* ── Footer ────────────────────────────────────────────────────────── */
.tl-footer { font-family: var(--wp--preset--font-family--heading); }
.tl-footer a { color: #fff; text-decoration: none; }
.tl-footer a:hover { text-decoration: underline; }
.tl-footer h2 { font-size: var(--wp--preset--font-size--s); font-weight: 600; color: var(--wp--preset--color--gold); margin: 0 0 0.8rem; }
.tl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: var(--wp--preset--font-size--s); }
.tl-footer .tl-footer-logo { background: #fff; padding: 0.8rem 1rem; display: inline-block; border-radius: 4px; }
.tl-footer .tl-footer-logo img { width: 140px; display: block; }

/* ── WhatsApp button on phones ─────────────────────────────────────── */
.tl-wa {
	position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
	display: none; align-items: center; gap: 0.5rem; padding: 0.75rem 1.05rem; border-radius: 999px;
	background: var(--wp--preset--color--green); color: #fff; text-decoration: none;
	font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.95rem;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
}
.tl-wa svg { width: 20px; height: 20px; fill: currentColor; }
.tl-wa:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }
@media (max-width: 781px) {
	.tl-wa { display: inline-flex; }
	.tl-header .tl-header-cta.wp-block-buttons { display: none; }
	.tl-brand img { width: 42px; }
	.tl-brand-name { font-size: 1rem; }
}

/* Outline buttons on light grounds: navy text and border (core leaves them white). */
.tl-tour .is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--navy); border: 1.5px solid currentColor; }
.tl-tour .is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--mist); }

/* ---------- Tours: lists on journey pages, tour pages ---------- */
.tl-tours-wrap { margin-block: 2.5rem !important; }
.tl-tours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.5rem; }
.tl-tour-card { display: flex; flex-direction: column; border: 1px solid var(--tl-rule); background: var(--wp--preset--color--paper); }
.tl-tour-card__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--wp--preset--color--mist); }
.tl-tour-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-tour-card__body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.tl-tour-card.no-img .tl-tour-card__body { border-top: 4px solid var(--wp--preset--color--navy); }
.tl-tour-card__facts { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.02em; color: var(--wp--preset--color--muted); }
.tl-tour-card__title { margin: 0; font-size: 1.2rem; line-height: 1.3; text-wrap: balance; }
.tl-tour-card__title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.tl-tour-card__title a:hover, .tl-tour-card__title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.tl-tour-card__text { margin: 0; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--ink); }
.tl-tour-card__price { margin: auto 0 0; padding-top: 0.6rem; border-top: 1px solid var(--tl-rule); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--s); font-weight: 600; color: var(--wp--preset--color--navy); }

.tl-crumb { margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--s); font-weight: 600; }
.tl-crumb a { color: var(--wp--preset--color--muted); text-decoration: none; }
.tl-crumb a::after { content: " /"; }
.tl-crumb a:hover { color: var(--wp--preset--color--navy); text-decoration: underline; }
/* Title and lead share the crumb's left edge: a narrow max-width here would be
   centred by the constrained layout, so the line length is limited inside instead. */
.tl-tour-head .wp-block-post-title { margin: 0; text-wrap: balance; }
.tl-tour-lead { margin-top: 0.9rem; font-size: 1.15rem; color: var(--wp--preset--color--ink); }
.tl-tour-lead p { margin: 0; max-width: 62ch; }
.tl-tour-img img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }
.tl-lead { font-size: 1.12rem; }

dl.tl-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 0; margin: 2rem 0; border-top: 1px solid var(--tl-rule); border-left: 1px solid var(--tl-rule); }
dl.tl-facts > div.is-wide { grid-column: 1 / -1; }
dl.tl-facts > div { padding: 0.8rem 1rem; border-right: 1px solid var(--tl-rule); border-bottom: 1px solid var(--tl-rule); }
dl.tl-facts dt { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
dl.tl-facts dd { margin: 0.2rem 0 0; font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }

.tl-days { border-left: 2px solid var(--wp--preset--color--navy); padding-left: clamp(1rem, 3vw, 1.6rem); }
.tl-day + .tl-day { margin-top: 1.6rem; }
.tl-day h3 { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--wp--preset--color--navy); }
.tl-day p { margin: 0; }
.tl-day .tl-day-meta { margin-top: 0.35rem; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--muted); }
.tl-inc li::marker { content: "✓  "; color: var(--wp--preset--color--green); }
.tl-exc li::marker { content: "–  "; color: var(--wp--preset--color--muted); }
.tl-tour-cta { margin-top: 3rem !important; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--tl-rule); }
.tl-tour-cta h2 { margin-top: 0; }
.tl-tour-cta .is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--navy); border: 1.5px solid currentColor; background: transparent; }