/* ============================================================
   site-page-base.css  --  SITE-WIDE
   The boilerplate every Redesign 2026 page used to carry in its own
   stylesheet, held once: the scoped reset, the button and header
   resets, the keyboard focus ring, the content column (.container)
   and the shared section-title base (.sec-title). A page stylesheet
   carries only what is specific to that page (STANDARDS.md s3).

   Scope: every page wrapper is <div class="page-<slug>">, so the
   rules bind to [class^="page-"]. That has the same specificity as
   the .page-<slug> form each page used before, so page rules still
   win ties -- PROVIDED this file loads before the page stylesheet.
   Registration order in the CMS head: after the other site-*.css
   files, immediately before css/page-<slug>.css.

   ASCII-clean (required by the SmarterASP.NET upload filter).

   Loaded on every redesigned page via:
     getVersionedFile('css/site-page-base.css')

   SECTION INDEX
     1. Reset (box-sizing, margins)
     2. Element resets (button, header)
     3. Focus ring
     4. Content column
     5. Section-title base
   ============================================================ */

/* -- 1. RESET (scoped to the page wrapper) --------------------- */
[class^="page-"] *,
[class^="page-"] *::before,
[class^="page-"] *::after {
  box-sizing: border-box;
  margin: 0;
}

/* -- 2. ELEMENT RESETS ----------------------------------------- */
[class^="page-"] button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
[class^="page-"] header { font: inherit; }   /* CMS bare-header leak */

/* -- 3. FOCUS RING --------------------------------------------- */
/* Keyboard/AT focus only (:focus-visible), never on mouse click.
   --color-accent-dark is defined on every page wrapper. */
[class^="page-"] a:focus-visible,
[class^="page-"] button:focus-visible,
[class^="page-"] input:focus-visible,
[class^="page-"] [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* -- 4. CONTENT COLUMN ----------------------------------------- */
[class^="page-"] .container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1200px + 2 * var(--space-container));
  margin-inline: auto;
  padding-inline: var(--space-container);
}

/* -- 5. SECTION-TITLE BASE ------------------------------------- */
/* Each block's __title modifier adds its own line-height, margin
   and colour (COMPONENTS.md). Pages whose titles share one
   line-height set it on .page-<slug> .sec-title in the page file. */
[class^="page-"] .sec-title {
  font-size: var(--text-heading);
  font-weight: 900;
}