/* ═══════════════════════════════════════════════════════════════════════
 *  EPL BASE — layout tokens and primitives  (2026-09-11)
 *
 *  Loaded FIRST on every front-end page (inc/epl-assets.php), so every other
 *  stylesheet can use these tokens.
 *
 *  ONE CONTAINER. Before this file the site had eight different content
 *  widths (860–1480px) and four different gutters, so the header, the page
 *  sections and the footer started at different x-positions on every
 *  template. Every main content wrapper now takes its width and gutter from
 *  here, so they all line up with the header.
 *
 *  --epl-container is the wrapper's full width INCLUDING its gutters
 *  (box-sizing: border-box), so the content itself is 1300 − 2 × gutter.
 *
 *  Narrow text columns inside a section (720–860px intros, FAQ lists, the
 *  860px legal-document column) are deliberately NOT containers and keep
 *  their own widths.
 * ═══════════════════════════════════════════════════════════════════════ */

:root{
	--epl-container:1300px;
	--epl-gutter:24px;

	/* SECTION RHYTHM — every page section gets the same 40px top and bottom
	   (owner, 2026-09-12). One number, no per-breakpoint overrides. */
	--epl-section-y:40px;

	/* BRAND COLOURS — the homepage palette, the only one on the site.
	   Page stylesheets keep their own variable names (--epca-accent,
	   --x-cta, --epc-gold…) but point them here, so the brand changes in
	   one place. `--epl-accent` matches epl_brand()['accent'], which
	   functions.php also prints inline on custom pages. */
	--epl-accent:#d48652;      /* brand orange: buttons, links, highlights */
	--epl-accent-dk:#b86c3c;   /* hover / text-on-light */
	--epl-accent-lt:#db834e;   /* lighter orange */
	--epl-accent-pale:#f0c19d; /* pale orange: hover borders, light fills */
	--epl-accent-sf:#fbf1e9;   /* soft orange wash behind content */

	--epl-ink:#101010;         /* headings, body text */
	--epl-ink-70:#3a3a3a;
	--epl-ink-50:#5b5b5b;
	--epl-ink-30:#8a8a8a;

	--epl-dark:#0f0e0c;        /* dark sections, heroes */
	--epl-gold:#d4a843;        /* stars, "best value" */
	--epl-cream:#f9f6f1;
	--epl-sand:#f7f3ec;
	--epl-light:#f9f9f9;
	--epl-line:#e7e4dd;
	--epl-line-lt:#f0ede6;
	--epl-wa:#25d366;          /* WhatsApp green — not a brand colour, kept */
}
@media (max-width:900px){
	:root{ --epl-gutter:18px; }
}

/* For new markup. Existing templates keep their own wrapper classes, which
   read the same two tokens. */
.epl-container{
	box-sizing:border-box;
	width:100%;
	max-width:var(--epl-container);
	margin-inline:auto;
	padding-inline:var(--epl-gutter);
}

/* ═══ One section-heading size (2026-09-12) ═════════════════════════════
 *  Page sheets write `.epc-h2` (0,1,0); the parent theme writes
 *  `.traveltour-body h2` (0,1,1). So the theme won on the day-tour, cruise
 *  and safari pages — 27px — and lost on the nine hubs, whose own
 *  `.{p}-sec h2` ties with it and comes later — 40px, two pixels under the
 *  h1 beside it. At (0,1,2) this settles the scale by intent instead.
 *  The value is what the day-tour page already shows: 27px / 24px.
 *  The closing-CTA and consult headings keep their own larger sizes —
 *  those are display type on a dark panel, not section headings.
 * ══════════════════════════════════════════════════════════════════════ */
html body :is(.epc-h2, .epn-h2, .epst-h2, .epk-sec h2, .epca-sec h2, .epcl-sec h2, .epbg-sec h2, .epct-sec h2, .epnc-sec h2, .eplx-sec h2, .eth-sec h2, .etp-sec h2) {
	font-size: clamp(24px, 1.9vw, 27px);
	line-height: 1.2;
}

/* ═══ One page-title size (2026-09-12) ══════════════════════════════════
 *  The split heroes settle at clamp(30px, 3.2vw, 42px); these families did
 *  not. The safari title read 39px — its own clamp(48px … 108px) lost to
 *  the parent theme's `.traveltour-body h1`. The tour pages read 44px with
 *  three step-downs of their own, and the eight wiki / attractions pages
 *  read 48px, each through its own hero class. At (0,1,2) this covers all
 *  of them, including the phone steps, which the clamp handles.
 * ══════════════════════════════════════════════════════════════════════ */
html body :is(.epst-h1, .ept-head h1, .ep-hero h1, .epit-hero h1, .x-hero h1, .h-hero h1, .a-hero h1, .f-hero h1, .l-hero h1, .d-hero h1, .epf-h1) {
	font-size: clamp(30px, 3.2vw, 42px);
	line-height: 1.1;
}

html body :is(.ept-sec h2, .ept-rel h2, .ept-reviews h2, .ep-sec-head h2, .epit-sec-head h2, .epni-sec-head h2, .x-sec-head h2, .h-sec-head h2, .a-sec-head h2, .f-sec-head h2, .l-sec-head h2, .d-sec-head h2, .w-sec-head h2, .epf-hubs-h, .epf-empty h2) {
	/* the same scale, reached a turn later: these two families write their
	   own sizes (30px, and 2.05rem under nine one-letter prefixes). */
	font-size: clamp(24px, 1.9vw, 27px);
	line-height: 1.2;
}

/* ═══ Visually hidden (2026-09-12) ══════════════════════════════════════
 *  WordPress themes are expected to ship this and neither this theme nor
 *  its parent ever did, so every `.screen-reader-text` label on the site
 *  was rendering as ordinary visible text. Clipped rather than hidden, so
 *  screen readers still announce it.
 * ══════════════════════════════════════════════════════════════════════ */
.screen-reader-text{
	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;
}
.screen-reader-text:focus{
	position:static; width:auto; height:auto; margin:0; overflow:visible;
	clip:auto; clip-path:none; white-space:normal;
}