/* /assets/css/sq-mobile.css */
:root { --sa-header-h-mobile: 72px; } /* fallback if JS can't measure */

@media (max-width: 900px){

  /* 0) Never pad the whole body – it caused double spacing */
  body { padding-top: 0 !important; }

  /* 1) Make sure the fixed navbar sits above content */
  .navbar { z-index: 10000 !important; }

  /* 2) Push the first section under the fixed navbar.
        Specificity beats page-local rules like .hero.page-home */
  .navbar + .hero,
  .navbar + section.hero,
  .navbar + .page-hero,
  .navbar + main > .hero:first-of-type,
  .navbar + div > .hero:first-of-type,
  .navbar + .hero.page-home {
    margin-top: calc(var(--sa-header-h-mobile, 72px) + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(100vh - (var(--sa-header-h-mobile, 72px) + env(safe-area-inset-top, 0px))) !important;
  }

  /* 3) Collapse the pill nav on mobile; show hamburger */
  .navbar .nav-menu { display: none !important; }

  .sa-hamburger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 0; background: transparent; color: #000;
    -webkit-tap-highlight-color: transparent;
  }
  .sa-hamburger span{
    display:block; width:24px; height:2px; margin:4px 0;
    background: currentColor; border-radius:2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .menu-open .sa-hamburger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .menu-open .sa-hamburger span:nth-child(2){ opacity: 0; }
  .menu-open .sa-hamburger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  /* 4) Reveal the pill nav as a vertical panel when open */
  .menu-open .navbar .nav-menu{
    display: block !important;
    position: fixed;
    top: calc(var(--sa-header-h-mobile, 72px) + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    background: #fff;
    padding: 16px 20px;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    z-index: 9999;
  }
  .menu-open .navbar .nav-item{ display:block; }
  .menu-open .navbar .nav-link{ display:block; padding:12px 14px; border-radius:12px; }

  /* Mobile dropdowns: stack; use your existing [hidden] attribute */
  .menu-open .navbar .nav-dropdown{
    position: static !important; top:auto !important; left:auto !important;
    box-shadow:none !important; border:0 !important; padding:0 !important; background:transparent !important;
  }
  .menu-open .navbar .nav-dropdown[hidden]{ display:none !important; }
  .menu-open .navbar .nav-dropdown:not([hidden]){ display:block !important; }

  /* No background scroll while menu is open */
  .menu-open body { overflow: hidden; }
}

@media (min-width: 901px){
  .sa-hamburger{ display: none !important; }  /* desktop untouched */
}

/* ---- 2025-08-23 Mobile tuning (Squark) ---- */
@media (max-width: 900px){

  /* 1) HERO — tighter offset + stop forcing full-height on phones */
  .navbar + .hero,
  .navbar + section.hero,
  .navbar + .page-hero,
  .navbar + main > .hero:first-of-type,
  .navbar + div > .hero:first-of-type,
  .navbar + .hero.page-home{
    /* exact header height (from JS) + safe-area, then nudge up 10px */
    margin-top: calc(var(--sa-header-h-mobile, 72px) + env(safe-area-inset-top, 0px) - 10px) !important;
    min-height: auto !important; /* let content define height on phones */
  }

  /* 2) HAMBURGER — render as three stacked bars, not two dashes */
  .sa-hamburger{ 
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:0; background:transparent;
    -webkit-tap-highlight-color:transparent;
    flex-direction: column;                 /* <-- stack bars vertically */
    gap: 4px;                               /* even spacing */
  }
  .sa-hamburger span{
    display:block; width:24px; height:2px; margin:0;
    background: currentColor; border-radius:2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .menu-open .sa-hamburger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .menu-open .sa-hamburger span:nth-child(2){ opacity: 0; }
  .menu-open .sa-hamburger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  /* 3) MOBILE OVERLAY — keep caret on same line, right-aligned */
  .menu-open .navbar .nav-item{ 
    display:flex !important; 
    align-items:center; 
    justify-content:space-between; 
  }
  .menu-open .navbar .nav-link{ 
    display:block; padding:12px 14px; flex:1 1 auto; 
  }
  .menu-open .navbar .nav-caret{ 
    display:inline-flex; align-items:center; justify-content:center; 
    padding:0 8px; height:40px; line-height:1; 
    flex:0 0 auto; 
  }
}

/* ========= NAV & HERO – GLOBAL OVERRIDES (Squark) ========= */
:root{
  /* one place to change row height and spacing */
  --nav-row-h: 40px;   /* pill + login icon + Request a demo height on desktop */
  --nav-gap:    8px;   /* gap between the pill, login icon, and CTA */
}

/* --- Desktop layout: move pill next to the right-side group & unify heights --- */
@media (min-width: 901px){
  /* 1) Layout: logo on the left; pill pushed to the right next to the icon & CTA */
  .navbar .nav-container{
    justify-content: flex-start !important;   /* override space-between */
    gap: var(--nav-gap) !important;
  }
  .navbar .nav-menu{ margin-left: auto !important; } /* sits beside .nav-cta */
  .navbar .nav-cta{ gap: var(--nav-gap) !important; }

  /* 2) Same height for everything in the nav row */
  .navbar .nav-user-link{
    width: var(--nav-row-h) !important;
    height: var(--nav-row-h) !important;
    min-width: var(--nav-row-h) !important;
    border-radius: 50% !important;
  }

  /* Pill wrapper + its items */
  .navbar .nav-menu{
    padding: 6px 14px !important;                          /* keep soft pill padding */
    border-radius: calc(var(--nav-row-h)/2) !important;     /* match CTA rounding */
  }
  .navbar .nav-link,
  .navbar .nav-caret{
    height: calc(var(--nav-row-h) - 12px) !important;       /* 28px = 40 - 12 padding */
    line-height: calc(var(--nav-row-h) - 12px) !important;
  }

  /* Black CTA: exact same height as the pill & login icon */
  .navbar .btn-demo{
    height: var(--nav-row-h) !important;
    min-height: var(--nav-row-h) !important;
    line-height: var(--nav-row-h) !important;               /* for good measure */
    padding: 0 16px !important;
    font-size: 15px !important;
    border-radius: calc(var(--nav-row-h)/2) !important;
    white-space: nowrap !important;                         /* never wrap */
  }
}

/* --- Mobile: shrink the black CTA and keep text on one line --- */
@media (max-width: 900px){
  .navbar .btn-demo{
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    border-radius: 19px !important;
    white-space: nowrap !important; /* prevents two-line wrap */
  }
}

/* --- Hero: keep the circular image flush with the right edge (like the comp) --- */
/* Your hero uses .circular-image inside a 2-col grid; push it to the far right. */
@media (min-width: 901px){
  .page-home .hero .circular-image{
    margin-left: auto !important;  /* right-align in the grid column */
    right: 0 !important;
  }
}