/* ==========================================================================
   FORCE PR — 03 BASE
   Reset and element defaults. This is the ONLY file permitted to use bare
   element selectors, and it only ever loads with this (inactive) theme.
   ========================================================================== */

@layer force.base {

  /* ----------------------------------------------------------------------
     Reset
     ---------------------------------------------------------------------- */

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Anchor targets clear a sticky header instead of hiding under it. */
    scroll-padding-block-start: var(--force-space-11);
  }

  /* Opt in to smooth scrolling only when the user has not asked otherwise. */
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    background-color: var(--force-bg);
    color: var(--force-text);
    font-family: var(--force-font-body);
    font-size: var(--force-text-body);
    font-weight: var(--force-weight-regular);
    line-height: var(--force-leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Polish compounds are long; never let one blow out a narrow column. */
    overflow-wrap: break-word;
  }

  /* Flow spacing. One rule replaces hundreds of vc_empty_space blocks. */
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd, ol, ul, pre, table { margin: 0; }

  /* ----------------------------------------------------------------------
     Headings
     ---------------------------------------------------------------------- */

  h1, h2, h3, h4 {
    font-family: var(--force-font-display);
    font-weight: var(--force-weight-semibold);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--force-text);
  }

  h1 {
    font-size: var(--force-text-h1);
    line-height: var(--force-leading-h1);
    letter-spacing: var(--force-tracking-h1);
  }

  h2 {
    font-size: var(--force-text-h2);
    line-height: var(--force-leading-h2);
    letter-spacing: var(--force-tracking-h2);
  }

  h3 {
    font-size: var(--force-text-h3);
    line-height: var(--force-leading-h3);
    letter-spacing: var(--force-tracking-h3);
  }

  h4 {
    font-size: var(--force-text-h4);
    line-height: var(--force-leading-h4);
    letter-spacing: var(--force-tracking-none);
  }

  /* h5 is the eyebrow. h6 is the lead paragraph.
     The legacy site used <h6> for lead paragraphs in content (DESIGN-AUDIT
     A-1) — a real accessibility defect, because it injected a heading into
     the document outline purely to get a font size. We cannot retroactively
     fix 87 legacy headings, but we can make sure the NEW system never needs
     that trick: `.force-lead` below is the supported way to get lead copy,
     and h5/h6 are styled only so imported legacy markup degrades sanely. */

  h5 {
    font-family: var(--force-font-display);
    font-size: var(--force-text-eyebrow);
    font-weight: var(--force-weight-semibold);
    line-height: var(--force-leading-tight);
    letter-spacing: var(--force-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--force-accent);
  }

  h6 {
    font-family: var(--force-font-body);
    font-size: var(--force-text-body-lg);
    font-weight: var(--force-weight-regular);
    line-height: var(--force-leading-lead);
    letter-spacing: var(--force-tracking-none);
    text-transform: none;
    color: var(--force-text);
  }

  /* ----------------------------------------------------------------------
     Text
     ---------------------------------------------------------------------- */

  p { max-width: var(--force-measure-body); }

  strong, b { font-weight: var(--force-weight-semibold); }

  small { font-size: var(--force-text-body-sm); }

  ::selection {
    background-color: var(--force-color-magenta);
    color: var(--force-color-white);
  }

  /* ----------------------------------------------------------------------
     Links
     The legacy site removes underlines globally and signals links with
     colour alone — a WCAG 1.4.1 failure inside running text. Here, links in
     prose are underlined; only links that are visually obvious on their own
     (nav, buttons, cards) opt out via .force-link--bare.
     ---------------------------------------------------------------------- */

  a {
    color: var(--force-text);
    text-decoration: underline;
    text-decoration-color: var(--force-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--force-duration-fast) var(--force-ease),
                text-decoration-color var(--force-duration-fast) var(--force-ease);
  }

  a:hover {
    color: var(--force-accent-secondary);
    text-decoration-color: var(--force-accent-secondary);
  }

  /* ----------------------------------------------------------------------
     Focus — global, visible, never removed
     :focus-visible so mouse users do not see rings, keyboard users always do.
     ---------------------------------------------------------------------- */

  :focus { outline: none; }

  :focus-visible {
    outline: 2px solid var(--force-focus);
    outline-offset: 3px;
    border-radius: var(--force-radius-xs);
  }

  /* ----------------------------------------------------------------------
     Media
     ---------------------------------------------------------------------- */

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

  svg { fill: currentColor; }

  figure { margin: 0; }

  figcaption {
    margin-block-start: var(--force-space-3);
    font-size: var(--force-text-caption);
    color: var(--force-text-muted);
  }

  /* ----------------------------------------------------------------------
     Lists
     ---------------------------------------------------------------------- */

  ul, ol {
    padding-inline-start: var(--force-space-5);
    max-width: var(--force-measure-body);
  }

  li + li { margin-block-start: var(--force-space-2); }

  /* ----------------------------------------------------------------------
     Tables
     ---------------------------------------------------------------------- */

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--force-text-body-sm);
  }

  th, td {
    padding: var(--force-space-3) var(--force-space-4);
    text-align: start;
    border-block-end: var(--force-border-subtle);
  }

  th {
    font-family: var(--force-font-display);
    font-weight: var(--force-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--force-tracking-nav);
    color: var(--force-text-muted);
  }

  /* ----------------------------------------------------------------------
     Forms — inherit type instead of falling back to the UA default
     ---------------------------------------------------------------------- */

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

  button { cursor: pointer; }

  /* ----------------------------------------------------------------------
     Misc
     ---------------------------------------------------------------------- */

  hr {
    border: 0;
    block-size: 1px;
    background: var(--force-gradient-rule);
    opacity: 0.45;
    margin-block: var(--force-space-8);
  }

  blockquote {
    padding-inline-start: var(--force-space-5);
    border-inline-start: var(--force-border-width-thick) solid var(--force-accent);
    font-size: var(--force-text-body-lg);
    line-height: var(--force-leading-lead);
  }

  code, pre, kbd, samp {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
    font-size: 0.9em;
  }

  /* Legacy note: `[hidden]` is reasserted because some plugin resets clobber
     it, and this theme must behave predictably next to them. */
  [hidden] { display: none !important; }
}