/* ============================================
   HERO GLOBAL TOKENS (COLORS + FONTS ONLY)
   No layout: no padding, margin, flex, grid, etc.
   ============================================ */
   /*public/admin/hero/assets/hero.css*/

/* Base hero wrapper – only colors + font family */
.hero {
  background: var(--hero-bg, #ffffff);
  color: var(--hero-body, #0f172a);
  /* Primary font comes from variables only */
  font-family: var(
    --hero-font-primary,
    var(--font-primary, inherit)
  );
}

/* Shared inner container – ONLY width, no spacing/layout */
.hero__inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* Typography tokens (headings, body, etc.)
   NOTE: Only font family, size, weight, color, text-treatment.
   No margin, padding, display, gap, etc.
*/

/* Small label above headline */
.hero__eyebrow {
  font-family: var(
    --hero-font-secondary,
    var(--hero-font-primary, var(--font-secondary, var(--font-primary, inherit)))
  );
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--hero-accent, #16a34a);
}

/* Main headline */
.hero__headline {
  font-family: var(
    --hero-font-secondary,
    var(--hero-font-primary, var(--font-secondary, var(--font-primary, inherit)))
  );
  font-weight: 800;
  font-size: clamp(42px, 5.6vw, 64px);
  line-height: 1.05;
  color: var(--hero-heading, #0f172a);
}

/* Subheadline */
.hero__subheadline {
  font-family: var(
    --hero-font-secondary,
    var(--hero-font-primary, var(--font-secondary, var(--font-primary, inherit)))
  );
  font-weight: 600;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.35;
  color: var(--hero-body, #111827);
}

/* Main body copy */
.hero__body {
  font-family: var(
    --hero-font-primary,
    var(--font-primary, inherit)
  );
  font-size: 16px;
  line-height: 1.6;
  color: var(--hero-body, #111827);
}

/* Additional muted text */
.hero__additional {
  font-family: var(
    --hero-font-primary,
    var(--font-primary, inherit)
  );
  font-size: 15px;
  line-height: 1.6;
  color: var(--hero-muted, #6b7280);
}

/* Button text styles (NO padding / radius / flex here) */
.hero__btn {
  font-family: var(
    --hero-font-primary,
    var(--font-primary, inherit)
  );
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  color: var(--hero-button-primary-text, #ffffff);
}

/* Primary button color only */
.hero__btn--primary {
  color: var(--hero-button-primary-text, #ffffff);
  background: var(--hero-button-primary-bg, #8b5cf6);
  border-color: var(--hero-button-primary-bg, #8b5cf6);
}

/* Secondary button color only */
.hero__btn--secondary {
  color: var(--hero-button-secondary-text, #111827);
  background: var(--hero-button-secondary-bg, transparent);
  border-color: var(--hero-button-secondary-text, #111827);
}

/* Stats typography only */
.hero__stat-number {
  font-family: var(
    --hero-font-secondary,
    var(--hero-font-primary, var(--font-secondary, var(--font-primary, inherit)))
  );
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  color: var(--hero-stat-number, #0f172a);
}

.hero__stat-label {
  font-family: var(
    --hero-font-primary,
    var(--font-primary, inherit)
  );
  font-size: 15px;
  line-height: 1.5;
  color: var(--hero-stat-label, #4b5563);
}

/* ============================================
   FINAL OVERRIDE: FORCE TOKENS FOR ALL HERO TEXT
   (so we don't touch 100 layout files)
   ============================================ */

/* Base font only on the hero wrapper, no !important and not on all children */
.hero {
  font-family: var(--hero-font-primary, var(--font-primary, inherit));
}

/* Headings & hero headline classes use secondary font if provided */
.hero h1,
.hero h2,
.hero h3,
.hero .hero__headline,
.hero .hero__subheadline {
  font-family: var(
    --hero-font-secondary,
    var(--hero-font-primary, var(--font-secondary, var(--font-primary, inherit)))
  ) !important;
}

/* ---------------------------------------------------------
   Font slot utilities (admin preview + live)
   Use by adding class="font1" / "font2" / ... on elements
--------------------------------------------------------- */
.hero .font1 { font-family: var(--font1, var(--hero-font-primary, var(--font-primary, inherit))) !important; }
.hero .font2 { font-family: var(--font2, var(--hero-font-secondary, var(--font-secondary, inherit))) !important; }
.hero .font3 { font-family: var(--font3, var(--font1, inherit)) !important; }
.hero .font4 { font-family: var(--font4, var(--font1, inherit)) !important; }
.hero .font5 { font-family: var(--font5, var(--font1, inherit)) !important; }
.hero .font6  { font-family: var(--font6,  var(--font1, inherit)) !important; }
.hero .font7  { font-family: var(--font7,  var(--font1, inherit)) !important; }
.hero .font8  { font-family: var(--font8,  var(--font1, inherit)) !important; }
.hero .font9  { font-family: var(--font9,  var(--font1, inherit)) !important; }
.hero .font10 { font-family: var(--font10, var(--font1, inherit)) !important; }
.hero .font11 { font-family: var(--font11, var(--font1, inherit)) !important; }
.hero .font12 { font-family: var(--font12, var(--font1, inherit)) !important; }
.hero .font13 { font-family: var(--font13, var(--font1, inherit)) !important; }
.hero .font14 { font-family: var(--font14, var(--font1, inherit)) !important; }
.hero .font15 { font-family: var(--font15, var(--font1, inherit)) !important; }
.hero .font16 { font-family: var(--font16, var(--font1, inherit)) !important; }
.hero .font17 { font-family: var(--font17, var(--font1, inherit)) !important; }
.hero .font18 { font-family: var(--font18, var(--font1, inherit)) !important; }
.hero .font19 { font-family: var(--font19, var(--font1, inherit)) !important; }
.hero .font20 { font-family: var(--font20, var(--font1, inherit)) !important; }