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