/* Site layer on top of GeneratePress: colors, type, bento, CTA. */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

body.geo-site {
	background: var(--geo-bg);
	color: var(--geo-text);
	font-family: var(--geo-font);
	font-size: var(--geo-step-0);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.geo-site :is(.site-header, .main-navigation, .main-navigation ul ul, .site-footer, .inside-article, .site-info, .separate-containers .inside-article, .one-container .container) {
	background: transparent;
	color: inherit;
}

.geo-site :is(h1, h2, h3, h4) {
	color: var(--geo-text);
	font-family: var(--geo-font);
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

.geo-site h1 { font-size: var(--geo-step-3); font-weight: 750; }
.geo-site h2 { font-size: var(--geo-step-2); font-weight: 700; margin-top: var(--geo-6); }
.geo-site h3 { font-size: var(--geo-step-1); font-weight: 650; }
.geo-site p { text-wrap: pretty; }

.geo-site a { color: var(--geo-accent-text); text-underline-offset: 3px; }
.geo-site a:hover { color: var(--geo-accent-strong); }

.geo-site :focus-visible {
	outline: none;
	box-shadow: var(--geo-ring);
	border-radius: 6px;
}

.geo-site .main-navigation a,
.geo-site .main-navigation .menu-toggle {
	color: var(--geo-text);
	min-height: var(--geo-touch);
}

/* Lead answer: the 40–60 word summary near the top of every tool page */
.geo-answer {
	font-size: var(--geo-step-1);
	color: var(--geo-muted);
	max-width: 68ch;
}

/* Hero */
.geo-hero h1 {
	font-size: var(--geo-step-4);
	font-variation-settings: "wght" 800;
	max-width: 18ch;
}

.geo-eyebrow {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--geo-accent-soft);
	color: var(--geo-accent-text);
	font-size: var(--geo-step--1);
	font-weight: 600;
}

/* Buttons from core/button */
.geo-site .wp-block-button__link {
	min-height: var(--geo-touch);
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.25rem;
	border-radius: var(--geo-radius-sm);
	background: var(--geo-accent);
	color: var(--geo-on-accent);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--geo-fast) var(--geo-ease), background var(--geo-fast);
}

.geo-site .wp-block-button__link:hover { background: var(--geo-accent-strong); color: var(--geo-on-accent); transform: translateY(-1px); }
.geo-site .is-style-outline .wp-block-button__link { background: transparent; color: var(--geo-text); border: 1px solid var(--geo-border); }

/* Cards and bento grid */
.geo-card {
	background: var(--geo-surface);
	border: 1px solid var(--geo-border);
	border-radius: var(--geo-radius);
	padding: var(--geo-3);
	box-shadow: var(--geo-shadow);
}

.geo-glass {
	background: var(--geo-surface-glass);
	backdrop-filter: saturate(160%) blur(16px);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
}

.geo-bento {
	display: grid;
	gap: var(--geo-2);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	container-type: inline-size;
}

@container (min-width: 56rem) {
	.geo-bento { grid-template-columns: repeat(4, 1fr); }
	.geo-bento > .geo-span-2 { grid-column: span 2; }
	.geo-bento > .geo-tall { grid-row: span 2; }
}

.geo-tile,
.geo-site .geo-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--geo-1);
	min-height: 10rem;
	padding: var(--geo-3);
	border-radius: var(--geo-radius);
	border: 1px solid var(--geo-border);
	background: var(--geo-surface);
	color: var(--geo-text);
	text-decoration: none;
	transition: transform var(--geo-fast) var(--geo-ease), border-color var(--geo-fast), box-shadow var(--geo-fast);
}

.geo-site a.geo-tile:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--geo-accent) 45%, var(--geo-border));
	box-shadow: var(--geo-shadow);
	color: var(--geo-text);
}

.geo-tile__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: var(--geo-accent-soft);
	color: var(--geo-accent-text);
	font-family: var(--geo-mono);
	font-weight: 700;
}

.geo-tile__title { font-size: var(--geo-step-1); font-weight: 650; line-height: 1.25; }
.geo-tile__text { color: var(--geo-muted); font-size: var(--geo-step--1); margin: 0; }
.geo-tile__badge { position: absolute; top: var(--geo-2); right: var(--geo-2); font-size: 0.75rem; font-weight: 600; color: var(--geo-muted); border: 1px solid var(--geo-border); border-radius: 999px; padding: 0 0.5rem; }
.geo-tile--feature { background: radial-gradient(120% 120% at 0% 0%, var(--geo-accent-soft), transparent 60%), var(--geo-surface); }
.geo-tile--soon { opacity: 0.75; }

/* FAQ (core/details inside .geo-faq) */
.geo-faq details {
	border-bottom: 1px solid var(--geo-border);
	padding: var(--geo-2) 0;
}

.geo-faq summary {
	min-height: var(--geo-touch);
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.geo-faq summary::-webkit-details-marker { display: none; }
.geo-faq summary::after { content: "+"; margin-left: auto; color: var(--geo-muted); transition: transform var(--geo-fast); }
.geo-faq details[open] summary::after { transform: rotate(45deg); }

/* How it works */
.geo-steps { counter-reset: geo-step; }
.geo-steps > li { counter-increment: geo-step; list-style: none; position: relative; padding-left: var(--geo-5); margin-bottom: var(--geo-2); }
.geo-steps > li::before { content: counter(geo-step); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--geo-accent); color: var(--geo-on-accent); font-size: 0.875rem; font-weight: 700; }

/* Agency CTA */
.geo-cta {
	display: grid;
	gap: var(--geo-2);
	padding: var(--geo-4);
	border-radius: var(--geo-radius);
	background: linear-gradient(135deg, var(--geo-accent), #312e81);
	color: #fff;
}

.geo-cta h2, .geo-cta p { color: #fff; margin: 0; }
.geo-site .geo-cta .geo-cta__btn { justify-self: start; min-height: var(--geo-touch); display: inline-flex; align-items: center; padding: 0.625rem 1.25rem; border-radius: var(--geo-radius-sm); background: #fff; color: #312e81; font-weight: 700; text-decoration: none; }
.geo-site .geo-cta .geo-cta__btn:hover { color: #312e81; transform: translateY(-1px); }

/* Reserved ad slot: fixed height prevents layout shift when ads load later */
.geo-ad-slot { min-height: 280px; margin: var(--geo-4) 0; }