/*!
 * 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.
   ------------------------------------------------------------------------- */
:root {
	--elev-1: 0 1px 2px rgba(24,11,2,.06), 0 2px 6px rgba(24,11,2,.06);
	--elev-2: 0 4px 10px -4px rgba(24,11,2,.12), 0 10px 24px -12px rgba(24,11,2,.18);
	--elev-3: 0 10px 24px -10px rgba(24,11,2,.20), 0 24px 48px -20px rgba(24,11,2,.28);
	--ink-soft-aa: #574023;         /* slightly deeper than --ink-soft for AA on paper */
	--focus-ring: 0 0 0 3px rgba(238,174,5,.55);
	--ease: cubic-bezier(.2,.8,.2,1);
}

/* -------------------------------------------------------------------------
   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; }