/* UCS Academy base styles — foundation only. Component library arrives in WU-03. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ucs-font-body);
  font-size: var(--ucs-fs-md);
  line-height: var(--ucs-lh);
  color: var(--color-text);
  background: var(--color-bg);
}
h1, h2, h3 { font-family: var(--ucs-font-heading); line-height: 1.2; color: var(--ucs-navy); margin: 0 0 var(--ucs-space-3); }
h1 { font-size: var(--ucs-fs-2xl); }
h2 { font-size: var(--ucs-fs-xl); }
p { margin: 0 0 var(--ucs-space-3); }
a { color: var(--color-link); text-underline-offset: 0.15em; }
a:hover { color: var(--ucs-navy); }
:focus-visible { outline: var(--ucs-focus-width) solid var(--ucs-focus); outline-offset: var(--ucs-focus-offset); }
img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: var(--ucs-container); margin-inline: auto; padding-inline: var(--ucs-gutter); }
main.container { padding-block: var(--ucs-space-5); }
/* WU-46: a page whose first element is the breadcrumb trail reads better with the breadcrumb
   sitting close to the nav bar above it, rather than separated by the generous page-top spacing
   every other page (without a breadcrumb) still keeps. */
main.container:has(> .breadcrumb:first-child) { padding-top: var(--ucs-space-2); }

.skip-link { position: absolute; left: -999px; top: var(--ucs-space-2); background: var(--ucs-surface); color: var(--ucs-navy); padding: var(--ucs-space-2) var(--ucs-space-3); border-radius: var(--ucs-radius-sm); z-index: 100; }
.skip-link:focus { left: var(--ucs-space-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.site-header { background: var(--color-surface); border-bottom: 1px solid var(--ucs-line); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ucs-space-3); min-height: 96px; }
.brand { display: inline-flex; align-items: center; gap: var(--ucs-space-2); text-decoration: none; }
.brand__logo { height: 84px; width: auto; display: block; max-width: none; }
.brand__logo--compact { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ucs-space-2); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--ucs-text); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--ucs-bg-soft); color: var(--ucs-navy); }

.hero { padding: var(--ucs-space-5) 0; max-width: 760px; }
/* The search form (no default form margin) and the CTA row below it were touching directly, since
   the generic `p { margin: 0 0 var(--ucs-space-3) }` rule sets zero top margin. Scoped to the hero so
   no other form, search bar or button group is affected. */
.hero .site-search { margin-bottom: var(--ucs-space-4); }
.hero .cluster { margin-top: 0; }
/* Homepage only: the hero already carries its own top/bottom padding, so stacking the
   container's full space-5 padding on top of it produced the excessive whitespace flagged in
   WU-20a's UI review. Scoped to .home-page so every other page keeps its existing spacing. */
main.container.home-page { padding-block: var(--ucs-space-4); }
.home-page .hero { padding: var(--ucs-space-3) 0 var(--ucs-space-4); max-width: 640px; }
.home-page .section { margin-block: var(--ucs-space-4); }
.eyebrow { font-family: var(--ucs-font-heading); font-weight: 600; color: var(--ucs-accent); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--ucs-fs-sm); }
.lede { font-size: var(--ucs-fs-lg); color: var(--color-text-soft); }
.actions { display: flex; flex-wrap: wrap; gap: var(--ucs-space-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border-radius: var(--ucs-radius-pill); font-family: var(--ucs-font-heading); font-weight: 600; text-decoration: none; border: 2px solid transparent; transition: background-color var(--ucs-transition), color var(--ucs-transition); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-secondary { background: var(--color-surface); color: var(--ucs-navy); border-color: var(--ucs-navy); }
.btn-secondary:hover { background: var(--ucs-bg-soft); }

.card { background: var(--color-surface); border-radius: var(--ucs-radius); box-shadow: var(--ucs-shadow-soft); padding: var(--ucs-space-4); }

.site-footer { border-top: 1px solid var(--ucs-line); margin-top: var(--ucs-space-5); padding: var(--ucs-space-4) 0; color: var(--color-text-soft); font-size: var(--ucs-fs-sm); }
.site-footer p { margin: 0 0 var(--ucs-space-1); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 720px) { h1 { font-size: var(--ucs-fs-xl); } .site-header__inner { min-height: 0; padding-block: var(--ucs-space-2); } .brand__logo--full { display: none; } .brand__logo--compact { display: block; height: 40px; } }