/**
 * Tours.
 *
 * Colours are aliases of the existing Blocksy/Elementor palette, matching
 * drive-destinations so the two content types sit together without a seam:
 *   --dtour-brand  palette_1 #f78f1e     --dtour-accent  palette_2 #0d9693
 *   --dtour-text   palette_3 #3f4245     --dtour-head    palette_4 #111518
 *   --dtour-line   palette_5 #eaeaec     --dtour-soft    palette_6 #f4f4f5
 *
 * THE SINGLE-TOUR LAYOUT IS A CLONE, measured 2026-09-20 with getComputedStyle
 * on /ethiopia-nature-tours/ and /undiscovered-ethiopian-history/, the tour
 * pages the client already sells. Those are Elementor, which lives in the
 * database and has no route to production; this stylesheet plus
 * templates/single-tour.php is the file-based way to the same design.
 *
 * Measured, not eyeballed:
 *   container      1290px
 *   hero           700px tall, full bleed, header overlays it
 *   hero title     Raleway 700 60/72, -1px, white, centred, capitalize
 *   hero sub       Poppins 400 16/24, white, centred
 *   hero button    Raleway 400 14px uppercase, #fff on teal, radius 10px, 164x52
 *   about band     #f4f4f4, 60px 0, two 645px columns, image 615x520
 *   section title  Poppins 800 45/54, -1.3px, #000, + 70x5 orange rule
 *   sub heading    Poppins 800 20/24, -0.5px, #000, + 50x3 orange rule
 *   itinerary band #e7edf5, day grid in two 645px columns
 *   day heading    Raleway 800 24/28.8, -1.3px, #000, + 70x5 orange rule
 *   duration bar   white track, orange fill, 30px tall, radius 2px
 *
 * Deliberate deviations, all verified rather than assumed:
 *   - Source dividers render #f38e20 and its hero button #079899, four and six
 *     points off palette_1 and palette_2. The palette tokens are kept so the
 *     site does not carry two nearly identical oranges and two teals.
 *   - Headings measure pure #000, not palette_4 #111518, so tour headings sit a
 *     shade darker than destination pages. Matched the source.
 *   - The source's real <h1> is a 22px white chip on an orange block, while the
 *     visual page title is an <h2>. Ours is a true <h1> carrying the title
 *     treatment, because one <h1> per page that names the tour is worth more
 *     than reproducing that quirk.
 */

:root {
	--dtour-brand: #f78f1e;
	--dtour-accent: #0d9693;
	--dtour-text: #3f4245;
	--dtour-head: #111518;
	--dtour-line: #eaeaec;
	--dtour-soft: #f4f4f5;
	--dtour-radius: 10px;

	--dtour-ink: #000;
	--dtour-band: #e7edf5;          /* itinerary band, measured rgb(231,237,245) */
	--dtour-about-bg: #f4f4f4;      /* about band, measured rgb(244,244,244)     */
	--dtour-muted: #5f6469;         /* 6.2:1 on white. The old #767b80 was 4.27:1 */
	--dtour-title-font: Poppins, system-ui, sans-serif;
	--dtour-body-font: Raleway, system-ui, sans-serif;
	--dtour-container: 1290px;
}

/* ---------------------------------------------------------- scaffolding -- */

.dtour-single {
	color: var(--dtour-text);
	font-family: var(--dtour-body-font);
}

/* The hero is full bleed and the header floats over it, so the single template
   takes no top padding. The archive still needs to clear the header. */
.dtour-archive {
	max-width: var(--dtour-container);
	margin: 0 auto;
	padding: 160px 20px 64px;
	color: var(--dtour-text);
	font-family: var(--dtour-body-font);
}

.dtour-container {
	max-width: var(--dtour-container);
	margin: 0 auto;
	padding: 0 20px;
}

/*
 * Blocksy switches the header to its short variant at 999.98px, not at 689px.
 * Reserving 160px below that left roughly 90px of dead white space on tablets.
 */
@media (max-width: 999.98px) {
	.dtour-archive { padding-top: 110px; }
}

/*
 * Make the navigation visible on tour templates.
 *
 * Blocksy's type-1 header is the transparent variant, and on a template with no
 * explicit setting it falls back to colours meant for overlaying a dark hero:
 * the top-level links come out white.
 *
 * ON THE SINGLE TEMPLATE THERE IS NOW A HERO for it to overlay, so white is
 * correct there and the override is scoped away from it. The archive and the
 * taxonomy listings still have a white background and still need the fix.
 *
 * SCOPED TO TOP-LEVEL LINKS ONLY. A bare .ct-menu-link override would also hit
 * dropdown items, which are correctly white on their dark panel, and would turn
 * them orange on orange. That mistake has been made on this site before.
 */
.post-type-archive-tour .ct-menu-link:not(.sub-menu .ct-menu-link),
.tax-tour_type .ct-menu-link:not(.sub-menu .ct-menu-link),
.tax-tour_region .ct-menu-link:not(.sub-menu .ct-menu-link) {
	color: var(--dtour-brand);
}

.post-type-archive-tour .current-menu-item > .ct-menu-link,
.tax-tour_type .current-menu-item > .ct-menu-link,
.tax-tour_region .current-menu-item > .ct-menu-link {
	color: #13385f;
}

.dtour-single h1,
.dtour-single h2,
.dtour-single h3,
.dtour-archive h1,
.dtour-archive h3 {
	font-family: var(--dtour-title-font);
	color: var(--dtour-ink);
}

/* ----------------------------------------------------------------- hero -- */

.dtour-hero {
	position: relative;
	min-height: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #1c1c1c;
	background-size: cover;
	background-position: 50% 50%;
	text-align: center;
	padding: 160px 20px 80px;
}

/*
 * The warm wash over the hero photograph, copied stop for stop from the
 * source's .depicter-section-background::after. It is what makes the
 * Elementor tour heroes read as one family rather than as stock photos.
 */
.dtour-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(6deg, rgba(224, 194, 136, .67) 29%, rgba(241, 191, 60, .31) 100%, rgb(240, 172, 50) 100%);
	pointer-events: none;
}

/*
 * Below 1000px Blocksy swaps to its short header, so the hero no longer needs
 * to reserve 160px for an overlaying 111px one. Depicter shrinks the hero on
 * the source pages for the same reason.
 */
@media (max-width: 999.98px) {
	.dtour-hero { min-height: 520px; padding: 110px 20px 56px; }
}

.dtour-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
}

.dtour-hero h1 {
	font-family: var(--dtour-body-font);
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -1px;
	text-transform: capitalize;
	color: #fff;
	margin: 0 0 18px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

.dtour-hero .dtour-hook {
	font-family: var(--dtour-title-font);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #fff;
	margin: 0 auto 28px;
	max-width: 660px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

.dtour-btn {
	display: inline-block;
	background: var(--dtour-brand);
	color: #fff;
	padding: 13px 26px;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
}

.dtour-btn:hover,
.dtour-btn:focus { filter: brightness(.94); color: #fff; }

/* The hero's own button is the teal pill, 164x52, uppercase Raleway. */
.dtour-btn--hero {
	background: var(--dtour-accent);
	border-radius: var(--dtour-radius);
	font-family: var(--dtour-body-font);
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	min-width: 164px;
	padding: 15px 28px;
}

/* ---------------------------------------------------------------- about -- */

.dtour-about {
	background: var(--dtour-about-bg);
	padding: 60px 0;
}

.dtour-crumb { font-size: 14px; margin-bottom: 24px; }
.dtour-crumb a { color: var(--dtour-accent); text-decoration: none; }
.dtour-crumb a:hover { text-decoration: underline; }
.dtour-crumb span { margin: 0 6px; color: var(--dtour-muted); }

/* Page-title treatment: Poppins 800 45/54, -1.3px, with the 70x5 rule.
   Flat 45px above 767px and 40px below it, which is the one size override the
   source declares. A vw-based clamp fell to 30px on a phone where the source
   holds 40px. */
.dtour-about__title,
.dtour-itin-banner h2 {
	font-size: 45px;
	line-height: 54px;
	font-weight: 800;
	letter-spacing: -1.3px;
	color: var(--dtour-ink);
	margin: 0 0 18px;
}

.dtour-about__title::after,
.dtour-itin-banner h2::after {
	content: "";
	display: block;
	width: 70px;
	height: 5px;
	margin-top: 18px;
	background: var(--dtour-brand);
}

@media (max-width: 767px) {
	.dtour-about__title,
	.dtour-itin-banner h2 { font-size: 40px; line-height: 46px; }
}

.dtour-about__grid { display: grid; gap: 40px; margin-top: 34px; }
@media (min-width: 900px) { .dtour-about__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.dtour-about__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 615 / 520;
	object-fit: cover;
}

/* Sub heading: Poppins 800 20/24, -0.5px, with the 50x3 rule. Verified by
   walking every divider on the source and recording which heading precedes it;
   the 50x3 sits under "Overview" and "Suggested Accommodations". */
.dtour-h3,
.dtour-section > .dtour-container > h2,
.dtour-booking h2 {
	font-family: var(--dtour-title-font);
	font-size: 20px;
	line-height: 24px;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--dtour-ink);
	margin: 0 0 16px;
}

.dtour-h3::after,
.dtour-section > .dtour-container > h2::after,
.dtour-booking h2::after {
	content: "";
	display: block;
	width: 50px;
	height: 3px;
	margin-top: 14px;
	background: var(--dtour-brand);
}

.dtour-h3 + .dtour-prose,
.dtour-h3 + .dtour-stay { margin-top: 18px; }
.dtour-about__body > * + .dtour-h3 { margin-top: 34px; }

/*
 * Body copy.
 *
 * 16px/1.6 weight 400 is the Overview spec; the day paragraphs are 15px. The
 * source mixes weight and alignment paragraph by paragraph, three of seven day
 * bodies bold-and-justified and the rest plain, which is authoring drift rather
 * than a rule. One consistent treatment is used instead, and justify is left
 * off: at a 605px column it opens rivers that the source's wider column hides.
 */
.dtour-prose { font-family: var(--dtour-body-font); color: var(--dtour-text); }
.dtour-prose p { font-size: 16px; line-height: 1.6; font-weight: 400; margin: 0 0 16px; }
.dtour-prose p:last-child { margin-bottom: 0; }
.dtour-prose strong { font-weight: 700; color: var(--dtour-ink); }

/* Duration, the source's progress widget: white track, orange fill, 30px. */
.dtour-progress { margin: 26px 0 0; }
.dtour-progress__title {
	display: block;
	font-family: var(--dtour-title-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--dtour-ink);
	margin-bottom: 8px;
}
.dtour-progress__bar {
	background: #fff;
	border-radius: 2px;
	height: 30px;
	overflow: hidden;
}
.dtour-progress__bar span {
	display: flex;
	align-items: center;
	height: 100%;
	background: var(--dtour-brand);
	color: #fff;
	font-size: 12px;
	padding: 0 12px;
	white-space: nowrap;
	width: 100%;
}

.dtour-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 22px; }
.dtour-facts li { display: flex; flex-direction: column; gap: 2px; }
.dtour-facts span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dtour-muted); }
.dtour-facts strong { font-size: 16px; color: var(--dtour-ink); }

.dtour-stay { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dtour-stay li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; }
.dtour-stay li::before {
	content: "";
	position: absolute;
	left: 0; top: 9px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--dtour-brand);
}

/* ------------------------------------------------------------ itinerary -- */

.dtour-itin-banner { background: var(--dtour-band); padding: 60px 0 0; }
.dtour-itin-banner h2 { margin-bottom: 0; }
.dtour-days { background: var(--dtour-band); padding: 44px 0 60px; }

.dtour-itinerary { list-style: none; padding: 0; margin: 0; display: grid; gap: 40px; }
@media (min-width: 900px) { .dtour-itinerary { grid-template-columns: 1fr 1fr; gap: 44px 40px; } }
.dtour-itinerary > li { padding: 0; }

.dtour-itinerary h3 {
	font-family: var(--dtour-body-font);
	font-size: 24px;
	line-height: 28.8px;
	font-weight: 800;
	letter-spacing: -1.3px;
	color: var(--dtour-ink);
	margin: 0 0 16px;
}
.dtour-itinerary h3::after {
	content: "";
	display: block;
	width: 70px;
	height: 5px;
	margin-top: 16px;
	background: var(--dtour-brand);
}
.dtour-itinerary .dtour-prose p { font-size: 15px; line-height: 1.65; }

/* Two selectors so this beats `.dtour-prose p` (0,2,0 vs 0,1,1) rather than
   losing to it and rendering the place links at body size. */
.dtour-itinerary .dtour-places,
.dtour-section .dtour-places {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 12px 0 0;
	text-align: left;
}
.dtour-places a { color: var(--dtour-accent); margin-right: 14px; text-decoration: none; }
.dtour-places a:hover { text-decoration: underline; }

/* ------------------------------------------------------- other sections -- */

.dtour-section { padding: 54px 0; scroll-margin-top: 90px; }
.dtour-section + .dtour-section { padding-top: 0; }

.dtour-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.dtour-list li { padding-left: 22px; position: relative; font-size: 16px; line-height: 1.55; }
.dtour-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--dtour-brand); }
.dtour-list strong { color: var(--dtour-ink); }
.dtour-list span { display: block; color: var(--dtour-text); margin-top: 3px; }

.dtour-incexc { display: grid; gap: 24px; }
@media (min-width: 700px) { .dtour-incexc { grid-template-columns: 1fr 1fr; } }
.dtour-incexc h3 { font-size: 16px; margin: 0 0 8px; }

.dtour-faqs details { border-bottom: 1px solid var(--dtour-line); padding: 16px 0; }
.dtour-faqs summary { cursor: pointer; font-weight: 700; color: var(--dtour-ink); font-size: 16px; }
.dtour-faqs p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; }

.dtour-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dtour-gallery figure { margin: 0; }
.dtour-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }

.dtour-related { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.dtour-related a {
	display: inline-block; border: 1px solid var(--dtour-line); border-radius: 999px;
	padding: 7px 16px; text-decoration: none; color: var(--dtour-head); font-size: 15px;
	background: #fff;
}
.dtour-related a:hover { border-color: var(--dtour-brand); color: var(--dtour-brand); }

.dtour-editor-note {
	border: 1px solid #f0c36d; background: #fff8e5; border-radius: var(--dtour-radius);
	padding: 14px 18px; margin: 24px 0 0; font-size: 14px;
}
.dtour-editor-note p { margin: 6px 0 0; }

/* -------------------------------------------------------------- booking -- */

.dtour-booking { background: #fff; padding: 60px 0 72px; }
.dtour-booking__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .dtour-booking__grid { grid-template-columns: 1fr 1fr; } }
.dtour-cta__promise { font-size: 15px; margin: 14px 0 0; color: var(--dtour-muted); max-width: 46ch; line-height: 1.6; }

/* ----------------------------------------------------------- archive -- */

.dtour-archive__head { margin-bottom: 28px; }
.dtour-archive__head h1 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 10px; }
.dtour-archive__intro { max-width: 62ch; font-size: 17px; }

.dtour-facets { display: grid; gap: 12px; margin-bottom: 32px; }
.dtour-facets__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dtour-facets__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dtour-muted); min-width: 58px; }
.dtour-facets a {
	border: 1px solid var(--dtour-line); border-radius: 999px; padding: 6px 15px;
	font-size: 14px; text-decoration: none; color: var(--dtour-head);
}
.dtour-facets a:hover { border-color: var(--dtour-brand); }
.dtour-facets a.is-active { background: var(--dtour-head); border-color: var(--dtour-head); color: #fff; }

.dtour-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.dtour-card__link { text-decoration: none; color: inherit; display: block; }
.dtour-card__media { position: relative; border-radius: var(--dtour-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--dtour-soft); }
.dtour-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.dtour-card__link:hover .dtour-card__media img { transform: scale(1.04); }
.dtour-card__badge {
	position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.94);
	color: var(--dtour-head); font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
}
.dtour-card__body { padding: 12px 2px 0; }
.dtour-card__title { font-size: 18px; margin: 0 0 4px; }
.dtour-card__meta { font-size: 13px; color: var(--dtour-muted); margin: 0 0 6px; }
.dtour-card__hook { font-size: 15px; margin: 0; }
.dtour-card__price { font-size: 15px; font-weight: 600; color: var(--dtour-head); margin: 8px 0 0; }