/*
 * peeryx-v122-mobile.css
 * Polished mobile-first overhaul: animated nav, burger→X, scroll lock,
 * unified breakpoint (1060px), tablet fixes, touch targets.
 * Loads last in the CSS chain (after v121-premium.css).
 *
 * Strategy: v113 uses display:none!important on .mobile-nav.
 * We override to display:block at same/higher specificity (loaded later),
 * then use visibility+opacity+transform for the animated show/hide.
 * position:absolute ensures no layout impact when hidden.
 */

/* ═════════════════════════════════════════════════════════════
   §1  MOBILE NAV ANIMATION
   Replace display:none/block toggle with smooth slide-down.
═════════════════════════════════════════════════════════════ */

/* Closed state — position:absolute so display:block has no flow impact */
html body .site-header .mobile-nav {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.24s;
}

/* Open state */
html body .site-header .mobile-nav.open {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition:
    opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s !important;
}

/* On desktop (>1060px) force-hide the mobile nav regardless */
@media (min-width: 1061px) {
  html body .site-header .mobile-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .site-header .mobile-nav,
  html body .site-header .mobile-nav.open {
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §2  BURGER → X ANIMATION
   3 spans animate to form an X when button has .active class.
═════════════════════════════════════════════════════════════ */

html body .site-header .mobile-toggle {
  display: grid !important;
  place-content: center !important;
  gap: 5px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  transition: background 0.18s ease !important;
}

html body .site-header .mobile-toggle:hover,
html body .site-header .mobile-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.07) !important;
  outline: 2px solid rgba(0, 200, 150, 0.5) !important;
  outline-offset: 2px !important;
}

html body .site-header .mobile-toggle span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  transform-origin: center !important;
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.16s ease,
    width 0.18s ease !important;
}

/* Top bar → upper diagonal of X */
html body .site-header .mobile-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}

/* Middle bar → hide */
html body .site-header .mobile-toggle.active span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

/* Bottom bar → lower diagonal of X */
html body .site-header .mobile-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .site-header .mobile-toggle span {
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §3  BODY SCROLL LOCK — prevent background scroll when menu open
═════════════════════════════════════════════════════════════ */

html.menu-open,
body.menu-open {
  overflow: hidden !important;
}

/* On mobile ensure the nav viewport doesn't shift */
@media (max-width: 1060px) {
  body.menu-open .site-header .mobile-nav {
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═════════════════════════════════════════════════════════════
   §4  UNIFIED BREAKPOINT — 1060px matches site.js close threshold
   Overrides v113's split 981px/1160px logic.
═════════════════════════════════════════════════════════════ */

/* Desktop: show desktop-nav, hide mobile toggle */
@media (min-width: 1061px) {
  html body .site-header .desktop-nav {
    display: flex !important;
  }

  html body .site-header .mobile-toggle {
    display: none !important;
  }

  html body .site-header .desktop-account-login,
  html body .site-header .desktop-account-register {
    display: inline-flex !important;
  }
}

/* Mobile/tablet: hide desktop-nav, show burger */
@media (max-width: 1060px) {
  html body .site-header .desktop-nav {
    display: none !important;
  }

  html body .site-header .mobile-toggle {
    display: grid !important;
  }

  /* Keep desktop account links hidden — they're inside mobile-nav instead */
  html body .site-header .desktop-account-login,
  html body .site-header .desktop-account-register {
    display: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §5  HEADER INNER — responsive layout at all breakpoints
═════════════════════════════════════════════════════════════ */

/* Tablet: tighten header container */
@media (max-width: 1060px) {
  html body .site-header .container.header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    gap: 8px !important;
    padding-inline: clamp(12px, 3.5vw, 28px) !important;
  }
}

/* Small tablet */
@media (max-width: 768px) {
  html body .site-header .container.header-inner {
    min-height: 58px !important;
    padding-inline: 16px !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  html body .site-header .container.header-inner {
    min-height: 54px !important;
    padding-inline: 12px !important;
    gap: 6px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §6  LOGO — responsive sizing, no layout jump
═════════════════════════════════════════════════════════════ */

html body .site-header .brand-logo {
  width: 120px !important;
  height: auto !important;
  display: block !important;
}

@media (max-width: 768px) {
  html body .site-header .brand-logo {
    width: 104px !important;
  }
}

@media (max-width: 480px) {
  html body .site-header .brand-logo {
    width: 88px !important;
  }
}

/* Brand text: hide sub-label on small screens */
@media (max-width: 480px) {
  html body .site-header .brand-sub {
    display: none !important;
  }

  html body .site-header .brand-name {
    font-size: 13px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §7  HEADER ACTIONS — keep compact on tablet/mobile
═════════════════════════════════════════════════════════════ */

html body .site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 480px) {
  html body .site-header .header-actions {
    gap: 4px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §8  LOCALE SWITCHER — compact on small screens
═════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  html body .site-header .locale-trigger,
  html body [data-locale-trigger] {
    padding: 5px 8px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §9  MOBILE NAV INNER — touch targets, spacing, polish
═════════════════════════════════════════════════════════════ */

html body .site-header .mobile-nav-inner {
  padding-block: 10px 20px !important;
  gap: 6px !important;
}

/* Nav links: min 48px touch target */
html body .site-header .mobile-nav .nav-link {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding-inline: 16px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}

/* Mobile account actions */
html body .site-header .mobile-account-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  margin-top: 4px !important;
}

html body .site-header .mobile-account-actions .account-link {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-inline: 16px !important;
  border-radius: 8px !important;
  flex: 1 !important;
  justify-content: center !important;
  font-size: 14px !important;
}

/* Demo / CTA button at bottom of mobile nav */
html body .site-header .mobile-demo-link {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 10px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Mobile nav head */
html body .site-header .mobile-nav-card-head {
  padding-block: 2px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  margin-bottom: 4px !important;
}

html body .site-header .mobile-nav-title {
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  opacity: 0.55 !important;
}

/* Nav items: staggered reveal for polish */
@media (max-width: 1060px) {
  html body .site-header .mobile-nav.open .nav-link:nth-child(1) { transition-delay: 0.03s; }
  html body .site-header .mobile-nav.open .nav-link:nth-child(2) { transition-delay: 0.06s; }
  html body .site-header .mobile-nav.open .nav-link:nth-child(3) { transition-delay: 0.09s; }
  html body .site-header .mobile-nav.open .nav-link:nth-child(4) { transition-delay: 0.12s; }
  html body .site-header .mobile-nav.open .nav-link:nth-child(5) { transition-delay: 0.15s; }
  html body .site-header .mobile-nav.open .nav-link:nth-child(6) { transition-delay: 0.18s; }
}

@media (prefers-reduced-motion: reduce) {
  html body .site-header .mobile-nav.open .nav-link {
    transition-delay: 0s !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §10  HERO SECTION — mobile-first padding + type scale
═════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  html body .pxv93-hero-grid,
  html body .px-hero-grid {
    padding-top: 48px !important;
    padding-bottom: 36px !important;
    gap: 32px !important;
  }
}

@media (max-width: 480px) {
  html body .pxv93-hero-grid,
  html body .px-hero-grid {
    padding-top: 36px !important;
    padding-bottom: 28px !important;
    gap: 24px !important;
  }

  html body .pxv93-hero-h1,
  html body .px-hero-h1 {
    font-size: clamp(26px, 7.5vw, 38px) !important;
    line-height: 1.15 !important;
  }

  html body .pxv93-hero-lead,
  html body .px-hero-lead {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  html body .pxv93-hero-eyebrow,
  html body .px-hero-eyebrow {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
}

/* Hero CTA buttons: full-width on very small screens */
@media (max-width: 400px) {
  html body .pxv93-hero-actions,
  html body .px-hero-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  html body .pxv93-hero-actions .button,
  html body .px-hero-actions .button,
  html body .pxv93-hero-actions a,
  html body .px-hero-actions a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §11  CARDS & GRIDS — no horizontal overflow on mobile
═════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Force single column for pricing / solution cards */
  html body .pxv93-solutions-grid,
  html body .px-solutions-grid,
  html body .offer-lineup-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 768px) {
  /* 2-col → 1-col for feature/metric grids */
  html body .pxv93-features-grid,
  html body .px-features-grid,
  html body .metric-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §12  FOOTER — stack on mobile
═════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  html body .site-footer .footer-cols,
  html body .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 16px !important;
  }
}

@media (max-width: 400px) {
  html body .site-footer .footer-cols,
  html body .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Footer legal strip */
@media (max-width: 640px) {
  html body .site-footer .footer-legal-strip {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }

  html body .site-footer .footer-legal-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 12px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §13  NO HORIZONTAL SCROLL — final safety net
═════════════════════════════════════════════════════════════ */

html,
body {
  overflow-x: hidden !important;
}

/* Ensure no element breaks out of viewport width */
@media (max-width: 640px) {
  html body .container,
  html body .pxv93-container,
  html body .site-shell {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §14  PARTNER GRID — fix layout outside .pxv93-home context
   The transit/tech pages use .pxv93-partners > .pxv93-partner-grid
   but v120-system.css scopes the card styles to .pxv93-home.
   Replicate the card rules without the .pxv93-home requirement.
═════════════════════════════════════════════════════════════ */

html body .pxv93-partners .pxv93-partner-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

html body .pxv93-partners .pxv93-partner-grid > article {
  background: rgba(10, 22, 40, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

html body .pxv93-partners .pxv93-partner-grid > article strong {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #e8f4ff !important;
  -webkit-text-fill-color: #e8f4ff !important;
}

html body .pxv93-partners .pxv93-partner-grid > article span {
  display: block !important;
  font-size: 12.5px !important;
  color: #8aaccc !important;
  line-height: 1.5 !important;
}

@media (max-width: 768px) {
  html body .pxv93-partners .pxv93-partner-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  html body .pxv93-partners .pxv93-partner-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §15  SCROLL-REVEAL SPEED FIX
   peeryx-v99.js groups now include .pxv93-mode-card / .pxv93-uc-card.
   Shorten the transition to 280ms (was 500ms) for snappier reveal.
   Cancel any animation on .pxv99-in so JS-triggered state wins instantly.
═════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  html body .pxv93-home .pxv93-mode-card,
  html body .pxv93-home .pxv93-uc-card {
    transition:
      opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  html body .pxv93-home .pxv93-mode-card.pxv99-in,
  html body .pxv93-home .pxv93-uc-card.pxv99-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}