/* ============================================================================
   enhancements.css — responsive layer for the Nikah.App landing page
   ----------------------------------------------------------------------------
   index.html comes out of the design tool as one fixed desktop layout with no
   media queries, so on a phone the page is ~666px wide inside a 390px viewport
   and scrolls sideways. This file adds the missing mobile layout WITHOUT
   touching index.html, so a fresh export can be re-cloned and only needs its
   <link> re-added.

   Two rules keep that safe:

   1. Everything lives inside `@media (max-width: 900px)`. The desktop layout is
      clean down to exactly 900px (measured), so above that this file is inert
      and the page renders pixel-identically to the design.

   2. Selectors match on the design tool's own inline `style` strings. That makes
      them stable across exports, and if a style ever changes the rule simply
      stops matching — it can never corrupt the desktop layout. `!important` is
      required throughout, because inline styles outrank any selector.
   ========================================================================== */


/* ── Header: white bar ────────────────────────────────────────────────────────
   The design ships a deep-purple frosted bar. Turning it white means recolouring
   everything inside it too — the wordmark and nav links are white, and the CTA
   is a white pill, so on a white bar all three would disappear. Colours below
   are the design's own: near-black text, muted grey links, brand purple for the
   button, and the same hover purple the page uses elsewhere.
   Applies at every width. */
[style*="z-index: 60"][style*="position: sticky"] {
  background: rgba(255, 255, 255, 0.86) !important;
  border-bottom: 1px solid rgb(230, 227, 238) !important;
}

/* Wordmark. */
[style*="z-index: 60"][style*="position: sticky"] [style*="font: 800 19px"] {
  color: rgb(23, 22, 28) !important;
}

/* The logo tile keeps its purple fill and white mark; drop the pale ring that
   only existed to separate it from the dark bar. */
[style*="z-index: 60"][style*="position: sticky"] [style*="border-radius: 11px"] {
  box-shadow: none !important;
}

/* Section links, and their hover rule in styles.css. */
[style*="z-index: 60"][style*="position: sticky"] a.scp0 {
  color: rgb(92, 87, 105) !important;
}
[style*="z-index: 60"][style*="position: sticky"] a.scp0:hover {
  color: rgb(23, 22, 28) !important;
}

/* CTA: invert it, so it still reads as the one solid thing in the bar. */
[style*="z-index: 60"][style*="position: sticky"] a.scp1 {
  background: rgb(76, 29, 191) !important;
  color: rgb(255, 255, 255) !important;
}
[style*="z-index: 60"][style*="position: sticky"] a.scp1:hover {
  background: rgb(63, 24, 162) !important;
  color: rgb(255, 255, 255) !important;
}


/* ── Tablet and below: collapse every multi-column layout ─────────────────── */
@media (max-width: 900px) {

  /* Hero. The right column has `minmax(430px, …)`, which alone is wider than a
     phone — this is the main source of the sideways scroll. */
  [style*="minmax(0px, 1.06fr) minmax(430px"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 56px 20px 64px !important;
  }

  /* "How Nikah.App Is Different" — section heading beside its intro line. */
  [style*="grid-template-columns: 1.1fr 0.9fr"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }

  /* "Why Nikah.App?" — the two columns of research findings. */
  [style*="grid-template-columns: 1fr 1fr; column-gap: 64px"] {
    grid-template-columns: 1fr !important;
  }

  /* "Know Yourself" — copy beside the app screenshot. */
  [style*="minmax(0px, 0.85fr) minmax(0px, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 64px 20px 72px !important;
  }

  /* Waitlist form: first name / last name side by side. */
  [style*="grid-template-columns: 1fr 1fr; gap: 14px"] {
    grid-template-columns: 1fr !important;
  }

  /* Page gutters: 34px is generous on a phone. */
  [style*="padding: 92px 34px 96px"] { padding: 64px 20px 72px !important; }
  [style*="padding: 70px 34px 46px"] { padding: 52px 20px 40px !important; }
  [style*="padding: 0px 34px"]       { padding: 0 20px !important; }
  [style*="padding: 16px 34px"]      { padding: 14px 20px !important; }

  /* Research findings: big number beside its explanation. Side by side, the
     text column collapses to ~128px, so stack them. */
  [style*="display: flex; gap: 26px; padding: 30px 0px"] {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 22px 0 !important;
  }
  /* The figure sits in a fixed 118px column to line the numbers up on desktop. */
  [style*="display: flex; gap: 26px; padding: 30px 0px"] > [style*="width: 118px"] {
    width: auto !important;
  }

  /* "Meet iShaykh": two phone screenshots side by side. */
  [style*="flex: 0 1 618px"] {
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding-top: 8px !important;
    justify-content: center !important;
  }

  /* The screenshot columns carry a ~90px top offset that aligns them with the
     copy beside them on desktop. Stacked, that reads as dead space. */
  [style*="padding-top: 92px"],
  [style*="padding-top: 90px"],
  [style*="padding-top: 88px"] {
    padding-top: 8px !important;
  }

  /* Screenshots deliberately bleed past their section edge on desktop, where the
     crop reads as intentional next to a tall column of copy. Stacked, the phone
     is the last thing in the section, so the same crop just looks like the image
     got chopped. Drop the bleed entirely and let each phone finish. */
  [style*="margin-bottom: -160px"],
  [style*="margin-bottom: -120px"],
  [style*="margin-bottom: -108px"],
  [style*="margin-bottom: -84px"] {
    margin-bottom: 0 !important;
  }

  /* …and give them room to breathe against the next section. Once stacked, each
     screenshot column is narrower than the row it now owns, and flex leaves it
     at the start — so centre it, and centre the image inside it. */
  [style*="flex: 0 1 336px"],
  [style*="flex: 0 1 312px"],
  [style*="flex: 0 1 618px"] {
    padding-bottom: 44px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  [style*="flex: 0 1 336px"] > img,
  [style*="flex: 0 1 312px"] > img,
  [style*="flex: 0 1 618px"] > img {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* The copy column beside them takes the whole row too, so the row it shares
     with the screenshot must centre its items rather than left-align them. */
  [style*="flex-wrap: wrap-reverse"],
  [style*="display: flex; flex-wrap: wrap; gap: 52px"],
  [style*="display: flex; flex-wrap: wrap; gap: 48px"] {
    justify-content: center !important;
  }

  /* Gaps between a copy column and its screenshot, once they are stacked. */
  [style*="flex-wrap: wrap-reverse"],
  [style*="display: flex; flex-wrap: wrap; gap: 52px"],
  [style*="display: flex; flex-wrap: wrap; gap: 48px"] {
    gap: 28px !important;
  }

  /* Copy columns padded to ~96px top and bottom so they centre against a tall
     screenshot on desktop. Stacked, that padding becomes a hole between the copy
     and the phone below it. Note the two spellings — `96px 0px` and
     `92px 0px 96px`; matching only the first left the Know Yourself section with
     a 130px gap. */
  [style*="padding: 96px 0px"],
  [style*="padding: 92px 0px 96px"] {
    padding: 56px 0 8px !important;
  }

  /* Numbered rows in "How It's Different". Side by side the number and title
     share a line while the description drops below it, flush left — which reads
     as a misalignment. Stack all three instead. */
  [style*="gap: 12px 30px; align-items: baseline"] {
    flex-direction: column !important;
    gap: 5px !important;
    padding: 24px 0 !important;
  }
  /* Children carry `flex: 1 1 250px` / `1 1 400px`. Once the row becomes a
     column that basis is read as a HEIGHT, which inflates each row to ~730px.
     Reset it so they size to their content. */
  [style*="gap: 12px 30px; align-items: baseline"] > * {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  [style*="gap: 12px 30px; align-items: baseline"] > [style*="flex: 1 1 400px"] {
    margin-top: 3px !important;
  }

  /* Header: drop the section links, keep the logo and the waitlist CTA. Both
     links point at sections the user reaches by scrolling anyway. */
  [style*="display: flex; align-items: center; gap: 28px"] > a[href="#why"],
  [style*="display: flex; align-items: center; gap: 28px"] > a[href="#different"] {
    display: none !important;
  }

  /* Numbered feature rows in "How It's Different". */
  [style*="display: flex; align-items: center; gap: 14px; padding: 17px 0px"] {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Hero portrait. The frame is 4:5 but the photo is 810x1050 (4:5.185), and the
     image is width-fitted and centred, so the frame trims the top and bottom.
     On desktop that is ~8px and invisible. Shortening the frame here — an
     earlier attempt to stop the hero dominating the first screen — pushed the
     trim to 43px a side, which cut off the top of his head. Match the frame to
     the photo's own ratio instead, so nothing is cropped at all. */
  [style*="aspect-ratio: 4 / 5"] {
    aspect-ratio: 810 / 1050 !important;
  }
}


/* ── Phones: tighten type and spacing ────────────────────────────────────── */
@media (max-width: 560px) {

  /* The design's clamp() bottoms out at 42px, which overflows a 390px screen
     once gutters are accounted for. */
  [style*="clamp(42px, 5vw, 72px)"] {
    font-size: clamp(31px, 8.4vw, 42px) !important;
    letter-spacing: -1px !important;
  }
  [style*="clamp(34px, 3.6vw, 52px)"],
  [style*="clamp(32px, 3.4vw, 46px)"] {
    font-size: clamp(26px, 7.2vw, 40px) !important;
    letter-spacing: -0.8px !important;
  }

  /* Stat figures (72%, $40+, …). */
  [style*="font: 800 44px"] { font-size: 36px !important; }
  [style*="font: 800 40px"] { font-size: 33px !important; }

  /* Full-width CTA buttons read better than shrink-wrapped ones on a phone. */
  a[href="#waitlist"][style*="padding: 19px 28px"],
  a[href="#waitlist"][style*="padding: 18px 26px"] {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  /* Reassurance line under the hero CTA: sized to sit beside the button on
     desktop, so it needs the full width once the button is full width. */
  [style*="max-width: 186px"] {
    max-width: none !important;
  }

  /* Social icon row in the footer. */
  [style*="display: flex; flex-wrap: wrap; gap: 10px"] {
    gap: 8px !important;
  }

  /* The waitlist card's 34px padding costs 68px of a 390px screen, leaving the
     embedded form about 280px to lay out in. */
  [style*="padding: 34px; border-radius: 26px"] {
    padding: 16px !important;
    border-radius: 20px !important;
  }
}


/* ── Embedded CRM form ────────────────────────────────────────────────────────
   The waitlist form is a LeadConnector iframe, so it is cross-origin: nothing in
   this file can reach the fields inside it. Its typography, field shapes and
   button are set in the GoHighLevel form builder — see README. What is styled
   here is the card around it and the iframe box itself. */
iframe[id^="inline-"] {
  width: 100%;
  border: 0;
  display: block;
  color-scheme: light;
}


/* ── Sticky waitlist bar (phones only) ────────────────────────────────────────
   Injected by enhancements.js. The page's six in-page CTAs all require
   scrolling to reach one; this keeps the single conversion action always
   available. Hidden once the waitlist form itself is on screen, so it never
   covers the thing it points at. */
#nk-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(28, 11, 64, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateY(110%);
  transition: transform 0.22s ease;
}

#nk-sticky-cta[data-shown="true"] {
  transform: translateY(0);
}

#nk-sticky-cta .nk-sticky-text {
  flex: 1;
  min-width: 0;
  font: 700 13.5px/1.35 "Plus Jakarta Sans", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.82);
}

#nk-sticky-cta .nk-sticky-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 13px;
  background: #fff;
  font: 800 14.5px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  color: #2b1264;
  text-decoration: none;
  transition: background 0.16s ease;
}

#nk-sticky-cta .nk-sticky-btn:hover,
#nk-sticky-cta .nk-sticky-btn:focus-visible {
  background: #ece5ff;
  color: #2b1264;
}

@media (max-width: 900px) {
  #nk-sticky-cta { display: flex; }
  /* Keep the last section clear of the bar. */
  body { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  #nk-sticky-cta { transition: none; }
}