/*
 * Base layer: reset, document typography, layout primitives, section rhythm, rich-text
 * prose, accessibility utilities, motion. Built entirely on tokens.css.
 *
 * Logical properties (inset-inline-*, margin-inline, padding-inline, border-inline-*)
 * are used throughout so a single rule serves both LTR and RTL. Physical-direction rules
 * exist only where a value genuinely differs per direction (e.g. a gradient angle).
 */

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

html {
  /* Anchor jumps (legal table of contents) must clear the fixed header. */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  background: var(--off-white);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--off-white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Fixed header: content starts below it. */
main {
  display: block;
  min-block-size: 50vh;
}

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

button {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--brand-700);
  -webkit-tap-highlight-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

img,
svg,
picture {
  display: block;
  max-inline-size: 100%;
}

p,
h1,
h2,
h3,
h4,
ul,
ol,
figure,
blockquote,
dl {
  margin-block-start: 0;
}

h1,
h2,
h3,
h4 {
  margin-block-end: 0;
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p:last-child {
  margin-block-end: 0;
}

hr {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin-block: var(--space-8);
}

/* ---- Focus: always visible, never removed (WCAG 2.2 AA) ---- */

:focus-visible {
  outline: 3px solid var(--cyan-400);
  outline-offset: 4px;
}

/* Cyan on cyan is invisible — dark ring on the light button surface. */
.button--light:focus-visible {
  outline-color: var(--navy-900);
}

::selection {
  color: var(--white);
  background: var(--brand-600);
}

/* ---- Screen-reader utilities ---- */

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Skip link. Hidden with transform, not an off-canvas inline offset — pushing it
 * off-canvas with inset-inline-start flips sign in RTL and inflates the document's
 * scrollable width by thousands of px.
 */
.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  color: var(--white);
  background: var(--navy-950);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--motion-micro) ease;
}

.skip-link:focus-visible {
  transform: none;
}

/* ---- Layout primitives ---- */

.container {
  inline-size: min(calc(100% - var(--gutter)), var(--container));
  margin-inline: auto;
}

.container--reading {
  inline-size: min(calc(100% - var(--gutter)), var(--reading));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section);
}

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

.section--white { background: var(--white); }
.section--wash { background: var(--blue-wash); }

.section--navy {
  color: var(--white);
  background: var(--navy-900);
}

.section--navy h2,
.section--navy h3,
.section--navy h4 {
  color: var(--white);
}

/* ---- Section heading (eyebrow + h2 + supporting copy) ---- */

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(320px, 0.35fr);
  gap: var(--gutter);
  align-items: end;
  margin-block-end: clamp(2.5rem, 5vw, 4.75rem);
}

.section-heading--compact {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: var(--reading);
}

.section-heading__copy {
  color: var(--muted);
  font-size: 1.06rem;
}

.section-heading__copy p {
  max-inline-size: 580px;
  margin-inline-start: auto;
}

[dir="rtl"] .section-heading__copy p {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.section--navy .section-heading__copy {
  color: var(--muted-dark);
}

/* ---- Eyebrow ---- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 18px;
  color: var(--brand-600);
  font-family: var(--font-body);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Arabic: no artificial tracking, no case transform (Arabic has no letter case). */
:root[lang="ar"] .eyebrow {
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
}

.eyebrow::before {
  inline-size: 28px;
  block-size: 2px;
  flex: 0 0 28px;
  background: var(--cyan-400);
  content: "";
}

.eyebrow--light {
  color: var(--cyan-400);
}

/* ---- Rich text (CMS BodyHtml: p, h2-h4, ul/ol/li, a, strong, em, blockquote, br) ---- */

.rich-text {
  color: var(--muted);
  /* Cap the measure at a readable line length. `min()` so it only bites where the container
     is actually wider than ~70 characters (the navy focus panel and the group panel); every
     column that is already narrower keeps its approved width untouched. */
  max-inline-size: min(70ch, 100%);
}

.rich-text > * + * {
  margin-block-start: var(--space-5);
}

/* Reduce orphans and ragged last lines in long prose without affecting layout. */
.rich-text p,
.rich-text li,
.hero__lead,
.page-hero__lead,
.section-heading__copy p,
.intro-layout__aside p {
  text-wrap: pretty;
}

.rich-text h2,
.rich-text h3,
.rich-text h4 {
  color: var(--navy-900);
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

.section--navy .rich-text,
.rich-text--on-navy {
  color: var(--muted-dark);
}

.section--navy .rich-text h2,
.section--navy .rich-text h3,
.section--navy .rich-text h4 {
  color: var(--white);
}

.rich-text ul,
.rich-text ol {
  margin-block: 0;
  padding-inline-start: 1.35em;
}

.rich-text li + li {
  margin-block-start: var(--space-2);
}

.rich-text strong {
  color: var(--navy-900);
  font-weight: 600;
}

.section--navy .rich-text strong {
  color: var(--white);
}

.rich-text blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space-6);
  border-inline-start: 3px solid var(--cyan-400);
}

/* ---- Motion: scroll reveals ----
 * Content is fully visible by default. JS only ever ADDS .js-reveal to <html> and
 * .is-visible per IntersectionObserver entry, so with JS disabled, on a slow connection,
 * or for a crawler, nothing is ever hidden or gated.
 */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--motion-reveal) var(--ease),
    transform var(--motion-reveal) var(--ease);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js-reveal .reveal[data-delay="1"].is-visible { transition-delay: 80ms; }
.js-reveal .reveal[data-delay="2"].is-visible { transition-delay: 160ms; }
.js-reveal .reveal[data-delay="3"].is-visible { transition-delay: 240ms; }

/* Reduced-motion handling lives at the end of responsive.css — the last stylesheet loaded —
   so it can override hover transforms declared in components.css without an specificity
   arms race. Keeping it in one place rather than split across files. */