/* =============================================================================
   SEKHMET TOURS — Design System (legacy .sekhem-* layer)
   =============================================================================
   Loaded before assets/css/edt.css, which carries the live front end and the
   canonical --sk-* token layer. What is left here is the .sekhem-* work that
   still has markup behind it: the tour and city cards emitted by the plugin's
   Elementor widgets, the classic itinerary list, the breadcrumb, the archive
   filters, the footer, the WooCommerce wrapper, and the tokens they read.

   Palette — LIMESTONE & CLAY (REDESIGN-SPEC.md 2.1 / 3.1): limestone page
   #F4F1EC, white cards, basalt bands #221F1A / #2E2A24, oxidised-clay accent
   #A8442A. No blue, no gold; green survives only as the semantic success
   colour.
   Type — Fraunces (variable display serif with an optical-size axis, so one
   family covers 19px card titles and 76px headlines) + Manrope (body/UI).
   Layout — hairline rules rather than card shadows; small radii; asymmetric
   editorial grid.
   Motion — custom spring beziers only, never a bare ease; prefers-reduced-
   motion respected throughout.

   Token values are literal hexes rather than var(--sk-*) on purpose: the
   --sk-* layer lives in edt.css, which loads *after* this file, so reading
   it from here would be a back-reference up the cascade.
   ============================================================================= */

:root {
	/* Brand surfaces — spec 3.3.2 mapping. Token NAMES are unchanged so every
	   existing var() keeps resolving; only the values moved. */
	--sekhem-basalt: #221F1A;			/* sk-band-2 */
	--sekhem-papyrus: #F4F1EC;			/* sk-page */
	--sekhem-sandstone: #EAE5DD;		/* sk-sunken */
	--sekhem-line: #DCD6CC;				/* sk-line — decorative hairlines only */
	--sekhem-line-strong: #7F776B;		/* sk-line-strong — control borders, >=3:1 */
	--sekhem-line-on-dark: rgba(247, 245, 241, 0.16);
	--sekhem-white: #FFFFFF;			/* sk-surface */

	/* Accents — used sparingly (spec 3.5.1: under 5% of visible pixels). */
	--sekhem-nile: #2E2A24;				/* sk-band-3 */
	--sekhem-nile-light: #A8442A;		/* sk-accent — the interactive pair of nile */
	--sekhem-ochre: #A8442A;			/* sk-accent */
	--sekhem-ochre-hover: #8F3822;		/* sk-accent-hover */
	--sekhem-ochre-on-dark: #D9825E;	/* sk-accent-on-dark — accent *text* on bands */
	--sekhem-whatsapp: #25D366;			/* third-party brand: icon fill only */
	--sekhem-danger: #B21F24;			/* sk-danger */
	--sekhem-success: #1F6F4A;			/* sk-success */

	/* Ink scale (off-black text) */
	--sekhem-ink: #1A1815;				/* sk-ink */
	--sekhem-ink-soft: #4A443C;			/* sk-ink-2 */
	--sekhem-ink-mute: #6E665B;			/* sk-ink-3 */

	/* Type — spec 4.1. Two families; the retired ones are no longer requested
	   in inc/enqueue.php, so they are not listed as fallbacks either. */
	--sekhem-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--sekhem-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Scale & rhythm */
	--sekhem-container: 1240px;
	--sekhem-gutter: clamp(20px, 4vw, 64px);
	--sekhem-section-space: clamp(64px, 9vw, 140px);
	--sekhem-section-tight: calc(var(--sekhem-section-space) * 0.55);
	--sekhem-radius: 0.25rem;			/* 4px — sk-r-xs: chips, tags */
	--sekhem-radius-soft: 0.5rem;		/* 8px — sk-r-sm: buttons, controls, thumbs */

	/* Motion — spec 10.1 durations, entrance curve unchanged (it is already
	   the spec's --sk-ease-entrance). */
	--sekhem-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--sekhem-dur-fast: 120ms;
	--sekhem-dur-base: 200ms;
	--sekhem-dur-slow: 520ms;

	/* Z-index scale — spec 5.7. The floating contact widget drops from 70 to
	   50 so it sits above a mobile booking bar and below the overlay menu. */
	--sekhem-z-header: 40;
	--sekhem-z-overlay: 60;
	--sekhem-z-modal: 80;
	--sekhem-z-toast: 100;
	--sekhem-z-floating-wa: 50;
}

/* ---------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */
body {
	font-family: var(--sekhem-font-body);
	color: var(--sekhem-ink);
	background: var(--sekhem-papyrus);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--sekhem-font-display);
	font-weight: 500;
	line-height: 1.12;
	margin: 0 0 0.4em;
	color: var(--sekhem-basalt);
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 450; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; max-width: 62ch; }
p.sekhem-lede { font-size: 1.15rem; color: var(--sekhem-ink-soft); max-width: 56ch; }

a.sekhem-link {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: opacity 0.2s var(--sekhem-ease);
}
a.sekhem-link:hover { opacity: 0.65; }

/* Focus ring is the accent (spec 3.1.7 --sk-focus): 5.29:1 on the page,
   5.96:1 on a white card. */
:focus-visible {
	outline: 2px solid var(--sekhem-ochre);
	outline-offset: 3px;
}
/* On a basalt band the accent falls to 2.70:1, under the 3:1 that SC 1.4.11
   requires of a focus indicator, so dark surfaces take the on-dark accent
   (5.6:1). This also fixes the old ring, which was near-invisible on dark
   outside the hero. */
.sekhem-section--dark :focus-visible,
.sekhem-footer :focus-visible {
	outline-color: var(--sekhem-ochre-on-dark);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */
.sekhem-container {
	max-width: var(--sekhem-container);
	margin-inline: auto;
	padding-inline: var(--sekhem-gutter);
}
.sekhem-section { padding-block: var(--sekhem-section-space); }
.sekhem-section--tight { padding-block: calc(var(--sekhem-section-space) * 0.55); }
.sekhem-section--dark { background: var(--sekhem-basalt); color: var(--sekhem-sandstone); }
.sekhem-section--dark h1, .sekhem-section--dark h2, .sekhem-section--dark h3 { color: var(--sekhem-papyrus); }
.sekhem-section--sandstone { background: var(--sekhem-sandstone); }

.sekhem-grid { display: grid; gap: var(--sekhem-gutter); }
.sekhem-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sekhem-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sekhem-grid--4 { grid-template-columns: repeat(4, 1fr); }

.sekhem-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--sekhem-gutter);
	margin-bottom: clamp(28px, 4vw, 56px);
	border-bottom: 1px solid var(--sekhem-line);
	padding-bottom: 24px;
}
.sekhem-section--dark .sekhem-section-head { border-color: var(--sekhem-line-on-dark); }
.sekhem-section-head p { margin: 0; }

/* ---------------------------------------------------------------------------
   BUTTONS
   Radius is --sekhem-radius-soft (8px) per spec 5.5/9.1: controls up to 44px
   tall never exceed sk-r-sm unless they are pills.
   ------------------------------------------------------------------------- */
.sekhem-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: var(--sekhem-radius-soft);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s var(--sekhem-ease), color 0.2s var(--sekhem-ease), border-color 0.2s var(--sekhem-ease);
	text-decoration: none;
}
.sekhem-btn--primary { background: var(--sekhem-nile); color: var(--sekhem-papyrus); }
.sekhem-btn--primary:hover { background: var(--sekhem-nile-light); }
/* Clay fills carry a near-white label: basalt on clay is only 2.70:1, while
   white on clay is 5.96:1 (spec 3.2.2). */
.sekhem-btn--ochre { background: var(--sekhem-ochre); color: var(--sekhem-white); }
.sekhem-btn--ochre:hover { background: var(--sekhem-ochre-hover); }
.sekhem-btn--gold { background: var(--sekhem-ochre); color: var(--sekhem-white); }
.sekhem-btn--gold:hover { background: var(--sekhem-ochre-hover); }
.sekhem-btn--outline { background: transparent; border-color: currentColor; color: var(--sekhem-basalt); }
.sekhem-btn--outline:hover { background: var(--sekhem-basalt); color: var(--sekhem-papyrus); }
.sekhem-btn--outline-light { background: transparent; border-color: rgba(247, 245, 241, 0.55); color: var(--sekhem-papyrus); }
.sekhem-btn--outline-light:hover { background: var(--sekhem-papyrus); color: var(--sekhem-basalt); }
.sekhem-section--dark .sekhem-btn--outline { color: var(--sekhem-papyrus); }
.sekhem-section--dark .sekhem-btn--outline:hover { background: var(--sekhem-papyrus); color: var(--sekhem-basalt); }

/* ---------------------------------------------------------------------------
   TOUR CARD (theme presentation layer over the plugin's markup classes)
   ------------------------------------------------------------------------- */
.sekhem-tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }

.sekhem-tour-card { text-decoration: none; color: inherit; display: block; border: none; border-radius: 0; }
.sekhem-tour-card__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--sekhem-sandstone); }
.sekhem-tour-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--sekhem-ease); }
.sekhem-tour-card:hover .sekhem-tour-card__media img { transform: scale(1.04); }
.sekhem-tour-card__body { padding-top: 16px; border-top: 1px solid var(--sekhem-line); margin-top: 16px; }
.sekhem-tour-card__city { font-size: 0.82rem; color: var(--sekhem-nile); font-weight: 600; }
.sekhem-tour-card__title { font-size: 1.2rem; margin: 6px 0 8px; }
.sekhem-tour-card__meta { font-size: 0.88rem; color: var(--sekhem-ink-soft); }
.sekhem-tour-card__price { margin-top: 10px; font-weight: 600; }
.sekhem-tour-card__price::before { content: 'From '; font-weight: 400; color: var(--sekhem-ink-soft); }

/* ---------------------------------------------------------------------------
   CITY CARD
   ------------------------------------------------------------------------- */
.sekhem-city-card { position: relative; display: block; text-decoration: none; color: var(--sekhem-white); aspect-ratio: 3/4; overflow: hidden; }
.sekhem-city-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--sekhem-ease); }
.sekhem-city-card:hover img { transform: scale(1.05); }
.sekhem-city-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,21,18,0.85), rgba(23,21,18,0) 60%); }
.sekhem-city-card__label { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; }
.sekhem-city-card__label h3 { color: var(--sekhem-white); margin-bottom: 4px; }
.sekhem-city-card__label span { font-size: 0.85rem; opacity: 0.85; }

/* ---------------------------------------------------------------------------
   STATS
   ------------------------------------------------------------------------- */
.sekhem-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sekhem-gutter); }
.sekhem-stat__number { font-family: var(--sekhem-font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--sekhem-ochre); }
.sekhem-stat__label { font-size: 0.9rem; color: var(--sekhem-ink-soft); margin-top: 4px; }
.sekhem-section--dark .sekhem-stat__number { color: var(--sekhem-ochre-on-dark); }
.sekhem-section--dark .sekhem-stat__label { color: var(--sekhem-sandstone); opacity: 0.75; }

/* ---------------------------------------------------------------------------
   TESTIMONIALS
   ------------------------------------------------------------------------- */
.sekhem-testimonial { border-top: 1px solid var(--sekhem-line-on-dark); padding-top: 24px; }
.sekhem-testimonial p { font-family: var(--sekhem-font-display); font-size: 1.3rem; line-height: 1.4; color: var(--sekhem-papyrus); max-width: none; }
.sekhem-testimonial cite { display: block; margin-top: 16px; font-style: normal; font-size: 0.88rem; opacity: 0.7; }

/* ---------------------------------------------------------------------------
   FAQ ACCORDION
   ------------------------------------------------------------------------- */
.sekhem-faq-item { border-bottom: 1px solid var(--sekhem-line); }
.sekhem-faq-item summary {
	display: flex; justify-content: space-between; align-items: center;
	padding: 22px 0; cursor: pointer; font-weight: 500; font-size: 1.05rem;
	list-style: none;
}
.sekhem-faq-item summary::-webkit-details-marker { display: none; }
.sekhem-faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--sekhem-nile); transition: transform 0.2s var(--sekhem-ease); }
.sekhem-faq-item[open] summary::after { transform: rotate(45deg); }
.sekhem-faq-item p { padding-bottom: 22px; color: var(--sekhem-ink-soft); }

/* ---------------------------------------------------------------------------
   BREADCRUMB
   The separator is spec 9.7: ink-3, 8px inline margins. It used to be
   opacity .5, which multiplied into edt.css's own separator colour on tour
   pages (that override only sets `color`) and washed it out; a real colour
   lets edt.css win cleanly, and margin-inline needs no RTL override.
   ------------------------------------------------------------------------- */
.sekhem-breadcrumb { font-size: 0.85rem; color: var(--sekhem-ink-soft); margin-bottom: 20px; }
.sekhem-breadcrumb a { text-decoration: none; }
.sekhem-breadcrumb a:hover { text-decoration: underline; }
.sekhem-breadcrumb span[aria-hidden] { margin-inline: 8px; color: var(--sekhem-ink-mute); }

/* ---------------------------------------------------------------------------
   ITINERARY LIST
   The one survivor of the old TOUR PAGE block: the plugin's Elementor
   Itinerary widget still emits .sekhem-itinerary / __item / __title
   (elementor/widgets/itinerary.php) and nothing else styles it — edt.css has
   no rule for it at all. __time and __duration went with the rest of the
   block: the widget folds both into .sekhem-itinerary__meta, which the
   plugin's own public/css/elementor-widgets.css styles.
   ------------------------------------------------------------------------- */
.sekhem-itinerary { list-style: none; margin: 0; padding: 0; }
.sekhem-itinerary li { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--sekhem-line); }
.sekhem-itinerary li:first-child { border-top: none; }
.sekhem-itinerary__title { font-weight: 600; margin-bottom: 4px; }

/* ---------------------------------------------------------------------------
   TOUR ARCHIVE FILTERS
   ------------------------------------------------------------------------- */
.sekhem-filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 20px 0; border-block: 1px solid var(--sekhem-line); margin-bottom: 48px; }
/* Control borders take --sekhem-line-strong, never --sekhem-line: a hairline
   is 1.44:1 on white, and SC 1.4.11 wants 3:1 for a control boundary. */
.sekhem-filters select, .sekhem-filters input[type="search"] { padding: 10px 14px; border: 1px solid var(--sekhem-line-strong); background: var(--sekhem-white); font-family: inherit; font-size: 0.9rem; border-radius: var(--sekhem-radius-soft); }

/* ---------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.sekhem-footer { background: var(--sekhem-basalt); color: var(--sekhem-sandstone); }
.sekhem-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sekhem-gutter); padding-block: var(--sekhem-section-space); border-bottom: 1px solid var(--sekhem-line-on-dark); }
.sekhem-footer__logo { font-family: var(--sekhem-font-display); font-size: 1.4rem; color: var(--sekhem-white); margin-bottom: 14px; display: inline-block; text-decoration: none; }
.sekhem-footer__logo img { max-height: 40px; width: auto; height: auto; }
.sekhem-footer p { color: var(--sekhem-sandstone); opacity: 0.75; }
.sekhem-footer h4 { color: var(--sekhem-white); font-family: var(--sekhem-font-body); font-size: 0.85rem; font-weight: 600; margin-bottom: 18px; }
.sekhem-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sekhem-footer a { text-decoration: none; opacity: 0.8; font-size: 0.92rem; }
.sekhem-footer a:hover { opacity: 1; text-decoration: underline; }
.sekhem-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-block: 24px; font-size: 0.82rem; opacity: 0.6; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------------------
   WOOCOMMERCE WRAPPER
   ------------------------------------------------------------------------- */
.sekhem-woo-wrap { padding-block: var(--sekhem-section-space); }
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px; border-bottom: 1px solid var(--sekhem-line); text-align: left; }
.woocommerce #payment #place_order,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-weight: 600; font-size: 0.95rem;
	border-radius: var(--sekhem-radius-soft); border: 1px solid transparent; background: var(--sekhem-nile); color: var(--sekhem-papyrus) !important; cursor: pointer;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #payment #place_order:hover { background: var(--sekhem-nile-light); }

/* ---------------------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------------------- */
.sekhem-eyebrow { font-size: 0.85rem; color: var(--sekhem-nile); font-weight: 600; margin-bottom: 8px; display: inline-block; }
.sekhem-section--dark .sekhem-eyebrow { color: var(--sekhem-ochre-on-dark); }
.screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; }

html.sekhem-scroll-lock { overflow: hidden; }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   One block per breakpoint, merged from the seven per-component media
   blocks that survived the dead-code sweep. Widths are the spec 6.1 scale;
   the old 540 / 780 / 980 / 1100 steps mapped up per 6.2 (540->640,
   780->900, 980->1120, 1100->1120). Descending order is load-bearing: the
   narrower block has to stay last so it still overrides the wider one,
   which is the source order the original blocks had.
   ------------------------------------------------------------------------- */
@media (max-width: 1120px) {
	.sekhem-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.sekhem-tour-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.sekhem-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.sekhem-stats { grid-template-columns: repeat(2, 1fr); }
	.sekhem-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.sekhem-grid--2, .sekhem-grid--3, .sekhem-grid--4 { grid-template-columns: 1fr; }
	.sekhem-tour-grid { grid-template-columns: 1fr; }
}