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