/* =============================================================================
 * ogace-front.css — simple front page, scoped + parent-theme-safe.
 * Everything under .ogace-front; uses --ogace-* umbrella tokens WITH fallbacks
 * so it looks right whether or not the umbrella is active, and can neither leak
 * into nor be broken by the partner theme. No fixed/full-bleed positioning —
 * it sits cleanly inside the theme's content column.
 * ========================================================================== */

.ogace-front{
	--of-ink:      var(--ogace-ink-bright, #17222b);
	--of-dim:      var(--ogace-ink-dim, #5c6b78);
	--of-gold:     var(--ogace-gold, #e0a422);
	--of-line:     var(--ogace-line, rgba(60,80,95,.18));
	--of-surface:  var(--ogace-surface, #ffffff);
	--of-radius:   var(--ogace-radius, 14px);
	--of-g0: var(--ogace-g0,#26c6da); --of-g2: var(--ogace-g2,#ab47bc); --of-g3: var(--ogace-g3,#ffa726);
	max-width: 960px;
	margin: 0 auto;
	font-family: var(--ogace-font-body, inherit);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.ogace-front .of-hero{ text-align: center; padding: 8px 0 28px; }
.ogace-front .of-eyebrow{
	font-family: var(--ogace-font-mono, ui-monospace, monospace);
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--of-gold); margin: 0 0 10px;
}
.ogace-front .of-title{
	font-family: var(--ogace-font-display, inherit);
	font-size: clamp(26px, 4.5vw, 40px); line-height: 1.1; font-weight: 800;
	color: var(--of-ink); margin: 0 0 12px;
}
.ogace-front .of-sub{ font-size: 16px; color: var(--of-dim); margin: 0 auto 20px; max-width: 34em; }
.ogace-front .of-cta{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ogace-front .of-btn{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 20px; border-radius: var(--of-radius); text-decoration: none;
	font-weight: 600; font-size: 15px; color: var(--of-ink);
	border: 1px solid var(--of-line); background: transparent;
	transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.ogace-front .of-btn:hover{ transform: translateY(-2px); }
.ogace-front .of-btn--primary{
	color: #0a0f14; border-color: transparent;
	background: linear-gradient(90deg, var(--of-g0), var(--of-g2));
	box-shadow: 0 8px 20px -10px var(--of-g2);
}

/* ── Explore grid ─────────────────────────────────────────────────── */
.ogace-front .of-explore{ padding: 4px 0 24px; }
.ogace-front .of-grid{
	display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px;
}
.ogace-front .of-card{
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 20px 12px; border-radius: var(--of-radius); text-decoration: none;
	color: var(--of-ink); border: 1px solid var(--of-line); background: var(--of-surface);
	transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.ogace-front .of-card:hover{ transform: translateY(-3px); border-color: var(--of-g0); box-shadow: 0 10px 24px -14px var(--of-g0); }
.ogace-front .of-card-ic{ font-size: 26px; line-height: 1; }
.ogace-front .of-card-lb{ font-size: 14px; font-weight: 600; }

/* ── Ask OGACE ────────────────────────────────────────────────────── */
.ogace-front .of-ask{
	display: flex; align-items: center; gap: 8px;
	padding: 6px 6px 6px 14px; border: 1px solid var(--of-line);
	border-radius: var(--of-radius); background: var(--of-surface);
	max-width: 560px; margin: 4px auto 8px;
}
.ogace-front .of-ask-ic{ font-size: 18px; flex: none; }
.ogace-front .of-ask-in{
	flex: 1; border: 0; outline: 0; background: transparent; min-width: 0;
	font-size: 15px; color: var(--of-ink); padding: 8px 4px;
}
.ogace-front .of-ask-btn{
	flex: none; border: 0; cursor: pointer; padding: 9px 18px; border-radius: calc(var(--of-radius) - 4px);
	font-weight: 700; font-size: 14px; color: #0a0f14;
	background: linear-gradient(90deg, var(--of-g3), var(--of-gold));
}

@media (max-width: 520px){
	.ogace-front .of-cta{ flex-direction: column; }
	.ogace-front .of-btn{ justify-content: center; }
}