/* =========================================================================
   FunLida System Layer — Stage 1, Step 2 (deliberate changes)
   Loads LAST. Everything here is an intentional visual change, kept apart
   from funlida-design.css so the whole step reverts by disabling one file.

   Scope guard: nothing in here targets the header, nav or mega-menu.
   ========================================================================= */

/* --- 1. GROUND ------------------------------------------------------------
   Pink moves from substrate to accent. #FFFCFD is a warm off-white that
   still carries a pink cast, so brand warmth survives while surfaces gain
   the contrast that hierarchy needs. Revert = delete this block.          */
:root { --fl-surface-page: #FFFCFD; }

body,
body.elementor-page,
body.elementor-kit-100 {
  background-color: var(--fl-surface-page);
}

/* Cards sit on the new ground as true white, so they read as objects. */
.fl-card, .fl-pack, .fl-step, .fl-why-item, .fl-explore-card,
.fl-tst-card, .fl-faq-item, .fl-teach-card, .fl-hts-card {
  background-color: var(--fl-surface-card);
}

/* Sections that were carrying the old page pink become deliberate tint
   bands rather than an undifferentiated field. */
.fl-sec--tint { background-color: var(--fl-tint-50); }
.fl-sec--alt  { background-color: var(--fl-surface-alt); }


/* --- 2. DISPLAY TYPE ------------------------------------------------------
   One token for every section H2, resolving the live 25 / 36 / 38px split
   and the 700 / 800 weight split. Optical tracking applied throughout.   */

.fl-hero-title,
h1.elementor-heading-title {
  font-family: var(--fl-font-display);
  font-size: var(--fl-text-4xl);
  font-weight: var(--fl-weight-display);
  line-height: var(--fl-leading-display);
  letter-spacing: var(--fl-tracking-display);
}

/* Specificity note: Elementor's compiled post-*.css targets these at
   (0,2,1) via .elementor-element-XXXX .elementor-heading-title. Adding
   .elementor-widget to the wrapper gives (0,3,0), which wins on class
   count without needing !important. */
.elementor-widget.fl-h2 .elementor-heading-title,
.elementor-widget.fl-why-h2 .elementor-heading-title,
.elementor-widget.fl-class-h2 .elementor-heading-title,
.elementor-widget.fl-explore-h2 .elementor-heading-title,
.elementor-widget.fl-cta-h2 .elementor-heading-title,
h2.fl-hts-title {
  font-family: var(--fl-font-display);
  font-size: var(--fl-text-3xl);
  font-weight: var(--fl-weight-bold);
  line-height: var(--fl-leading-tight);
  letter-spacing: var(--fl-tracking-display);
}

.fl-step-title, .fl-form-title, .fl-sum-title,
.elementor-widget-container > h3.elementor-heading-title {
  font-family: var(--fl-font-display);
  font-weight: var(--fl-weight-bold);
  line-height: var(--fl-leading-tight);
  letter-spacing: var(--fl-tracking-heading);
}

/* Eyebrows read as system labels, not shrunken headings. */
.fl-eyebrow, .fl-class-eyebrow {
  font-family: var(--fl-font-body);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* --- 3. MEASURE -----------------------------------------------------------
   Section intro copy currently runs the full container width, which is the
   most common amateur tell. Capped and centred under centred headings.   */
.fl-pack-intro, .fl-tst-intro, .fl-faq-intro, .fl-contact-intro,
.fl-explore-intro, .fl-teach-sub, .fl-book-sub, .fl-form-sub {
  max-width: var(--fl-measure);
  line-height: var(--fl-leading-body);
}
.fl-pack-intro, .fl-tst-intro, .fl-faq-intro {
  margin-inline: auto;
}
.fl-hero-sub {
  max-width: 52ch;
  line-height: var(--fl-leading-body);
}


/* --- 4. FOCUS -------------------------------------------------------------
   On-brand and always visible. Browser default is replaced, not removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--fl-focus-ring);
  outline-offset: var(--fl-focus-offset);
  border-radius: var(--fl-radius-control);
}
