/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-typography.css
   Layer: Typography System
   Version: 3.x

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s typography system as a class-driven layer:
   - headings
   - body text
   - label system
   - Elementor normalization
   - text-wrap utilities

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Typography tokens (families, weights, scale, line-heights, tracking)
   - Type utility classes and default type margins
   - Label system
   - Text color application for type utilities
   - Elementor heading + text-editor normalization within Milo scope
   - Explicit type utilities mapped onto real Elementor nodes

   Does NOT own:
   - Global layout rhythm
   - Component layout decisions
   - Decorative rules
   - Motion, elevation, glass, radius, opacity scales
   - Section padding, gutters, max-widths, or containment

   ARCHITECTURE
   ----------------------------------------------------------------
   - Typography is class-driven. Tag names do not determine styling.
   - Milo classes are applied to widget wrappers.
   - This file maps wrapper classes to the real inner nodes.
   - Headings inside .milo reset to inherit so classes own hierarchy.

========================================================= */

/* #region 0) TYPE TOKENS */
:root {
  /* Families */
  --milo-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --milo-serif: "Cormorant Garamond", Georgia, serif;

  /* Weights */
  --milo-weight-regular: 400;
  --milo-weight-medium: 500;

  /* Scale */
  --milo-h1: clamp(38px, 3.6vw, 52px);
  --milo-h2: clamp(26px, 2.7vw, 38px);
  --milo-h3: clamp(18px, 1.8vw, 22px);
  --milo-h4: 18px;
  --milo-h5: 17px;
  --milo-h6: 16px;
  --milo-body: 15px;
  --milo-small: 13px;

  /* Line-height */
  --milo-lh-h1: 1.08;
  --milo-lh-h2: 1.15;
  --milo-lh-h3: 1.18;
  --milo-lh-h4: 1.35;
  --milo-lh-h5: 1.45;
  --milo-lh-h6: 1.47;
  --milo-lh-body: 1.65;
  --milo-lh-hero-mobile: 1.1;

  /* Tracking */
  --milo-track-h1: -0.02em;
  --milo-track-h2: -0.015em;
  --milo-track-h3: -0.01em;
  --milo-track-small: 0.02em;
  --milo-track-label: 0.16em;

  /* Label + dek */
  --milo-label-size: 11px;
  --milo-label-lh: 1.1;
  --milo-dek-size: 18px;

  --milo-heading-subline-size: 16px;
  --milo-heading-subline-size-mobile: 15px;
}
/* #endregion 0) TYPE TOKENS */

/* #region 1) BASE TEXT FOUNDATION */
html,
body {
  font-family: var(--milo-sans);
  font-size: var(--milo-body);
  line-height: var(--milo-lh-body);
  color: var(--milo-text);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

p {
  margin: 0 0 var(--milo-space-sm) 0;
  color: var(--milo-text-soft);
}

/* Reset headings inside Milo scope so classes own presentation */
.milo h1,
.milo h2,
.milo h3,
.milo h4,
.milo h5,
.milo h6 {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.milo .elementor-heading-title {
  margin: 0;
  line-height: inherit;
}
/* #endregion 1) BASE TEXT FOUNDATION */

/* #region 2) HEADING UTILITIES */

/* #region 2A) H1 */
.milo-h1,
.milo-h1 .elementor-heading-title {
  color: var(--milo-white);
  font-family: var(--milo-serif);
  font-weight: var(--milo-weight-regular);
  font-size: var(--milo-h1);
  line-height: var(--milo-lh-h1);
  letter-spacing: var(--milo-track-h1);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-wrap: balance;
}

.milo-h1 {
  margin: 0 0 var(--milo-space-sm) 0;
}
/* #endregion 2A) H1 */

/* #region 2B) H2 */
.milo-h2,
.milo-h2 .elementor-heading-title {
  color: var(--milo-white);
  font-family: var(--milo-serif);
  font-weight: var(--milo-weight-regular);
  font-size: var(--milo-h2);
  line-height: var(--milo-lh-h2);
  letter-spacing: var(--milo-track-h2);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-wrap: balance;
}

.milo-h2 {
  margin: 0 0 var(--milo-space-xs) 0;
}
/* #endregion 2B) H2 */

/* #region 2C) H3 */
.milo-h3,
.milo-h3 .elementor-heading-title {
  color: var(--milo-text);
  font-family: var(--milo-sans);
  font-weight: var(--milo-weight-medium);
  font-size: var(--milo-h3);
  line-height: var(--milo-lh-h3);
  letter-spacing: var(--milo-track-h3);
  text-wrap: balance;
}

.milo-h3 {
  margin: 0 0 var(--milo-space-xs) 0;
}
/* #endregion 2C) H3 */

/* #region 2D) H4 */
.milo-h4,
.milo-h4 .elementor-heading-title {
  color: var(--milo-text);
  font-family: var(--milo-sans);
  font-weight: var(--milo-weight-medium);
  font-size: var(--milo-h4);
  line-height: var(--milo-lh-h4);
}

.milo-h4 {
  margin: 0 0 var(--milo-space-2xs) 0;
}
/* #endregion 2D) H4 */

/* #region 2E) H5 */
.milo-h5,
.milo-h5 .elementor-heading-title {
  color: var(--milo-text);
  font-family: var(--milo-sans);
  font-weight: var(--milo-weight-medium);
  font-size: var(--milo-h5);
  line-height: var(--milo-lh-h5);
}

.milo-h5 {
  margin: 0 0 var(--milo-space-2xs) 0;
}
/* #endregion 2E) H5 */

/* #region 2F) H6 */
.milo-h6,
.milo-h6 .elementor-heading-title {
  color: var(--milo-text);
  font-family: var(--milo-sans);
  font-weight: var(--milo-weight-medium);
  font-size: var(--milo-h6);
  line-height: var(--milo-lh-h6);
}

.milo-h6 {
  margin: 0 0 var(--milo-space-2xs) 0;
}
/* #endregion 2F) H6 */

/* #region 2G) SMALL */
.milo-font-small,
.milo-font-small .elementor-heading-title {
  color: var(--milo-text);
  font-family: var(--milo-sans);
  font-weight: var(--milo-weight-medium);
  font-size: var(--milo-small);
  line-height: var(--milo-lh-h5);
  letter-spacing: var(--milo-track-small);
}

.milo-font-small {
  margin: 0 0 var(--milo-space-2xs) 0;
}
/* #endregion 2G) SMALL */

/* #endregion 2) HEADING UTILITIES */

/* #region 3) BODY UTILITIES */
.milo-body {
  color: var(--milo-text-soft);
  font-family: var(--milo-sans);
  font-size: var(--milo-body);
  line-height: var(--milo-lh-body);
  text-wrap: pretty;
}

.milo-dek {
  color: var(--milo-text-soft);
  font-family: var(--milo-sans);
  font-size: var(--milo-dek-size);
  line-height: var(--milo-lh-body);
  text-wrap: pretty;
}
/* #endregion 3) BODY UTILITIES */

/* #region 4) LABEL SYSTEM */
.milo-label {
  color: var(--milo-text-muted);
  opacity: 0.7;

  font-family: var(--milo-sans);
  font-weight: var(--milo-weight-medium);
  font-size: var(--milo-label-size);
  line-height: var(--milo-label-lh);
  letter-spacing: var(--milo-track-label);
  text-transform: uppercase;
}
/* #endregion 4) LABEL SYSTEM */

/* #region 5) ELEMENTOR NORMALIZATION */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.elementor-widget-heading .elementor-heading-title {
  margin: 0;
}
/* #endregion 5) ELEMENTOR NORMALIZATION */

/* #region 6) TEXT WRAP UTILITIES */
.milo-balance,
.milo-balance .elementor-heading-title {
  text-wrap: balance;
}

.milo-pretty,
.milo-pretty .elementor-heading-title,
.milo-pretty .elementor-widget-container,
.milo-pretty p {
  text-wrap: pretty;
}

.milo-nowrap {
  white-space: nowrap;
}
/* #endregion 6) TEXT WRAP UTILITIES */

/* #region 7) LEGAL */
.milo-legal {
  --milo-legal-max: 64ch;
  --milo-legal-gap: 1.1em;
  --milo-legal-gap-lg: 2.4em;
}

/* container */
.milo-legal .elementor-widget-container {
  max-width: var(--milo-legal-max);
}

/* h2 (page title) */
.milo-legal h2 {
  margin-bottom: 1.2em;
}

/* section headers */
.milo-legal h3 {
  margin-top: var(--milo-legal-gap-lg);
  margin-bottom: 0.5em;
  color: var(--milo-text);
  position: relative;
  padding-left: 12px;
}

.milo-legal h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--milo-pink);
}

/* paragraphs */
.milo-legal p {
  margin: 0;
  color: var(--milo-text-soft);
}

.milo-legal p + p {
  margin-top: var(--milo-legal-gap);
}

/* slightly softer intro line */
.milo-legal em {
  display: block;
  margin-bottom: 1.6em;
  color: var(--milo-text-muted);
}

/* links */
.milo-legal a {
  color: var(--milo-pink);
  text-decoration: underline;
}
/* #endregion 7) LEGAL */

/* #region 8) RESPONSIVE */
@media (max-width: 1024px) {
  :root {
    --milo-h1: clamp(34px, 4.4vw, 46px);
    --milo-h2: clamp(24px, 3vw, 34px);
    --milo-h3: clamp(17px, 2vw, 20px);

    --milo-h4: 17px;
    --milo-h5: 16px;
    --milo-h6: 15px;

    --milo-dek-size: 17px;
    --milo-heading-subline-size: 15px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --milo-h1: clamp(30px, 7vw, 40px);
    --milo-h2: clamp(22px, 5vw, 30px);
    --milo-h3: clamp(16px, 3.2vw, 18px);

    --milo-h4: 16px;
    --milo-h5: 15px;
    --milo-h6: 14px;

    --milo-body: 14px;
    --milo-small: 12px;
    --milo-dek-size: 16px;

    --milo-heading-subline-size: var(--milo-heading-subline-size-mobile);
    --milo-track-label: 0.12em;
  }

  .milo-h1,
  .milo-h1 .elementor-heading-title {
    line-height: var(--milo-lh-hero-mobile);
  }
}

@media (max-width: 479.98px) {
  :root {
    --milo-h1: clamp(28px, 8vw, 34px);
    --milo-h2: clamp(20px, 5.4vw, 26px);
    --milo-h3: clamp(15px, 4vw, 17px);

    --milo-h4: 15px;
    --milo-h5: 14px;
    --milo-h6: 13px;

    --milo-body: 14px;
    --milo-small: 12px;
    --milo-dek-size: 15px;
    --milo-label-size: 10px;
  }
}
/* #endregion 8) RESPONSIVE */