/**
 * Mobile app-like experience — all pages (max-width 991px)
 */

@media (max-width: 991.98px) {
  :root {
    --bottom-nav-gap: 14px;
    --bottom-nav-bar-h: 60px;
    --bottom-nav-h: calc(var(--bottom-nav-bar-h) + var(--bottom-nav-gap) + env(safe-area-inset-bottom, 0px));
    --app-radius: 16px;
  }

  html {
    -webkit-tap-highlight-color: transparent;
  }

  body {
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    background: #F7F4EE;
    width: 100%;
    max-width: 100vw;
    margin: 0;
  }

  body.page-home {
    background: #F7F4EE;
  }

  body.has-bottom-nav {
    padding-bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0px));
  }

  html {
    scroll-padding-bottom: calc(var(--bottom-nav-h) + 20px);
  }

  body.has-bottom-nav .site-main {
    min-height: calc(100vh - var(--bottom-nav-h));
    background: transparent;
  }

  .site-main .container {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Do NOT zero .row margins — breaks Bootstrap column alignment (content sticks left) */

  .site-main .glow-card,
  .site-main .sircaa-form,
  .site-main form {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Header — compact app bar */
  .site-header-pf .navbar {
    padding: 0.5rem 0;
  }

  .site-header-pf .brand-logo-pf {
    height: 36px;
  }

  .site-header-wrap {
    box-shadow: 0 2px 16px rgba(15, 39, 64, 0.08) !important;
  }

  body.page-home .site-header-wrap {
    background: #FFFDF9 !important;
  }

  body.page-home .site-header-pf {
    background: #FFFDF9 !important;
  }

  body:not(.page-home) .site-header-wrap,
  body:not(.page-home) .site-header-pf {
    background: #fffdf9 !important;
  }

  .site-header-pf .navbar-toggler span {
    background: #0f2740 !important;
  }

  .page-hero.page-hero--banner {
    margin-top: 0 !important;
    border-radius: 0 !important;
  }

  .mobile-bottom-nav {
    display: grid !important;
  }

  /* Sections — keep horizontal safe padding (avoid content stuck to one side) */
  .section,
  .hp-who-above-cards {
    padding-left: 0;
    padding-right: 0;
  }

  /* Homepage — center sections, kill AOS horizontal shift on mobile/tablet */
  body.page-home [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }

  body.page-home,
  body.page-home .site-main {
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
  }

  body.page-home .hp-hero-block,
  body.page-home .hp-why-sirca,
  body.page-home .hp-products-bento,
  body.page-home .hp-faq-cert,
  body.page-home .hp-contact-premium {
    max-width: 100vw;
    overflow-x: clip;
  }

  body.page-home .hp-why-sirca .hp-features-scroll {
    max-width: 100%;
  }

  body.page-home .site-main .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box;
  }

  .hp-contact-premium {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(var(--bottom-nav-h) + 1rem);
  }

  .hp-contact-premium .hp-contact-container,
  .hp-contact-premium > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hp-contact-premium .hp-contact-shell {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .hp-faq-cert,
  .hp-products-bento,
  .hp-who-above-cards {
    padding-left: 0;
    padding-right: 0;
  }

  .page-hero.page-hero--banner {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
  }

  .glow-card,
  .who-pf-photo {
    border-radius: var(--app-radius) !important;
  }

  /* Footer — all pages (footer-app.css sets bottom-nav clearance) */
  .site-footer.paraflex-footer,
  .site-footer.footer-sirca-premium {
    margin-bottom: 0;
    border-radius: 0;
    margin-top: 1rem;
  }

  .paraflex-footer .footer-columns {
    text-align: center;
  }

  .paraflex-footer .footer-heading {
    font-size: 0.95rem;
    margin-top: 1.25rem;
  }

  .paraflex-footer .footer-social-row {
    justify-content: center;
    margin-top: 0.75rem;
  }

  .paraflex-footer .footer-brand-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .paraflex-footer .footer-map-wrap {
    border-radius: var(--app-radius);
    overflow: hidden;
    max-height: 180px;
  }

  .paraflex-footer .footer-bottom,
  .paraflex-footer .footer-copyright {
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 1rem 0.5rem;
  }

  .paraflex-footer .footer-keywords {
    display: none;
  }

  /* Bottom navigation — floating pill */
  .mobile-bottom-nav {
    bottom: calc(var(--bottom-nav-gap) + env(safe-area-inset-bottom, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    min-height: var(--bottom-nav-bar-h);
    padding: 0.38rem 0.45rem;
    border-radius: 20px;
  }

  .mbn-item {
    font-size: 0.55rem;
    gap: 0.12rem;
    padding: 0.38rem 0.2rem;
  }

  .mbn-contact span {
    font-size: 0.52rem;
  }

  .mbn-item i {
    font-size: 1.2rem;
  }

  .mbn-fab {
    width: 50px;
    height: 50px;
    font-size: 1.28rem;
  }

  .paraflex-footer .footer-bottom {
    padding-bottom: 0.5rem;
    margin-bottom: 0;
  }

  .page-home .footer-copyright-bar {
    padding: 0.45rem 0.75rem;
  }

  /* FABs — above tab bar */
  .fab-group {
    bottom: calc(var(--bottom-nav-h) + 8px);
    left: 12px;
    flex-direction: column;
    gap: 10px;
  }

  .back-to-top {
    bottom: calc(var(--bottom-nav-h) + 8px);
    right: 12px;
    width: 44px;
    height: 44px;
  }

  /* Social sidebar — hidden on mobile (overlaps form/footer; social in footer bar) */
  .social-sidebar-right {
    display: none !important;
  }

  /* Drawer — full app menu, clear bottom nav */
  .mobile-nav-drawer.offcanvas-bottom {
    height: auto;
    max-height: min(88vh, calc(100vh - var(--bottom-nav-h, 74px) - 12px));
    border-radius: 20px 20px 0 0;
    margin-bottom: calc(var(--bottom-nav-h, 74px) + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav-drawer .offcanvas-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  .mobile-drawer-actions {
    padding-bottom: 0.5rem;
  }

  .mobile-drawer-actions .btn-brand {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    white-space: normal;
    line-height: 1.35;
  }

  .mobile-drawer-call {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .mobile-drawer-call-text {
    word-break: break-word;
  }

  .mobile-drawer-nav a {
    padding: 0.85rem 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(15, 39, 64, 0.06);
  }

  /* Hide desktop-only clutter */
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .who-pf-content {
    max-width: 100% !important;
  }

  .hp-products-bento-head h2 {
    font-size: 1.5rem;
  }

  .hp-bento-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .hp-bento-card.is-active {
    box-shadow: 0 10px 32px rgba(2, 79, 174, 0.28);
    outline: 2px solid rgba(2, 79, 174, 0.35);
    outline-offset: 2px;
  }
}