/* Theme Name: ZeroY Starter */
:root{font-family:var(--font-body);color:var(--color-ink);background:var(--color-background)}body{margin:0}main,header,footer{max-width:var(--gt-container);margin-inline:auto;padding:var(--space-section)}header,footer{padding-inline:var(--gt-gutter)}h1{font-size:clamp(3rem,8vw,7rem);line-height:1.02;letter-spacing:-.05em}a{color:inherit}p{line-height:1.7;max-width:65ch}.hero{padding-block:90px}button,.button{display:inline-block;padding:15px 24px;background:var(--color-ink);color:white;border-radius:var(--radius-control);text-decoration:none}img{max-width:100%;height:auto}:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
.site-brand{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;line-height:1.3}
.site-brand__name{font-weight:600}
.site-brand__tagline{font-size:.8125rem;color:var(--color-ink);opacity:.7}
.site-footer{display:flex;flex-wrap:wrap;gap:var(--gt-space-2) var(--gt-space-6);align-items:baseline;justify-content:space-between;border-top:1px solid var(--gt-border)}
.site-footer p{margin:0}
.site-footer__brand{margin:0;font-weight:600;font-size:.9375rem}
.site-footer__legal,.site-footer__copy{margin:0;color:var(--gt-muted);font-size:.8125rem}

/* Default page wrapper */
.page-content-wrapper{min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.page-body{width:100%}

/* Site header + audience dropdown nav */
.site-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--gt-space-4) var(--gt-space-6);padding-block:var(--gt-space-6)}
.site-nav{display:flex;align-items:center;gap:var(--gt-space-6)}
.site-nav__dropdown{position:relative}
.site-nav__trigger{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;background:none;border:0;border-radius:var(--gt-radius-input);font:inherit;font-size:.9375rem;font-weight:500;line-height:1;color:var(--gt-text);cursor:pointer;transition:var(--gt-transition)}
/* DESIGN.md gives nav links a copper hover. Copper text on white is 3.25:1, so
   the label stays dark and the copper shows as the underline instead. */
.site-nav__trigger:hover,.site-nav__trigger[aria-expanded="true"]{color:var(--gt-navy);background:var(--gt-surface);box-shadow:inset 0 -2px 0 var(--gt-copper-light)}
.site-nav__trigger:focus-visible{outline:3px solid var(--gt-blue);outline-offset:2px}
.site-nav__trigger svg{transition:transform .2s ease}
.site-nav__dropdown[data-state="open"] .site-nav__trigger svg{transform:rotate(180deg)}
.site-nav__panel{min-width:220px;padding:8px;background:var(--gt-white);border:1px solid var(--gt-border);border-radius:var(--gt-radius-card);box-shadow:var(--gt-shadow-hover)}
.site-nav__item{display:block;padding:10px 14px;border-radius:var(--gt-radius-input);font-size:.9375rem;font-weight:500;line-height:1.4;color:var(--gt-text);text-decoration:none;white-space:nowrap;transition:var(--gt-transition)}
.site-nav__item:hover{background:var(--gt-surface);color:var(--gt-navy)}
.site-nav__item:focus-visible{outline:3px solid var(--gt-blue);outline-offset:-2px}

.site-nav__link{font-size:.9375rem;font-weight:500;color:var(--gt-text);text-decoration:none;transition:var(--gt-transition)}
.site-nav__link:hover{color:var(--gt-navy);box-shadow:inset 0 -2px 0 var(--gt-copper-light)}
.gt-header-cta{display:inline-flex;align-items:center;padding:8px 18px;background:var(--gt-copper-light);color:var(--gt-navy);font-size:.875rem;font-weight:600;text-decoration:none;border-radius:var(--gt-radius-input);transition:var(--gt-transition)}
.gt-header-cta:hover{background:var(--gt-copper);color:var(--gt-navy)}

/* ==========================================================================
   Global Section & Container Utilities (Goodtop Design System)
   Tokens: --gt-container (1200px), --gt-gutter (clamp 16-40px), --gt-section-space
   ========================================================================== */
.gt-wrap {
	max-width: var(--gt-container);
	margin-inline: auto;
	padding-inline: var(--gt-gutter);
	box-sizing: border-box;
}

.gt-sec {
	padding-block: var(--gt-section-space);
}

.gt-sec--surface {
	background: var(--gt-surface);
}

.gt-sec--navy {
	background: var(--gt-navy);
	color: var(--gt-white);
}

.gt-narrow {
	max-width: 720px;
}