/*
 * ============================================================
 *  FORMIUM ALLIANCE — Brand Typography Standards
 *  Enforces the official font-size mandates across all pages:
 *
 *    Heading Titles   → 19.9 pt  ≈ 26.5 px
 *    Subheadings      → 10.9 pt  ≈ 14.5 px
 *    Body / Paragraph → 10.9 pt  ≈ 14.5 px
 *
 *  Load this AFTER /assets/main.css on every page so it
 *  overrides the theme defaults cleanly.
 * ============================================================
 */

/* ── 1. Token redefinition ─────────────────────────────────
   Re-map the design-system tokens the theme already uses
   so every Tailwind utility class automatically inherits
   the correct values — no need to touch individual classes.
──────────────────────────────────────────────────────────── */
:root {
  /* Heading tier — all heading levels map to 26.5 px */
  --text-heading-1: 1.656rem;        /* 26.5px */
  --text-heading-1--line-height: 130%;

  --text-heading-2: 1.656rem;        /* 26.5px */
  --text-heading-2--line-height: 130%;

  --text-heading-3: 1.656rem;        /* 26.5px */
  --text-heading-3--line-height: 130%;

  --text-heading-4: 1.656rem;        /* 26.5px */
  --text-heading-4--line-height: 130%;

  --text-heading-5: 1.656rem;        /* 26.5px */
  --text-heading-5--line-height: 130%;

  /* Subheading tier — one step smaller: 14.5 px */
  --text-heading-6: 0.906rem;        /* 14.5px */
  --text-heading-6--line-height: 150%;

  /* Body / tagline tier — all map to 14.5 px */
  --text-tagline-1: 0.906rem;        /* 14.5px */
  --text-tagline-1--line-height: 150%;

  --text-tagline-2: 0.906rem;        /* 14.5px */
  --text-tagline-2--line-height: 150%;

  --text-tagline-3: 0.906rem;        /* 14.5px */
  --text-tagline-3--line-height: 150%;
}

/* ── 2. Element-level locks ────────────────────────────────
   Belt-and-suspenders: even if a template hard-codes a
   Tailwind size class (e.g. text-7xl), the element
   selectors below win because they are more specific than
   the utility classes and come later in the cascade.
──────────────────────────────────────────────────────────── */

/* Headings → 26.5 px regardless of h-level */
h1, h2, h3, h4, h5 {
  font-size: 1.656rem !important;   /* 26.5px */
  line-height: 130% !important;
}

/* Subheadings — h6 is used as the visual subheading level */
h6 {
  font-size: 0.906rem !important;   /* 14.5px */
  line-height: 150% !important;
}

/* Body copy */
p, li, span, label, td, th, blockquote,
input, textarea, select, button {
  font-size: 0.906rem;              /* 14.5px — no !important so
                                       components can still bump
                                       up for specific needs      */
  line-height: 150%;
}

/* Anchors inherit the surrounding text size */
a {
  font-size: inherit;
}

/* ── 3. Utility overrides ──────────────────────────────────
   Tailwind classes that hard-code pixel values outside the
   brand range are capped here.  We only override classes
   that the theme actually generates (verified from main.css).
──────────────────────────────────────────────────────────── */

/* Large decorative heading classes → capped at 26.5 px */
.text-heading-1,
.text-heading-2,
.text-heading-3,
.text-heading-4,
.text-heading-5 {
  font-size: 1.656rem !important;
  line-height: 130% !important;
}

/* Subheading utility */
.text-heading-6 {
  font-size: 0.906rem !important;
  line-height: 150% !important;
}

/* Body utilities */
.text-tagline-1,
.text-tagline-2,
.text-tagline-3 {
  font-size: 0.906rem !important;
  line-height: 150% !important;
}

/* Tailwind raw size utilities that exceed the brand cap */
.text-2xl  { font-size: 1.656rem !important; line-height: 130% !important; }
.text-3xl  { font-size: 1.656rem !important; line-height: 130% !important; }
.text-4xl  { font-size: 1.656rem !important; line-height: 130% !important; }
.text-5xl  { font-size: 1.656rem !important; line-height: 130% !important; }
.text-6xl  { font-size: 1.656rem !important; line-height: 130% !important; }
.text-7xl  { font-size: 1.656rem !important; line-height: 130% !important; }
.text-8xl  { font-size: 1.656rem !important; line-height: 130% !important; }

/* Small utilities stay at body size */
.text-xs   { font-size: 0.906rem !important; line-height: 150% !important; }
.text-sm   { font-size: 0.906rem !important; line-height: 150% !important; }
.text-base { font-size: 0.906rem !important; line-height: 150% !important; }
.text-lg   { font-size: 0.906rem !important; line-height: 150% !important; }
.text-xl   { font-size: 0.906rem !important; line-height: 150% !important; }

/* Arbitrary-value classes used by the theme */
.text-\[18px\] { font-size: 0.906rem !important; }
.text-\[22px\] { font-size: 1.656rem !important; }
.text-\[36px\] { font-size: 1.656rem !important; }
.text-\[40px\] { font-size: 1.656rem !important; }
.text-\[52px\] { font-size: 1.656rem !important; }
.text-\[64px\] { font-size: 1.656rem !important; }
.text-\[80px\] { font-size: 1.656rem !important; }

/* ── 4. Responsive normalisation ──────────────────────────
   The theme's responsive classes (md:text-heading-1 etc.)
   would otherwise override our base rules on larger screens.
   We re-assert the brand sizes at every breakpoint.
──────────────────────────────────────────────────────────── */
@media (min-width: 40rem) {   /* sm */
  h1, h2, h3, h4, h5,
  .sm\:text-heading-4,
  .sm\:text-heading-5,
  .sm\:text-heading-6,
  .sm\:text-5xl,
  .sm\:text-lg {
    font-size: 1.656rem !important;
    line-height: 130% !important;
  }
  .sm\:text-tagline-1,
  .sm\:text-tagline-2 {
    font-size: 0.906rem !important;
    line-height: 150% !important;
  }
}

@media (min-width: 48rem) {   /* md */
  h1, h2, h3, h4, h5,
  .md\:text-heading-1,
  .md\:text-heading-2,
  .md\:text-heading-3,
  .md\:text-heading-4,
  .md\:text-heading-5,
  .md\:text-2xl,
  .md\:text-6xl,
  .md\:text-\[120px\] {
    font-size: 1.656rem !important;
    line-height: 130% !important;
  }
  .md\:text-tagline-1,
  .md\:text-tagline-2,
  .md\:text-heading-6,
  .md\:text-base {
    font-size: 0.906rem !important;
    line-height: 150% !important;
  }
}

@media (min-width: 64rem) {   /* lg */
  h1, h2, h3, h4, h5,
  .lg\:text-heading-2,
  .lg\:text-heading-3,
  .lg\:text-heading-5,
  .lg\:text-7xl,
  .lg\:\!text-\[180px\] {
    font-size: 1.656rem !important;
    line-height: 130% !important;
  }
  .lg\:text-tagline-1 {
    font-size: 0.906rem !important;
    line-height: 150% !important;
  }
}

@media (min-width: 80rem) {   /* xl */
  h1, h2, h3, h4, h5,
  .xl\:text-heading-1,
  .xl\:text-heading-4,
  .xl\:text-heading-5,
  .xl\:text-8xl,
  .xl\:\!text-\[200px\] {
    font-size: 1.656rem !important;
    line-height: 130% !important;
  }
  .xl\:text-tagline-1,
  .xl\:text-heading-6 {
    font-size: 0.906rem !important;
    line-height: 150% !important;
  }
}

/* ── 5. Blog Manager (admin) consistency ───────────────────
   The blog-manager uses its own CSS variables; keep in sync.
──────────────────────────────────────────────────────────── */
.stat-v       { font-size: 1.656rem !important; line-height: 130% !important; }
.stat-l       { font-size: 0.906rem !important; }
.lhdr h2      { font-size: 1.656rem !important; line-height: 130% !important; }
.fcard h3     { font-size: 1.656rem !important; line-height: 130% !important; }
.dcard h3     { font-size: 1.656rem !important; line-height: 130% !important; }
.atlas h3     { font-size: 1.656rem !important; line-height: 130% !important; }
.gate-logo    { font-size: 1.656rem !important; }
.tbl th       { font-size: 0.906rem !important; }
.tbl td       { font-size: 0.906rem !important; }
.slabel       { font-size: 0.906rem !important; }
.sitem        { font-size: 0.906rem !important; }
.flabel       { font-size: 0.906rem !important; }
.fhint        { font-size: 0.906rem !important; }
.btn          { font-size: 0.906rem !important; }
.badge        { font-size: 0.906rem !important; }

/* ── 6. Pricing page ───────────────────────────────────────
   Override the pricing-specific large price numbers.
──────────────────────────────────────────────────────────── */
#sum-total                      { font-size: 1.656rem !important; }
.text-heading-4.font-semibold   { font-size: 1.656rem !important; }