/*
  File: iq-coming-soon.css
  Scope: .iq-coming-soon
  Location: assets/css/iq-coming-soon.css
  Depends: iq-tokens.css, iq-base.css, iq-typography.css, iq-backgrounds.css,
           iq-layout.css, iq-components.css, iq-forms.css
  Load order: after iq-elementor.css (last file loaded), via the
              isleiq_enqueue_coming_soon_styles() conditional enqueue.
  Version: 1.0.2

  ============================================================
  FIX (27 June 2026): v1.0.0/1.0.1 used `background: var(--iq-bg-page, #0D2137)`
  on .iq-coming-soon__stage. --iq-bg-page is a REAL, DEFINED token in the
  live iq-tokens.css, set to var(--iq-slate-050) = #f4f7f9 (Off White).
  Because the variable exists and resolves cleanly, the #0D2137 fallback
  never activated. background was rendering Off White correctly per the
  CSS as written, just using the wrong token for the intended look.

  The correct dark/navy tokens, confirmed directly from the live
  iq-tokens.css, are:
    --iq-bg-dark: var(--iq-navy)       → #0d2137  (Midnight Navy)
    --iq-bg-deep: var(--iq-navy-900)   → #071522  (deeper navy)

  This file now uses --iq-bg-dark directly, and additionally applies the
  existing .iq-dark text-token flip block (already defined in iq-tokens.css
  for .iq-bg-dark, .iq-hero, .iq-section-dark, etc.) by including iq-dark
  alongside iq-coming-soon__stage in the HTML, rather than re-declaring
  text colour tokens locally. This keeps the page aligned with the
  established dark-surface pattern instead of inventing a parallel one.

  ACTION REQUIRED IN HTML/ELEMENTOR: add the class `iq-dark` alongside
  `iq-coming-soon__stage` on the outer section, e.g.:
    class="... iq-coming-soon__stage iq-dark ..."
  This activates the existing text-colour-flip rules in iq-tokens.css
  (--iq-text-primary, --iq-text-secondary, --iq-text-muted, --iq-border
  all flip to light-on-dark values automatically). Without this class,
  body text inside the stage will remain dark-on-dark and be unreadable
  against the new navy background.
  ============================================================
*/

/* ------------------------------------------
   PAGE TOKEN BLOCK
   Scoped overrides/additions for this page only.
   Reads existing root tokens, does not redefine them.
------------------------------------------ */
.iq-coming-soon {
  --iq-coming-soon-max-width: 720px;
  --iq-coming-soon-stage-padding: 96px 24px;
}

/* ------------------------------------------
   STAGE / FULL VIEWPORT HERO
   Uses --iq-bg-dark (Midnight Navy), NOT --iq-bg-page (Off White).
------------------------------------------ */
.iq-coming-soon__stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--iq-bg-dark);
  overflow: hidden;
  padding: var(--iq-coming-soon-stage-padding);
  box-sizing: border-box;
}

/* Soft decorative shape, mint over navy, using the real --iq-mint token */
.iq-coming-soon__bg-shape {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(
          circle,
          var(--iq-mint) 0%,
          transparent 70%
  );
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.iq-coming-soon__inner {
  position: relative;
  z-index: 1;
  max-width: var(--iq-coming-soon-max-width);
  width: 100%;
  text-align: center;
}

/* ------------------------------------------
   BRAND LOCKUP
------------------------------------------ */
.iq-coming-soon__brand {
  margin-bottom: 40px;
}

.iq-coming-soon__logo {
  width: 220px;
  max-width: 80%;
  height: auto;
  margin: 0 auto 12px;
  display: block;
}

.iq-coming-soon__tagline {
  font-family: var(--iq-font-display);
  font-size: var(--iq-text-sm);
  letter-spacing: 0.04em;
  color: var(--iq-mint);
  text-transform: uppercase;
  margin: 0;
}

/* ------------------------------------------
   KICKER / HEADLINE / SUBCOPY
   Uses existing iq-kicker and iq-lead typography classes directly.
   With iq-dark applied on the stage, --iq-text-primary/secondary
   already flip to light-on-dark values, no local override needed.
------------------------------------------ */
.iq-coming-soon__kicker {
  justify-content: center;
  margin-bottom: 20px;
}

.iq-coming-soon__headline {
  font-family: var(--iq-font-display);
  font-weight: 800;
  font-size: var(--iq-text-4xl);
  line-height: var(--iq-leading-tight);
  color: var(--iq-text-primary);
  margin: 0 0 20px;
}

.iq-coming-soon__subcopy {
  color: var(--iq-text-secondary);
  margin: 0 auto 32px;
  max-width: 560px;
}

/* ------------------------------------------
   PILLAR BADGES
   Reuses existing .iq-pillar components, page-level spacing only.
------------------------------------------ */
.iq-coming-soon__pillars {
  justify-content: center;
  margin-bottom: 48px;
}

/* ------------------------------------------
   CAPTURE CARD
   This is an Elementor Container element (e-con/e-flex), and its
   width, padding, background, border-radius, and shadow are now
   set directly in Elementor's own panel (Layout/Style/Advanced
   tabs), NOT in this CSS file. Elementor's auto-generated per-element
   CSS (elementor-post-18-css) uses high-specificity ID selectors
   that will always beat plain class rules here, so duplicating
   those properties in CSS only invites a losing specificity fight.
   This file now only sets what Elementor's panel can't easily do:
   typography refinement and the token-inheritance fix below.

   IMPORTANT: --iq-text-primary, --iq-text-secondary, --iq-border,
   etc. are CSS custom properties, which inherit through descendants
   regardless of background colour. Because this card sits INSIDE
   the iq-dark stage in the DOM, it inherits the dark-mode text
   tokens (light values) by default, even though its own background
   is white. This explicitly re-declares the light-mode token values
   back on this element to stop that inheritance.
------------------------------------------ */
/* ------------------------------------------
   CAPTURE CARD
   CHANGED (27 June 2026): solid white background replaced with a
   glass effect (translucent white over navy, blurred), per brand
   decision that solid white broke the page's visual flow. This
   matches the existing .iq-dark .nf-form-cont glass pattern already
   defined in iq-forms.css, so the card and the form inside it are
   now visually consistent with the same glass treatment, rather
   than introducing a second, different glass style.

   Background colour itself (rgba(255,255,255,0.08)) is set directly
   in Elementor's panel (Style > Background), confirmed via
   data-settings="background_background:classic" on the live element.
   This file only adds backdrop-filter (Elementor's panel does not
   expose this), and flips text/border tokens back to LIGHT values,
   since a glass-on-navy card needs light text again, not the dark
   slate text used for the previous solid-white version. Do not
   re-add the dark-text override block from the previous version.
------------------------------------------ */
.iq-coming-soon__capture {
  text-align: left;
  border-radius: var(--iq-radius-xl);
  box-shadow: var(--iq-shadow-lg);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.iq-coming-soon__capture-title {
  font-family: var(--iq-font-display);
  font-weight: 700;
  font-size: var(--iq-text-xl);
  color: var(--iq-white);
  margin: 0 0 8px;
}

.iq-coming-soon__capture-sub {
  font-size: var(--iq-text-sm);
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 20px;
}

/* Form input/label/button styling, error states, success message, and
   the dark-mode variant are all already handled generically by
   .nf-form-cont rules in iq-forms.css. Nothing is duplicated here. */
/* .iq-coming-soon__consent margin is set below, alongside the rest
   of the form spacing rhythm, to keep all vertical rhythm decisions
   in one place rather than split across the file. */

/* ------------------------------------------
   NINJA FORMS POLISH, SCOPED TO THIS CARD
   The live form renders via an Elementor Shortcode widget, which
   wraps Ninja Forms' own .nf-form-cont in an extra .elementor-shortcode
   div. iq-forms.css already styles .nf-form-cont generically and
   should not be duplicated here. These rules only:
   (a) remove the Shortcode widget's own default spacing so it
       doesn't add a second layer of padding on top of the card's
       Elementor panel padding,
   (b) tighten field spacing for this single-field form specifically,
       since iq-forms.css is written for general-purpose multi-field
       forms and this one only has an email field, a submit button,
       and a hidden Turnstile widget.
------------------------------------------ */
.iq-coming-soon__capture .elementor-shortcode {
  margin: 0;
}

.iq-coming-soon__capture .nf-form-cont {
  /* Background, blur, and border are set on the parent .iq-coming-soon__capture
     container (Elementor panel + this file). The inner Ninja Forms wrapper
     itself should stay fully transparent, not a second nested glass panel. */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

/* iq-forms.css's dark-mode label colours only apply under .iq-dark/.iq-bg-dark
   ancestors, which this card deliberately does not have (to avoid the
   token-inheritance issue from the previous white-card version). Since the
   card is now glass-on-navy, form labels need the light colour explicitly
   here instead. */
.iq-coming-soon__capture .nf-field-label label,
.iq-coming-soon__capture .nf-form-fields-required {
  color: var(--iq-white);
}

.iq-coming-soon__capture .nf-form-fields-required {
  color: rgba(255, 255, 255, 0.7);
}

/* The success/response message box (.nf-response-msg, styled in
   iq-forms.css) has its own light mint background, NOT the card's
   glass background. It must keep dark text regardless of the card's
   white text colour, otherwise the message becomes near-invisible
   on its own light background, confirmed 27 June 2026. */
.iq-coming-soon__capture .nf-response-msg {
  color: var(--iq-slate);
}

.iq-coming-soon__capture .nf-response-msg * {
  color: var(--iq-slate);
}

.iq-coming-soon__capture .nf-form-fields-required {
  margin-bottom: 16px;
}

.iq-coming-soon__capture .nf-field-container {
  margin-bottom: 16px;
}

.iq-coming-soon__capture .submit-container {
  margin-top: 8px;
  margin-bottom: 16px;
}

/* Turnstile widget: visually de-emphasise since it's a security
   element, not part of the brand message. Keep it functional and
   visible (required for spam protection) but quieter than the form. */
.iq-coming-soon__capture .turnstile-container {
  margin-top: 0;
  margin-bottom: 0;
}

.iq-coming-soon__capture .turnstile-container .nf-field-label {
  display: none;
}

.iq-coming-soon__consent {
  margin: 20px 0 0;
}

/* ------------------------------------------
   RESPONSIVE
   Breakpoints per Master Prompt standard: 1024px, 767px.
   Rules sit at bottom of file only.
------------------------------------------ */
@media (max-width: 1024px) {
  .iq-coming-soon__stage {
    padding: 72px 20px;
  }
}

@media (max-width: 767px) {
  .iq-coming-soon__stage {
    padding: 56px 16px;
    align-items: flex-start;
  }

  .iq-coming-soon__logo {
    width: 160px;
  }

  /* Capture card padding on mobile is set in Elementor's own
     responsive panel (switch to Mobile preview, Advanced > Padding),
     not here. See build notes. */
}