/* ============================================================
   fonts-with-hero.css
   Purpose: COMPLETE typography for pages WITH hero card
   Depends on: fonts-integrated.css
   Scope: TEXT ONLY (no layout, no scroll, no position)
   ============================================================ */

/* ------------------------------------------------------------
   1. Restore missing accent variable (critical)
   ------------------------------------------------------------ */
:root {
  --c-orange: #ff3300;
}

/* ------------------------------------------------------------
   2. HERO CARD TYPOGRAPHY (REAL SELECTORS)
   ------------------------------------------------------------ */

/* Main hero name */
.x-card .v3-hero-main-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--c-white);
}

/* Hero subtitle / tagline */
.x-card .v3-hero-subtitle {
  font-family: var(--font-text);
  font-size: var(--text-1);
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-offwhite);
}

/* Eyebrow line inside hero (if present) */
.x-card .type-eyebrow {
  color: var(--c-cyan);
}

/* ------------------------------------------------------------
   3. CONTENT HEADINGS – fix missing orange
   ------------------------------------------------------------ */

.sub2-glass h2.type-display-3,
.sub2-glass .--orange {
  color: var(--c-orange);
}

/* ------------------------------------------------------------
   4. Utility guarantees (hero-safe)
   ------------------------------------------------------------ */

.--orange { color: var(--c-orange) !important; }
.--cyan   { color: var(--c-cyan) !important; }
.muted    { color: var(--c-muted); }

/* ============================================================
   HERO CONTENT TYPOGRAPHY — HARD FORK (NO INHERITANCE)
   ============================================================ */

/* Primary content title (matches no-hero type-display-1) */
.type-display-1--heroContent {
  font-family: 'Stardos Stencil', sans-serif;
  font-size: clamp(1.0rem, 1.2vw + 0.15rem, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #ffffff;
}


/* Cyan kicker line (matches no-hero eyebrow) */
.type-eyebrow--heroContent {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00d4ff;
}


/* ============================================================
   FORCE HERO CARD TO MATCH CANONICAL TYPOGRAPHY
   (NO MARKUP CHANGES, NO JS BREAKAGE)
   ============================================================ */

/* HERO EYEBROW */
.v3-hero-small-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;        /* ↑ from 0.75rem */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00d4ff;
}

/* HERO TITLE */
.v3-hero-main-title {
  font-family: 'Stardos Stencil', serif;
  font-size: clamp(2.85rem, 4.6vw + 0.35rem, 4.1rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.025em;
  color: #ffffff;
}

.v3-hero-main-title .accent {
  color: #00d4ff;
}

/* HERO SUBTITLE */
.v3-hero-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #ffffff;
  max-width: 48ch;
}

/* ------------------------------------------------------------
   X-CARD DESCRIPTOR (BOTTOM LINE)
   ------------------------------------------------------------ */

/* X-CARD DESCRIPTOR (BOTTOM LINE) */
.x-card .v3-hero-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;        /* ↑ from ~0.95–1rem */
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--c-offwhite);
  max-width: 46ch;
}

/* FORCE ORANGE UTILITY (CONTENT SAFE) */
.--orange {
  color: var(--c-orange) !important;
}

.sub2-glass .subhead-larger-stencil {
  /* Target the content-area instance specifically to override other layers */
  font-family: 'Stardos Stencil', sans-serif;
  /* Tightened clamp and !important to ensure visual parity with page H1 */
  font-size: clamp(1.8rem, 2.2vw, 2.4rem) !important;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #ffffff;
}
/* ================================
   HERO X-CARD — HARD OVERRIDE
   SUBPAGE LOCK (DO NOT TOUCH)
   ================================ */

/* =========================================
   X-CARD — TRUE CENTER + EQUAL GUTTERS
   FINAL LOCK (OPTICALLY CENTERED)
   ========================================= */

.v3-engineered-hero .x-card {
  /* width control */
  width: min(44vw, 720px) !important;   /* ~3/7 viewport, hard cap */

  /* TRUE visual centering */
  margin-left: auto !important;
  margin-right: auto !important;

  /* optical correction (2/5 less than previous) */
  transform: translateX(-1.2vw) !important;

  /* internal spacing */
  padding: clamp(3rem, 3.5vw, 4rem) !important;
}

/* FORCE SYMMETRIC SIDE GUTTERS (fixes left creep) */
.v3-engineered-hero {
  padding-left: clamp(3vw, 5vw, 6vw) !important;
  padding-right: clamp(3vw, 5vw, 6vw) !important;
}


/* TABLET */
@media (max-width: 1024px) {
  .v3-engineered-hero .x-card {
    width: min(70vw, 680px) !important;
    transform: translateX(-0.8vw) !important; /* proportional ease-down */
  }
}


/* MOBILE — COMFORTABLE, NOT EDGE-HUGGING */
@media (max-width: 768px) {
  .v3-engineered-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .v3-engineered-hero .x-card {
    width: auto !important;
    max-width: none !important;

    margin-left: clamp(1rem, 4vw, 1.75rem) !important;
    margin-right: clamp(1rem, 4vw, 1.75rem) !important;

    padding: clamp(2rem, 6vw, 2.75rem) !important;

    transform: none !important; /* no optical bias on mobile */
  }
}