* { box-sizing: border-box; }

/* Never let media or embeds force horizontal scroll on small screens. */
img, video, iframe, svg, canvas { max-width: 100%; }
img { height: auto; }
.oga-card__media img, .oga-card__img { height: 100%; }
.oga-logo__img, .oga-logo__svg { height: 54px; }

body {
	font-family: var(--oga-font-body);
	color: var(--oga-ink);
	background: var(--oga-bg);
	margin: 0;
	line-height: 1.6;
}

a { color: var(--oga-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Headings — one consistent scale, weight, and rhythm ───────────── */
h1, h2, h3, h4 {
	font-family: var(--oga-font-heading);
	color: var(--oga-ink);
	line-height: 1.22;
	letter-spacing: -0.012em;
	margin: 0 0 var(--oga-space-sm);
	font-weight: 600;
	text-wrap: balance;
}
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; }
p  { margin: 0 0 var(--oga-space-sm); }
p:last-child { margin-bottom: 0; }

.oga-container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--oga-space-md);
}

/* ── Site header / footer ─────────────────────────────────────────── */
.oga-site-header {
	border-bottom: 1px solid var(--oga-border);
	padding: var(--oga-space-sm) 0;
}
.oga-site-header .oga-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oga-space-md);
}
/* flex: 0 0 auto — the logo must never shrink or be squeezed by the nav;
   without it, flexbox treats it as shrinkable and it's the first thing to
   get compressed into a wrap when the header is tight (see oga-logo__word). */
.oga-logo { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; color: var(--oga-logo-navy); text-decoration: none; }
.oga-logo:hover { text-decoration: none; }
.oga-logo img,
.oga-logo__img { display: block; height: 54px; width: auto; }
.oga-logo__mark { color: var(--oga-logo-navy); flex-shrink: 0; }
.oga-logo__svg { display: block; height: 54px; width: auto; }
/* Horizontal ("row") wordmark beside the mark. Always one line — at every
   breakpoint the icon/font/gap sizes below are tuned so this fits without
   wrapping ("Online Guide" and "Association" breaking onto two lines is
   the one thing this block must never do). */
.oga-logo__word {
	display: inline-flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; gap: 0 7px;
	line-height: 1.1;
}
.oga-logo__name { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--oga-logo-navy); }
.oga-logo__sub  { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--oga-logo-red); }
@media (max-width: 600px) {
	.oga-logo { gap: 9px; }
	.oga-logo img, .oga-logo__img, .oga-logo__svg { height: 44px; }
	.oga-logo__name, .oga-logo__sub { font-size: 18px; }
}
/* Smallest phones (iPhone SE and similar ~320-380px): logo + hamburger both
   need to fit on the same row beside each other. Tighten everything one
   more notch instead of letting either wrap or overflow off-screen. */
@media (max-width: 380px) {
	.oga-site-header .oga-container { gap: 10px; }
	.oga-logo { gap: 8px; }
	.oga-logo img, .oga-logo__img, .oga-logo__svg { height: 38px; }
	.oga-logo__name, .oga-logo__sub { font-size: 15px; }
}
.oga-nav ul { list-style: none; display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; }
/* nowrap — a nav label (e.g. "Marketing services", "Tourist Shop") breaking
   mid-word onto a second line is the other thing this header must never do. */
.oga-nav a { display: inline-flex; align-items: center; gap: 6px; color: var(--oga-ink); white-space: nowrap; }
.oga-nav__shop { color: var(--oga-blue); font-weight: 600; }

/* Hamburger toggle — hidden on desktop, shown under the nav breakpoint. */
.oga-nav-toggle {
	display: none;
	align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	background: transparent; border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius); color: var(--oga-blue); cursor: pointer;
}
.oga-nav-toggle:hover { border-color: var(--oga-blue); background: var(--oga-bg-soft); }
.oga-nav-toggle__close { display: none; }
.oga-nav-toggle[aria-expanded="true"] .oga-nav-toggle__open { display: none; }
.oga-nav-toggle[aria-expanded="true"] .oga-nav-toggle__close { display: inline-flex; }

/* Accessible visually-hidden text. */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.oga-site-footer {
	border-top: 1px solid var(--oga-border);
	margin-top: var(--oga-space-xl);
	padding: var(--oga-space-lg) 0;
	color: var(--oga-ink-muted);
	font-size: 14px;
}
.oga-site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--oga-space-md); }
.oga-site-footer__brand { display: flex; align-items: center; gap: 10px; }
.oga-site-footer__brand .oga-icon { color: var(--oga-blue); }
.oga-site-footer__brand p { margin: 0; }
.oga-site-footer__links { display: flex; flex-wrap: wrap; gap: var(--oga-space-md); margin: 0; padding: 0; list-style: none; }
.oga-site-footer__links a { display: inline-flex; align-items: center; gap: 5px; }
.oga-site-footer__quick { display: flex; flex-wrap: wrap; gap: var(--oga-space-sm) var(--oga-space-md); margin: 0; width: 100%; order: 3; font-size: 12.5px; }
.oga-site-footer__quick a { color: var(--oga-ink-muted); text-decoration: none; }
.oga-site-footer__quick a:hover { color: var(--oga-saffron, var(--oga-red)); }

/* Footer variant of the site directory — same .oga-dir-* grid as the homepage
   section, tighter and with no eyebrow/title (only shown on non-front pages,
   see footer.php, so it never duplicates the homepage's #directory section). */
.oga-dir--footer { margin: 0 0 var(--oga-space-lg); padding-bottom: var(--oga-space-lg); border-bottom: 1px solid var(--oga-border); }
.oga-dir--footer .oga-dir-grid { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 20px 16px; }
.oga-dir--footer .oga-dir-col-head { font-size: 13px; }
.oga-dir--footer .oga-dir-link { font-size: 12.5px; }

/* Anchor targets (#skill-center, #industries, #directory, #faq) — harmless
   no-op today since the header isn't fixed, but keeps deep links from
   landing flush under a sticky header if one is added later. */
#skill-center, #industries, #directory, #guide-cambodia, #faq { scroll-margin-top: 90px; }

/* ── Icon system ───────────────────────────────────────────────────── */
.oga-icon { flex-shrink: 0; vertical-align: -0.15em; color: currentColor; }
.oga-card__meta .oga-icon,
.oga-single__meta .oga-icon { color: var(--oga-blue); margin-right: 2px; }
.oga-badge .oga-icon { margin-right: 3px; }
.oga-btn .oga-icon { margin-right: 0; color: currentColor; vertical-align: middle; }
h2 .oga-icon { color: var(--oga-blue); margin-right: 4px; }
.oga-checklist { list-style: none; margin: 0; padding: 0; }
.oga-checklist li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.oga-checklist .oga-icon { color: #1DA851; margin-top: 2px; }

/* ── Cards (tours / guides / services) · Airbnb / TripAdvisor style ──
   Image-first: rounded photo, soft shadow, lift + zoom on hover, clean
   type below. No boxed border — the imagery carries the card. */
.oga-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr));
	gap: var(--oga-space-lg);
	margin: var(--oga-space-lg) 0;
}
.oga-grid--feature { margin-bottom: var(--oga-space-md); }
.oga-card {
	display: block;
	background: transparent;
	border: none;
	border-radius: var(--oga-radius-lg);
	overflow: visible;
	transition: transform .18s ease;
}
.oga-card:hover { transform: translateY(-3px); text-decoration: none; }
.oga-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	min-height: 168px; /* floor for browsers without aspect-ratio support */
	border-radius: var(--oga-radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, var(--oga-blue) 0%, #2a54b0 55%, var(--oga-red, #d81f36) 145%);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
	transition: box-shadow .18s ease;
}
.oga-card:hover .oga-card__media { box-shadow: 0 10px 26px rgba(16, 24, 40, .16); }
.oga-card__media img,
.oga-card__img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform .35s ease;
}
.oga-card:hover .oga-card__media img { transform: scale(1.06); }
.oga-card__media-fallback {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
}
.oga-card__media-fallback .oga-icon { width: 34px; height: 34px; color: rgba(255, 255, 255, .92); }
.oga-card__badge {
	position: absolute; top: 10px; left: 10px; z-index: 1;
	font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
	color: #fff; background: rgba(3, 46, 161, .88);
	padding: 4px 9px; border-radius: 999px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
}
.oga-card__body { padding: 12px 2px 0; }
.oga-card__title {
	font-size: 16px; font-weight: 600; color: var(--oga-ink);
	margin: 0 0 4px; line-height: 1.3;
}
.oga-card__meta {
	display: flex; align-items: center; gap: 6px;
	font-size: 14px; color: var(--oga-ink-muted); margin: 0 0 6px;
}
.oga-card__meta .oga-icon { color: var(--oga-ink-muted); flex-shrink: 0; }
.oga-card__price { font-weight: 700; color: var(--oga-ink); font-size: 15px; }
.oga-card__price .amount,
.oga-card__price bdi { color: var(--oga-blue); }

/* ── Buttons ───────────────────────────────────────────────────────── */
.oga-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 22px;
	border-radius: var(--oga-radius);
	background: var(--oga-blue);
	color: #fff;
	font-weight: 600;
	line-height: 1.1;
	border: none;
	cursor: pointer;
	transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.oga-btn:hover { background: var(--oga-blue-dark); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(3, 46, 161, .18); }
.oga-btn:active { transform: translateY(0); box-shadow: none; }
.oga-btn--whatsapp { background: #1DA851; }
.oga-btn--whatsapp:hover { background: #168a41; }
.oga-btn--telegram { background: #229ED9; }
.oga-btn--telegram:hover { background: #1b87ba; }
.oga-btn--telegram .oga-icon { color: #fff; }
.oga-btn--outline { background: transparent; color: var(--oga-blue); border: 1px solid var(--oga-blue); }

/* Attention "hook" — Watch on YouTube. Brand-red with a soft pulsing glow so
   it stands out as the primary call to action (esp. on the blue CTA band).
   The pulse only runs when the visitor hasn't asked to reduce motion. */
.oga-btn--youtube {
	background: #ff0033;
	color: #fff;
	box-shadow: 0 0 0 0 rgba(255, 0, 51, .45);
}
.oga-btn--youtube:hover { background: #e4002b; color: #fff; box-shadow: 0 6px 16px rgba(255, 0, 51, .38); }
.oga-btn--youtube .oga-icon { color: #fff; }
@keyframes oga-yt-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 0, 51, .5); }
	70%  { box-shadow: 0 0 0 12px rgba(255, 0, 51, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 0, 51, 0); }
}
@media (prefers-reduced-motion: no-preference) {
	.oga-btn--youtube { animation: oga-yt-pulse 2.1s ease-out infinite; }
	.oga-btn--youtube:hover { animation: none; }
}

/* ── Single tour / guide / service layout ─────────────────────────── */
.oga-single { padding: var(--oga-space-lg) 0; }
.oga-single__hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--oga-radius-lg); }
.oga-single__title { font-size: 32px; margin: var(--oga-space-md) 0 var(--oga-space-xs); }
.oga-single__meta { color: var(--oga-ink-muted); margin-bottom: var(--oga-space-md); }
.oga-single__actions { display: flex; gap: var(--oga-space-xs); margin: var(--oga-space-md) 0; flex-wrap: wrap; }
.oga-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--oga-bg-soft);
	color: var(--oga-blue);
}

/* ══════════════════════════════════════════════════════════════════════
   EXPERT DETAIL FRAME — one framed-panel system shared by every single
   template (Tours / Guides / Marketing / Promote / News). Each detail
   section (Photos, Booking, Local map, Video, Tourist Shop) is a card with
   an accent-bar iconed title, so the whole detail page reads as one design.
   ══════════════════════════════════════════════════════════════════════ */
.oga-detail,
.oga-booking,
.oga-shop-block {
	margin: var(--oga-space-md) 0;
	padding: var(--oga-space-lg);
	border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius-lg);
	background: #fff;
	box-shadow: 0 1px 2px rgba(3, 46, 161, .04);
}
.oga-booking { background: var(--oga-bg-soft); }

/* Panel title: icon chip + label + hairline rule. */
.oga-detail__title,
.oga-booking > h2,
.oga-shop-block > h2 {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 var(--oga-space-sm); padding-bottom: 12px;
	font-size: 19px; line-height: 1.2;
	border-bottom: 1px solid var(--oga-border);
}
.oga-detail__title .oga-icon,
.oga-booking > h2 .oga-icon,
.oga-shop-block > h2 .oga-icon {
	flex: 0 0 auto; width: 34px; height: 34px; padding: 8px; border-radius: 9px;
	background: linear-gradient(135deg, rgba(3,46,161,.10), rgba(224,0,37,.10));
	color: var(--oga-blue);
}
.oga-detail__body > :first-child { margin-top: 0; }
.oga-detail__body > :last-child { margin-bottom: 0; }
.oga-detail__foot { margin: var(--oga-space-sm) 0 0; }

/* Photos */
.oga-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: var(--oga-space-xs); }
.oga-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--oga-radius-md); }

/* Video + map embeds */
.oga-video-embed, .oga-map-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--oga-radius-md); overflow: hidden; }
.oga-video-embed iframe, .oga-map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Booking actions */
.oga-booking__lead { color: var(--oga-ink-muted); margin: 0 0 var(--oga-space-sm); }
.oga-booking__actions { display: flex; flex-wrap: wrap; gap: var(--oga-space-xs); }
.oga-booking__actions .oga-btn { flex: 0 1 auto; }

@media (max-width: 560px) {
	.oga-detail, .oga-booking, .oga-shop-block { padding: var(--oga-space-md); }
	.oga-booking__actions .oga-btn,
	.oga-detail__foot .oga-btn { width: 100%; }
}

/* ── Homepage: video-forward hero + content sections ─────────────────────
   Added for the "Watch & Follow" homepage. Uses existing tokens only. */
/* Hero — centred like a classic destination-site banner (rather than the
   left-aligned "editorial dispatch" layout this replaces); the temple-dawn
   gradient behind the text is still the one bold move on this page, so the
   type itself stays a single solid colour. */
.oga-hero {
	padding: var(--oga-space-xl) 0 var(--oga-space-lg);
	text-align: center;
	background: linear-gradient(180deg, var(--oga-dawn) 0%, var(--oga-bg) 78%);
	border-radius: var(--oga-radius-lg);
}
.oga-hero__eyebrow {
	display: block; font-family: var(--oga-font-heading); font-style: italic;
	font-size: 17px; font-weight: 500; color: var(--oga-jungle); margin-bottom: 6px;
}
.oga-hero h1 {
	font-family: var(--oga-font-heading); font-weight: 600;
	font-size: 46px; line-height: 1.08; letter-spacing: -0.01em; margin: 0 auto 14px; max-width: 15ch;
}
.oga-hero__sub { color: var(--oga-ink-muted); font-size: 18px; max-width: 560px; margin: 0 auto var(--oga-space-md); }
.oga-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Keyword emphasis in the hero headline — a solid saffron ink colour, no
   gradient-clip trick, so it reads as a deliberate word choice rather than
   a decorative effect. */
.oga-hi { color: var(--oga-saffron); }
.oga-hi-soft { color: var(--oga-jungle); font-weight: 600; }

/* Inline SEO/AEO/GEO keyword highlight (semantic <mark>). Branded tint rather
   than the browser default yellow, so emphasised keywords read as intentional. */
.oga-kw {
	background: linear-gradient(180deg, transparent 60%, rgba(224,0,37,.16) 0);
	color: inherit; font-weight: 600; padding: 0 1px; border-radius: 2px;
}

/* ── Front-page "Featured" band — dressed in the brand mark's own navy→red
   colors (--oga-logo-navy / --oga-logo-red / --oga-logo-cream, sampled from
   oga-logo-icon.png), so this one hero-weight spot on the homepage reads as
   unmistakably "the Online Guide" the way TripAdvisor's green ribbon does —
   while every other button/link/accent in the theme keeps using the
   separate UI-accent palette (--oga-blue / --oga-red). See BRANDING.md +
   the palette note in tokens.css: this is a deliberate, scoped use of the
   mark's colors as a section treatment, not a re-alias of the UI tokens. */
.oga-front-feature {
	background: linear-gradient(135deg, var(--oga-logo-navy) 0%, var(--oga-logo-navy) 58%, var(--oga-logo-red) 100%);
	border: none;
	border-radius: var(--oga-radius-lg);
	padding: var(--oga-space-lg) var(--oga-space-md);
	color: var(--oga-logo-cream);
}
.oga-front-feature h2 { color: var(--oga-logo-cream); }
.oga-front-feature > p { color: rgba(253, 250, 243, .86); }
.oga-front-feature .oga-frames { margin-bottom: var(--oga-space-sm); }
.oga-front-feature__cta { margin-top: 0 !important; }
.oga-front-feature__cta .oga-btn { background: var(--oga-logo-cream); color: var(--oga-logo-navy); }
.oga-front-feature__cta .oga-btn:hover { background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.22); }
@media (max-width: 640px) {
	.oga-front-feature { padding: var(--oga-space-md) var(--oga-space-sm); }
}


.oga-faq { margin: var(--oga-space-xl) 0; }
.oga-faq > h2 { display: flex; align-items: center; gap: 8px; }
.oga-faq__lead { color: var(--oga-ink-muted); max-width: 720px; margin: 0 0 var(--oga-space-md); }
.oga-faq__list { display: grid; gap: var(--oga-space-xs); }
.oga-faq__item {
	border: 1px solid var(--oga-border); border-radius: var(--oga-radius-md);
	background: #fff; padding: 4px 18px;
}
.oga-faq__item > summary {
	list-style: none; cursor: pointer; padding: 14px 0; font-weight: 700;
	color: var(--oga-blue); display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.oga-faq__item > summary::-webkit-details-marker { display: none; }
.oga-faq__item > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--oga-red); flex: 0 0 auto; }
.oga-faq__item[open] > summary::after { content: "\2212"; }
.oga-faq__item > p { margin: 0 0 16px; color: var(--oga-ink); line-height: 1.6; }

.oga-section-intro { max-width: 780px; }
.oga-section-intro p { color: var(--oga-ink-muted); font-size: 17px; }

.oga-chip-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: var(--oga-space-sm); margin: var(--oga-space-md) 0;
}
.oga-chip {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius-md); background: var(--oga-bg);
	font-weight: 500; font-size: 15px; color: var(--oga-ink); text-decoration: none;
}
.oga-chip .oga-icon { color: var(--oga-blue); flex-shrink: 0; }
a.oga-chip:hover { border-color: var(--oga-blue); text-decoration: none; }

.oga-social-row { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--oga-space-md) 0; }
.oga-social-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px; border-radius: 999px;
	border: 1px solid var(--oga-border); background: var(--oga-bg);
	color: var(--oga-ink); font-weight: 600; font-size: 14px; text-decoration: none;
}
.oga-social-pill .oga-icon { color: var(--oga-blue); }
a.oga-social-pill:hover { border-color: var(--oga-blue); background: var(--oga-bg-soft); text-decoration: none; }

.oga-cta-band {
	background: var(--oga-blue); color: #fff; border-radius: var(--oga-radius-lg);
	padding: var(--oga-space-lg); margin: var(--oga-space-xl) 0; text-align: center;
}
.oga-cta-band h2 { color: #fff; margin: 0 0 10px; }
.oga-cta-band p { color: rgba(255,255,255,.9); max-width: 680px; margin: 0 auto var(--oga-space-sm); }
.oga-cta-band__tagline { font-weight: 700; letter-spacing: .03em; }
.oga-cta-band .oga-btn { background: #fff; color: var(--oga-blue); }
.oga-cta-band .oga-btn:hover { background: var(--oga-bg-soft); }
.oga-cta-band__fine { font-size: 13px; color: rgba(255,255,255,.75); margin-top: var(--oga-space-sm); }

/* ── Marketing "hook" band — 300+ services promo frame ────────────────────
   Same attention-grabbing intent as .oga-btn--youtube, but as a standalone
   framed section: red/blue gradient border, count badge, price callout,
   and a chip row of the service categories. Used on the /marketing/
   archive (archive-oga_service.php) and as a homepage teaser. */
.oga-hook-band {
	position: relative;
	border-radius: var(--oga-radius-lg);
	padding: 2px;
	margin: var(--oga-space-lg) 0;
	background: linear-gradient(120deg, var(--oga-red, #d81f36), var(--oga-blue));
}
.oga-hook-band__inner {
	background: #fff;
	border-radius: calc(var(--oga-radius-lg) - 2px);
	padding: var(--oga-space-lg);
	text-align: center;
}
.oga-hook-band__eyebrow {
	display: inline-block; font-family: var(--oga-font-heading); font-style: italic;
	font-size: 16px; font-weight: 500; color: var(--oga-saffron); margin-bottom: 10px;
}
.oga-hook-band h2 { margin: 0 0 10px; }
.oga-hook-band p { color: var(--oga-ink-muted); max-width: 680px; margin: 0 auto var(--oga-space-sm); }
.oga-hook-band__price {
	font-size: 20px; font-weight: 700; color: var(--oga-ink, #111);
	margin-bottom: var(--oga-space-sm) !important;
}
.oga-hook-band__price strong { color: var(--oga-red, #d81f36); font-size: 26px; }
.oga-hook-band__chips {
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
	margin: 0 0 var(--oga-space-md);
}
.oga-hook-band__chips span {
	font-size: 13px; font-weight: 600; color: var(--oga-blue);
	background: var(--oga-bg-soft); border-radius: 999px; padding: 5px 12px;
}
.oga-hook-band__lead {
	color: var(--oga-ink-muted); max-width: 640px; margin: 0 auto var(--oga-space-md) !important;
}

/* Directory Feature Hook — same band, chips are real links (one per pillar
   group) instead of plain tags, since each points into a different group. */
.oga-hook-band--directory .oga-hook-band__chips a {
	font-size: 13px; font-weight: 600; color: var(--oga-blue);
	background: var(--oga-bg-soft); border-radius: 999px; padding: 5px 12px;
	text-decoration: none; transition: background .14s ease, color .14s ease;
}
.oga-hook-band--directory .oga-hook-band__chips a:hover { background: var(--oga-blue); color: #fff; }

/* ── Listing archives — one shared structure for Tours / Guides / Marketing /
   Promote / News: archive header → Online Guide roles band → card grid. ── */
.oga-archive { padding-top: var(--oga-space-lg); padding-bottom: var(--oga-space-xl); }
.oga-archive__header { text-align: center; margin-bottom: var(--oga-space-lg); }
.oga-archive__eyebrow {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--oga-red); margin-bottom: 10px;
}
.oga-archive__header h1 { margin: 0 0 10px; }
.oga-archive__sub { color: var(--oga-ink-muted); max-width: 660px; margin: 0 auto; }
.oga-archive__header h1::after {
	content: ""; display: block; width: 46px; height: 3px; margin: 14px auto 0;
	border-radius: 3px; background: linear-gradient(90deg, var(--oga-blue), var(--oga-red));
}

/* Personal Skill Center — the six Online Guide roles, shared on every archive. */
.oga-roles {
	margin: 0 0 var(--oga-space-xl);
	padding: var(--oga-space-lg);
	border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius-lg);
	background: var(--oga-bg-soft);
}
.oga-roles__head { text-align: center; margin-bottom: var(--oga-space-md); }
.oga-roles__eyebrow {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: #fff; margin-bottom: 12px;
	background: linear-gradient(90deg, var(--oga-red), var(--oga-blue));
	border-radius: 999px; padding: 6px 16px;
}
.oga-roles__head h2 { margin: 0 0 8px; }
.oga-roles__head p { color: var(--oga-ink-muted); max-width: 680px; margin: 0 auto; }
.oga-roles__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--oga-space-sm);
}
.oga-role-card {
	display: flex; flex-direction: column; gap: 6px;
	padding: 18px; border: 1px solid var(--oga-border); border-radius: var(--oga-radius-md);
	background: #fff; color: var(--oga-ink); text-decoration: none;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.oga-role-card:hover {
	text-decoration: none; border-color: var(--oga-blue); transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(3, 46, 161, .10);
}
.oga-role-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: linear-gradient(135deg, rgba(3,46,161,.10), rgba(224,0,37,.10));
	color: var(--oga-blue);
}
/* Directory pillar cards (oga_core_render_directory_pillar_cards) reuse
   .oga-role-card but pass a raw emoji glyph, not an oga_core_icon() SVG —
   the SVGs are pre-sized via their `size` arg, emoji need an explicit
   font-size to read at the same visual weight inside the 44px circle. */
.oga-role-card__icon { font-size: 22px; line-height: 1; }
.oga-role-card__label { font-weight: 700; font-size: 16px; color: var(--oga-blue); }
.oga-role-card__blurb { font-size: 13.5px; color: var(--oga-ink-muted); line-height: 1.5; }
@media (max-width: 860px) { .oga-roles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
	.oga-roles { padding: var(--oga-space-md); }
	.oga-roles__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) { .oga-hero h1 { font-size: 30px; } }

/* ── Homepage polish: centered section headings, even rhythm ─────────────
   Scoped to .oga-home so archives / single templates keep their own layout.
   Section titles are centered with a small blue→red accent underline; intro
   copy, chip grids, and the social row are centered for a clean, balanced
   composition above the (left-aligned) card grids. */
.oga-home > section { margin-bottom: var(--oga-space-xl); }
.oga-home > section:last-child { margin-bottom: var(--oga-space-lg); }

.oga-home > section > h2 {
	text-align: center;
	margin-bottom: var(--oga-space-md);
}
.oga-home > section:not(.oga-cta-band):not(.oga-front-feature) > h2::after {
	content: "";
	display: block;
	width: 46px; height: 3px;
	margin: 12px auto 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--oga-blue), var(--oga-red, #d81f36));
}
.oga-front-feature > h2::after {
	content: "";
	display: block;
	width: 46px; height: 3px;
	margin: 12px auto 0;
	border-radius: 3px;
	background: var(--oga-logo-cream);
	opacity: .8;
}

/* Centered, readable intro / trailing copy and "view all" rows. */
.oga-home > section > p {
	text-align: center;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.oga-home .oga-section-intro {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.oga-home .oga-chip-grid { justify-content: center; }
.oga-home .oga-social-row { justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — phones · tablets · laptops · large screens
   Layered on top of the fluid grid/flex base. Fluid primitives already
   reflow the card/chip grids; these breakpoints tune navigation, spacing,
   typography, and stacking so every device gets a clean layout.
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet & below — collapse the primary nav into the hamburger panel.
   1100px (not the more typical ~900px) because with the full 6-item nav
   ("Tours · Guides · Marketing services · Promote · News · Tourist Shop")
   plus the logo held to nowrap above, 900-1080px is a dead zone where a
   full desktop nav row no longer fits but the breakpoint hadn't kicked in
   yet — the exact gap that was causing the wrapping. 1100px has margin to
   spare above that measured threshold. */
@media (max-width: 1100px) {
	.oga-nav-toggle { display: inline-flex; }
	.oga-site-header .oga-container { flex-wrap: wrap; row-gap: var(--oga-space-sm); }
	.oga-nav { display: none; order: 3; flex-basis: 100%; width: 100%; }
	.oga-nav.is-open { display: block; }
	.oga-nav ul {
		flex-direction: column; align-items: stretch; gap: 0;
		border-top: 1px solid var(--oga-border); margin-top: var(--oga-space-xs);
	}
	.oga-nav li { border-bottom: 1px solid var(--oga-border); }
	.oga-nav a { width: 100%; padding: 14px 4px; font-size: 16px; }
}

/* Tablet portrait — tighten hero + section rhythm, smaller headings. */
@media (max-width: 768px) {
	:root { --oga-space-xl: 44px; --oga-space-lg: 30px; }
	.oga-hero { padding: var(--oga-space-lg) 0 var(--oga-space-md); }
	.oga-hero h1 { font-size: 34px; }
	.oga-hero__sub { font-size: 16px; }
	.oga-single__title { font-size: 26px; }
	.oga-single__hero img { max-height: 300px; }
	.oga-cta-band, .oga-hook-band__inner, .oga-roles { padding: var(--oga-space-md); }
	.oga-grid { gap: var(--oga-space-md); }
}

/* Phones — comfortable padding, readable type, single-column stacks,
   full-width buttons for easy tapping. */
@media (max-width: 560px) {
	.oga-container { padding-left: var(--oga-space-sm); padding-right: var(--oga-space-sm); }
	h1 { font-size: 27px; }
	h2 { font-size: 21px; }
	.oga-hero h1 { font-size: 28px; }
	.oga-grid { grid-template-columns: 1fr; gap: var(--oga-space-md); }
	.oga-chip-grid { grid-template-columns: 1fr; }
	.oga-hero__cta { flex-direction: column; }
	.oga-hero__cta .oga-btn,
	.oga-single__actions .oga-btn { width: 100%; }
	.oga-site-footer__inner { flex-direction: column; align-items: flex-start; text-align: left; }
	.oga-site-footer__links { flex-wrap: wrap; gap: var(--oga-space-sm); }
	.oga-hook-band__price strong { font-size: 22px; }
}

/* Large desktops — let content breathe a little wider. */
@media (min-width: 1400px) {
	.oga-container { max-width: 1240px; }
}

/* ── Online Guide Cambodia (oga_core_render_online_guide_cambodia) ──── */
.oga-ogc{ margin: 40px 0; }
.oga-ogc__head{ text-align:center; margin:0 0 22px; }
.oga-ogc__head h2{ font-family: var(--oga-font-heading); font-size: clamp(24px,4vw,34px); color: var(--oga-ink); margin:0 0 6px; }
.oga-ogc__sub{ color: var(--oga-ink-muted); margin:0; font-size:15px; }

/* ── OS-systems feature grid ([oga_core_render_os_features]) ───────── */
.oga-osf{ margin: 40px 0; }
.oga-osf-head{ text-align:center; margin:0 0 22px; }
.oga-osf-head h2{ font-family: var(--oga-font-heading); font-size: clamp(24px,4vw,34px); color: var(--oga-ink); margin:0 0 6px; }
.oga-osf-head p{ color: var(--oga-ink-muted); margin:0; font-size:15px; }
.oga-osf-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(min(190px,100%),1fr)); gap:14px; }
.oga-osf-card{ --osf: var(--oga-blue); position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 16px 16px; background: var(--oga-bg-soft, #fff); border:1px solid var(--oga-border); border-radius: var(--oga-radius-md, var(--oga-radius)); text-decoration:none; color: var(--oga-ink); overflow:hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.oga-osf-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--osf); opacity:.9; }
.oga-osf-card:hover{ transform: translateY(-3px); border-color: var(--osf); box-shadow: 0 14px 30px -18px var(--osf); }
.oga-osf-ic{ font-size:28px; line-height:1; }
.oga-osf-nm{ font-family: var(--oga-font-heading); font-size:16px; font-weight:700; }
.oga-osf-ds{ font-size:12px; color: var(--oga-ink-muted); line-height:1.45; }
.oga-osf-go{ margin-top:6px; font-size:13px; font-weight:700; color: var(--osf); }
@media (max-width:520px){ .oga-osf-grid{ grid-template-columns:1fr 1fr; gap:10px; } .oga-osf-card{ padding:14px 12px; } }

/* Industries We Serve strip — reuses .oga-osf-card, adds a small tag row in place of the go-link. */
.oga-osf-grid--industries{ grid-template-columns: repeat(auto-fill,minmax(min(170px,100%),1fr)); }
.oga-osf-card--industry{ --osf: var(--oga-saffron, var(--oga-blue)); gap:4px; padding:16px 14px 14px; }
.oga-osf-tags{ margin-top:4px; font-size:11px; letter-spacing:.03em; color: var(--oga-ink-muted); }
@media (max-width:520px){ .oga-osf-grid--industries{ grid-template-columns:1fr 1fr; } }

/* Full OGACE Directory — a column-per-group sitemap, sits between Industries and the Skill Center grid. */
.oga-dir-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:26px 20px; }
.oga-dir-col-head{ display:flex; align-items:center; gap:8px; font-family: var(--oga-font-heading); font-weight:700; font-size:15px; color: var(--oga-ink); margin:0 0 2px; }
.oga-dir-meta{ font-size:11px; color: var(--oga-ink-muted); margin:0 0 8px; }
.oga-dir-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.oga-dir-link{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:13.5px; color: var(--oga-ink-muted); text-decoration:none; line-height:1.4; transition: color .14s ease; }
.oga-dir-link:hover{ color: var(--oga-saffron, var(--oga-red)); }
.oga-dir-badge{ font-size:10px; letter-spacing:.03em; text-transform:uppercase; padding:1px 6px; border-radius:999px; border:1px solid var(--oga-border); color: var(--oga-ink-muted); }
@media (max-width:520px){ .oga-dir-grid{ grid-template-columns:1fr 1fr; gap:20px 14px; } }

/* ── Personal Skill Center: eyebrow + primary nav ─────────────────── */
.oga-osf-eyebrow{ font-family: var(--oga-font-body); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--oga-saffron, var(--oga-red)); margin:0 0 8px; }
.oga-osf-sub{ color: var(--oga-ink-muted); margin:0; font-size:15px; }
.oga-osf-nav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 22px; }
.oga-osf-navlink{ display:inline-flex; align-items:center; padding:8px 16px; border-radius:999px; border:1px solid var(--oga-border); background: var(--oga-bg-soft, #fff); color: var(--oga-ink); text-decoration:none; font-weight:600; font-size:14px; transition: border-color .14s ease, transform .14s ease, background .14s ease; }
.oga-osf-navlink:hover{ transform: translateY(-2px); border-color: var(--oga-saffron, var(--oga-red)); color: var(--oga-ink); }

/* ═══════════════════════════════════════════════════════════════════════
 * RESPONSIVE HARDENING  (v200400.32 — small-screen + cross-layer safety)
 * ───────────────────────────────────────────────────────────────────────
 * Net-new guards only. The grid minimums above were fixed at source with
 * min(…,100%); this block adds the cross-cutting rules that have no single
 * line to edit. Everything is scoped to `.oga-*` theme classes so it can
 * never reach — or fight — the OGACE Network plugin's surfaces (the plugin
 * ships its own `.ogace-harmony` spine). Additive; overrides nothing above.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Long unbroken strings (tour titles, URLs, booking refs) wrap instead of
 * forcing a card/track wider than the phone. */
.oga-card__title,
.oga-card__meta,
.oga-chip,
.oga-osf-card,
.oga-single__actions,
.oga-hero__title,
.oga-container p,
.oga-container li { overflow-wrap: anywhere; }

/* Flex/grid children default to min-width:auto and refuse to shrink below
 * their content, overflowing the row on mobile. Let the theme's own layout
 * children shrink. Deliberate non-shrinkers (logo, icons) already set
 * flex:0 0 auto / flex-shrink:0 above, and those still win. */
.oga-site-header .oga-container > *,
.oga-site-footer__inner > *,
.oga-grid > *,
.oga-osf-grid > *,
.oga-roles__grid > *,
.oga-card > *,
.oga-single__actions > *,
.oga-hero__cta > * { min-width: 0; }
.oga-logo, .oga-icon, .oga-logo__mark { min-width: auto; } /* restore intended non-shrink */

/* The theme's two built-in fixed widgets (layer switcher + connectors panel)
 * only render in STANDALONE mode — they stand down when the OGACE Network
 * plugin is active. Cap them to the viewport and lift them above the iOS home
 * indicator so they never spill off a small screen. */
#ogace-layer-switcher,
#ogace-connectors-status {
	max-width: min(calc(100vw - 24px), 360px);
	box-sizing: border-box;
}
@supports (padding: max(0px)) {
	#ogace-layer-switcher { bottom: max(20px, env(safe-area-inset-bottom)); }
	#ogace-connectors-status { bottom: max(80px, calc(env(safe-area-inset-bottom) + 60px)); }
}

/* Respect an OS reduced-motion preference for the theme's card/nav transitions. */
@media (prefers-reduced-motion: reduce) {
	.oga-osf-card,
	.oga-osf-navlink,
	.oga-card,
	.oga-btn { transition: none; }
}

/* Very small phones: keep the two-up OS-feature grid from feeling cramped and
 * ensure the roles grid is single-column below the theme's own 560px collapse. */
@media (max-width: 380px) {
	.oga-osf-grid { grid-template-columns: 1fr; }
}
/* End responsive hardening */

/* ── Association bar — between the Feature Feed and the video hero ──── */
.oga-assoc-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid var(--oga-border, #E7DFD0);
	margin-bottom: 8px;
}
.oga-assoc-bar__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}
.oga-assoc-bar__word {
	display: flex;
	gap: 6px;
	font-weight: 700;
	font-size: 15px;
	color: var(--oga-ink, #241F17);
}
.oga-assoc-bar__word--accent { color: var(--oga-saffron, #C97A1A); }
.oga-assoc-bar__links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.oga-assoc-bar__links a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--oga-ink-muted, #6B6152);
	text-decoration: none;
}
.oga-assoc-bar__links a:hover { color: var(--oga-saffron, #C97A1A); }
@media (max-width: 600px) {
	.oga-assoc-bar { justify-content: center; text-align: center; }
	.oga-assoc-bar__links { justify-content: center; gap: 12px; }
}