/*
Theme Name: ZWUtils
Theme URI: https://zwutils.com
Description: Astra child theme for ZWUtils - the marketing and legal pages (landing, about, privacy, terms, support, 404) that sit around the /app/ PWA. Same role as ZWSoccer's child theme: this is the site's front door, not the app itself.
Author: Calvin
Template: astra
Version: 1.0.0
*/

/* Same design tokens as app/css/app.css, kept in sync manually since this
   is a separate deploy target - if you change the app's palette, mirror
   the change here so the marketing pages and the app still feel like one
   product. */
:root {
	--zwu-ink: #16181D;
	--zwu-ink-soft: #1E2128;
	--zwu-paper: #F6F4EE;
	--zwu-signal: #FF6B35;
	--zwu-signal-dim: #C9501F;
	--zwu-verified: #2FA37C;
	--zwu-text: #F1EFE8;
	--zwu-text-dim: #9098A8;
	--zwu-line: rgba(255, 255, 255, 0.09);
	--zwu-radius: 14px;
	--zwu-radius-sm: 8px;
	--font-display: 'Space Grotesk', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

.zwu-page { background: var(--zwu-ink); color: var(--zwu-text); font-family: var(--font-body); min-height: 100vh; -webkit-font-smoothing: antialiased; }
.zwu-page * { box-sizing: border-box; }
.zwu-page a { color: inherit; }

.zwu-shell-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; max-width: 720px; margin: 0 auto; }
.zwu-shell-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; text-decoration: none; }
.zwu-shell-wordmark span { color: var(--zwu-signal); }
.zwu-shell-cta { font-family: var(--font-mono); font-size: 0.78rem; background: var(--zwu-signal); color: var(--zwu-ink); padding: 9px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; }

/* --------------------------- Landing page --------------------------- */

.zwu-hero { max-width: 720px; margin: 0 auto; padding: 36px 20px 28px; text-align: center; }
.zwu-hero-title { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.15; margin-bottom: 14px; }
.zwu-hero-title span { color: var(--zwu-signal); }
.zwu-hero-sub { font-size: 1.02rem; color: var(--zwu-text-dim); line-height: 1.55; max-width: 480px; margin: 0 auto 26px; }
.zwu-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.zwu-btn-primary { background: var(--zwu-signal); color: var(--zwu-ink); font-family: var(--font-display); font-weight: 700; padding: 14px 26px; border-radius: var(--zwu-radius-sm); text-decoration: none; }
.zwu-btn-secondary { background: none; border: 1px solid var(--zwu-line); color: var(--zwu-text); font-family: var(--font-display); font-weight: 600; padding: 13px 24px; border-radius: var(--zwu-radius-sm); text-decoration: none; }

.zwu-pillars { max-width: 720px; margin: 0 auto; padding: 8px 20px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.zwu-pillar-item { background: var(--zwu-ink-soft); border: 1px solid var(--zwu-line); border-radius: var(--zwu-radius); padding: 16px; }
.zwu-pillar-item-name { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; margin-bottom: 4px; }
.zwu-pillar-item-sub { font-family: var(--font-mono); font-size: 0.7rem; color: var(--zwu-text-dim); }

/* --------------------------- Content pages (about/privacy/terms/support) --------------------------- */

.zwu-article { max-width: 640px; margin: 0 auto; padding: 8px 20px 60px; }
.zwu-article h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; margin-bottom: 8px; }
.zwu-article .zwu-updated { font-family: var(--font-mono); font-size: 0.75rem; color: var(--zwu-text-dim); margin-bottom: 28px; }
.zwu-article h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-top: 30px; margin-bottom: 10px; }
.zwu-article p { line-height: 1.65; color: var(--zwu-text-dim); margin-bottom: 14px; }
.zwu-article ul { color: var(--zwu-text-dim); line-height: 1.65; padding-left: 20px; margin-bottom: 14px; }
.zwu-article a { color: var(--zwu-signal); }
.zwu-article strong { color: var(--zwu-text); }

/* --------------------------- 404 --------------------------- */

.zwu-404 { max-width: 480px; margin: 0 auto; padding: 80px 20px; text-align: center; }
.zwu-404-code { font-family: var(--font-mono); font-size: 0.85rem; color: var(--zwu-signal); margin-bottom: 10px; }
.zwu-404 h1 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 12px; }
.zwu-404 p { color: var(--zwu-text-dim); margin-bottom: 24px; }

/* --------------------------- Shared footer --------------------------- */

.zwu-shell-footer { max-width: 720px; margin: 40px auto 0; padding: 20px 20px 40px; border-top: 1px solid var(--zwu-line); display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--zwu-text-dim); }
.zwu-shell-footer a { text-decoration: none; }
.zwu-shell-footer a:hover { color: var(--zwu-text); }

/* --------------------------- Mobile app-install prompt --------------------------- */

.zwu-install-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 999;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.zwu-install-overlay.zwu-install-visible { opacity: 1; }

.zwu-install-card {
	background: var(--zwu-ink-soft);
	border: 1px solid var(--zwu-line);
	border-radius: var(--zwu-radius) var(--zwu-radius) 0 0;
	max-width: 440px;
	width: 100%;
	padding: 24px 20px 28px;
	position: relative;
	transform: translateY(16px);
	transition: transform 0.25s ease;
	font-family: var(--font-body);
	color: var(--zwu-text);
}
.zwu-install-overlay.zwu-install-visible .zwu-install-card { transform: translateY(0); }

.zwu-install-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	color: var(--zwu-text-dim);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 6px;
}

.zwu-install-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; }
.zwu-install-sub { color: var(--zwu-text-dim); font-size: 0.88rem; margin-bottom: 16px; line-height: 1.45; }

.zwu-install-instructions {
	font-size: 0.87rem;
	color: var(--zwu-text);
	background: var(--zwu-ink);
	border: 1px solid var(--zwu-line);
	border-radius: var(--zwu-radius-sm);
	padding: 12px 14px;
	margin-bottom: 18px;
	line-height: 1.6;
}
.zwu-instr-icon { display: inline-flex; width: 15px; height: 15px; vertical-align: -3px; color: var(--zwu-signal); }
.zwu-instr-icon svg { width: 100%; height: 100%; }

.zwu-install-open { display: block; text-align: center; margin-bottom: 10px; }
.zwu-install-dismiss { display: block; width: 100%; background: none; border: none; color: var(--zwu-text-dim); font-family: var(--font-mono); font-size: 0.8rem; padding: 8px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	.zwu-install-overlay, .zwu-install-card { transition: none; }
}