/**
 * IQ Finance - Custom Overrides
 * Layered on top of the pre-built Tailwind CSS
 */

/* --- Hero subtitle color contrast --- */
:root {
  --foreground-muted: #374151 !important;
}
.dark {
  --foreground-muted: #B0B0B8 !important;
}

/* --- Navbar text contrast (exclude CTA buttons with bg) --- */
nav a:not([class*="bg-"]),
nav button:not([class*="bg-"]),
header a:not([class*="bg-"]),
header button:not([class*="bg-"]) {
  color: var(--foreground) !important;
}
:root nav a:not([class*="bg-"]),
:root header a:not([class*="bg-"]) {
  color: #111827 !important;
}
.dark nav a:not([class*="bg-"]),
.dark header a:not([class*="bg-"]) {
  color: #FDFDFD !important;
}
/* Force CTA button to keep light-on-dark text */
nav a[class*="bg-"], nav button[class*="bg-"],
header a[class*="bg-"], header button[class*="bg-"] {
  color: var(--background) !important;
}

/* --- Hide only the email input (keep CTA button visible) --- */
input[type="email"],
input[placeholder*="company" i] {
  display: none !important;
}

/* --- CTA baseline styles (desktop-safe) --- */
#early-access button,
a[href="/#early-access"],
button[type="submit"] {
  text-align: center !important;
}



/* --- Center both CTA form buttons on desktop + mobile --- */
form.flex.w-full.max-w-sm.items-center.gap-2 {
  width: auto !important;
  max-width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

form.flex.w-full.max-w-sm.items-center.gap-2 button[type="submit"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Footer: reduce padding + center content --- */
footer {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
footer > div {
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
footer > div > div:first-child {
  align-items: center !important;
  text-align: center !important;
}
footer > div > div:last-child {
  justify-content: center !important;
}
footer section,
footer > div > div {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  gap: 1.5rem !important;
}
footer h2, footer h3, footer h4 {
  font-size: 1.25rem !important;
  margin-bottom: 0.75rem !important;
}
footer p,
footer a,
footer span {
  text-align: center !important;
}
/* Hide oversized decorative/watermark text */
footer [class*="text-9xl"],
footer [class*="text-8xl"],
footer [class*="text-7xl"] {
  display: none !important;
}

/* Copyright + system operational row */
footer + div {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
footer + div > p,
footer + div > div {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Section spacing --- */
section + section {
  margin-top: 0 !important;
}

/* --- GHL Modal responsive --- */
@media (max-width: 640px) {
  #ghl-modal-container {
    width: 95% !important;
    margin: 1rem !important;
    border-radius: 16px !important;
  }
  #ghl-modal-container iframe {
    border-radius: 16px !important;
  }
}

/* --- Mobile fixes --- */
@media (max-width: 768px) {
  .hero-elem {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }

  h1.hero-elem {
    font-size: clamp(1.8rem, 7.8vw, 2.2rem) !important;
    line-height: 1.1 !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* Prevent oversized/overflowing hero subheadline */
  p.hero-elem {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Center the footer top-level — Tailwind already does flex-col on mobile */
  footer {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
    align-items: center !important;
  }

  /* Center the logo image */
  footer img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* Keep Legal + Social in 2 centered columns on mobile */
  footer > div > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, max-content)) !important;
    justify-content: center !important;
    column-gap: 2rem !important;
    row-gap: 0 !important;
  }

  /* Copyright + System Operational bottom bar: stack and center */
  footer + div {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* System Operational pill: keep horizontal internal layout */
  footer + div > div {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* --- Mobile-only CTA/copy formatting --- */
.hero-sub-break {
  display: none;
}

@media (max-width: 768px) {
  /* Keep recently requested formatting to mobile only */
  #early-access {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #early-access form {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }

  .hero-sub-break {
    display: block;
  }

  h1.hero-elem {
    font-size: clamp(2rem, 8.2vw, 2.35rem) !important;
    line-height: 1.15 !important;
  }

  p.hero-elem {
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
    max-width: 86% !important;
  }
}


/* --- Desktop footer alignment restore (left/right) --- */
@media (min-width: 769px) {
  footer > div {
    justify-content: space-between !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  footer > div > div:first-child {
    align-items: flex-start !important;
    text-align: left !important;
  }

  footer > div > div:last-child {
    justify-content: flex-start !important;
  }

  footer p,
  footer a,
  footer span,
  footer h4 {
    text-align: left !important;
  }

  footer > div + div {
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
  }

  footer > div + div > p,
  footer > div + div > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* --- Mobile hero/navbar refinements --- */
@media (max-width: 768px) {
  /* Move top navbar CTA slightly right inside outlined container */
  header a[href="/#early-access"],
  nav a[href="/#early-access"] {
    transform: translateX(6px);
  }

  /* Keep "Performance Intelligence" on one responsive line */
  .hero-title-line-1 {
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    line-height: 1.1;
  }

  /* Keep second sub-headline line white like desktop emphasis */
  .hero-sub-emphasis {
    color: var(--foreground) !important;
    font-weight: 500;
  }
}


/* Keep final CTA middle line on one line in mobile */
@media (max-width: 768px) {
  .final-cta-nowrap {
    display: inline-block;
    white-space: nowrap;
    font-size: 0.9em;
  }
}