/* ==========================================================================
   TSP DESIGN SYSTEM
   01 — FOUNDATION
   --------------------------------------------------------------------------
   Global foundations shared across the entire ecosystem.

   This file contains rules that apply everywhere, regardless of page identity.
   It does NOT define page colors, gradients, components, or realm styling.

   Includes:
   • Typography Contracts (Voices)
   • Reset
   • Body defaults
   • Heading hierarchy
   • Reading measure
   • Emphasis roles
   • Spacing rhythm
   • Responsive typography
   • Bootstrap / Gutenberg adapters

   Rule:
   If it is global and not tied to a specific page, identity, realm,
   or component, it probably belongs here.
   ========================================================================== */


/* ==========================================================================
   RESET
   ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
ul,
ol {
  margin: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

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


/* ==========================================================================
   GLOBAL CONTRACT TOKENS — VOICES, READING & SPACING
   ========================================================================== */

:root {
  /* 1. Meaning — entry into meaning */
  --voice-meaning:
    Georgia,
    "Times New Roman",
    serif;

  /* 2. Orientation — open, calm structure and navigation */
  --voice-orientation:
    "Sitka Heading",
    "Sitka Text",
    Georgia,
    serif;

  /* 3. Law — principles and axioms */
  --voice-law:
    Georgia,
    "Times New Roman",
    serif;

  /* 4. Narrative — vertically open long-form reading */
  --voice-narrative:
    "Sitka Text",
    Cambria,
    Georgia,
    serif;

  /* 5. Inner Voice — reflective and inward */
  --voice-inner:
    "Sitka Text",
    Cambria,
    Georgia,
    serif;

  /* 6. Hand / Human — rare personal presence */
  --voice-hand:
    "Segoe Print",
    "Bradley Hand",
    cursive;

  /* 7. UI — interface and utility */
  --voice-ui:
    "Segoe UI",
    Arial,
    sans-serif;


  /* Reading Contracts */

  --reading-size-min: 1.0625rem; /* 17 px */
  --reading-size-max: 1.1875rem; /* 19 px */

  --reading-leading: 1.82;

  --reading-measure: 62ch;
  --reading-vessel: 44rem;


  /* Spacing Tokens */

  --s-1: 0.75rem;  /* Tight spacing: captions, small gaps */
  --s-2: 1.25rem;  /* Paragraph rhythm */
  --s-3: 2rem;     /* Heading → content */
  --s-4: 4rem;     /* Section separation */
  --s-5: 6rem;     /* Major thresholds / emphasis */
}


/* ==========================================================================
   TYPOGRAPHY VOICES
   ========================================================================== */

/* 1. Meaning — main titles and entry points into meaning */

.voice-meaning,
h1 {
  font-family: var(--voice-meaning);
}


/* 2. Orientation — section structure and navigation */

.voice-orientation,
h2,
h3,
h4,
h5 {
  font-family: var(--voice-orientation);
}


/* 3. Law — axioms, principles and canonical statements */

.voice-law {
  max-width: 48ch;

  font-family: var(--voice-law);
  font-size: clamp(
    1.25rem,
    1.15rem + 0.3vw,
    1.5rem
  );

  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* 4. Narrative — long-form reading */

.voice-narrative,
p,
li,
blockquote {
  font-family: var(--voice-narrative);
}


/* 5. Inner Voice — reflection and inward listening */

.voice-inner {
  max-width: 58ch;

  font-family: var(--voice-inner);
  font-style: italic;
  font-weight: 400;
  line-height: 1.7;
}


/* 6. Hand / Human — rare personal presence */

.voice-hand {
  font-family: var(--voice-hand);
}


/* 7. UI — interface and technical controls */

.voice-ui,
button,
input,
select,
textarea,
nav,
.menu,
.wp-block-button__link,
.kb-button {
  font-family: var(--voice-ui);
}


/* ==========================================================================
   BODY DEFAULTS
   ========================================================================== */

html {
  font-size: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  color: var(--ink-primary);
  background-color: var(--utility-surface-air);

  font-family: var(--voice-narrative);
  font-size: 1rem;
  line-height: 1.6;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   HEADING TYPOGRAPHY
   --------------------------------------------------------------------------
   Functional hierarchy:

   H1 — primary entry into meaning
   H2 — major section title
   H3 — strong subsection or optional supporting subtitle
   H4 — local topic, step or argument
   H5 — orientation label
   H6 — micro-label / metadata
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  text-wrap: balance;
}


/* H1 — Main title; canonical reference size */

h1 {
  max-width: 18ch;

  font-size: clamp(
    2.5rem,
    2rem + 1.8vw,
    4rem
  );

  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.025em;
}


/* H2 — Major section title */

h2 {
  max-width: 24ch;

  font-size: clamp(
    2.2rem,
    1.85rem + 1.1vw,
    2.95rem
  );

  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -0.016em;
}


/* H3 — Strong subsection or supporting subtitle */

h3 {
  max-width: 30ch;

  font-size: clamp(
    1.7rem,
    1.48rem + 0.65vw,
    2.15rem
  );

  line-height: 1.24;
  font-weight: 500;
  letter-spacing: -0.008em;
}


/* H4 — Local topic, step or argument */

h4 {
  max-width: 38ch;

  font-size: clamp(
    1.375rem,
    1.22rem + 0.35vw,
    1.625rem
  );

  line-height: 1.34;
  font-weight: 500;
  letter-spacing: -0.002em;
}


/* H5 — Orientation label */

h5 {
  max-width: 48ch;

  font-family: var(--voice-orientation);
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 600;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* H6 — Micro-label / metadata */

h6 {
  max-width: 52ch;

  font-family: var(--voice-ui);
  font-size: 0.875rem;
  line-height: 1.45;
  font-weight: 600;

  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
}


/* ==========================================================================
   TITLE PAIR — H1 + H3
   --------------------------------------------------------------------------
   Allows H3 to function as a calm supporting line directly below H1.

   For strict document hierarchy, a dedicated subtitle class is preferable,
   but this rule supports the intended authoring combination.
   ========================================================================== */

h1 + h3 {
  max-width: 34ch;

  margin-top: -0.15em;
  margin-bottom: 1.35em;

  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.006em;
}


/* ==========================================================================
   LONG-FORM READING
   ========================================================================== */

p,
li,
blockquote {
  font-size: clamp(
    var(--reading-size-min),
    1rem + 0.25vw,
    var(--reading-size-max)
  );

  line-height: var(--reading-leading);
}

p,
blockquote {
  max-width: var(--reading-measure);
}

ul,
ol {
  max-width: var(--reading-measure);

  margin-top: 0.75rem;
  margin-bottom: 2rem;

  padding-left: 1.4em;
}

li + li {
  margin-top: 0.65em;
}

blockquote {
  padding-left: var(--s-2);
  border-left: 0.2rem solid var(--divider, currentColor);
}


/* ==========================================================================
   EMPHASIS ROLES
   --------------------------------------------------------------------------
   Use these roles instead of choosing a heading level only to make text
   larger or heavier.
   ========================================================================== */

/* Mild emphasis inside normal reading */

.text-emphasis {
  font-weight: 600;
}


/* Introductory or lead paragraph */

.text-lead {
  max-width: 58ch;

  font-size: clamp(
    1.25rem,
    1.15rem + 0.35vw,
    1.5rem
  );

  line-height: 1.65;
}


/* Dedicated supporting subtitle without changing document hierarchy */

.text-subtitle {
  max-width: 34ch;

  font-family: var(--voice-orientation);

  font-size: clamp(
    1.7rem,
    1.48rem + 0.65vw,
    2.15rem
  );

  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.006em;
}


/* H1 followed by dedicated subtitle */

h1 + .text-subtitle {
  margin-top: -0.15em;
  margin-bottom: 1.35em;
}


/* ==========================================================================
   VERTICAL RHYTHM
   ========================================================================== */

p:not(:last-child),
blockquote:not(:last-child) {
  margin-bottom: 1.9rem;
}

ul:not(:last-child),
ol:not(:last-child) {
  margin-bottom: 2rem;
}


/* Space after headings */

h1 {
  margin-bottom: 0.65em;
}

h2 {
  margin-bottom: 0.72em;
}

h3 {
  margin-bottom: 0.68em;
}

h4 {
  margin-bottom: 0.65em;
}

h5 {
  margin-bottom: 0.65em;
}

h6 {
  margin-bottom: 0.7em;
}


/* Heading ladder rhythm */

h1 + h2 {
  margin-top: 0.2rem;
}

h2 + h3 {
  margin-top: 0.35rem;
}

h3 + h4 {
  margin-top: 0.5rem;
}

h4 + h5 {
  margin-top: 1.1rem;
}

h5 + h6 {
  margin-top: 0.75rem;
}


/* A new major section after heading labels */

h5 + h2,
h6 + h2 {
  margin-top: 2.5rem;
}


/* Major section threshold */

:is(
  p,
  ul,
  ol,
  blockquote,
  figure,
  .wp-block-image
) + h2 {
  margin-top: 3.75rem;
}


/* Subsection threshold */

:is(
  p,
  ul,
  ol,
  blockquote,
  figure,
  .wp-block-image
) + h3 {
  margin-top: 3rem;
}


/* Local topic threshold */

:is(
  p,
  ul,
  ol,
  blockquote,
  figure,
  .wp-block-image
) + h4 {
  margin-top: 2.4rem;
}


/* Label threshold */

:is(
  p,
  ul,
  ol,
  blockquote,
  figure,
  .wp-block-image
) + :is(
  h5,
  h6
) {
  margin-top: 1.75rem;
}


/* Heading followed by its first content object */

:is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
) + :is(
  p,
  ul,
  ol,
  blockquote
) {
  margin-top: 0;
}


/* Preserve the intended H1 + H3 title pair */

h1 + h3 {
  margin-top: -0.15em;
}


/* ==========================================================================
   READING VESSEL
   ========================================================================== */

.tsp-content-object {
  width: min(100%, var(--reading-vessel));
  margin-inline: auto;
}

.tsp-content-object > :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  blockquote,
  figure
) {
  margin-right: auto;
}


/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: var(--accent, currentColor);
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.08em;
}

a:hover,
a:focus-visible {
  color: var(--accent-hover, var(--accent, currentColor));
}


/* ==========================================================================
   RESPONSIVE TYPOGRAPHY — TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --reading-measure: 60ch;
    --reading-vessel: 42rem;

    --s-4: 3.5rem;
    --s-5: 5rem;
  }
}


/* ==========================================================================
   RESPONSIVE TYPOGRAPHY — MOBILE
   ========================================================================== */

@media (max-width: 640px) {
  :root {
    --reading-size-min: 1rem;
    --reading-size-max: 1.0625rem;
    --reading-leading: 1.75;

    --reading-measure: 100%;
    --reading-vessel: 100%;

    --s-3: 1.75rem;
    --s-4: 3rem;
    --s-5: 4rem;
  }

  h1 {
    font-size: clamp(
      2rem,
      1.7rem + 3.5vw,
      2.75rem
    );
  }

  h2 {
    font-size: clamp(
      1.8rem,
      1.52rem + 2.5vw,
      2.25rem
    );
  }

  h3 {
    font-size: clamp(
      1.5rem,
      1.32rem + 1.6vw,
      1.85rem
    );
  }

  h4 {
    font-size: clamp(
      1.3rem,
      1.18rem + 0.8vw,
      1.5rem
    );
  }

  h5 {
    font-size: 0.9375rem;
  }

  h6 {
    font-size: 0.8125rem;
  }

  p,
  li,
  blockquote {
    font-size: clamp(
      var(--reading-size-min),
      0.975rem + 0.35vw,
      var(--reading-size-max)
    );
  }

  .text-lead {
    font-size: clamp(
      1.125rem,
      1.05rem + 0.75vw,
      1.25rem
    );

    line-height: 1.65;
  }

  .text-subtitle {
    font-size: clamp(
      1.5rem,
      1.32rem + 1.6vw,
      1.85rem
    );
  }

  p:not(:last-child),
  blockquote:not(:last-child) {
    margin-bottom: 1.65rem;
  }

  ul,
  ol {
    margin-top: 0.6rem;
    margin-bottom: 1.75rem;
    padding-left: 1.25em;
  }

  li + li {
    margin-top: 0.55em;
  }

  h1 + h2 {
    margin-top: 0.15rem;
  }

  h2 + h3 {
    margin-top: 0.25rem;
  }

  h3 + h4 {
    margin-top: 0.4rem;
  }

  h4 + h5 {
    margin-top: 0.9rem;
  }

  h5 + h6 {
    margin-top: 0.65rem;
  }

  h5 + h2,
  h6 + h2 {
    margin-top: 2rem;
  }

  :is(
    p,
    ul,
    ol,
    blockquote,
    figure,
    .wp-block-image
  ) + h2 {
    margin-top: 3rem;
  }

  :is(
    p,
    ul,
    ol,
    blockquote,
    figure,
    .wp-block-image
  ) + h3 {
    margin-top: 2.5rem;
  }

  :is(
    p,
    ul,
    ol,
    blockquote,
    figure,
    .wp-block-image
  ) + h4 {
    margin-top: 2rem;
  }

  :is(
    p,
    ul,
    ol,
    blockquote,
    figure,
    .wp-block-image
  ) + :is(
    h5,
    h6
  ) {
    margin-top: 1.5rem;
  }

  h1 + h3,
  h1 + .text-subtitle {
    margin-top: -0.1em;
    margin-bottom: 1.15em;
  }
}


/* ==========================================================================
   IZM — BOOTSTRAP REBOOT ADAPTER
   ========================================================================== */

.site-main {
  color: inherit;
}

.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6,
.site-main p,
.site-main li,
.site-main blockquote {
  color: inherit;
}


/* Restore semantic Voices inside the main Bootstrap container */

.site-main h1 {
  font-family: var(--voice-meaning);
}

.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5 {
  font-family: var(--voice-orientation);
}

.site-main h6 {
  font-family: var(--voice-ui);
}

.site-main p,
.site-main li,
.site-main blockquote {
  font-family: var(--voice-narrative);
}


/* Protect the canonical reading baseline from Bootstrap Reboot */

.site-main p,
.site-main li,
.site-main blockquote {
  font-size: clamp(
    var(--reading-size-min),
    1rem + 0.25vw,
    var(--reading-size-max)
  );

  line-height: var(--reading-leading);
}


/* ==========================================================================
   IZM — GUTENBERG & RHYTHM EXTENSIONS
   ========================================================================== */

.wp-block-group {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
   Horizontal padding is not globally removed from all Groups.
   Some blocks may intentionally use native or pattern-defined padding.

   Use a dedicated utility or pattern when zero horizontal padding is needed.
*/


/* ==========================================================================
   BOOTSTRAP SPACING TOKEN ADAPTER
   ========================================================================== */

.py-5 {
  padding-top: var(--s-4) !important;
  padding-bottom: var(--s-4) !important;
}

.my-5 {
  margin-top: var(--s-4) !important;
  margin-bottom: var(--s-4) !important;
}

.py-4 {
  padding-top: var(--s-3) !important;
  padding-bottom: var(--s-3) !important;
}

.text-center {
  text-align: center !important;
}