/*! Angkor Asia Adventures 4.0.0 — consolidated skin layer (polish.css + refine.css + redesign). */
/*!
 * Angkor Asia Adventures — Polish Layer (responsive hardening + animation art)
 * Loaded after style.css / journey-map.css. Purely additive: every rule here
 * either prevents a layout/stacking failure across devices or adds a clean,
 * reduced-motion-safe brand animation. Nothing here changes the information
 * architecture — remove this file and the theme still works exactly as before.
 * ========================================================================= */

/* =========================================================================
   1. Layout crash-proofing — kill horizontal scroll, flex/grid blow-outs and
      overflowing media on every device. These are the usual causes of the
      "layer/layout breaks on mobile" class of bug.
   ========================================================================= */

/* Flex & grid children default to min-width:auto, so one long word or a wide
   image can force a track wider than the screen. Resetting to 0 lets tracks
   shrink and is the single highest-impact overflow fix. */
*, *::before, *::after { min-width: 0; }

/* No element may push the page wider than the viewport. `clip` (not `hidden`)
   keeps position:sticky working. */
html, body { overflow-x: clip; max-width: 100%; }

/* Media never overflows its container. */
img, video, iframe, embed, object, canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; }
/* …but don't let height:auto squash fixed-size UI icons. */
.icon, svg.icon, .wa-float svg, .header-cart svg, [class*="__icon"] svg { height: auto; }

/* Long unbroken strings (URLs, hashtags) wrap instead of blowing out a card. */
body { overflow-wrap: break-word; }
h1, h2, h3, h4, .eyebrow, .btn { overflow-wrap: anywhere; }

/* Wide content (tables, code, pasted blocks) scrolls inside itself. */
.entry-content :where(table, pre) { display: block; max-width: 100%; overflow-x: auto; }
table { max-width: 100%; }

/* Any grid can shrink its tracks rather than overflow. */
[class*="grid"] { min-width: 0; }

/* Fluid embeds keep aspect ratio without JS. */
.entry-content :where(iframe, embed, object) { aspect-ratio: 16 / 9; width: 100%; height: auto; }

/* Comfortable touch targets on coarse pointers (accessibility + no mis-taps). */
@media (pointer: coarse) {
	.btn, .primary-nav a, .header-cart, .nav-toggle, .chip, .cat-chip { min-height: 44px; }
}

/* =========================================================================
   2. Clean z-index scale — one documented ladder so overlays never collide.
      Fixes the two real collisions in the base sheet:
        • header (60) vs dropdown submenu (60)
        • mobile booking bar (70) vs WhatsApp float (80) overlapping bottom-right
   ========================================================================= */
.site-header            { z-index: var(--z-header); }
.primary-nav .sub-menu  { z-index: var(--z-dropdown); }
.cat-rail-wrap          { z-index: var(--z-sticky-rail); }
.mbook                  { z-index: var(--z-mbook); }
.skip-link              { z-index: var(--z-skip); }
.site-header.nav-open .primary-nav { z-index: var(--z-drawer); }

/* =========================================================================
   3. Animation art — clean, brand-specific, and only when motion is welcome.
      Every keyframe lives inside prefers-reduced-motion: no-preference so it
      never plays for users who opt out, and nothing here is required for the
      content to be legible.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

	/* 3a. Eyebrow dash "draws" in, with a slow travelling gold sheen — the
	   signature little accent above every section heading. */
	.eyebrow::before {
		transform-origin: left center;
		animation: aaa-dash-draw .7s cubic-bezier(.2,.8,.2,1) both;
	}
	@keyframes aaa-dash-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

	/* 3b. Gold buttons get a single diagonal light sweep on hover — premium,
	   subtle, GPU-friendly (transform only). */
	.btn--gold, .btn--forest, .btn--light { position: relative; overflow: hidden; isolation: isolate; }
	.btn--gold::after, .btn--forest::after, .btn--light::after {
		content: ""; position: absolute; inset: 0; z-index: -1;
		background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
		transform: translateX(-120%); transition: transform .6s ease;
	}
	.btn--gold:hover::after, .btn--forest:hover::after, .btn--light:hover::after { transform: translateX(120%); }

	/* 3c. Section h2 grows a gold underline as it enters (paired with the
	   theme's existing .reveal). Uses a pseudo-element so headings are
	   untouched structurally. */
	.section h2 { position: relative; }
	.section h2::after {
		content: ""; position: absolute; left: 0; bottom: -.28em; height: 3px; width: 0;
		background: linear-gradient(90deg, var(--gold), var(--gold-deep));
		border-radius: 3px; transition: width .8s cubic-bezier(.2,.8,.2,1);
	}
	.section .reveal.is-visible h2::after,
	.section h2.reveal.is-visible::after,
	.reveal.is-visible .section h2::after { width: clamp(48px, 12%, 120px); }
	/* Fallback: if this heading isn't inside a reveal wrapper, draw on hover. */
	.section h2:hover::after { width: clamp(48px, 12%, 120px); }

	/* 3d. Cards & tiles lift gently and their image eases in on hover. */
	.dest-tile, .tour-card, .card, .pillar, .plan-step {
		transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
	}
	.dest-tile:hover, .tour-card:hover, .card:hover, .pillar:hover {
		transform: translateY(-6px); box-shadow: var(--shadow);
	}

	/* 3e. The search card gets a soft, slow gold aura — an "art" focal point
	   without motion sickness (opacity pulse, no movement). */
	.searchbar {
		position: relative;
		animation: aaa-aura 6s ease-in-out infinite;
	}
	@keyframes aaa-aura {
		0%, 100% { box-shadow: var(--shadow); }
		50%      { box-shadow: 0 18px 50px -20px rgba(238,174,5,.45), var(--shadow); }
	}

	/* 3f. A thin animated gold seam along the top of deep-brown panels — a
	   unique, quiet brand flourish that reads as temple gilding. */
	.section--forest { position: relative; }
	.section--forest::before {
		content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
		background: linear-gradient(90deg, transparent, var(--gold) 20%, #fff2c0 50%, var(--gold) 80%, transparent);
		background-size: 200% 100%;
		animation: aaa-seam 8s linear infinite;
		opacity: .8;
	}
	@keyframes aaa-seam { from { background-position: 200% 0; } to { background-position: -200% 0; } }

	/* 3g. In-content links get an underline that draws left-to-right on hover. */
	.entry-content a:not(.btn) {
		background-image: linear-gradient(var(--gold), var(--gold));
		background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
		transition: background-size .3s ease; text-decoration: none;
		padding-bottom: 1px;
	}
	.entry-content a:not(.btn):hover,
	.entry-content a:not(.btn):focus-visible { background-size: 100% 2px; }
}

/* =========================================================================
   4. Focus polish — a consistent, visible gold focus ring (accessibility),
      shown regardless of motion preference.
   ========================================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 3px;
}

/* =========================================================================
   5. Journey-map intro — highlighted frame around the merged paragraph.
      Gives the (now heading-less) intro real presence: a taller, gold-
      accented callout built on the brand tokens, responsive and overflow-safe.
   ========================================================================= */
.journey-intro-frame {
	max-width: 900px;
	margin-inline: auto;
	margin-bottom: 40px;
	padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px);
	background: linear-gradient(140deg, var(--paper-2), var(--card) 70%);
	border: 1px solid var(--line);
	border-left: 5px solid var(--gold);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.journey-intro-frame .lead {
	margin: 0;
	max-width: none;
	font-size: clamp(1.06rem, 1.5vw, 1.3rem);
	line-height: 1.75;
	color: var(--ink);
}
/* A quiet gilded top seam echoes the brand's temple-gold accent. */
@media (prefers-reduced-motion: no-preference) {
	.journey-intro-frame { position: relative; overflow: hidden; }
	.journey-intro-frame::before {
		content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
		background: linear-gradient(90deg, transparent, var(--gold) 20%, #fff2c0 50%, var(--gold) 80%, transparent);
		background-size: 200% 100%; animation: aaa-seam 8s linear infinite; opacity: .85;
	}
}
@media (max-width: 560px) {
	.journey-intro-frame { border-left-width: 4px; }
}

/* =========================================================================
   6. Responsive fixes for hard-coded 3-column grids that shipped without
      breakpoints — the "Choose your journey" pillars (History / Culture /
      Adventure) and the seven "Special Highlight Tours". Both stayed 3-across
      on every screen and overflowed on tablet/phone. `:not(--4/--stacked)`
      keeps the separate four-pillar grid (which has its own breakpoints)
      untouched. minmax(0,1fr) lets tracks shrink instead of blowing out.
   ========================================================================= */
.pillar-grid:not(.pillar-grid--4):not(.pillar-grid--stacked) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
	.pillar-grid:not(.pillar-grid--4):not(.pillar-grid--stacked) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.pillar-grid:not(.pillar-grid--4):not(.pillar-grid--stacked) { grid-template-columns: 1fr; }
}

.htours__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .htours__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .htours__grid { grid-template-columns: 1fr; } }

/* The highlight-tours frame and its cards must never exceed the viewport. */
.htours__frame { max-width: 100%; }
.htours__card, .pillar-card { min-width: 0; }
.htours__card * , .pillar-card * { max-width: 100%; }

/* "More ways to browse" chips: wrap on desktop, scroll cleanly on small
   screens — never a cramped fixed row. */
.exp-rail, .browse-rail, .exp-tiles {
	display: flex; flex-wrap: wrap; gap: 10px;
}
@media (max-width: 560px) {
	.exp-rail, .browse-rail, .exp-tiles {
		flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.exp-rail::-webkit-scrollbar, .browse-rail::-webkit-scrollbar, .exp-tiles::-webkit-scrollbar { display: none; }
}

/*!
 * Angkor Asia Adventures — Design Elevation Layer ("high version")
 * Loaded after polish.css. Additive and reversible: it refines typography,
 * spacing, cards, CTAs, mobile ergonomics, contrast and conversion cues on
 * the theme's existing tokens/classes. Remove this file and the theme falls
 * back to its prior styling with no breakage.
 *
 * Targets the code-movable score gaps: UX/Visual Design, Mobile UX,
 * Booking/Conversion, and Accessibility (contrast + tap targets + focus).
 * ========================================================================= */

/* -------------------------------------------------------------------------
   0. Refined tokens — elevation ramp + AA-safe muted ink. Kept as new vars
      so nothing existing is overwritten; rules below opt into them.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   1. Typography — a fluid, hierarchical scale. Bigger, tighter display type;
      comfortable body measure. Improves visual hierarchy on every device.
   ------------------------------------------------------------------------- */
body { font-size: clamp(1rem, .96rem + .2vw, 1.075rem); line-height: 1.65; }
h1, .hero__title { font-family: var(--font-display); line-height: 1.06; letter-spacing: -0.015em; font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.9rem); }
h2 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.01em; font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem); }
h3 { font-family: var(--font-display); line-height: 1.2; font-size: clamp(1.22rem, 1.05rem + .7vw, 1.6rem); }
.lead { font-size: clamp(1.06rem, 1rem + .5vw, 1.28rem); line-height: 1.7; }
p, li { max-width: 72ch; }               /* readable measure */
.hero p, .hero .lead, .section--forest p { max-width: 66ch; }

/* -------------------------------------------------------------------------
   2. Contrast (accessibility) — nudge muted body text to meet WCAG AA.
   ------------------------------------------------------------------------- */
.section p, .lead, .tour-card p, .htours__card p, .pillar-card p, .card p, figcaption, .meta, small {
	color: var(--ink-soft-aa);
}

/* -------------------------------------------------------------------------
   3. Cards — one consistent, elevated system across every card type.
   ------------------------------------------------------------------------- */
.tour-card, .htours__card, .pillar-card, .card, .dest-tile {
	border-radius: 16px;
	box-shadow: var(--elev-1);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tour-card { overflow: hidden; }
.tour-card img, .dest-tile img { transition: transform .5s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
	.tour-card:hover, .htours__card:hover, .pillar-card:hover, .card:hover, .dest-tile:hover {
		transform: translateY(-6px); box-shadow: var(--elev-3);
	}
	.tour-card:hover img, .dest-tile:hover img { transform: scale(1.05); }
}
/* Keep card media a stable ratio so grids never jump (CLS + visual order). */
.tour-card > a > img, .tour-card .tour-card__media img, .dest-tile img {
	aspect-ratio: 4 / 3; width: 100%; object-fit: cover;
}

/* -------------------------------------------------------------------------
   4. Buttons & CTAs — clearer hierarchy, depth, and conversion emphasis.
      Larger tap targets everywhere (Mobile UX + Accessibility).
   ------------------------------------------------------------------------- */
.btn {
	min-height: 48px; padding-inline: 1.35em; border-radius: 999px;
	font-weight: 700; letter-spacing: .01em;
	transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s ease;
}
.btn--gold {
	box-shadow: 0 6px 16px -8px rgba(238,174,5,.8);
	font-weight: 800;
}
@media (prefers-reduced-motion: no-preference) {
	.btn--gold:hover, .btn--forest:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
}
.btn--block { min-height: 52px; font-size: 1.05rem; }

/* Primary in-card action reads as the obvious next step. */
.tour-card .btn, .htours__card .btn, .booking .btn--block { width: 100%; justify-content: center; }

/* -------------------------------------------------------------------------
   5. Trust & conversion cues — style the "Licensed guide / Free cancellation /
      From … / On request" microcopy into calm, credible chips. Targets the
      common hooks; harmless where a class is absent.
   ------------------------------------------------------------------------- */
.tour-card__trust, .card__trust, .htours__trust,
[class*="badge"], .assure, .booking__assure {
	font-size: .82rem; color: var(--forest); font-weight: 600;
}
.price, .tour-card__price, .htours__price {
	font-family: var(--font-display); font-weight: 700; color: var(--ink);
}
.price small, .tour-card__price small { color: var(--ink-soft-aa); font-weight: 500; }

/* Sticky mobile booking bar reads as a confident, tappable CTA. */
@media (max-width: 860px) {
	.mbook { box-shadow: 0 -8px 24px -12px rgba(24,11,2,.35); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
	.mbook .btn { min-height: 50px; }
}

/* -------------------------------------------------------------------------
   6. Spacing rhythm & containers — calmer, more premium whitespace.
   ------------------------------------------------------------------------- */
.section { padding-block: clamp(52px, 8vw, 104px); }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.wrap, .wrap-wide { padding-inline: clamp(16px, 4vw, 32px); }

/* -------------------------------------------------------------------------
   7. Focus — a single strong, visible ring for keyboard users (a11y).
   ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none; box-shadow: var(--focus-ring); border-radius: 6px;
}

/* -------------------------------------------------------------------------
   8. Mobile ergonomics — comfortable base size, tap targets, no cramped rows.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.section { padding-block: 44px; }
	.primary-nav a, .header-cart, .footer a { min-height: 44px; display: inline-flex; align-items: center; }
	.searchbar { gap: 10px; }
	.searchbar input, .searchbar select, .searchbar .btn { min-height: 50px; }
}

/* -------------------------------------------------------------------------
   9. Images — lazy + async decode fallback (perf/CLS) for content images.
      (WordPress adds loading=lazy to most; this covers hand-authored ones.)
   ------------------------------------------------------------------------- */
.entry-content img:not([loading]) { content-visibility: auto; }


/* =========================================================================
   4.0.0 REDESIGN LAYER — loaded last. Uses tokens only; no raw hex.
   ========================================================================= */

/* ---- Base & type ------------------------------------------------------- */
body { background: var(--paper); color: var(--ink); }
.section--paper2 { background: var(--paper-2); }
::selection { background: var(--gold); color: var(--forest-deep); }
:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font: 600 .74rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
	color: var(--gold-deep);
}
.section--forest .eyebrow, .hero .eyebrow { color: var(--gold); }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { text-wrap: balance; }
.section-head p { color: var(--ink-soft); }

/* ---- Buttons: one shape, one focus, one hierarchy ---------------------- */
.btn {
	border-radius: var(--radius-pill); font-weight: 600; letter-spacing: .01em;
	padding: .8em 1.5em; min-height: 46px;
	transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn--gold { background: var(--gold); color: var(--forest-deep); box-shadow: var(--elev-1); }
.btn--gold:hover { background: var(--gold-deep); color: #fff; box-shadow: var(--elev-2); }
.btn--forest:hover { background: var(--forest-deep); }
.btn--ghost { border-width: 1.5px; }

/* ---- Header: one calm row ---------------------------------------------- */
.site-header { background: color-mix(in srgb, var(--paper) 92%, transparent); }
.header-inner { min-height: 68px; gap: clamp(12px, 2vw, 28px); }
.brand__logo--img { width: 52px; height: 52px; box-shadow: 0 0 0 2px var(--gold); }
.brand__name { font-size: 1.28rem; letter-spacing: -.01em; }
/* The slogan lives in the footer and hero; the header stays a single line. */
.site-header .brand__slogan { display: none; }
.primary-nav a { font-size: .92rem; padding: 8px 12px; }
.primary-nav a:hover,
.primary-nav .current-menu-item > a { background: var(--paper-2); color: var(--forest); }
.header-phone small { color: var(--ink-soft); }
@media (max-width: 1280px) { .header-phone { display: none; } }

/* ---- Hero: photography first, text on a left-weighted scrim ------------- */
.hero { min-height: min(88vh, 800px); }
.hero__media::after {
	background:
		linear-gradient(90deg, rgba(24,11,2,.72) 0%, rgba(24,11,2,.38) 48%, rgba(24,11,2,.08) 100%),
		linear-gradient(180deg, rgba(24,11,2,0) 55%, rgba(24,11,2,.7) 100%);
}
.hero__inner { padding-block: clamp(72px, 12vh, 140px) clamp(88px, 12vh, 120px); }
.hero h1 { max-width: 14ch; text-wrap: balance; text-shadow: none; }
.hero__heading { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); color: var(--gold-soft); margin: .6rem 0 .4rem; }
.hero__sub { color: rgba(255,255,255,.88); max-width: 56ch; }

/* ---- Search bar: floats over the hero edge ------------------------------ */
.searchbar {
	position: relative; z-index: 5; margin-top: -48px;
	background: var(--card); border: 1px solid var(--line);
	border-radius: 20px; box-shadow: var(--elev-3);
}
@media (max-width: 640px) { .searchbar { margin-top: -28px; border-radius: var(--radius); } }

/* ---- Cards ------------------------------------------------------------- */
.tour-card, .htours__card, .pillar-card, .card, .dest-tile {
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: var(--elev-1);
}
.tour-card .price, .tour-card__price { color: var(--forest); font-family: var(--font-display); font-weight: 600; }
.tour-card .price del, .price__was { color: var(--ink-soft); opacity: .7; }
.tour-card__badge, .badge--sale { background: var(--laterite); color: #fff; border-radius: var(--radius-pill); }
.badge--available, .is-available { color: var(--jungle); background: var(--jungle-soft); }

/* ---- Footer ------------------------------------------------------------ */
.site-footer { background: var(--forest-deep); color: color-mix(in srgb, var(--paper) 78%, transparent); }
.site-footer h4 { color: var(--gold); font: 600 .78rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer a { color: inherit; transition: color .2s var(--ease); }
.site-footer a:hover { color: var(--gold); }
.footer-brand .brand__word { color: #fff; }
.footer-brand .brand__word--accent { color: var(--gold); }

/* ---- Brand-agnostic plugin surfaces (aaa-core discovery, AAAOS pages) --- */
.aaaos-disc, .aaaos-pmt, .aaaos-contact { --aaaos-brand: var(--forest); --aaaos-accent: var(--gold-deep); }

@media (forced-colors: active) { .btn { border: 2px solid ButtonText; } }