/*
  FINABI Design System — base.css
  Base element rules built on tokens.css custom properties.
  Depends on: tokens.css (must be loaded first).

  SCOPING RULE (2026-07-06): anything that restyles a bare element already
  used by existing pages (body, h1-h6, p, a, ul/ol/li, .container) lives
  under .ds-scope, not at the top level. Existing pages never add that
  class, so none of this can change how they currently look. Only pages
  that explicitly wrap their content in <div class="ds-scope">...</div>
  opt into it. Only rules that cannot visibly change an existing page
  (overflow guards, focus-visible, reduced-motion) stay truly global.
*/

/* ==================== Safe, truly global ====================
   These do not restyle anything — they only prevent overflow or improve
   accessibility, and match behavior existing pages already rely on. */

img{
  max-width: 100%;
  height: auto;
}

/* Embeds/iframes must never carry a fixed pixel width — replaces the
   fixed-558px pattern found on the homepage app-promo block. */
iframe, video, embed{
  max-width: 100%;
}

:focus-visible{
  outline: 3px solid rgba(251, 221, 64, .5);
  outline-offset: 2px;
}

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

/* Eyebrow / kicker label utility — the one already-consistent typographic
   pattern across outsourcing/contacts/case pages, formalized here. Kept
   global: the class name has no collision with any existing live markup
   (verified), and it is purely opt-in — nothing is restyled unless a page
   explicitly adds class="eyebrow". */
.eyebrow{
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-label);
}

/* ==================== Scoped — only inside .ds-scope ====================
   New pages wrap their content in <div class="ds-scope">...</div> to get
   this typography/link/list/container system. Existing pages, which never
   add that wrapper, are entirely unaffected by the rules below. */

.ds-scope{
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-ink);
}

.ds-scope h1, .ds-scope h2, .ds-scope h3, .ds-scope h4, .ds-scope h5, .ds-scope h6{
  font-family: var(--font-family-base);
  color: var(--color-ink);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-4);
}

.ds-scope h1{ font-size: var(--font-size-3xl); }
.ds-scope h2{ font-size: var(--font-size-2xl); }
.ds-scope h3{ font-size: var(--font-size-xl); }
.ds-scope h4{ font-size: var(--font-size-lg); }
.ds-scope h5, .ds-scope h6{ font-size: var(--font-size-md); }

/* Homepage-style hero H1 — the one documented exception to the H1 rule
   above, only relevant to a .ds-scope page that also uses a .hero block. */
.ds-scope .hero h1{
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-hero);
}

.ds-scope p{
  margin: 0 0 var(--space-4);
  max-width: 68ch;
}

.ds-scope a{
  color: var(--color-secondary);
  text-decoration: none;
}
.ds-scope a:hover{
  text-decoration: underline;
}

.ds-scope ul, .ds-scope ol{
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
.ds-scope li{
  margin-bottom: var(--space-2);
}

/* .container is Bootstrap's own class name, already used on every existing
   page (header.php). A bare, unscoped rule here would have overridden
   Bootstrap's per-breakpoint max-width with one flat value at every
   viewport below 1400px, widening the page container on existing pages at
   768–1399px. Scoped, it only takes effect where a .ds-scope page also
   uses class="container". */
.ds-scope .container{
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}