/* SqueezeHunter — Mobile-only drop-in patch
   Goal: fix mobile header overflow, snapshot dead-space, AI title split.
*/

@media (max-width: 640px) {

  /* =========================
     1) Header / Nav (mobile)
     ========================= */

  /* Tighten header padding safely (supports multiple header wrappers) */
  header.site-header .container,
  .site-header .container,
  header .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Make header layout stable */
  header.site-header .site-header-content,
  .site-header .site-header-content,
  header .site-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  /* Shrink logo/brand marks on mobile */
  header.site-header .sh-brand__marks img,
  .site-header .sh-brand__marks img,
  header.site-header .site-logo img,
  .site-header .site-logo img {
    max-height: 28px !important;
    width: auto !important;
    height: auto !important;
  }

  /* NAV: hide everything by default, then whitelist Features + Get access */
  header.site-header nav a,
  .site-header nav a {
    display: none !important;
  }

  /* Keep Features */
  header.site-header nav a[href="/features"],
  .site-header nav a[href="/features"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Keep CTA: prefer class, then fallbacks by href patterns */
  header.site-header nav a.nav-cta,
  .site-header nav a.nav-cta,
  header.site-header nav a[href*="access"],
  .site-header nav a[href*="access"],
  header.site-header nav a[href*="register"],
  .site-header nav a[href*="register"],
  header.site-header nav a[href*="login"],
  .site-header nav a[href*="login"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* =========================
     2) Live Market Snapshot
     ========================= */

  /* Center ALL hero-style CTAs (covers Open live preview + Get access) */
  a.hero-button,
  .hero-button {
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Reduce dead space: remove common min-heights / bottom padding in the home module */
  .plans-shell.plans-shell-home,
  .plans-shell-home {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Common “card shell” patterns that cause vertical dead space */
  .plans-shell.plans-shell-home .plan-card,
  .plans-shell-home .plan-card,
  .plans-shell.plans-shell-home .card,
  .plans-shell-home .card,
  .plans-shell.plans-shell-home .panel,
  .plans-shell-home .panel {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 14px !important;
  }

  /* If a flex column is pushing CTA to bottom, force content flow */
  .plans-shell.plans-shell-home .plan-card,
  .plans-shell-home .plan-card {
    justify-content: flex-start !important;
  }

  /* Tighten spacing right before the CTA if there is an internal grid/list */
  .plans-shell.plans-shell-home .grid,
  .plans-shell-home .grid,
  .plans-shell.plans-shell-home .tiles,
  .plans-shell-home .tiles {
    margin-bottom: 10px !important;
  }

  /* =========================
     3) SqueezeHunter AI module
     ========================= */

  h2.section-title {
    line-height: 1.15 !important;
    text-wrap: balance;
  }

  /* Works only after the small HTML wrap change */
  h2.section-title .title-suffix {
    display: block !important;
    margin-top: 6px !important;
    font-size: 0.92em !important;
    opacity: 0.95;
  }


  /* === CTA CENTER FIX (SH-WEB-TMOBILE-CTA-CENTER-01) === */

  /* 1) Center the CTA element itself (works if it's block-level) */
  a.hero-button,
  .hero-button,
  a.nav-cta,
  .nav-cta {
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* 2) If a parent wrapper forces left alignment, neutralize it */
  .plans-shell.plans-shell-home,
  .plans-shell-home {
    text-align: center !important;
  }

  /* 3) If CTA sits in an actions wrapper, make wrapper center its children */
  .plans-shell.plans-shell-home .actions,
  .plans-shell-home .actions,
  .plans-shell.plans-shell-home .cta,
  .plans-shell-home .cta,
  .plans-shell.plans-shell-home .hero-actions,
  .plans-shell-home .hero-actions,
  .plans-shell.plans-shell-home .plan-actions,
  .plans-shell-home .plan-actions {
    display: flex !important;
    justify-content: center !important;
  }

  /* 4) Ensure button content looks centered even if inner spans exist */
  a.hero-button > *,
  .hero-button > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }



  /* === SNAPSHOT DEAD SPACE FIX (SH-WEB-TMOBILE-SNAPSHOT-DEADSPACE-01) ===
     Desktop CSS pins Home Snapshot containers to fixed heights (520px) which creates large empty space on mobile.
     We override ONLY on small screens.
  */

  /* 1) Remove fixed height on the Home plans shell */
  .page-home .plans-shell-home {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 16px !important; /* override large desktop padding-bottom (e.g. 96px) */
  }

  /* 2) Let the embed wrapper shrink-wrap content */
  .page-home .plans-shell-home .embed-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 8px !important;
  }

  /* 3) Replace fixed 520px frame height with a safe mobile clamp */
  .page-home .plans-shell-home .sh-embed-frame {
    height: clamp(260px, 52vh, 400px) !important;
    max-height: 400px !important;
    min-height: 260px !important;
  }

  /* 4) If the layout uses flex spacing that pushes CTA to the bottom, neutralize it */
  .page-home .plans-shell-home {
    justify-content: flex-start !important;
  }

}


/* SH-WEB-TNAV-RESET-01 — disable mobile-patch header/nav rules
   The drawer system now owns mobile navigation; avoid conflicting header hacks.
*/
@media (max-width: 640px) {
  header.site-header nav.site-nav a.site-nav-link,
  header.site-header nav.site-nav a.nav-cta {
    display: none !important;
  }
  /* Do not force "Features only" anymore */
  header.site-header nav.site-nav a[href="/features"] {
    display: none !important;
  }
}
/* /SH-WEB-TNAV-RESET-01 */


/* SH-WEB-TNAV-CANONICAL-01 — drawer owns mobile nav (neutralize header link hacks) */
@media (max-width: 640px) {
  header.site-header nav.site-nav a.site-nav-link,
  header.site-header nav.site-nav a.nav-cta {
    display: none !important;
  }
  header.site-header nav.site-nav a[href="/features"] {
    display: none !important;
  }
}
/* /SH-WEB-TNAV-CANONICAL-01 */

/* SH-PROD-MOBILE-HEADER-GRID-WINNER-01 */
@media (max-width: 640px){
  header.site-header .site-header-content,
  .site-header .site-header-content{
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    align-items: center !important;
    gap: 0 !important;
    min-width: 0 !important;
  }
}
/* /SH-PROD-MOBILE-HEADER-GRID-WINNER-01 */

/* SH-PROD-MOBILE-BURGER-ANCHOR-01 — keep burger lines anchored to button */
@media (max-width: 640px){
  button.nav-burger{
    position: relative !important; /* positioning context for internal lines */
    overflow: hidden;              /* prevent stray lines rendering outside */
  }
}
/* /SH-PROD-MOBILE-BURGER-ANCHOR-01 */

/* SH-PROD-MOBILE-BURGER-LINES-FORCE-01 — force 3 visible lines inside burger (overrides any hide rules) */
@media (max-width: 640px){
  header.site-header nav.site-nav button.nav-burger,
  .site-header nav.site-nav button.nav-burger{
    position: relative !important;
    overflow: hidden !important;
  }

  header.site-header nav.site-nav button.nav-burger .nav-burger__line,
  .site-header nav.site-nav button.nav-burger .nav-burger__line{
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    width: 18px !important;
    height: 2px !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: auto !important;
    bottom: auto !important;
  }

  header.site-header nav.site-nav button.nav-burger .nav-burger__line:nth-child(1),
  .site-header nav.site-nav button.nav-burger .nav-burger__line:nth-child(1){
    top: 12px !important;
  }
  header.site-header nav.site-nav button.nav-burger .nav-burger__line:nth-child(2),
  .site-header nav.site-nav button.nav-burger .nav-burger__line:nth-child(2){
    top: 18px !important;
  }
  header.site-header nav.site-nav button.nav-burger .nav-burger__line:nth-child(3),
  .site-header nav.site-nav button.nav-burger .nav-burger__line:nth-child(3){
    top: 24px !important;
  }
}
/* /SH-PROD-MOBILE-BURGER-LINES-FORCE-01 */

/* SH-PROD-MOBILE-BRAND-UNHIDE-01 — restore mobile logo when site-logo is :empty (background-image logo) */
@media (max-width: 640px){
  header.site-header a.site-logo:empty,
  .site-header a.site-logo:empty{
    display: block !important; /* override any prior :empty hide */
  }

  /* keep brand centered inside canonical grid */
  header.site-header a.site-logo,
  header.site-header a.sh-brand,
  .site-header a.site-logo,
  .site-header a.sh-brand{
    grid-column: 2 !important;
    justify-self: center !important;
  }
}
/* /SH-PROD-MOBILE-BRAND-UNHIDE-01 */

/* SH-PROD-MOBILE-BRAND-RENDER-02 — render mobile wordmark from web/public */
@media (max-width: 640px){
  header.site-header a.site-logo,
  header.site-header a.sh-brand,
  .site-header a.site-logo,
  .site-header a.sh-brand{
    display: block !important;
    width: 220px !important;      /* wide enough for wordmark */
    height: 28px !important;      /* fixes h=0 */
    min-height: 28px !important;

    background-image: url("/public/SH_WORDMARK_DARK_TRANSPARENT_TIGHT.png") !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    background-size: contain !important;
  }

  /* SH-WEB-TLOGO-DEDUP-01 — keep background wordmark, hide overlaid inline mark group */
  header.site-header a.site-logo .sh-brand__marks,
  header.site-header a.sh-brand .sh-brand__marks,
  .site-header a.site-logo .sh-brand__marks,
  .site-header a.sh-brand .sh-brand__marks{
    display: none !important;
  }
}
/* /SH-PROD-MOBILE-BRAND-RENDER-02 */

/* SH-PROD-MOBILE-BRAND-DEDUP-01 — ensure single brand on mobile (hide sh-brand only when site-logo exists) */
@media (max-width: 640px){
  header.site-header a.site-logo ~ a.sh-brand,
  .site-header a.site-logo ~ a.sh-brand{
    display: none !important;
  }
}
/* /SH-PROD-MOBILE-BRAND-DEDUP-01 */