/* ══════════════════════════════════════════════════════════════════════════
 * oga-brand-final.css — CONSOLIDATED BRAND OVERRIDE LAYER
 * Generated by design audit (v110016). Merges 7 previously separate
 * "must load absolute last" override files into ONE file, in the exact
 * cascade order WordPress was already enqueuing them, so visual output
 * is unchanged. Source files retired: ogace-brand.css, ogace-brand-polish.css,
 * ogace-finish.css, ogace-networks-white.css, ogace-brand-glow.css,
 * ogace-black-diamond.css, ogace-hook-icon-polish.css.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── 1/7 · ogace-brand.css (base brand token remap) ─────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
 * OGA Mini App · assets/css/ogace-brand.css
 * BRAND IDENTITY TOKEN LAYER
 * ══════════════════════════════════════════════════════════════════════════
 *
 * The theme's CSS makes 611 var(--token) references across style.css,
 * ogace-header-v109001.css and ogace-templates.css, with only 13 hardcoded
 * hex values in total. That means re-declaring :root re-skins the entire
 * theme without touching a single rule.
 *
 * This file remaps those tokens from the original Linear near-black + muted
 * indigo palette to the Online Guide Association brand identity taken from
 * the logo:
 *
 *     OGA Blue   #032EA1   primary   (upper diamond)
 *     OGA Red    #E00025   accent    (lower diamond)
 *
 * TWO MODES, both driven off the same brand hues:
 *
 *   body.oga-brand-light   white canvas, blue primary, red accent.
 *                          Matches the logo's native context. Default.
 *
 *   body.oga-brand-dark    near-black canvas with lightened brand tints.
 *                          Keeps the OGACE terminal register.
 *
 * ACCESSIBILITY
 * -------------
 * Every foreground/background pair below was measured against WCAG 2.1.
 * Ratios are recorded inline. Raw #032EA1 on a near-black canvas is only
 * 2.10:1 and FAILS, which is why dark mode uses tints (--brand-blue-400/500)
 * rather than the raw brand blue. For the same reason, dark-mode filled
 * buttons use ink-on-blue, not white-on-blue.
 *
 * LOAD ORDER
 * ----------
 * Enqueued with style.css + ogace-templates.css as dependencies so these
 * declarations win on equal specificity. No !important is used anywhere.
 * ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
 * BRAND CONSTANTS — mode-independent. The literal logo values.
 * ══════════════════════════════════════════════════════════════════════════ */
:root {
	/* Updated from assets/img/oga-mark-enhanced-polish.svg (the "deep" mark).
	 * NOTE: the prior values (#032EA1 / #E00025) were chosen to match the
	 * Cambodian flag, as documented in oga-mark.svg's own header comment —
	 * this new mark breaks that tie deliberately. Flag either back if that
	 * association still matters. */
	--brand-blue:      #0A2463;  /* logo upper diamond, deep navy */
	--brand-red:       #C1121F;  /* logo lower diamond */

	/* Blue ramp — shades toward black, tints toward white */
	--brand-blue-900:  #061436;
	--brand-blue-800:  #071945;
	--brand-blue-700:  #081f54;
	--brand-blue-600:  #0A2463;  /* = --brand-blue */
	--brand-blue-500:  #3b5082;
	--brand-blue-400:  #7180a5;
	--brand-blue-300:  #98a3bd;
	--brand-blue-200:  #b6bdd0;
	--brand-blue-100:  #dadee8;
	--brand-blue-050:  #eef0f4;

	/* Red ramp — shades toward black, tints toward white */
	--brand-red-900:   #6a0a11;
	--brand-red-800:   #870d16;
	--brand-red-700:   #a40f1a;
	--brand-red-600:   #C1121F;  /* = --brand-red */
	--brand-red-500:   #cd414c;
	--brand-red-400:   #d7656d;
	--brand-red-300:   #e0888f;
	--brand-red-200:   #e9acb1;
	--brand-red-100:   #f3d0d2;
	--brand-red-050:   #f9e7e9;

	/* Khmer flag reference — the logo's blue/red/white is a deliberate nod.
	   Available for cultural accents; not wired into the core token set. */
	--khmer-blue:      #032ea1;
	--khmer-red:       #e00025;
}


/* ══════════════════════════════════════════════════════════════════════════
 * LIGHT MODE · default
 * White canvas, blue primary, red accent. Matches the logo's native context.
 * ══════════════════════════════════════════════════════════════════════════ */
body.oga-brand-light {

	/* ── Surfaces ─────────────────────────────────────────────────────── */
	--bg0:   #ffffff;   /* page canvas */
	--bg1:   #f7f8fa;   /* raised panel */
	--bg2:   #f1f3f7;   /* card */
	--bg3:   #e9ecf2;   /* input / inset */
	--bg4:   #dfe3eb;   /* pressed */

	/* ── Card elevation, white-canvas tuning ──────────────────────────────
	   style.css defines --shadow-card for the near-black canvas; on white
	   that reads as murky, so light mode gets its own softer grey values —
	   same Airbnb-style "shadow lift" model, calibrated for #fff. ── */
	--shadow-card:       0 1px 2px rgba(20, 23, 31, 0.06), 0 1px 3px rgba(20, 23, 31, 0.08);
	--shadow-card-hover: 0 6px 16px rgba(20, 23, 31, 0.10), 0 12px 28px rgba(20, 23, 31, 0.14);

	/* ── Hairlines ────────────────────────────────────────────────────── */
	--line1: rgba(0, 61, 165, 0.10);
	--line2: rgba(0, 61, 165, 0.17);
	--line3: rgba(0, 61, 165, 0.26);

	/* ── Foreground ───────────────────────────────────────────────────── */
	--fg0:   #12141c;   /* 18.38:1 on white · AAA */
	--fg1:   #2e3444;   /* body copy */
	--fg2:   #5a6070;   /*  6.28:1 on white · AA  */
	--fg3:   #6a7080;   /*  4.95:1 on white · AA  (was 4.17:1 — bumped) */

	/* ── Accent · brand blue is the primary action colour ─────────────── */
	--gold:       #0A2463;                    /* 14.53:1 on white · AAA */
	--gold-dim:   rgba(10, 36, 99, 0.08);
	--gold-glow:  rgba(10, 36, 99, 0.16);
	--gold-hover: #081f54;

	/* ── G-layer palette · brand-derived, blue→red spectrum ───────────── */
	/* g1 and g6 are the two logo hues; g0/g2-g5/g7 are the original
	   auxiliary spread, unchanged by the mark update. */
	--g0: #00639b; --g0-bg: rgba(0, 99, 155, 0.08);   --g0-bd: rgba(0, 99, 155, 0.22);
	--g1: #0A2463; --g1-bg: rgba(10, 36, 99, 0.08);   --g1-bd: rgba(10, 36, 99, 0.24);
	--g2: #3f3fa8; --g2-bg: rgba(63, 63, 168, 0.08);  --g2-bd: rgba(63, 63, 168, 0.22);
	--g3: #6b2f9e; --g3-bg: rgba(107, 47, 158, 0.08); --g3-bd: rgba(107, 47, 158, 0.22);
	--g4: #0b6b52; --g4-bg: rgba(11, 107, 82, 0.08);  --g4-bd: rgba(11, 107, 82, 0.22);
	--g5: #1d5fb8; --g5-bg: rgba(29, 95, 184, 0.08);  --g5-bd: rgba(29, 95, 184, 0.22);
	--g6: #C1121F; --g6-bg: rgba(193, 18, 31, 0.08);  --g6-bd: rgba(193, 18, 31, 0.24);
	--g7: #a3431a; --g7-bg: rgba(163, 67, 26, 0.08);  --g7-bd: rgba(163, 67, 26, 0.22);

	/* ── Legacy alias remap ───────────────────────────────────────────── */
	--o-rose:   var(--g6);
	--o-teal:   var(--g0);
	--o-violet: var(--g2);
	--t-free:   var(--g0);
	--t-pro:    var(--g1);
	--t-agency: var(--g7);
	--t-ent:    var(--g3);
	--t-dao:    var(--g6);
	--tc-wc:    var(--g3);
	--tc-ai:    var(--g2);
	--tc-nvidia: var(--g4);

	/* ── Block editor bridge ──────────────────────────────────────────── */
	--wp--preset--color--foreground: var(--fg0);
	--wp--preset--color--background: var(--bg0);
	--wp--preset--color--primary:    var(--brand-blue);
	--wp--preset--color--secondary:  var(--brand-red);

	/* ── Button ink · white on brand blue is 14.53:1 · AAA ─────────────── */
	--btn-ink: #ffffff;

	background: var(--bg0);
	color: var(--fg1);
	color-scheme: light;
}


/* ══════════════════════════════════════════════════════════════════════════
 * DARK MODE
 * Near-black canvas, brand tints. Preserves the OGACE terminal register.
 * ══════════════════════════════════════════════════════════════════════════ */
body.oga-brand-dark {

	/* ── Surfaces · original Linear ramp, retained ────────────────────── */
	--bg0:   #08090a;
	--bg1:   #0f1011;
	--bg2:   #141516;
	--bg3:   #1a1c1e;
	--bg4:   #212325;

	/* ── Hairlines · brand-blue tinted rather than neutral white ──────── */
	--line1: rgba(123, 165, 245, 0.09);
	--line2: rgba(123, 165, 245, 0.15);
	--line3: rgba(123, 165, 245, 0.24);

	/* ── Foreground ───────────────────────────────────────────────────── */
	--fg0:   #f7f8f8;   /* 18.73:1 · AAA */
	--fg1:   #d0d2d8;
	--fg2:   #8a8f98;   /*  6.13:1 · AA  */
	--fg3:   #62666d;

	/* ── Accent · lightened brand blue.
	 *   Raw #0A2463 here would be 1.37:1 and FAIL. Lightened in HSL
	 *   (hue/saturation held, lightness raised to 60%) rather than a flat
	 *   RGB tint so it stays vivid instead of turning grey: 4.78:1 · AA. ── */
	--gold:       #4275f0;
	--gold-dim:   rgba(66, 117, 240, 0.14);
	--gold-glow:  rgba(66, 117, 240, 0.22);
	--gold-hover: #5986f2;

	/* ── G-layer palette · brand tints, all >=4.5:1 on #08090a ────────── */
	--g0: #4fb3c9; --g0-bg: rgba(79, 179, 201, 0.10);  --g0-bd: rgba(79, 179, 201, 0.24);
	--g1: #4275f0; --g1-bg: rgba(66, 117, 240, 0.12);  --g1-bd: rgba(66, 117, 240, 0.26);
	--g2: #8f8ff0; --g2-bg: rgba(143, 143, 240, 0.10); --g2-bd: rgba(143, 143, 240, 0.24);
	--g3: #b183e8; --g3-bg: rgba(177, 131, 232, 0.10); --g3-bd: rgba(177, 131, 232, 0.24);
	--g4: #57b980; --g4-bg: rgba(87, 185, 128, 0.10);  --g4-bd: rgba(87, 185, 128, 0.24);
	--g5: #6fa4f2; --g5-bg: rgba(111, 164, 242, 0.10); --g5-bd: rgba(111, 164, 242, 0.24);
	--g6: #ef1021; --g6-bg: rgba(239, 16, 33, 0.11);   --g6-bd: rgba(239, 16, 33, 0.26);
	--g7: #dd9a5c; --g7-bg: rgba(221, 154, 92, 0.10);  --g7-bd: rgba(221, 154, 92, 0.24);

	/* ── Legacy alias remap ───────────────────────────────────────────── */
	--o-rose:   var(--g6);
	--o-teal:   var(--g0);
	--o-violet: var(--g2);
	--t-free:   var(--g0);
	--t-pro:    var(--g1);
	--t-agency: var(--g7);
	--t-ent:    var(--g3);
	--t-dao:    var(--g6);
	--tc-wc:    var(--g3);
	--tc-ai:    var(--g2);
	--tc-nvidia: var(--g4);

	--wp--preset--color--foreground: var(--fg0);
	--wp--preset--color--background: var(--bg0);
	--wp--preset--color--primary:    var(--gold);
	--wp--preset--color--secondary:  var(--g6);

	/* ── Button ink · white on --gold is only 3.23:1, so filled buttons
	 *   in dark mode use ink text (6.17:1 · AA) instead. ──────────────── */
	--btn-ink: #08090a;

	background: var(--bg0);
	color: var(--fg1);
	color-scheme: dark;
}


/* ══════════════════════════════════════════════════════════════════════════
 * BUTTON INK CORRECTION
 * The base CSS hardcodes #fff on accent fills. In light mode that is correct
 * (14.53:1). In dark mode white-on-tint drops well under AA, so we swap to
 * ink instead (#08090a on the dark accent tint is 4.78:1 · AA).
 * ══════════════════════════════════════════════════════════════════════════ */
body.oga-brand-dark .oga-404-btn--primary,
body.oga-brand-dark .oga-searchform-submit,
body.oga-brand-dark .oga-comment-submit,
body.oga-brand-dark .oga-comment-form input[type="submit"],
body.oga-brand-dark .oga-pagination .page-numbers.current,
body.oga-brand-dark .oga-btn--primary {
	color: var(--btn-ink);
	font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════
 * BRAND LOGO
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-brand-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
}

.oga-brand-logo-mark {
	flex-shrink: 0;
	display: block;
	width: var(--oga-mark-size, 34px);
	height: var(--oga-mark-size, 34px);
}
.oga-brand-logo-mark svg,
.oga-brand-logo-mark img {
	display: block;
	width: 100%;
	height: 100%;
}

.oga-brand-logo-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.oga-brand-logo-name {
	font-family: var(--display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--fg0);
	white-space: nowrap;
}

.oga-brand-logo-sub {
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-red);
	white-space: nowrap;
}
body.oga-brand-dark .oga-brand-logo-sub { color: var(--g6); }

/* Brand rule under the wordmark, echoing the logo's blue→red split */
.oga-brand-rule {
	display: block;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--brand-blue) 0%,
		var(--brand-blue) 72%,
		var(--brand-red) 72%,
		var(--brand-red) 100%
	);
}
body.oga-brand-dark .oga-brand-rule {
	background: linear-gradient(
		90deg,
		var(--gold) 0%,
		var(--gold) 72%,
		var(--g6) 72%,
		var(--g6) 100%
	);
}

@media (max-width: 520px) {
	.oga-brand-logo-text { display: none; }
	.oga-brand-logo-mark { --oga-mark-size: 30px; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * BRAND ACCENTS ON EXISTING COMPONENTS
 * ══════════════════════════════════════════════════════════════════════════ */

/* Section labels get a brand tick */
body.oga-brand-light .oga-section-label,
body.oga-brand-dark  .oga-section-label {
	display: flex;
	align-items: center;
	gap: 8px;
}
.oga-section-label::before {
	content: "";
	flex-shrink: 0;
	width: 3px;
	height: 1em;
	min-height: 12px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--brand-blue), var(--brand-red));
}
body.oga-brand-dark .oga-section-label::before {
	background: linear-gradient(180deg, var(--gold), var(--g6));
}

/* Terminal prompt: brand blue in light, tint in dark */
body.oga-brand-light .oga-prompt { color: var(--brand-blue); opacity: .78; }
body.oga-brand-dark  .oga-prompt { color: var(--gold);       opacity: .82; }

/* Light-mode cards need a shadow instead of a glow to read as raised */
body.oga-brand-light .oga-feed-item,
body.oga-brand-light .oga-detail,
body.oga-brand-light .oga-related-card,
body.oga-brand-light .oga-404-panel,
body.oga-brand-light .oga-card {
	box-shadow: 0 1px 2px rgba(0, 27, 74, 0.05),
	            0 2px 8px rgba(0, 27, 74, 0.04);
}
body.oga-brand-light .oga-related-card:hover {
	box-shadow: 0 2px 4px rgba(0, 27, 74, 0.07),
	            0 8px 20px rgba(0, 27, 74, 0.07);
}

/* Selection uses brand blue */
body.oga-brand-light ::selection { background: var(--brand-blue-100); color: var(--brand-blue-900); }
body.oga-brand-dark  ::selection { background: var(--gold-glow);      color: var(--fg0); }

/* Focus ring — visible in both modes, 3:1 against both canvases */
body.oga-brand-light :focus-visible {
	outline: 2px solid var(--brand-blue);
	outline-offset: 2px;
}
body.oga-brand-dark :focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
 * HEADER LOGO MARK · SVG VARIANT
 * The base header CSS paints .oga-logo-mark as a filled accent square with
 * centred "OGA" text. When inc/ogace-brand.php injects the real SVG we drop
 * the fill and the box so the diamond reads on its own.
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-logo-mark--svg {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	font-size: 0;      /* suppress any residual text node */
	padding: 0;
}
.oga-logo-mark--svg .oga-brand-logo-mark {
	width: var(--oga-mark-size, 34px);
	height: var(--oga-mark-size, 34px);
}
.oga-logo-mark--svg svg { display: block; width: 100%; height: 100%; }


/* ══════════════════════════════════════════════════════════════════════════
 * PRINT · always render light regardless of active mode
 * ══════════════════════════════════════════════════════════════════════════ */
@media print {
	body.oga-brand-dark,
	body.oga-brand-light {
		--bg0: #ffffff; --bg1: #ffffff; --bg2: #ffffff; --bg3: #ffffff; --bg4: #ffffff;
		--fg0: #000000; --fg1: #1a1a1a; --fg2: #444444; --fg3: #666666;
		--gold: var(--brand-blue);
		--line1: rgba(0,0,0,.12); --line2: rgba(0,0,0,.2); --line3: rgba(0,0,0,.3);
		background: #fff;
		color: #000;
	}
	.oga-feed-item, .oga-detail, .oga-card, .oga-404-panel { box-shadow: none; }
}

/* ── 2/7 · ogace-brand-polish.css ────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
 * OGA Mini App · assets/css/ogace-brand-polish.css
 * BRAND POLISH LAYER — v109005.1
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Sits ON TOP of ogace-brand.css (last in the enqueue chain). Three jobs:
 *
 *   1. SHARP TEXT     — crisp antialiasing + optical sizing so type reads
 *                        clean at every weight, in both modes.
 *   2. ICON POLISH    — every icon surface (header icon-buttons, hamburger,
 *                        cart badge, logo mark, section-label ticks, G-layer
 *                        chips) now reacts with the brand hue instead of a
 *                        neutral grey — so branding reads in the chrome,
 *                        not just the logo.
 *   3. CLEAR BRANDING — a consistent brand glow/underline treatment applied
 *                        to the logo mark and primary headings so the
 *                        blue → red identity is unmistakable at a glance.
 *
 * No existing selector is redefined destructively; this file only adds
 * states (hover/focus) and refines rendering — it never changes layout.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · SHARP TEXT ─────────────────────────────────────────────────────── */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-synthesis: none;
}

body,
input,
button,
textarea,
select {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	font-optical-sizing: auto;
}

/* Headings get a hair more weight + tighter set so brand type reads crisp
   at both small (mobile) and large (hero) sizes — matches DESIGN.md's
   "weight is the signature" principle without going bold/heavy. */
h1, h2, h3,
.oga-hero-title,
.oga-section-title,
.oga-brand-logo-name {
	text-rendering: optimizeLegibility;
	font-kerning: normal;
	-webkit-text-stroke: 0.011em currentColor; /* subtle weight lift, no blur */
}

/* Small UI text (badges, chips, mono readouts) stays crisp at tiny sizes
   instead of anti-aliasing into mush. */
.oga-badge,
.oga-prompt,
.oga-mono,
code, kbd, pre {
	-webkit-font-smoothing: subpixel-antialiased;
}


/* ── 2a · ICON BUTTONS (search / cart / notifications / hamburger) ───────
 * Neutral grey hover → brand-tinted hover, in both modes. */
.oga-icon-btn:hover,
.oga-icon-btn:focus-visible {
	background: var(--gold-dim);
	border-color: var(--gold);
	color: var(--gold);
}
body.oga-brand-light .oga-icon-btn:hover,
body.oga-brand-light .oga-icon-btn:focus-visible {
	color: var(--brand-blue);
}

.oga-hamburger:hover {
	border-color: var(--gold);
}
.oga-hamburger:hover span {
	background: var(--gold);
}
body.oga-brand-light .oga-hamburger:hover span {
	background: var(--brand-blue);
}

/* Cart badge — force correct ink per mode (was hardcoded dark text, which
   fails contrast on the light-mode brand-blue fill). */
.oga-badge {
	background: var(--gold) !important;
	color: var(--btn-ink) !important;
	box-shadow: 0 0 0 1px var(--bg0);
}


/* ── 2b · LOGO MARK — brand glow, crisp SVG rendering ─────────────────── */
.oga-brand-logo-mark svg,
.oga-logo-mark--svg svg {
	shape-rendering: geometricPrecision;
}
.oga-brand-logo-mark {
	position: relative;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
	transition: filter 0.15s ease, transform 0.15s ease;
}
.oga-brand-logo:hover .oga-brand-logo-mark,
a:hover > .oga-logo-mark--svg .oga-brand-logo-mark {
	transform: translateY(-1px);
}
body.oga-brand-dark .oga-brand-logo-mark {
	filter: drop-shadow(0 0 10px var(--gold-glow));
}
body.oga-brand-light .oga-brand-logo-mark {
	filter: drop-shadow(0 1px 3px rgba(0, 61, 165, 0.18));
}


/* ── 2c · HEADER CHROME — brand-safe background + blue highlight bar ──
   .oga-header-wrap's own CSS falls back to a near-black (#08090a) canvas if
   --bg0 is ever undefined — a stale default from the pre-brand "gold" header
   design. Restate it here, last in the cascade, so the header canvas is
   guaranteed to read as the logo's own white/light surface, never a dark
   box behind a light-mode diamond. The bar underneath is a White + Blue
   highlight (navy → sky-blue) — header-only, kept separate from the
   wordmark's blue/red underline used elsewhere in the brand system. */
.oga-header-wrap {
	background: var(--bg0, #ffffff);
	position: relative;
}
.oga-header-wrap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--brand-blue, #0A2463) 0%, #247BA0 100%);
	pointer-events: none;
}
.oga-logo-name { color: var(--fg0, #12141c); }
.oga-logo-sub  { color: var(--fg3, #6a7080); }


/* ── 2b-2 · FOOTER QUICK LINKS — inline-styled anchors get no hover state
   by default; light them up with the brand hue on hover/focus so the full
   28-hub sitemap list reads as interactive. */
.oga-quicklink:hover,
.oga-quicklink:focus-visible {
	background: var(--gold-dim) !important;
	border-color: var(--gold) !important;
	color: var(--gold) !important;
}
body.oga-brand-light .oga-quicklink:hover,
body.oga-brand-light .oga-quicklink:focus-visible {
	background: var(--brand-blue-050, var(--gold-dim)) !important;
	border-color: var(--brand-blue) !important;
	color: var(--brand-blue) !important;
}


/* ── 2c · G-LAYER / NETWORK ICON CHIPS — crisper ring, brand-consistent ── */
[class*="oga-tier-"],
[class*="oga-g-"],
.oga-network-icon,
.oga-badge-tier {
	-webkit-font-smoothing: antialiased;
}


/* ── 3 · CLEAR BRANDING ACCENTS ────────────────────────────────────────── */

/* Wordmark: reinforce the blue → red identity with a two-tone underline
   directly beneath the name, echoing .oga-brand-rule but scoped so it
   also appears anywhere the wordmark is reused without the rule element. */
.oga-brand-logo-name {
	background-image: linear-gradient(
		90deg,
		var(--brand-blue, var(--gold)) 0%,
		var(--brand-blue, var(--gold)) 78%,
		var(--brand-red, var(--g6)) 78%,
		var(--brand-red, var(--g6)) 100%
	);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 2px;
	padding-bottom: 3px;
}
body.oga-brand-dark .oga-brand-logo-name {
	background-image: linear-gradient(
		90deg,
		var(--gold) 0%, var(--gold) 78%,
		var(--g6) 78%, var(--g6) 100%
	);
}

/* Primary marketing headings pick up a small brand tick — same device as
   .oga-section-label, applied wherever a bare h2 is used as a section
   opener without the label wrapper. */
.oga-panel > h2:first-child,
.oga-section > h2:first-child {
	position: relative;
	padding-left: 14px;
}
.oga-panel > h2:first-child::before,
.oga-section > h2:first-child::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 3px;
	height: 0.9em;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--brand-blue, var(--gold)), var(--brand-red, var(--g6)));
}
body.oga-brand-dark .oga-panel > h2:first-child::before,
body.oga-brand-dark .oga-section > h2:first-child::before {
	background: linear-gradient(180deg, var(--gold), var(--g6));
}

/* Links inherit brand blue/tint instead of default browser blue wherever
   an author forgets to scope one explicitly. */
.oga-prose a,
.entry-content a {
	color: var(--gold);
	text-decoration-color: var(--gold-dim);
	text-underline-offset: 2px;
}
.oga-prose a:hover,
.entry-content a:hover {
	text-decoration-color: currentColor;
}

/* Reduce motion respect for the new hover lift */
@media (prefers-reduced-motion: reduce) {
	.oga-brand-logo-mark { transition: none; }
}

/* ── 3/7 · ogace-finish.css ──────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
 * OGA · assets/css/ogace-finish.css
 * FINISH LAYER — v110005
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Loads LAST. Four jobs:
 *
 *   1. PALETTE      Corrects the brand tokens to the values sampled from the
 *                   logo artwork itself.
 *   2. TEXT         Clean rendering plus a restrained depth treatment.
 *   3. LINE-FREE    Removes rules and separators from every header bar and
 *                   page header; separation is carried by space and tone.
 *   4. ICON SURFACE Consistent optical treatment for the new 18-glyph set.
 *
 * ── ON THE PALETTE CORRECTION ──────────────────────────────────────────────
 * The theme carried #032EA1 / #E00025. Sampling the 2000x2000 logo file
 * returns different values:
 *
 *     #032EA1  diamond blue    13,948 px
 *     #E00025  diamond red     15,963 px
 *     #1B2E95  wordmark blue  257,899 px   (GUIDE)
 *     #001D6C  deep navy       24,224 px   (ONLINE / Association)
 *
 * #032EA1 and #E00025 are the Cambodian national flag values. The mark is
 * built on the flag; that is the identity, so the tokens now match it.
 *
 * ── ON TEXT SHADOW ─────────────────────────────────────────────────────────
 * Shadow on body copy reduces legibility — it softens the very edges the eye
 * uses to resolve letterforms, and it is one of the more common causes of
 * text failing contrast checks in practice. So depth here is applied only
 * where type is large enough to carry it:
 *
 *     headings, hero titles, stat figures, the 404 numeral, the logo wordmark
 *
 * Body copy, small print, meta lines, form labels and mono readouts get no
 * shadow at all. In light mode the shadow is a near-transparent navy at
 * sub-pixel offset — it reads as weight rather than as a drop shadow. In dark
 * mode it becomes a faint brand-blue glow, since a dark shadow on a dark
 * ground is invisible and would only muddy the glyph edges.
 *
 * A `.oga-flat` class on <body> disables the effect entirely.
 * ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
 * 1 · PALETTE CORRECTION
 * ══════════════════════════════════════════════════════════════════════════ */
:root {
	--brand-blue:     #032EA1;
	--brand-red:      #E00025;
	--brand-wordmark: #1B2E95;
	--brand-navy:     #001D6C;

	--brand-blue-900: #001240;
	--brand-blue-800: #001D6C;
	--brand-blue-700: #02248a;
	--brand-blue-600: #032EA1;
	--brand-blue-500: #1B2E95;
	--brand-blue-400: #3552c4;
	--brand-blue-300: #6E8CF5;
	--brand-blue-200: #93aaf8;
	--brand-blue-100: #c6d3fc;
	--brand-blue-050: #e9eefe;

	--brand-red-900:  #5c0010;
	--brand-red-800:  #8a0017;
	--brand-red-700:  #b3001d;
	--brand-red-600:  #E00025;
	--brand-red-500:  #ee1f42;
	--brand-red-400:  #F55C80;
	--brand-red-300:  #f9849e;
	--brand-red-200:  #fcaebf;
	--brand-red-100:  #fdd6de;
	--brand-red-050:  #feebef;
}

/* ── Light mode ─────────────────────────────────────────────────────────
 * blue 11.00:1 AAA · red 5.00:1 AA · navy 15.08:1 AAA — all on white. */
body.oga-brand-light {
	--gold:       #032EA1;
	--gold-dim:   rgba(3, 46, 161, 0.08);
	--gold-glow:  rgba(3, 46, 161, 0.16);
	--gold-hover: #001D6C;

	--line1: rgba(3, 46, 161, 0.09);
	--line2: rgba(3, 46, 161, 0.16);
	--line3: rgba(3, 46, 161, 0.25);

	--g1: #032EA1; --g1-bg: rgba(3, 46, 161, 0.08);  --g1-bd: rgba(3, 46, 161, 0.24);
	--g2: #1B2E95; --g2-bg: rgba(27, 46, 149, 0.08); --g2-bd: rgba(27, 46, 149, 0.22);
	--g6: #C4001F; --g6-bg: rgba(196, 0, 31, 0.08);  --g6-bd: rgba(196, 0, 31, 0.24);

	--btn-ink: #ffffff;
}

/* ── Dark mode ──────────────────────────────────────────────────────────
 * Raw #032EA1 on #08090a is 1.81:1 and fails outright, so the accents are
 * lightened tints: #6E8CF5 at 6.39:1 and #F55C80 at 6.38:1, both AA. */
body.oga-brand-dark {
	--gold:       #6E8CF5;
	--gold-dim:   rgba(110, 140, 245, 0.14);
	--gold-glow:  rgba(110, 140, 245, 0.22);
	--gold-hover: #93aaf8;

	--line1: rgba(147, 170, 248, 0.08);
	--line2: rgba(147, 170, 248, 0.14);
	--line3: rgba(147, 170, 248, 0.22);

	--g1: #6E8CF5; --g1-bg: rgba(110, 140, 245, 0.12); --g1-bd: rgba(110, 140, 245, 0.26);
	--g2: #9a9af2; --g2-bg: rgba(154, 154, 242, 0.10); --g2-bd: rgba(154, 154, 242, 0.24);
	--g6: #F55C80; --g6-bg: rgba(245, 92, 128, 0.11);  --g6-bd: rgba(245, 92, 128, 0.26);

	/* white on #6E8CF5 is only 3.23:1, so filled buttons take ink instead */
	--btn-ink: #08090a;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 2 · TEXT RENDERING
 * ══════════════════════════════════════════════════════════════════════════
 * The existing polish layer sets -webkit-font-smoothing: antialiased on both
 * html and body, globally. That property makes glyphs render THINNER, which
 * is right for light text on dark, but on a white canvas it thins dark text
 * that was already crisp — small copy ends up looking washed. So smoothing is
 * split per mode below, and light mode is returned to the platform default.
 * ══════════════════════════════════════════════════════════════════════════ */

body.oga-brand-light,
body.oga-brand-light input,
body.oga-brand-light button,
body.oga-brand-light textarea,
body.oga-brand-light select {
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

body.oga-brand-dark,
body.oga-brand-dark input,
body.oga-brand-dark button,
body.oga-brand-dark textarea,
body.oga-brand-dark select {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-optical-sizing: auto;
	font-synthesis: none;
	font-variant-ligatures: common-ligatures contextual;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv05" 1, "cv11" 1;
}

/* The prior layer used -webkit-text-stroke to fake extra weight on headings.
 * That paints a stroke centred on the glyph outline, which thickens the letter
 * inward as well as outward and closes up counters at small sizes. Inter ships
 * a real 650 weight, so use it. */
h1, h2, h3,
.oga-hero-title,
.oga-section-title,
.oga-brand-logo-name,
.oga-logo-name,
.oga-article-title {
	-webkit-text-stroke: 0;
	font-weight: 650;
	font-kerning: normal;
	text-wrap: balance;
}

/* Optical tracking: tighten as size grows, open as it shrinks */
.oga-article-title,
.oga-hero-title       { letter-spacing: -0.022em; line-height: 1.13; }
.oga-article-body h2  { letter-spacing: -0.016em; }
.oga-article-body h3  { letter-spacing: -0.011em; }
.oga-stat-value       { letter-spacing: -0.034em; line-height: 0.96; }

/* Figures read down a column, so they need fixed-advance digits */
.oga-stat-value,
.oga-404-code,
.oga-search-count,
.oga-pagination .page-numbers,
time {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

.oga-article-body,
.oga-entry-content { text-wrap: pretty; }


/* ══════════════════════════════════════════════════════════════════════════
 * 3 · DEPTH — large type only
 * ══════════════════════════════════════════════════════════════════════════ */

body.oga-brand-light:not(.oga-flat) h1,
body.oga-brand-light:not(.oga-flat) h2,
body.oga-brand-light:not(.oga-flat) .oga-hero-title,
body.oga-brand-light:not(.oga-flat) .oga-article-title,
body.oga-brand-light:not(.oga-flat) .oga-stat-value,
body.oga-brand-light:not(.oga-flat) .oga-404-code,
body.oga-brand-light:not(.oga-flat) .oga-brand-logo-name,
body.oga-brand-light:not(.oga-flat) .oga-logo-name {
	text-shadow:
		0 1px 0   rgba(0, 18, 64, 0.055),
		0 2px 4px rgba(0, 18, 64, 0.05);
}

/* Dark: a shadow would vanish, so lift with a faint brand-blue halo instead */
body.oga-brand-dark:not(.oga-flat) h1,
body.oga-brand-dark:not(.oga-flat) h2,
body.oga-brand-dark:not(.oga-flat) .oga-hero-title,
body.oga-brand-dark:not(.oga-flat) .oga-article-title,
body.oga-brand-dark:not(.oga-flat) .oga-stat-value,
body.oga-brand-dark:not(.oga-flat) .oga-404-code,
body.oga-brand-dark:not(.oga-flat) .oga-brand-logo-name,
body.oga-brand-dark:not(.oga-flat) .oga-logo-name {
	text-shadow:
		0 0 1px  rgba(110, 140, 245, 0.16),
		0 2px 14px rgba(110, 140, 245, 0.12);
}

/* Explicitly no shadow on anything small — legibility outranks effect */
.oga-article-body,
.oga-article-body p,
.oga-entry-meta,
.oga-stat-label,
.oga-stat-note,
.oga-dir-title,
.oga-dir-desc,
.oga-prompt,
.oga-section-label,
.oga-brand-logo-sub,
.oga-logo-sub,
.oga-stat-layer,
.oga-dir-layer,
.oga-pillar-chip,
.oga-badge,
label, input, textarea, select,
code, kbd, pre, small {
	text-shadow: none;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 4 · LINE-FREE HEADERS
 * ══════════════════════════════════════════════════════════════════════════
 * Every rule, hairline and separator is removed from the header stack and
 * from page headers. Hierarchy is carried by space and background tone.
 * A sticky header still needs to detach from content when scrolled, so an
 * ambient shadow is used rather than a border — it reads as elevation, not
 * as a drawn line.
 * ══════════════════════════════════════════════════════════════════════════ */

.oga-header-wrap,
.oga-header-inner,
.oga-topbar,
.oga-topbar-actions,
.oga-navbar,
.oga-tagbar,
.oga-pillars-wrap,
.oga-pillars-strip,
.oga-pillars-strip-wrap,
.oga-search-expanded,
.oga-mobile-drawer,
.oga-strip {
	border: 0;
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	box-shadow: none;
}

.oga-header-wrap::before,
.oga-header-wrap::after,
.oga-topbar::before,
.oga-topbar::after,
.oga-pillars-strip::before,
.oga-pillars-strip::after,
.oga-pillars-wrap::before,
.oga-pillars-wrap::after {
	display: none;
	content: none;
}

/* Elevation on scroll instead of a rule */
body.oga-brand-light .oga-header-wrap {
	box-shadow: 0 1px 2px rgba(0, 18, 64, 0.035),
	            0 6px 20px rgba(0, 18, 64, 0.035);
}
body.oga-brand-dark .oga-header-wrap {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
	            0 8px 26px rgba(0, 0, 0, 0.32);
}

/* Page headers: rules removed, spacing opened to compensate */
.oga-article-header,
.oga-archive-header,
.oga-wc-header,
.oga-page-header,
.oga-section-header,
.oga-hero-header {
	border-bottom: 0;
	border-top: 0;
}
.oga-article-header { padding-bottom: 4px;  margin-bottom: 26px; }
.oga-archive-header { padding-bottom: 2px;  margin-bottom: 24px; }
.oga-wc-header      { padding-bottom: 0;    margin-bottom: 20px; }

/* Pillar chips keep their own outline — that is a control affordance, not a
 * separator, so it stays. Only the strip's rule was removed. */


/* ══════════════════════════════════════════════════════════════════════════
 * 5 · ICON SURFACE
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-listing-icon {
	shape-rendering: geometricPrecision;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
}

/* Icons align to the text baseline, not the box centre — that half-pixel is
 * what makes an icon+label pair look aligned rather than merely adjacent. */
.oga-stat-icon,
.oga-dir-icon,
.oga-gl-icon,
.oga-tp-icon,
.oga-hero-feature-icon {
	transform: translateY(-0.5px);
}

/* Brand-tinted icon plates */
body.oga-brand-light .oga-dir-icon,
body.oga-brand-light .oga-gl-icon,
body.oga-brand-light .oga-tp-icon {
	background: rgba(3, 46, 161, 0.045);
	border-color: rgba(3, 46, 161, 0.11);
}
body.oga-brand-dark .oga-dir-icon,
body.oga-brand-dark .oga-gl-icon,
body.oga-brand-dark .oga-tp-icon {
	background: rgba(110, 140, 245, 0.08);
	border-color: rgba(110, 140, 245, 0.16);
}

.oga-dir-card:hover .oga-dir-icon {
	background: var(--gold-dim);
	border-color: var(--dir-accent, var(--gold));
}


/* ══════════════════════════════════════════════════════════════════════════
 * 6 · BRAND EMPHASIS UTILITIES
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-hl-brand {
	background: linear-gradient(96deg, var(--brand-blue) 0%, var(--brand-red) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
	text-shadow: none;
}
body.oga-brand-dark .oga-hl-brand {
	background: linear-gradient(96deg, var(--gold) 0%, var(--g6) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.oga-hl-brand { -webkit-text-fill-color: currentColor; background: none; color: var(--gold); }
}

.oga-hl-mark {
	background-image: linear-gradient(to top,
		var(--gold-glow) 0%, var(--gold-glow) 34%, transparent 34%);
	padding: 0 0.12em;
	border-radius: 2px;
	text-shadow: none;
}

.oga-hl-underline {
	text-decoration: underline;
	text-decoration-color: var(--brand-red);
	text-decoration-thickness: 0.11em;
	text-underline-offset: 0.19em;
	text-decoration-skip-ink: auto;
}
body.oga-brand-dark .oga-hl-underline { text-decoration-color: var(--g6); }

.oga-hl-figure {
	font-family: var(--display);
	font-weight: 700;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.02em;
	color: var(--gold);
}

.oga-hl-code {
	font-family: var(--mono);
	font-size: 0.88em;
	padding: 0.12em 0.4em;
	border-radius: var(--r4);
	background: var(--gold-dim);
	color: var(--gold);
	text-shadow: none;
}

/* Brand rule: blue → red at the diamond's own proportion */
.oga-brand-rule {
	display: block;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg,
		var(--brand-blue) 0%, var(--brand-blue) 74%,
		var(--brand-red)  74%, var(--brand-red) 100%);
}
body.oga-brand-dark .oga-brand-rule {
	background: linear-gradient(90deg,
		var(--gold) 0%, var(--gold) 74%,
		var(--g6)   74%, var(--g6) 100%);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 7 · LOGO MARK
 * ══════════════════════════════════════════════════════════════════════════
 * The mark is NOT square. Measured from the source artwork, the diamond is
 * 949 x 820 — aspect 1.157, wider than tall. Sizing it into a square box
 * would squash it, so the box is driven by height and the width follows the
 * aspect ratio. --oga-mark-size therefore sets the mark HEIGHT.
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-logo-mark--svg {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	padding: 0;
	font-size: 0;
	box-shadow: none;
	flex-shrink: 0;
}
.oga-logo-mark--svg .oga-brand-logo-mark,
.oga-brand-logo-mark {
	--oga-mark-aspect: 1.165;
	display: block;
	height: var(--oga-mark-size, 36px);
	width: calc(var(--oga-mark-size, 36px) * var(--oga-mark-aspect));
	flex-shrink: 0;
}
.oga-brand-logo-mark svg,
.oga-logo-mark--svg svg {
	display: block;
	width: 100%;
	height: 100%;
}
/* An uploaded custom logo keeps its own intrinsic ratio */
.oga-brand-logo-mark .oga-brand-logo-custom {
	width: auto;
	height: 100%;
	max-width: none;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 8 · ACCESSIBILITY FALLBACKS
 * ══════════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
	* { text-shadow: none; }
	.oga-hl-brand {
		-webkit-text-fill-color: currentColor;
		background: none;
		color: CanvasText;
	}
	.oga-hl-mark { background-image: none; text-decoration: underline; }
	.oga-header-wrap { box-shadow: none; border-bottom: 1px solid CanvasText; }
}

@media (prefers-reduced-transparency: reduce) {
	body.oga-brand-dark:not(.oga-flat) h1,
	body.oga-brand-dark:not(.oga-flat) h2,
	body.oga-brand-dark:not(.oga-flat) .oga-hero-title,
	body.oga-brand-dark:not(.oga-flat) .oga-article-title { text-shadow: none; }
}

@media print {
	* { text-shadow: none !important; }
	.oga-header-wrap { box-shadow: none; }
	.oga-hl-brand {
		-webkit-text-fill-color: currentColor;
		background: none;
		color: #001D6C;
	}
}

/* ── 4/7 · ogace-networks-white.css ──────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
 * OGA Mini App · assets/css/ogace-networks-white.css
 * WHITE-CANVAS OVERRIDE for the terminal-style ".oga-section" panels
 * (Networks grid, Tensor Cosmology, Cyber Security, Configuration, Quick
 * Links, etc. — every block built by inc/ogace-networks.php).
 *
 * These panels are painted with inline `style="...var(--o-bg1)..."` calls,
 * so the cleanest, least-invasive fix is to re-point the --o-* custom
 * properties *on the panel itself*. Custom properties inherit downward,
 * so every nested network card, chip, and prompt line automatically
 * repaints without touching a single line of PHP.
 *
 * Loads absolute last (after oga-finish) so it wins on equal specificity.
 * ══════════════════════════════════════════════════════════════════════════ */

.oga-section {
	/* Surfaces → clean white / near-white ramp */
	--o-bg0: #ffffff;
	--o-bg1: #ffffff;
	--o-bg2: #f6f7fb;
	--o-bg3: #eef0f6;

	/* Hairlines → soft brand-blue tinted, visible on white */
	--o-line1: rgba(3, 46, 161, 0.12);
	--o-line2: rgba(3, 46, 161, 0.20);

	/* Foreground → high-contrast ink (AAA on white) */
	--o-fg0: #0d1220;
	--o-fg1: #1c2333;
	--o-fg2: #454c5e;
	--o-fg3: #5a6070;

	background: #ffffff !important;
	color: var(--o-fg1);
	border: 1px solid var(--o-line1);
	border-radius: var(--o-r12, 12px);
}

/* Nested "raised" panels that also called var(--o-bg1) inline now resolve
 * to white too — give them a hair of separation so cards don't disappear
 * into the page. */
.oga-section [style*="var(--o-bg1)"] {
	background: #ffffff !important;
	box-shadow: 0 1px 2px rgba(13, 18, 32, 0.06), 0 6px 18px rgba(13, 18, 32, 0.05);
}

/* ── Crisp, sharp-edged headings & key figures ───────────────────────────
 * A light, tight text-shadow reads as "sharper / more defined" on a white
 * background — applied only to headings and standout numbers/labels, not
 * to paragraph copy, so body text stays perfectly legible. */
.oga-section-label,
.oga-section a[href*="/networks/?nw="] div[style*="font-weight:700"],
.oga-section div[style*="font-weight:700"] {
	color: var(--o-fg0) !important;
	text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(13,18,32,0.12);
}

/* Prompt / terminal lines → dark ink instead of low-opacity gold-on-black */
.oga-prompt,
.oga-section div[style*="var(--o-mono)"] {
	color: var(--o-fg2) !important;
	opacity: 1 !important;
	text-shadow: none;
}

/* Network cards: swap the translucent-white chip fill (tuned for dark mode)
 * for a translucent brand-blue fill that actually reads on white. */
.oga-section a[href*="/networks/?nw="] span[style*="rgba(255,255,255,0.04)"] {
	background: rgba(3, 46, 161, 0.06) !important;
	border-color: var(--o-line2) !important;
	font-weight: 600;
}

/* Card hover: a touch of lift instead of relying on a dark canvas for
 * definition. */
.oga-section a[href*="/networks/?nw="]:hover {
	border-color: var(--o-line2) !important;
	box-shadow: 0 2px 6px rgba(13,18,32,0.06), 0 10px 24px rgba(13,18,32,0.08);
	transform: translateY(-2px);
	transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}

/* Legend / footnote bar under the grid */
.oga-section > div[style*="margin-top:12px"] {
	background: #ffffff !important;
	border-color: var(--o-line1) !important;
	color: var(--o-fg3) !important;
}

@media (prefers-reduced-motion: reduce) {
	.oga-section a[href*="/networks/?nw="]:hover { transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * ICON SHADOW · every emoji glyph gets a soft two-tone glow lifted straight
 * from the OGA mark (brand blue #032EA1 + brand red #E00025), so icons read
 * as "branded" even though emoji glyphs can't be recoloured directly.
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-section span[style*="font-size:22px"],
.oga-section span[style*="font-size:36px"],
.oga-section span[style*="font-size:18px"] {
	filter:
		drop-shadow(0 1px 1px rgba(3, 46, 161, 0.38))
		drop-shadow(0 3px 7px rgba(224, 0, 37, 0.20));
}

/* ── "Join Us" hook button — brand gradient, clear hover feedback ───────── */
.oga-section a[href="https://onlineguideassociation.org/networks/"]:hover {
	filter: brightness(1.08);
	box-shadow: 0 3px 10px rgba(3, 46, 161, 0.34), 0 1px 3px rgba(224, 0, 37, 0.24);
	transform: translateY(-1px);
	transition: filter .16s ease, box-shadow .16s ease, transform .16s ease;
}


/* ── 5/7 · ogace-brand-glow.css ──────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
 * OGACE BRAND GLOW LAYER — absolute last stylesheet loaded (see functions.php
 * enqueue: depends on oga-mini-app, oga-brand, oga-brand-polish, oga-finish,
 * oga-category-listings, oga-networks-white).
 *
 * Applies one consistent shape/shadow highlight — built from the two logo
 * colors, --brand-blue #032EA1 and --brand-red #E00025 (see
 * ogace-brand.css) — to every text element and every icon sitewide.
 *
 * This intentionally supersedes ogace-finish.css §3 ("depth on large type
 * only, none on small text/labels/inputs") per request: the highlight now
 * reaches every heading, paragraph, label, button and icon, not just large
 * type. The two accessibility fallbacks from ogace-finish.css §8 — Windows
 * High-Contrast Mode (forced-colors) and print — are preserved below so the
 * effect never fights assistive tech or wastes printer ink.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
	--oga-glow-a: var( --brand-blue, #032EA1 );
	--oga-glow-b: var( --brand-red,  #E00025 );
}

/* ── 1 · Every text-bearing element ─────────────────────────────────────── */
body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, dt, dd, blockquote, figcaption, caption, summary,
label, button, input, textarea, select, legend,
small, code, kbd, pre, mark, time, strong, em,
.oga-section-label, .oga-btn, .oga-badge, .oga-pillar-chip,
.oga-stat-label, .oga-stat-value, .oga-stat-note,
.oga-dir-title, .oga-dir-desc, .oga-dir-layer,
.oga-entry-meta, .oga-article-body, .oga-article-body p,
.oga-brand-logo-name, .oga-brand-logo-sub, .oga-logo-name, .oga-logo-sub,
.oga-prompt, .oga-hero-title, .oga-article-title,
.oga-sms-headline, .oga-sms-eyebrow, .oga-sms-body,
.ogace-pillars-section h3, .ogace-pillars-section p {
	text-shadow:
		0 1px 2px color-mix( in srgb, var( --oga-glow-a ) 55%, transparent ),
		0 0  6px  color-mix( in srgb, var( --oga-glow-b ) 35%, transparent ) !important;
}

/* ── 2 · Every icon — emoji glyphs, inline SVG, and <img> icons.
 *       text-shadow does nothing to painted graphics, so icons get the
 *       filter equivalent: drop-shadow, using the same two-tone recipe. ── */
img, svg,
.oga-sms-icon, .ogace-pillar-icon,
[class*="-icon"], [class*="Icon"], [class*="icon-"] {
	filter:
		drop-shadow( 0 1px 2px color-mix( in srgb, var( --oga-glow-a ) 55%, transparent ) )
		drop-shadow( 0 0 4px  color-mix( in srgb, var( --oga-glow-b ) 35%, transparent ) ) !important;
}

/* ── 3 · Accessibility fallbacks carried over from ogace-finish.css §8 ──── */
@media ( forced-colors: active ) {
	*, img, svg { text-shadow: none !important; filter: none !important; }
}

@media print {
	*, img, svg { text-shadow: none !important; filter: none !important; }
}

/* ── 6/7 · ogace-black-diamond.css ───────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
 * OGACE BLACK DIAMOND LAYER — absolute last stylesheet loaded (see
 * functions.php enqueue: depends on oga-mini-app, oga-brand, oga-brand-
 * polish, oga-finish, oga-category-listings, oga-networks-white,
 * oga-brand-glow). Replaces the earlier flat glow / 10-hue gem cycle with
 * a logo-true finish:
 *
 *   1. TEXT   — stays clean and clear: no forced color, no highlight, no
 *               shadow. Type simply inherits whatever color the page
 *               cascade already gives it.
 *
 *   2. ICONS  — deep, saturated color pulled straight from the logo
 *               (brand blue / brand red, alternating per icon), finished
 *               with a crisp white highlight (a tight white drop-shadow)
 *               for a bright, polished, "cut gem" look — clean, not a
 *               colored glow.
 *
 * Nothing here touches layout, spacing, or markup — colors and the icon
 * highlight only. Accessibility fallbacks (forced-colors, print) are
 * carried over.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Logo-true deep colors (from assets/img/oga-mark-enhanced-polish.svg) ── */
	--logo-blue-deep:  #0A2463;  /* logo upper diamond */
	--logo-red-deep:   #C1121F;  /* logo lower diamond */
	--logo-white:      #ffffff;  /* white highlight, shared by every icon */
}

/* ── 1 · CLEAR TEXT ────────────────────────────────────────────────────────
 * No forced color, no highlight, no shadow — just antialiasing so type
 * still reads crisp. Color comes from whatever the page already defines
 * beneath this layer. */
body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, dt, dd, blockquote, figcaption, caption, summary,
label, button, input, textarea, select, legend,
small, code, kbd, pre, mark, time, strong, em,
.oga-section-label, .oga-btn, .oga-badge, .oga-pillar-chip,
.oga-stat-label, .oga-stat-value, .oga-stat-note,
.oga-dir-title, .oga-dir-desc, .oga-dir-layer,
.oga-entry-meta, .oga-article-body, .oga-article-body p,
.oga-brand-logo-name, .oga-brand-logo-sub, .oga-logo-name, .oga-logo-sub,
.oga-prompt, .oga-hero-title, .oga-article-title,
.oga-sms-headline, .oga-sms-eyebrow, .oga-sms-body,
.ogace-pillars-section h3, .ogace-pillars-section p {
	color: inherit !important;
	text-shadow: none !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── 2 · DEEP COLOR / WHITE HIGHLIGHT ICONS ───────────────────────────────
 * Every icon is pinned to a deep, saturated logo color (blue or red) and
 * finished with a tight white drop-shadow — the "highlight" — so it reads
 * as a bright, polished gem facet instead of a flat glyph. Icons
 * alternate blue/red per position so a row/grid still has visual rhythm,
 * but the palette always traces back to the logo, never an arbitrary hue. */
.oga-icon-btn svg, .oga-icon-btn img,
.oga-hamburger span,
.oga-pillar-chip .oga-pillar-icon, .ogace-pillar-icon,
.oga-filter-chip .chip-icon, .chip-icon,
.net-icon,
.oga-listing-icon,
.oga-detail-product-icon,
.oga-card-icon,
.oga-tp-icon,
.oga-sms-icon,
.oga-gl-icon,
.oga-feature-card__icon,
.oga-dir-icon, .oga-ps-icon,
.oga-tier-badge, .ogace-g-badge, .ogace-ai-badge, .oga-partner-badge,
[class*="-icon"], [class*="Icon"], [class*="icon-"] {
	color: var( --logo-blue-deep ) !important;
	fill: currentColor;
	filter:
		drop-shadow( 0 0.5px 0 var( --logo-white ) )
		drop-shadow( 0 0 1.5px color-mix( in srgb, var( --logo-white ) 90%, transparent ) ) !important;
	text-shadow: none !important;
}

/* Alternate every other icon to the logo's red, so repeating icon rows
 * carry both brand hues instead of one flat tint. */
.oga-pillars-strip .oga-pillar-chip:nth-of-type(2n) .oga-pillar-icon,
.oga-filters .oga-filter-chip:nth-of-type(2n) .chip-icon,
.oga-networks-wrap li:nth-of-type(2n) .net-icon,
.oga-listing-grid li:nth-of-type(2n) .oga-listing-icon,
.oga-card-grid li:nth-of-type(2n) .oga-card-icon,
.oga-tp-grid li:nth-of-type(2n) .oga-tp-icon,
.oga-sms-grid .oga-sms-card:nth-of-type(2n) .oga-sms-icon,
.oga-gl-grid li:nth-of-type(2n) .oga-gl-icon,
.oga-feature-grid li:nth-of-type(2n) .oga-feature-card__icon,
.oga-dir-grid li:nth-of-type(2n) .oga-dir-icon,
li:nth-of-type(2n) [class*="-icon"] {
	color: var( --logo-red-deep ) !important;
}

/* Fixed single-instance icons (hamburger, search/cart toggle, badges) get
 * one deep logo color each, same white-highlight polish as the rest. */
.oga-search-toggle svg { color: var( --logo-blue-deep ) !important; }
.oga-hamburger span    {
	background: var( --logo-red-deep ) !important;
	box-shadow:
		0 0 0 0.5px var( --logo-white ),
		0 0 1.5px color-mix( in srgb, var( --logo-white ) 90%, transparent );
}
.oga-badge {
	background: var( --logo-blue-deep ) !important;
	color: #fff !important;
	box-shadow:
		0 0 0 0.5px var( --logo-white ),
		0 0 1.5px color-mix( in srgb, var( --logo-white ) 90%, transparent );
}

/* ── 3 · Accessibility fallbacks (carried over from ogace-brand-glow.css) ─ */
@media ( forced-colors: active ) {
	*, img, svg { color: CanvasText !important; text-shadow: none !important; filter: none !important; }
}

@media print {
	*, img, svg { color: #000 !important; text-shadow: none !important; filter: none !important; }
}

/* ── 7/7 · ogace-hook-icon-polish.css ────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
 * OGACE HOOK + ICON POLISH LAYER — absolute last stylesheet loaded (after
 * oga-black-diamond). Two fixes on top of that layer:
 *
 *   1. ICONS — no shadow, clear colour, each one identifiable.
 *      black-diamond wraps every icon in a white drop-shadow rim. That's
 *      removed here (filter: none) so icons render clean and un-obscured:
 *      the pillar/tech-stack icons are emoji glyphs (🌐📱🤖…) and browsers
 *      always paint colour emoji as fixed multi-colour bitmaps regardless
 *      of CSS — dropping the filter lets that native colour read clearly
 *      instead of being dulled by a rim. True SVG/font icons (search
 *      toggle, hamburger, badges, chip icons) keep the flat, deep logo
 *      blue/red fill from black-diamond (still "clear colour", just with
 *      the shadow removed) so each stays distinct and identifiable.
 *
 *   2. HOOK BACKGROUND — now tied to the same brand blue/red as the hook
 *      text and the rest of the site, instead of the hook frame's old
 *      standalone orange accent (#D85A30, unrelated to the logo palette).
 *      The gradients, borders and CTA button in
 *      oga-marketing-hook-frame.css were repointed at the source from
 *      rgba(212,90,48) [orange] + rgba(55,138,221) [unrelated blue] to
 *      rgba(3,46,161) [logo blue] + rgba(224,0,37) [logo red], and
 *      --oga-accent's default (both the CSS token and the Customizer
 *      fallback in inc/oga-marketing-hook-frame.php) now points at
 *      #032EA1. The override below catches the one case those source
 *      edits can't reach: a site that already has a custom accent colour
 *      saved in the Customizer (oga_marketing_accent_color) — inline
 *      styles win over a stylesheet's normal rules, so without !important
 *      here a saved custom value would still show through as a mismatched
 *      colour against the new blue/red text and site background.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
	/* Updated for the new mark (oga-mark-enhanced-polish.svg): deep navy
	 * #0A2463 / red #C1121F. The old palette's blue-400 tint (3F6FD0) read
	 * fine at 4.77:1 on white; the new navy's blue-400 tint (7180a5) only
	 * clears 3.94:1, large-text-only — fine for the 42px/28px hero tagline,
	 * not safe for the smaller 16px section/card headings, so those get the
	 * darker blue-500 tint instead. */
	--oga-hook-text-blue-lg: #7180a5; /* brand-blue-400 · 3.94:1 on white — large text (tagline) only */
	--oga-hook-heading-blue: #3b5082; /* brand-blue-500 · 7.91:1 on white — safe at any size */
	--oga-hook-text-red:     #d7656d; /* brand-red-400  · 3.52:1 on white — large text (highlight words) only */
}

/* ── 1 · Icons — shadow off, clean flat colour ────────────────────────────
 * Same selector list as oga-black-diamond.css §2. filter: none strips the
 * white rim entirely; fill colour (deep logo blue/red, alternating) is
 * inherited unchanged from black-diamond's `color` / `fill: currentColor`. */
.oga-icon-btn svg, .oga-icon-btn img,
.oga-pillar-chip .oga-pillar-icon, .ogace-pillar-icon,
.oga-filter-chip .chip-icon, .chip-icon,
.net-icon,
.oga-listing-icon,
.oga-detail-product-icon,
.oga-card-icon,
.oga-tp-icon,
.oga-sms-icon,
.oga-gl-icon,
.oga-feature-card__icon,
.oga-dir-icon, .oga-ps-icon,
[class*="-icon"], [class*="Icon"], [class*="icon-"] {
	filter: none !important;
	text-shadow: none !important;
}

.oga-hamburger span,
.oga-badge {
	box-shadow: none !important;
}

/* ── 2 · Hook frame accent — pin to the brand blue no matter what's saved
 * in the Customizer, so the hero band, section rules, hover glow and CTA
 * button always match the (also brand-coloured) hook text and site canvas. */
.oga-hook-frame {
	--oga-accent: #0A2463 !important;
}

/* ── 3 · Hook text — light, clean, flat colour, zero shadow ──────────────── */
.oga-hook-tagline {
	color: var( --oga-hook-text-blue-lg ) !important;
	text-shadow: none !important;
}

.oga-hook-section-title,
.oga-card-title {
	color: var( --oga-hook-heading-blue ) !important;
	text-shadow: none !important;
}

.oga-highlight-word {
	color: var( --oga-hook-text-red ) !important;
	text-shadow: none !important;
	border-bottom-color: var( --oga-hook-text-red );
}

.oga-hook-subheading,
.oga-card-desc,
.oga-branding-subtitle,
.oga-branding-subtitle-khmer,
.oga-branding-description {
	text-shadow: none !important;
}

/* ── 4 · Accessibility fallbacks (same pattern as every prior layer) ─────── */
@media ( forced-colors: active ) {
	.oga-hook-frame *, .oga-hook-frame img, .oga-hook-frame svg {
		color: CanvasText !important; text-shadow: none !important; filter: none !important;
	}
}

@media print {
	.oga-hook-frame *, .oga-hook-frame img, .oga-hook-frame svg {
		color: #000 !important; text-shadow: none !important; filter: none !important;
	}
}