/* ══════════════════════════════════════════════════════════════════════════
 * 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-logo.svg) ──────────── */
	--logo-blue-deep:  #032EA1;  /* logo upper diamond */
	--logo-red-deep:   #E00025;  /* 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; }
}