* { 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; }
/* Several full-bleed sections (.oga-photo-hero and similar) escape
   .oga-container's max-width with calc(50vw - 50%) negative margins.
   That trick can add a sub-pixel horizontal scrollbar on some
   browsers/zoom levels; overflow-x: hidden on the two root elements
   keeps that contained without affecting vertical scrolling anywhere. */
html { overflow-x: hidden; }
body {
	overflow-x: hidden;
	font-family: var(--oga-font-body);
	color: var(--oga-ink);
	background: #fff var(--oga-page-bg);
	background-attachment: fixed;
	margin: 0;
	line-height: 1.6;
}
@media (max-width: 900px) {
  body { background-attachment: scroll; }
}
/* Defensive: a negative top margin on the first child of <header>,
main { display: flow-root; }

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);
}
/* 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; }
}
/* 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;
}
/* ── Site footer — v201348,
matches the OGA community site ───────────────
   On the page wash: a white panel (Brand · Explore · Business · Contact),
the navy "Powered by the Online Guide Association" band with a red base
   line {
	--oga-footer-ink: var(--oga-ink-muted);
	--oga-footer-ink-strong: var(--oga-night);
	--oga-footer-accent: var(--oga-flag);
	margin-top: var(--oga-space-xl);
	padding-bottom: 28px;
	background: transparent;
	color: var(--oga-footer-ink);
	font-size: 14.5px;
}
/* Redesigned "follow us" row — uniform circular badges (regardless of each
   brand glyph's own shape),
always a single line. `!important` on the list
   reset guards against any theme/plugin `ul` rule that outranks it,
which is
   what produced a bare bulleted list instead of a badge row. On widths too
   narrow to fit every badge {
	display: flex !important; flex-wrap: wrap !important; list-style: none !important;
	align-items: center; justify-content: flex-start;
	gap: 10px; margin: 0 !important; padding: 4px 0 !important;
	overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
}

/* Footer variant of the site directory — same .oga-dir-* grid as the homepage
   section { margin: 0 0 var(--oga-space-lg); padding-bottom: var(--oga-space-lg); border-bottom: 1px solid var(--oga-border); }

/* 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: #111; 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: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	transition: box-shadow .18s ease;
}
.oga-card:hover .oga-card__media { box-shadow: 0 10px 26px rgba(15,37,87, .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: #111;
	padding: 4px 9px; border-radius: 999px;
	box-shadow: 0 1px 3px rgba(15,37,87, .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: 8px;
	padding: 12px 24px;
	border-radius: var(--oga-radius-md);
	background: var(--oga-blue);
	color: #fff;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.1;
	border: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(28,63,143,.14);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.oga-btn:hover { background: var(--oga-blue-dark); text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(28,63,143,.22); }
.oga-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(28,63,143,.14); }
.oga-btn--whatsapp { background: #111; }
.oga-btn--whatsapp:hover { background: #111; }
.oga-btn--telegram { background: #111; }
.oga-btn--telegram:hover { background: #111; }
.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: #111;
	color: #fff;
	box-shadow: 0 0 0 0 rgba(255, 0, 51, .45);
}
.oga-btn--youtube:hover { background: #111; 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(28,63,143, .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: #fff;
	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: #fff;
	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 { color: var(--oga-saffron); }

/* Inline SEO/AEO/GEO keyword highlight (semantic <mark>). Branded tint rather
   than the browser default yellow {
	background: linear-gradient(180deg, transparent 60%, rgba(216,31,54,.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 {
	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-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; }
a.oga-chip.is-active { background: var(--oga-blue); border-color: var(--oga-blue); color: #fff; }
a.oga-chip.is-active .oga-icon { color: #fff; }

/* Archive page header (News / Marketing / Promote dashboards, and the
   Hotels/Restaurants/Coffees business-category pages).
   v201329: this markup renders as a plain sibling of <main>, BEFORE
   `<main class="oga-container …">` opens, on every call site except
   front-page.php and archive-oga_business.php — so unlike this same
   page's own chip grid, cards and every other band (all inside that
   .oga-container), the header had no side padding or centering of its
   own at all and sat flush against the browser edges on any viewport
   wider than its content. That's the "conflict" that made pages like
   /business-category/hotel/ look broken/crashed: one band on the page
   ignoring the box every other band uses. Given the header's own
   matching box here (same max-width/centering/padding as
   .oga-container, and added to that selector's two responsive
   overrides below) rather than moved into <main> in every template,
   since that would touch far more files for the same visual result. */
.oga-archive__head { margin: 0 auto var(--oga-space-md); max-width: 1120px; padding: 0 var(--oga-space-md); overflow-wrap: anywhere; }
/* Copy stack — eyebrow → heading → subtitle → trust chips. A flex
   column with an explicit gap replaces relying on each child's own
   margin (which could collapse or double up depending on context),
   so the vertical rhythm here is deliberate and consistent rather
   than incidental. */
.oga-archive__head-copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.oga-archive__head-copy h1 { margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.oga-archive__head-copy .oga-archive__lede { margin: 0; }
.oga-archive__head-copy .oga-archive__eyebrow-pill { margin: 0; }
.oga-archive__head-copy .oga-archive__trust { margin: 0; }
.oga-archive__lede { color: var(--oga-ink-muted); max-width: 62ch; margin: 4px 0 0; overflow-wrap: anywhere; }
/* Small uppercase label above the H1 — Hotels/Restaurants/Coffees term
   archives (inc/business-features.php's hero_eyebrow), additive only:
   omitted entirely when a call site doesn't pass one. */
.oga-archive__eyebrow-pill {
	display: inline-flex; align-items: center;
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--oga-saffron); background: var(--oga-bg-soft);
	border: 1px solid var(--oga-border); border-radius: 99px;
	padding: 5px 14px; margin: 0 0 12px; max-width: 100%;
	overflow-wrap: anywhere;
	align-self: flex-start;
}
/* Trust chip row under the subtitle. Reset is written defensively —
   list-style set on both the <ul> and each <li> (list-style is
   inherited, but this removes any doubt if a more specific rule ever
   creeps in) — and the row wraps freely so it can never force
   horizontal scroll on a narrow phone. */
.oga-archive__trust,
.oga-archive__trust li { list-style: none; }
.oga-archive__trust::marker,
.oga-archive__trust li::marker { content: ""; }
.oga-archive__trust {
	display: flex; flex-wrap: wrap; gap: 8px 10px;
	margin: var(--oga-space-sm) 0 0; padding: 0;
	max-width: 100%;
}
.oga-archive__trust-item {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 600; color: var(--oga-ink);
	background: var(--oga-bg); border: 1px solid var(--oga-border);
	border-radius: 99px; padding: 6px 12px 6px 10px;
	max-width: 100%; overflow-wrap: anywhere;
}
.oga-archive__trust-item .oga-icon { color: var(--oga-jungle); flex-shrink: 0; }
@media (max-width: 480px) {
  .oga-archive__trust { justify-content: flex-start; }
  .oga-archive__trust-item { font-size: 12.5px; padding: 5px 10px 5px 8px; }
}
/* In-flow banner image, fully contained inside the normal document
   flow (no full-bleed, no negative margins to the viewport) — see
   FIX-NOTES-v201315-hero-removed.md for why that matters on this
   template. Purely decorative (alt=""), since the title/subtitle text
   next to it already carries the same copy. */
.oga-archive__head-media {
	display: block; width: 100%;
	aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--oga-radius-lg);
	margin: 0 0 var(--oga-space-md); box-shadow: 0 4px 14px rgba(15,37,87,.08);
	flex-shrink: 0;
}
.oga-archive__head-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v201323: media + copy variant (Hotels / Restaurants / Coffees term
   archives, via oga_core_render_archive_header()'s $image argument) —
   same media-left / copy-right split as the homepage's featured-content
   blocks (.oga-frame__card, .oga-category-card), so the image never
   leaves a dead gap next to it the way a plain stacked block did. */
.oga-archive__head--media {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: var(--oga-space-lg);
}
.oga-archive__head--media .oga-archive__head-media { margin: 0; flex: 1 1 440px; max-width: 560px; }
.oga-archive__head--media .oga-archive__head-copy { flex: 1 1 320px; min-width: 280px; }
.oga-archive__head--media .oga-archive__head-copy h1 {
	position: relative; margin: 0 0 12px; padding-bottom: 14px;
	font-family: var(--oga-font-heading); line-height: 1.15;
}
.oga-archive__head--media .oga-archive__head-copy h1::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 46px; height: 3px; border-radius: 3px;
	background: #fff;
}
.oga-archive__head--media .oga-archive__lede { margin-top: 0; font-size: 17px; }
@media (max-width: 782px) {
  .oga-archive__head--media { flex-direction: column; }
  .oga-archive__head--media .oga-archive__head-media { max-width: 100%; }
}
.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: #fff; color: #111; border: 1px solid var(--oga-border); 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: #111; margin: 0 0 10px; }
.oga-cta-band p { color: #111; 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: #111; color: #fff; }
.oga-cta-band .oga-btn:hover { background: #333; }
.oga-cta-band__fine { font-size: 13px; color:#555; 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: #111;
}
.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: #111; 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.12em;
	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: #fff;
}
/* Personal Skill Center — the six Online Guide 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);
}
not an oga_core_icon() SVG —
   the SVGs are pre-sized via their `size` arg { font-size: 22px; line-height: 1; }

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

/* ── Homepage: plain, content-first (portal-page style) ───────────────────
   Scoped to .oga-home so archives / single templates keep their own layout.
   Left-aligned throughout, no gradients, no pill/box chrome, no centered
   marketing composition — a section heading is a heading with a rule under
   it, an intro is a paragraph, and a shortcut list is a row of plain links.
   Density and legibility over ceremony. */
.oga-home > section { margin-bottom: var(--oga-space-lg); }
.oga-home > section:last-child { margin-bottom: var(--oga-space-md); }
.oga-home > section > h2 {
	text-align: left;
	margin-bottom: var(--oga-space-sm);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--oga-border);
	font-size: 21px;
}
.oga-home > section > h2::after { content: none; }
/* Left-aligned, full-width intro / trailing copy and "view all" rows. */
.oga-home > section > p {
	text-align: left;
	max-width: 720px;
	margin-left: 0;
	margin-right: 0;
}
.oga-home .oga-section-intro {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
	max-width: 720px;
}
.oga-home .oga-chip-grid { justify-content: flex-start; }
.oga-home .oga-social-row { justify-content: flex-start; }
/* Shortcut/nav chips read as a plain inline link list, not buttons —
   the association's own portal index, not a promo rail. */
.oga-home .oga-chip-grid {
	display: flex; flex-wrap: wrap;
	gap: 4px var(--oga-space-md);
	border: none; background: none;
}
.oga-home .oga-chip {
	padding: 2px 0; border: none; border-radius: 0; background: none;
	font-weight: 400; font-size: 15px; color: var(--oga-blue);
}
.oga-home .oga-chip .oga-icon { width: 15px; height: 15px; color: var(--oga-ink-muted); }
.oga-home a.oga-chip:hover { text-decoration: underline; border-color: transparent; }
/* Card grids stay left-aligned and dense — no oversized gutters. */
.oga-home .oga-grid { gap: var(--oga-space-sm); }
/* Closing CTA reads as a plain framed note, not a colour block. */
.oga-home .oga-cta-band {
	background: var(--oga-bg-soft); color: var(--oga-ink);
	border: 1px solid var(--oga-border); border-radius: var(--oga-radius);
	padding: var(--oga-space-md); text-align: left;
}
.oga-home .oga-cta-band h2 { color: var(--oga-ink); border-bottom-color: var(--oga-border); }
.oga-home .oga-cta-band p { color: var(--oga-ink-muted); max-width: 720px; margin: 0 0 var(--oga-space-sm); }
.oga-home .oga-cta-band .oga-btn { background: none; color: var(--oga-blue); border: 1px solid var(--oga-blue); }
.oga-home .oga-cta-band .oga-btn:hover { background: var(--oga-bg); box-shadow: none; transform: none; }
.oga-home .oga-cta-band__fine { color: var(--oga-ink-muted); }
/* ══════════════════════════════════════════════════════════════════════
   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.
   ══════════════════════════════════════════════════════════════════════ */
/* (v201342: the "Tablet & below — collapse the primary nav" block that
   lived here, and its 1200px breakpoint, moved to "Header — two-tier +
   Pages Bar". The nav now has its own full-width row, so it only collapses
   into the hamburger at ≤ 767px.) */
/* 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,
  	.oga-archive__head { 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-hook-band__price strong { font-size: 22px; }
}
/* Large desktops — let content breathe a little wider. */
@media (min-width: 1400px) {
  .oga-container,
  	.oga-archive__head { max-width: 1240px; }
}
/* ── OS-systems feature grid ([oga_core_render_os_features]) ───────── */
.oga-osf { margin: 40px 0; }
/* Full OGAICE Directory — a column-per-group sitemap { display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:26px 20px; }

/* ── 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; }
/* ═══════════════════════════════════════════════════════════════════════
 * 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 OGAICE Network plugin's surfaces (the plugin
 * ships its own `.ogaice-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-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,
.oga-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 OGAICE 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. */
#ogaice-layer-switcher,
#ogaice-connectors-status {
	max-width: min(calc(100vw - 24px), 360px);
	box-sizing: border-box;
}
@supports (padding: max(0px)) {
  #ogaice-layer-switcher { bottom: max(20px, env(safe-area-inset-bottom)); }
  #ogaice-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; }
}
/* ============================================================================
   Header redesign — industry mega-nav + "Guides" dropdown
   (oga_core_industry_nav_links / oga_core_render_nav_fallback)
   ============================================================================ */
/* Caret shown on any top-level item that has a submenu. */
.oga-nav__has-sub > a::after {
	content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px); opacity: .7;
}
.oga-nav__caret {
	display: inline-block; width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .16s ease;
}
/* --- Desktop + tablet: dropdown on hover / keyboard focus --- */
@media (min-width: 768px) {
  .oga-nav__has-sub { position: relative; }
  .oga-nav__sub {
  	position: absolute; top: 100%; left: 0; z-index: 60;
  		min-width: 226px; margin: 0; padding: 8px; list-style: none;
  		display: flex; flex-direction: column; gap: 2px;
  		background: var(--oga-bg, #fff); border: 1px solid var(--oga-border);
  		border-radius: var(--oga-radius); box-shadow: 0 14px 34px rgba(15,37,87, .14);
  		opacity: 0; visibility: hidden; transform: translateY(6px);
  		transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .oga-nav__has-sub:hover > .oga-nav__sub,
  	.oga-nav__has-sub:focus-within > .oga-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
  .oga-nav__sub a { width: 100%; padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
  .oga-nav__sub a:hover { background: var(--oga-bg-soft); color: var(--oga-blue); }
  .oga-nav__sub-toggle { display: none; }
}
/* --- Mobile: submenu collapses into an accordion under its parent ---
   Kept in sync with the Pages Bar mobile breakpoint (v201342: 767px). */
@media (max-width: 767px) {
  .oga-nav__has-sub { position: relative; }
  .oga-nav__has-sub > a { display: inline-flex; width: calc(100% - 52px); }
  .oga-nav__has-sub > a::after { display: none; }
  /* the toggle button carries the caret */
  .oga-nav__sub-toggle {
  	position: absolute; top: 0; right: 0; width: 52px; height: 52px; padding: 0;
  		display: inline-flex; align-items: center; justify-content: center;
  		background: transparent; border: 0; border-left: 1px solid var(--oga-border);
  		color: var(--oga-ink); cursor: pointer;
  }
  .oga-nav__sub { display: none; margin: 0; padding: 0 0 0 14px; list-style: none; background: var(--oga-bg-soft); }
  .oga-nav__has-sub.is-open > .oga-nav__sub { display: block; }
  .oga-nav__has-sub.is-open .oga-nav__caret { transform: rotate(225deg); }
}
saffron underline
                                    on the current page,
Contact pinned
                                    right as a pill (v201343).
   ≥ 768px  the bar is always visible; if the tabs don't fit (tablet) it
            scrolls sideways with soft edge fades instead of wrapping.
   ≤ 767px  the bar becomes the hamburger panel.
   Breakpoint lives in three places — keep in sync: here { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.oga-header-quick { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.oga-header-quick__link {
	display: inline-flex; align-items: center; gap: 7px;
	height: 38px; padding: 0 14px; border-radius: 999px;
	background: var(--oga-bg-soft); color: var(--oga-ink); font-size: 14px; font-weight: 500; white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.oga-header-quick__icon { color: var(--oga-jungle); }
.oga-header-quick__link:hover { background: var(--oga-jungle); color: var(--oga-dawn); text-decoration: none; }
.oga-header-quick__link:hover .oga-header-quick__icon { color: var(--oga-saffron); }
.oga-header-quick__link:focus-visible { outline: 2px solid var(--oga-saffron); outline-offset: 2px; }
@media (max-width: 899px) { .oga-header-quick { display: none; } }

/* The bar */
.oga-pages-bar .oga-nav { position: relative; flex: 1 1 auto; width: 100%; } /* offsetParent for oga-nav.js revealCurrent() */
.oga-pages-bar {
	background: var(--oga-dawn);
	border-top: 1px solid var(--oga-border);
}
.oga-pages-bar .oga-nav > ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: nowrap; align-items: stretch; gap: 2px;
}
.oga-pages-bar .oga-nav > ul > li { display: flex; flex: 0 0 auto; }

.oga-pages-bar .oga-nav > ul > li > a {
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	height: 50px; padding: 0 14px;
	color: var(--oga-ink-muted); font-size: 14.5px; font-weight: 500; white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}
/* Current-page underline (::before — ::after is the dropdown caret). */
.oga-pages-bar .oga-nav > ul > li > a::before {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
	border-radius: 3px 3px 0 0; background: var(--oga-saffron);
	transform: scaleX(0); transform-origin: center; transition: transform .2s ease;
}
.oga-pages-bar .oga-pages-bar__icon { color: var(--oga-ink-muted); opacity: .85; transition: color .15s ease; }

.oga-pages-bar .oga-nav > ul > li > a:hover {
	color: var(--oga-jungle); background: rgba(255, 255, 255, .65); text-decoration: none;
}
.oga-pages-bar .oga-nav > ul > li > a:hover .oga-pages-bar__icon { color: var(--oga-jungle); opacity: 1; }
.oga-pages-bar .oga-nav > ul > li > a:hover::before { transform: scaleX(.35); }
.oga-pages-bar .oga-nav > ul > li > a:focus-visible { outline: 2px solid var(--oga-saffron); outline-offset: -2px; }

/* You are here — fallback list (.is-current) and WP menus (current-menu-*). */
.oga-pages-bar .oga-nav > ul > li.is-current > a,
.oga-pages-bar .oga-nav > ul > li.current-menu-item > a,
.oga-pages-bar .oga-nav > ul > li.current-menu-ancestor > a,
.oga-pages-bar .oga-nav > ul > li > a[aria-current="page"] {
	color: var(--oga-jungle); font-weight: 600; background: var(--oga-bg);
}
.oga-pages-bar .oga-nav > ul > li.is-current > a::before,
.oga-pages-bar .oga-nav > ul > li.current-menu-item > a::before,
.oga-pages-bar .oga-nav > ul > li.current-menu-ancestor > a::before,
.oga-pages-bar .oga-nav > ul > li > a[aria-current="page"]::before { transform: scaleX(1); }
.oga-pages-bar .oga-nav > ul > li.is-current .oga-pages-bar__icon,
.oga-pages-bar .oga-nav > ul > li.current-menu-item > a .oga-pages-bar__icon,
.oga-pages-bar .oga-nav > ul > li > a[aria-current="page"] .oga-pages-bar__icon { color: var(--oga-saffron); opacity: 1; }

/* Contact — the one call to action, pinned right as a pill. */
.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact { margin-left: auto; align-items: center; padding-left: 12px; }
.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact > a {
	height: 36px; padding: 0 16px; border-radius: 999px;
	background: var(--oga-jungle); color: var(--oga-dawn); font-weight: 600;
}
.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact > a::before { display: none; }
.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact .oga-pages-bar__icon { color: var(--oga-saffron); opacity: 1; }
.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact > a:hover { background: var(--oga-blue-dark); color: #fff; }
.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact > a:hover .oga-pages-bar__icon { color: var(--oga-saffron); }
.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact.is-current > a { background: var(--oga-blue-dark); color: #fff; box-shadow: 0 0 0 2px var(--oga-saffron); }

/* WP-menu dropdowns (.sub-menu) — same look as .oga-nav__sub. */
.oga-pages-bar .sub-menu { list-style: none; margin: 0; padding: 0; }

@media (min-width: 768px) {
	/* Tablet: scroll sideways rather than wrap. Not when the menu has
	   dropdowns — overflow would clip them — then it wraps instead. */
	.oga-pages-bar .oga-nav:not(:has(.sub-menu, .oga-nav__sub)) {
		overflow-x: auto; overflow-y: hidden;
		scrollbar-width: none; -ms-overflow-style: none;
		scroll-snap-type: x proximity; overscroll-behavior-x: contain;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--oga-fade-start, 0px), #000 calc(100% - var(--oga-fade-end, 0px)), transparent 100%);
		        mask-image: linear-gradient(to right, transparent 0, #000 var(--oga-fade-start, 0px), #000 calc(100% - var(--oga-fade-end, 0px)), transparent 100%);
	}
	.oga-pages-bar .oga-nav::-webkit-scrollbar { display: none; }
	.oga-pages-bar .oga-nav > ul > li { scroll-snap-align: start; }
	.oga-pages-bar .oga-nav.has-fade-start { --oga-fade-start: 36px; }
	.oga-pages-bar .oga-nav.has-fade-end   { --oga-fade-end: 36px; }
	.oga-pages-bar .oga-nav:has(.sub-menu, .oga-nav__sub) > ul { flex-wrap: wrap; }

	.oga-pages-bar .menu-item-has-children { position: relative; }
	.oga-pages-bar .sub-menu {
		position: absolute; top: 100%; left: 0; z-index: 60; min-width: 226px; padding: 8px;
		display: flex; flex-direction: column; gap: 2px;
		background: var(--oga-bg); border: 1px solid var(--oga-border);
		border-radius: var(--oga-radius-md); box-shadow: 0 14px 34px rgba(15,37,87, .14);
		opacity: 0; visibility: hidden; transform: translateY(6px);
		transition: opacity .16s ease, transform .16s ease, visibility .16s;
	}
	.oga-pages-bar .menu-item-has-children:hover > .sub-menu,
	.oga-pages-bar .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
	.oga-pages-bar .sub-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--oga-ink); white-space: nowrap; }
	.oga-pages-bar .sub-menu a:hover { background: var(--oga-bg-soft); color: var(--oga-jungle); text-decoration: none; }
}

/* Tablet: tighter tabs so all six — Contact included — usually fit
   without scrolling (the sideways scroll stays as the safety net). */
@media (min-width: 768px) and (max-width: 1119px) {
	.oga-pages-bar .oga-nav > ul > li > a { padding: 0 10px; gap: 6px; font-size: 14px; }
	.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact { padding-left: 6px; }
	.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact > a { padding: 0 14px; }
}

/* Desktop: a touch more air between tabs once everything fits. */
@media (min-width: 1120px) {
	.oga-pages-bar .oga-nav > ul > li > a { padding: 0 16px; }
}

/* Phones: the bar becomes the hamburger panel. */
@media (max-width: 767px) {
	.oga-nav-toggle { display: inline-flex; }
	.oga-site-header__brand { padding: 10px 0; }

	.oga-pages-bar { background: var(--oga-bg); border-top: 0; }
	.oga-pages-bar .oga-nav { display: none; }
	.oga-pages-bar .oga-nav.is-open {
		display: block; padding: 10px 0 16px; border-top: 1px solid var(--oga-border);
		animation: oga-pages-bar-in .18s ease-out;
	}
	.oga-pages-bar .oga-nav > ul { flex-direction: column; gap: 4px; }
	.oga-pages-bar .oga-nav > ul > li { display: block; position: relative; }
	.oga-pages-bar .oga-nav > ul > li > a {
		width: 100%; height: 52px; padding: 0 14px; gap: 12px;
		font-size: 16px; color: var(--oga-ink); border-radius: var(--oga-radius-md);
	}
	.oga-pages-bar .oga-nav > ul > li > a::before {
		left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto;
		border-radius: 0 3px 3px 0; transform: scaleY(0);
	}
	.oga-pages-bar .oga-nav > ul > li > a:hover::before { transform: scaleY(0); }
	.oga-pages-bar .oga-nav > ul > li.is-current > a,
	.oga-pages-bar .oga-nav > ul > li.current-menu-item > a,
	.oga-pages-bar .oga-nav > ul > li > a[aria-current="page"] { background: var(--oga-dawn); }
	.oga-pages-bar .oga-nav > ul > li.is-current > a::before,
	.oga-pages-bar .oga-nav > ul > li.current-menu-item > a::before,
	.oga-pages-bar .oga-nav > ul > li > a[aria-current="page"]::before { transform: scaleY(1); }
	.oga-pages-bar .oga-pages-bar__icon { width: 20px; height: 20px; }

	.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact { margin: 8px 0 0; padding: 0; }
	.oga-pages-bar .oga-nav > ul > li.oga-pages-bar__item--contact > a { height: 50px; border-radius: var(--oga-radius-md); }

	.oga-pages-bar .sub-menu { padding: 0 0 6px 46px; }
	.oga-pages-bar .sub-menu a { display: block; padding: 10px 0; color: var(--oga-ink-muted); }
}
@keyframes oga-pages-bar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.oga-pages-bar *, .oga-pages-bar .oga-nav.is-open { transition: none !important; animation: none !important; }
}

/* ── "Our Mission" homepage section ──────────────────────────────────────
 * oga_core_render_founder_section() (inc/template-tags.php) — mission
 * statement + three pillar cards,
then the founder card (portrait + bio +
 * specialty chips + network stat) for the one oga_guide post flagged
 * _oga_is_founder {
	background: linear-gradient(180deg, var(--oga-bg-soft) 0%, var(--oga-bg) 100%);
	border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius-lg);
	padding: var(--oga-space-lg);
	margin: var(--oga-space-lg) 0;
}

/* ── Pin Feed — Pinterest-style masonry,
front-page feature ─────────────
 * Real OGA content (tours, guides, news, promotions) laid out the way
 * pinterest.com/OnlineGuideAssociation shows it: variable-height image
 * cards in CSS-column masonry,
a small system badge { margin: var(--oga-space-lg) 0; }

/* ── Offer cards — audience-segmented feature lists ──────────────────────
 * "What Online Guide Association Offers in Cambodia" (page-contact.php):
 * one bordered,
left-accented card per audience (Local Guides, Tourism
 * Businesses, Hotels/Restaurants/Experiences, Creators) {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--oga-space-md);
	margin: var(--oga-space-md) 0 var(--oga-space-xl);
}

/* ── Contact + Reputation · Hook Frame (Google Maps | TripAdvisor) ───────
 * page-contact.php only. One frame,
three layers,
same visual family as
 * .oga-hook__card: (1) photo hook with the contact headline,
(2) two
 * columns — Google Maps and the TripAdvisor widget — lifted over the
 * photo's lower edge,
(3) contact details underneath both. The TripAdvisor
 * script draws its own markup inside #TA_selfserveprop340,
so its column
 * only sizes { margin: var(--oga-space-xl) 0; }
/* Center the whole photo-layer block (headline, intro, chips).
   Letter-spaced text carries a trailing gap { width: 100%; max-width: 760px; margin: 0 auto; text-align: center; }
/* Layer 3 — contact details { padding: var(--oga-space-md) var(--oga-space-md) 0; text-align: center; }

/* v201345 — contact hook: "Get in Touch" eyebrow removed; headline is a single
   row at every width (fluid size, never wraps) { max-width: 980px; }

/* ==========================================================================
 * v201346 — header search (inc/oga-core-bridge.php) + OGAICE Core layout glue
 * ======================================================================== */
.oga-hsearch { position: relative; }
.oga-hsearch__toggle { list-style: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; color: var(--oga-ink); }
.oga-hsearch__toggle::-webkit-details-marker { display: none; }
.oga-hsearch__toggle:hover, .oga-hsearch[open] .oga-hsearch__toggle { background: var(--oga-bg-soft); }
.oga-hsearch__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(560px, calc(100vw - 32px)); padding: 12px; background: var(--oga-bg); border: 1px solid var(--oga-border); border-radius: var(--oga-radius-lg); box-shadow: 0 16px 40px rgba(15,37,87, .14); }
.oga-hsearch__panel .oga-search { margin: 0; }
.oga-single--entity .oga-single__content { font-size: 1.05rem; line-height: 1.75; }
.oga-search-page .oga-search { margin-top: var(--oga-space-sm); }
@media (max-width: 600px) {
  .oga-hsearch__panel { position: fixed; left: 16px; right: 16px; top: 72px; width: auto; }
}
/* v201346: the plugin's "harmony" reset (.ogaice-harmony img { height:auto }
/* v201347: with the header search button the brand row holds logo + wordmark + search + menu.
   On phones the wordmark scales with the viewport so the row always fits (never wraps, never
   pushes the menu button off-screen). */
@media (max-width: 600px) {
  .oga-site-header .oga-logo { min-width: 0; flex: 0 1 auto; }
  .oga-site-header .oga-logo__name, .oga-site-header .oga-logo__sub { font-size: clamp(11px, 3.4vw, 18px); }
  .oga-site-header__actions { gap: 6px; }
  .oga-hsearch__toggle { width: 36px; height: 40px; }
}
.oga-pages-bar { background: #fff; border-top: 0; }
/* The page wash belongs to the theme: OGAICE Vibe (plugin, loads last) paints
   body.ogaice-vibe its own gradient, so the theme's rule carries one extra
   element in its selector to keep the community-site background. */
html body,
html body.ogaice-vibe {
	background: #fff var(--oga-page-bg);
	background-attachment: fixed;
}
@media (max-width: 900px) {
  html body,
  	html body.ogaice-vibe { background-attachment: scroll; }
}
/* ==========================================================================
   v201349 — OGA web-logo "A · Heritage": one-line lockup
   Original diamond-globe mark + "ONLINE GUIDE ASSOCIATION" on one row, PT Sans
   Bold, +0.01em tracking. Navy #1C3F8F + red #D81F36 on light; cream #FDFAF3 +
   pink #F47A88 on the navy header. Sizes from the design: mark 40 / type 19 /
   gap 10 in the header and footer.
   ========================================================================== */
.oga-logo__word.oga-logo__word--line {
	display: inline-flex; align-items: baseline; flex-wrap: nowrap; gap: 0 .28em;
	white-space: nowrap; line-height: 1;
	font-family: 'PT Sans', var(--oga-font-heading); font-weight: 700;
	font-size: 19px; letter-spacing: .01em; text-transform: uppercase;
}
.oga-logo__word--line .oga-logo__name,
.oga-logo__word--line .oga-logo__sub { font: inherit; letter-spacing: inherit; margin: 0; }
@media (max-width: 600px) {
  .oga-logo__word.oga-logo__word--line { font-size: 15px; }
}
@media (max-width: 380px) {
  .oga-logo__word.oga-logo__word--line { font-size: 13px; }
}
/* =====================================================================
 * v201350 — twelve-page Pages Bar: tighter tabs on desktop and a wider
 * bar track, so Hotels … Guide Trip + Contact fit on one row from ~1360px.
 * Narrower screens keep the sideways scroll (with the fade hint) and
 * phones keep the hamburger — nothing else in the header changes.
 * ===================================================================== */
@media (min-width: 1100px) {
  .oga-pages-bar > .oga-container { max-width: min(1440px, calc(100vw - 32px)); }
  .oga-pages-bar .oga-nav > ul { gap: 0; }
  .oga-pages-bar .oga-nav > ul > li > a { gap: 6px; padding: 0 9px; font-size: 13.5px; }
  .oga-pages-bar .oga-pages-bar__icon { width: 16px; height: 16px; }
}
@media (min-width: 1500px) {
  .oga-pages-bar .oga-nav > ul { justify-content: center; }
  .oga-pages-bar .oga-nav > ul > li > a { padding: 0 12px; font-size: 14px; }
}