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