/* ============================================================================
 * OGAICE Front Header Nav — redesign
 * Scoped under .ogfn-*, self-contained so it can drop into any theme
 * without depending on the theme's own header styling. Falls back to
 * plain values if ogaice-brand-tokens.css hasn't loaded on this template.
 * ========================================================================== */

.ogfn-header {
	--ogfn-blue: var(--oga-blue, #032ea1);
	--ogfn-blue-dark: var(--oga-blue-dark, #021d66);
	--ogfn-ink: var(--oga-ink, #1a1a1a);
	--ogfn-ink-muted: var(--oga-ink-muted, #5a5a5a);
	--ogfn-border: var(--oga-border, #e2e4e9);
	--ogfn-bg: var(--oga-bg, #ffffff);
	--ogfn-bg-soft: var(--oga-bg-soft, #f5f6f8);
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

.ogfn-nav { background: var(--ogfn-bg); border-bottom: 1px solid var(--ogfn-border); }
.ogfn-nav--sticky { position: sticky; top: 0; z-index: 500; }

.ogfn-row {
	max-width: 1200px; margin: 0 auto; padding: 10px 20px;
	display: flex; align-items: center; gap: 20px;
}

.ogfn-brand {
	display: flex; align-items: center; gap: 8px; text-decoration: none !important;
	font-weight: 700; font-size: 19px; color: var(--ogfn-blue-dark) !important;
	flex: none;
}
.ogfn-brand-mark { font-size: 20px; }

.ogfn-burger {
	display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer;
	flex-direction: column; gap: 4px;
}
.ogfn-burger span { width: 22px; height: 2px; background: var(--ogfn-ink); display: block; }

.ogfn-panel { display: flex; align-items: center; gap: 22px; flex: 1; }

.ogfn-pillars { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.ogfn-pillars a {
	display: inline-block; padding: 9px 12px; border-radius: 8px;
	color: var(--ogfn-ink); text-decoration: none; font-weight: 600; font-size: 14px;
}
.ogfn-pillars a:hover { background: var(--ogfn-bg-soft); }

.ogfn-explore { position: relative; }
.ogfn-explore-btn {
	background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
	color: var(--ogfn-ink); padding: 9px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px;
}
.ogfn-explore-btn:hover, .ogfn-explore-btn[aria-expanded="true"] { background: var(--ogfn-bg-soft); }
.ogfn-caret { font-size: 10px; }

.ogfn-mega {
	display: none; position: absolute; top: calc(100% + 8px); left: 0;
	background: var(--ogfn-bg); border: 1px solid var(--ogfn-border); border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.12); padding: 22px; gap: 26px;
	grid-template-columns: repeat(5, 160px); z-index: 600;
}
.ogfn-mega.is-open { display: grid; }
@media (max-width: 980px) { .ogfn-mega { grid-template-columns: repeat(2, 1fr); position: static; box-shadow: none; margin-top: 10px; } }

.ogfn-mega-h {
	font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ogfn-ink-muted);
	margin: 0 0 10px; display: flex; align-items: center; gap: 6px; font-weight: 700;
}
.ogfn-mega-col ul { list-style: none; margin: 0; padding: 0; }
.ogfn-mega-col li { margin-bottom: 8px; }
.ogfn-mega-col a { color: var(--ogfn-ink); text-decoration: none; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.ogfn-mega-col a:hover { color: var(--ogfn-blue); text-decoration: underline; }
.ogfn-mega-ic { font-size: 13px; width: 16px; text-align: center; flex: none; }

.ogfn-cta {
	margin-left: auto; background: var(--ogfn-blue); color: #fff !important; text-decoration: none !important;
	padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.ogfn-cta:hover { background: var(--ogfn-blue-dark); }

/* Mobile */
@media (max-width: 860px) {
	.ogfn-burger { display: flex; }
	.ogfn-panel {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		background: var(--ogfn-bg); border-bottom: 1px solid var(--ogfn-border);
		flex-direction: column; align-items: stretch; padding: 14px 20px 20px; gap: 14px;
	}
	.ogfn-panel.is-open { display: flex; }
	.ogfn-row { position: relative; }
	.ogfn-pillars { flex-direction: column; gap: 2px; }
	.ogfn-mega { grid-template-columns: 1fr; }
	.ogfn-cta { margin-left: 0; text-align: center; }
}