/*
 * base.css
 *
 * Global foundation only: resets, baseline element behavior, focus and
 * motion accessibility, and a small set of layout primitives. No
 * homepage-section or component-specific styling lives here - that
 * belongs in components.css. Colors, font families, heading sizes, link
 * color, and button styling are already set globally by theme.json; this
 * file only adds structural/interaction behavior theme.json does not
 * cover, using the aliases from tokens.css.
 */

/* Box sizing */

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

/* HTML / body baseline */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Responsive media */

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

iframe {
  max-width: 100%;
}

/* Headings */
/* Font family, size, weight, and color for headings are already set
   globally by theme.json (styles.elements.heading, h1-h6). Only
   supplementary wrapping behavior lives here. */

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

h1,
h2,
h3 {
  text-wrap: balance;
}

/* Paragraphs */
/* Text color, size, and line-height are already set globally by
   theme.json. Width is intentionally not constrained here; layout
   containers and patterns control reading width via
   .prvnt-reading-width. */

p {
  margin: 0 0 var(--space-sm);
  overflow-wrap: break-word;
}

p:last-child {
  margin-bottom: 0;
}

/* Links */
/* Color and underline are already set globally by theme.json
   (styles.elements.link). Only resting and hover refinements live
   here; any dark-section color override belongs to patterns and
   components. */

a {
  text-underline-offset: 0.15em;
  text-decoration-thickness: max(1px, 0.05em);
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.75;
}

/* Lists */
/* Baseline spacing only. Classed lists are intentionally not
   de-styled here, since Gutenberg and core content lists may carry
   classes and de-styling them could strip bullets or numbers from
   legitimate editorial content. Component-specific navigation and
   list resets are handled later with explicit PRVNT component
   selectors. */

ul,
ol {
  margin: 0 0 var(--space-sm);
  padding-inline-start: 1.25em;
}

/* Figures and captions */
/* Caption typography is already set globally by theme.json
   (styles.elements.caption). Only the figure box reset lives here. */

figure {
  margin: 0;
}

/* Forms and native buttons */
/* Font and color inheritance plus appearance normalization only.
   Background is intentionally left alone so native or third-party
   integration buttons keep their own default appearance until PRVNT
   buttons are styled explicitly later via theme.json and
   components.css. */

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

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

/* Focus-visible */
/* focus-visible is used instead of removing outlines outright:
   browsers without focus-visible support simply will not match these
   rules and keep their native focus outline. The ring pairs a dark
   inner outline with a teal outer halo so it stays visible on both
   light surfaces and the dark and teal sections in the approved
   design, since teal alone does not have enough contrast against
   white to satisfy WCAG 1.4.11 on its own. */

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--prvnt-black);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--prvnt-teal);
}

/* Text selection */

::selection {
  background-color: var(--prvnt-teal);
  color: var(--prvnt-black);
}

/* Reduced motion */
/* Shortens animation and transition duration to effectively nothing
   for users who request reduced motion. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* Screen-reader utility */
/* Supports the skip-link and other accessible-but-visually-hidden
   content called for in the implementation plan and accessibility
   requirements. */

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

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Layout helpers */
/* A small, purposeful set of layout primitives only, not a utility
   framework. Homepage and component-specific layout lives in
   components.css and the patterns themselves.

   prvnt-full-bleed is intentionally omitted here: the standard
   100vw plus negative-margin technique measures the viewport
   including the scrollbar, so on platforms with a non-overlay
   scrollbar it can be a few pixels wider than the visible viewport
   and introduce horizontal scroll on the whole page. WordPress's
   native alignfull support, or a component-level solution, can
   handle true full-bleed sections later without that risk. */

.prvnt-container {
  width: min(100%, calc(var(--container-max) + (var(--gutter) * 2)));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prvnt-reading-width {
  width: 100%;
  max-width: var(--container-reading);
  margin-inline: auto;
}

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