/*
 * base.css -- CSS reset, body defaults, container, layout primitives
 * Depends on: tokens.css
 * Load order: 2 of 4
 */

/* ============================================================
   RESET
   Modern minimal reset -- not a full normalize.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Respect reduced motion for scroll-behavior */
  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--gp-bone);
  color: var(--gp-ink);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  font-weight: var(--gp-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--gp-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--gp-transition-base);
}

a:hover {
  color: var(--gp-primary-700);
}

a:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

/* Remove default focus ring for mouse users; keep for keyboard */
a:focus:not(:focus-visible) {
  outline: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

button:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* ============================================================
   SKIP-TO-CONTENT LINK
   Visually hidden until focused; required for WCAG 2.1 AA 2.4.1
   ============================================================ */

/* Visually hidden, available to assistive tech. Migrated from critical.css
   (which is not enqueued); header.php emits class="skip-link screen-reader-text"
   and class="screen-reader-text" on the mobile-menu label. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal;
  white-space: nowrap;
}

/* skip-link: matches class="skip-link screen-reader-text" in header.php */
.skip-link,
.skip-to-content {
  position: absolute;
  top: -9999px;
  left: var(--gp-space-4);
  z-index: var(--gp-z-toast);
  padding: var(--gp-space-2) var(--gp-space-4);
  background: var(--gp-primary);
  color: var(--gp-white);
  font-weight: var(--gp-weight-semibold);
  font-size: var(--gp-text-body);
  border-radius: var(--gp-radius-md);
  text-decoration: none;
  transition: top var(--gp-transition-base);
}

.skip-link:focus,
.skip-link:focus-visible,
.skip-to-content:focus {
  top: var(--gp-space-4);
  outline: var(--gp-focus-width) solid var(--gp-white);
  outline-offset: var(--gp-focus-offset);
}

/* ============================================================
   CONTAINER
   Content: 1280px max. Wide (hero/bands): 1440px max.
   Side padding scales with breakpoints.
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--gp-container);
  margin-inline: auto;
  padding-inline: var(--gp-container-px);
}

.container--wide {
  max-width: var(--gp-container-wide);
}

.container--narrow {
  max-width: 800px;
}

/* Responsive container padding */
@media (min-width: 640px) {
  :root { --gp-container-px: var(--gp-space-6); } /* 32px */
}

@media (min-width: 1024px) {
  :root { --gp-container-px: var(--gp-space-7); } /* 48px */
}

@media (min-width: 1280px) {
  :root { --gp-container-px: var(--gp-space-8); } /* 64px */
}

/* ============================================================
   LAYOUT PRIMITIVES
   Composable single-purpose layout helpers.
   ============================================================ */

/* Stack: vertical flex with configurable gap */
.stack {
  display: flex;
  flex-direction: column;
}

.stack--1  { gap: var(--gp-space-1); }
.stack--2  { gap: var(--gp-space-2); }
.stack--3  { gap: var(--gp-space-3); }
.stack--4  { gap: var(--gp-space-4); }
.stack--5  { gap: var(--gp-space-5); }
.stack--6  { gap: var(--gp-space-6); }
.stack--7  { gap: var(--gp-space-7); }
.stack--8  { gap: var(--gp-space-8); }

/* Cluster: horizontal flex that wraps */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gp-space-4);
}

/* Grid: auto-fit responsive grid */
.grid {
  display: grid;
  gap: var(--gp-space-5);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Collapse grids to single column on small screens */
@media (max-width: 767px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Asymmetric hero grid: 60/40 split */
.grid--hero {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--gp-space-8);
  align-items: center;
}

@media (max-width: 1023px) {
  .grid--hero {
    grid-template-columns: 1fr;
    gap: var(--gp-space-6);
  }
}

/* Section spacing */
.section {
  padding-block: var(--gp-space-9); /* 96px top/bottom default */
}

.section--sm {
  padding-block: var(--gp-space-7); /* 48px */
}

.section--lg {
  padding-block: var(--gp-space-10); /* 128px */
}

@media (max-width: 767px) {
  .section     { padding-block: var(--gp-space-7); }
  .section--sm { padding-block: var(--gp-space-5); }
  .section--lg { padding-block: var(--gp-space-9); }
}

/* ============================================================
   SITE MAIN -- offset for sticky header
   Migrated from the de-referenced critical.css (which is no longer
   enqueued). header.php emits <main class="site-main"> on every page,
   so this rule lives in base.css to keep that emitted class styled.
   ============================================================ */
.site-main {
  min-height: calc(100vh - var(--gp-nav-height));
}

/* Surface colors */
.surface--bone    { background-color: var(--gp-bone); }
.surface--white   { background-color: var(--gp-white); }
.surface--ink     { background-color: var(--gp-ink); color: var(--gp-white); }
.surface--primary { background-color: var(--gp-primary); color: var(--gp-white); }
.surface--primary-50 { background-color: var(--gp-primary-50); }

/* Visually hidden (screen-reader accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--gp-slate-200);
  margin-block: var(--gp-space-6);
}

/* Aspect ratios */
.aspect--16-10 { aspect-ratio: 16 / 10; overflow: hidden; }
.aspect--16-7  { aspect-ratio: 16 / 7;  overflow: hidden; }
.aspect--1-1   { aspect-ratio: 1 / 1;   overflow: hidden; }

.aspect--16-10 img,
.aspect--16-7  img,
.aspect--1-1   img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* WordPress-generated content class resets */
.wp-block-image { margin: 0; }
.alignwide  { max-width: var(--gp-container-wide); margin-inline: auto; }
.alignfull  { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
  .alignfull { transform: none; left: auto; width: 100%; }
}