/* ═══════════════════════════════════════════════════════════════════════════
   AstraGeneral — Typography & Rhythm Layer   (ag-typography.css)

   Loaded AFTER ag-design-system.css on every page.

   Purpose: make type, alignment and vertical rhythm identical everywhere
   WITHOUT rewriting any existing rule. It works by
     (a) publishing one modular type scale as tokens,
     (b) normalising the element defaults every page inherits from,
     (c) snapping the near-duplicate sizes (9.5 / 10.5 / 11.5 / 12.5 / 13.5px)
         onto the scale via opt-in utility classes,
     (d) fixing rendering, focus, and print behaviour globally.

   It deliberately does NOT set font-size on layout containers, so no
   existing component can change dimensions.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Modular type scale — 1.200 minor third, 16px base ──
     Every size on the site should resolve to one of these nine steps. */
  --ag-t-2xs : 0.6875rem;   /* 11px  — micro labels, table meta        */
  --ag-t-xs  : 0.75rem;     /* 12px  — captions, helper text           */
  --ag-t-sm  : 0.8125rem;   /* 13px  — dense UI, table body            */
  --ag-t-base: 0.875rem;    /* 14px  — default UI text                 */
  --ag-t-md  : 1rem;        /* 16px  — body prose                      */
  --ag-t-lg  : 1.125rem;    /* 18px  — lead paragraphs, card titles    */
  --ag-t-xl  : 1.375rem;    /* 22px  — section subheadings             */
  --ag-t-2xl : 1.75rem;     /* 28px  — section headings                */
  --ag-t-3xl : 2.25rem;     /* 36px  — page titles                     */
  --ag-t-4xl : 3rem;        /* 48px  — hero                            */
  --ag-t-5xl : 3.75rem;     /* 60px  — hero, large viewports           */

  /* ── Line heights, paired to purpose ── */
  --ag-lh-tight  : 1.15;    /* display and headings                    */
  --ag-lh-snug   : 1.35;    /* subheadings, card titles                */
  --ag-lh-normal : 1.55;    /* UI text                                 */
  --ag-lh-relaxed: 1.7;     /* long-form prose                         */

  /* ── Letter spacing — tightens as size grows ── */
  --ag-ls-display: -0.022em;
  --ag-ls-heading: -0.015em;
  --ag-ls-body   : -0.005em;
  --ag-ls-label   : 0.08em;   /* uppercase eyebrows/labels             */

  /* ── Weights ── */
  --ag-w-normal:400; --ag-w-medium:500; --ag-w-semi:600;
  --ag-w-bold:700;   --ag-w-black:800;

  /* ── Prose measure: 60–75 characters is the readable range ── */
  --ag-measure: 68ch;
  --ag-measure-narrow: 54ch;
}

/* ═══ 1. Rendering — applied once, inherited everywhere ═══ */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1;
  font-kerning:normal;
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:var(--ag-ls-body);
}

/* Tabular figures wherever numbers are compared vertically. Without this,
   proportional digits make score columns and tables visibly ragged. */
table, .ag-num, [class*="kpi"], [class*="score"], [class*="-cnt"],
[class*="metric"], [class*="stat"], td, th, time{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1,'kern' 1;
}

/* ═══ 2. Heading rhythm — one consistent ramp on every page ═══
   Only typographic properties are set; margins and colour are left to the
   page so no existing spacing shifts. */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ag-fh,var(--fh,'Manrope',sans-serif));
  text-wrap:balance;               /* stops one-word orphan lines         */
}
h1{ font-size:clamp(1.875rem,1.35rem + 2.2vw,var(--ag-t-3xl));
    line-height:var(--ag-lh-tight);  letter-spacing:var(--ag-ls-display);
    font-weight:var(--ag-w-black); }
h2{ font-size:clamp(1.5rem,1.2rem + 1.4vw,var(--ag-t-2xl));
    line-height:var(--ag-lh-tight);  letter-spacing:var(--ag-ls-display);
    font-weight:var(--ag-w-bold); }
h3{ font-size:var(--ag-t-xl);  line-height:var(--ag-lh-snug);
    letter-spacing:var(--ag-ls-heading); font-weight:var(--ag-w-bold); }
h4{ font-size:var(--ag-t-lg);  line-height:var(--ag-lh-snug);
    letter-spacing:var(--ag-ls-heading); font-weight:var(--ag-w-semi); }
h5{ font-size:var(--ag-t-md);  line-height:var(--ag-lh-normal);
    letter-spacing:var(--ag-ls-body);    font-weight:var(--ag-w-semi); }
h6{ font-size:var(--ag-t-base);line-height:var(--ag-lh-normal);
    letter-spacing:var(--ag-ls-label);   font-weight:var(--ag-w-semi);
    text-transform:uppercase; }

/* ═══ 3. Alignment & justification — one rule for the whole site ═══
   Left-aligned, ragged right. Justified text on the web creates rivers of
   whitespace because browsers cannot hyphenate reliably; centred body copy
   is harder to scan. Headings may be centred by the page; body copy is not. */
p, li, dd, blockquote, figcaption{
  text-align:left;
  hyphens:none;
  overflow-wrap:break-word;
  word-break:normal;
}
p{ line-height:var(--ag-lh-relaxed); }
li{ line-height:var(--ag-lh-normal); }

/* Prose blocks get a measure so long paragraphs never run edge-to-edge. */
.ag-prose{ max-width:var(--ag-measure); }
.ag-prose-narrow{ max-width:var(--ag-measure-narrow); }
.ag-prose > * + *{ margin-top:1em; }
.ag-prose h2,.ag-prose h3,.ag-prose h4{ margin-top:1.8em; }
.ag-prose h2:first-child,.ag-prose h3:first-child{ margin-top:0; }
.ag-prose ul,.ag-prose ol{ padding-left:1.35em; }
.ag-prose li + li{ margin-top:.4em; }

/* Centred blocks stay centred as a block, but their text stays left-aligned
   once it exceeds one line — this is the single biggest readability fix. */
.ag-center-block{ margin-inline:auto; text-align:center; }
.ag-center-block p{ text-align:center; }
@media (min-width:640px){
  .ag-center-block p.ag-long{ text-align:left; }
}

/* ═══ 4. Size utilities — snap the 43 ad-hoc sizes onto the scale ═══
   Opt-in: applying a class replaces a hand-tuned px value with a scale step.
   Nothing changes until a class is applied, so adoption is incremental. */
.ag-t-2xs { font-size:var(--ag-t-2xs)  !important; line-height:var(--ag-lh-normal); }
.ag-t-xs  { font-size:var(--ag-t-xs)   !important; line-height:var(--ag-lh-normal); }
.ag-t-sm  { font-size:var(--ag-t-sm)   !important; line-height:var(--ag-lh-normal); }
.ag-t-base{ font-size:var(--ag-t-base) !important; line-height:var(--ag-lh-normal); }
.ag-t-md  { font-size:var(--ag-t-md)   !important; line-height:var(--ag-lh-relaxed); }
.ag-t-lg  { font-size:var(--ag-t-lg)   !important; line-height:var(--ag-lh-snug); }
.ag-t-xl  { font-size:var(--ag-t-xl)   !important; line-height:var(--ag-lh-snug); }
.ag-t-2xl { font-size:var(--ag-t-2xl)  !important; line-height:var(--ag-lh-tight); }
.ag-t-3xl { font-size:var(--ag-t-3xl)  !important; line-height:var(--ag-lh-tight); }

/* Uppercase eyebrow/label — used above headings across the site */
.ag-eyebrow{
  font-size:var(--ag-t-2xs);
  font-weight:var(--ag-w-bold);
  letter-spacing:var(--ag-ls-label);
  text-transform:uppercase;
  color:var(--ag-accent-text,#ff9050);
}

/* Numeric display — scores, KPIs */
.ag-figure{
  font-family:var(--ag-fh,'Manrope',sans-serif);
  font-weight:var(--ag-w-black);
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--ag-ls-display);
  line-height:1;
}

/* ═══ 5. Links, focus and interaction — consistent and accessible ═══ */
a{ color:inherit; }
a:not([class]){
  color:var(--ag-blue2,#60a5fa);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  transition:text-decoration-color .15s ease,color .15s ease;
}
a:not([class]):hover{ text-decoration-color:currentColor; }

/* Visible keyboard focus everywhere — most pages had none. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ag-accent,#ff6b00);
  outline-offset:2px;
  border-radius:4px;
}

/* Inputs inherit the body face instead of the browser default */
input,select,textarea,button{
  font-family:inherit;
  font-size:inherit;
  letter-spacing:inherit;
}

/* Consistent placeholder treatment */
::placeholder{ color:var(--ag-text3,#6a7a9a); opacity:1; }

/* Selection matches the brand */
::selection{ background:var(--ag-accent,#ff6b00); color:#fff; }

/* ═══ 6. Tables — align numbers right, headers consistent ═══ */
.ag-table{ width:100%; border-collapse:collapse; font-size:var(--ag-t-sm); }
.ag-table th{
  font-size:var(--ag-t-2xs);
  font-weight:var(--ag-w-semi);
  letter-spacing:var(--ag-ls-label);
  text-transform:uppercase;
  text-align:left;
  color:var(--ag-text3,#6a7a9a);
}
.ag-table td{ vertical-align:top; line-height:var(--ag-lh-normal); }
.ag-table .num,.ag-table [data-num]{ text-align:right; font-variant-numeric:tabular-nums; }

/* ═══ 7. Motion and accessibility preferences ═══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Skip link for keyboard and screen-reader users */
.ag-skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--ag-accent,#ff6b00); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0;
  font-size:var(--ag-t-base); font-weight:var(--ag-w-semi);
}
.ag-skip:focus{ left:0; }

/* Screen-reader-only text */
.ag-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ═══ 8. Print — reports and policy pages should print cleanly ═══ */
@media print{
  :root{ --ag-text:#111; --ag-text2:#333; --ag-text3:#555; }
  body{ background:#fff !important; color:#111 !important; }
  header,nav,footer,.ag-noprint,[class*="cookie"],[class*="chat"]{ display:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10pt; color:#555; }
  h1,h2,h3,h4{ break-after:avoid-page; }
  p,li,tr,figure,blockquote{ break-inside:avoid; }
  .ag-prose{ max-width:none; }
}

/* ═══ 9. Responsive type — one breakpoint set for the whole site ═══ */
@media (max-width:768px){
  :root{ --ag-measure:100%; --ag-measure-narrow:100%; }
  .ag-center-block p{ text-align:left; }
}