/* =============================================================================
   Mobile app-shell — bottom nav + safe-area + touch polish
   Loaded site-wide. Only affects mobile/tablet viewports; desktop is untouched.

   The bottom-nav is the navigation skeleton (4 tabs: Home / Services / Blog /
   Contact). The WhatsApp / chat channel is owned exclusively by the existing
   #pf-wa-toggle widget (form-first lead capture), which we re-position on
   mobile to sit above this strip so it never overlaps the tabs.
   ============================================================================= */

:root {
    --px-safe-top:    env(safe-area-inset-top, 0px);
    --px-safe-right:  env(safe-area-inset-right, 0px);
    --px-safe-bottom: env(safe-area-inset-bottom, 0px);
    --px-safe-left:   env(safe-area-inset-left, 0px);
    --px-nav-height-mobile: 64px;
}

.px-body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Reserve space below the page for the fixed bottom-nav on mobile so
   nothing sits behind it (especially the footer's last row of links). */
@media (max-width: 720px) {
    .px-body {
        padding-bottom: calc(var(--px-nav-height-mobile) + var(--px-safe-bottom));
    }
}

/* Container respects iPhone safe-area-inset on horizontal padding */
.px-container {
    padding-left:  max(var(--px-space-5, 20px), var(--px-safe-left));
    padding-right: max(var(--px-space-5, 20px), var(--px-safe-right));
}

/* Touch device polish — 44px min tap target (WCAG 2.5.5), no sticky hover */
@media (pointer: coarse) {
    .px-body a, .px-body button, .px-body [role="button"], .px-body input[type="submit"] {
        min-height: 44px;
    }
    .px-body *:hover { transform: none !important; }
}
@media (hover: none) {
    .px-channel:hover, .px-btn:hover, .pxc-channel:hover { box-shadow: none; transform: none; }
}

/* =========================================================================
   MOBILE BOTTOM NAVIGATION BAR — 4-tab strip, sticky, glass effect
   ========================================================================= */
.px-mobile-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1080;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(229, 231, 235, 0.95);
    padding:
        6px
        max(8px, var(--px-safe-right))
        calc(6px + var(--px-safe-bottom))
        max(8px, var(--px-safe-left));
    box-shadow: 0 -8px 24px -16px rgba(15, 23, 42, 0.18);
    display: none; /* mobile-only — flipped below */
}
@media (max-width: 720px) {
    .px-mobile-nav { display: block; }
}

.px-mobile-nav__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 540px;
    margin-inline: auto;
}
.px-mobile-nav__item { display: flex; min-width: 0; }
.px-mobile-nav__link {
    flex: 1;
    min-width: 0;             /* allows label to truncate inside the cell */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 12px;
    color: #64748b;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    transition: color 0.15s ease, background 0.15s ease;
    min-height: 52px;
    -webkit-tap-highlight-color: transparent;
}
.px-mobile-nav__link:active {
    background: rgba(91, 61, 245, 0.08);
}
.px-mobile-nav__icon {
    width: 36px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    color: inherit;
    transition: color 0.15s ease, background 0.15s ease;
    border-radius: 10px;
    flex-shrink: 0;
}
.px-mobile-nav__icon i {
    line-height: 1;
    font-size: inherit;
}
.px-mobile-nav__label {
    font-size: 10.5px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Defensive text-rendering reset — the bottom-left label was rendering
   rotated 180° in production (likely a browser-extension transform on
   the first nav item). Force normal flow on text-bearing elements only;
   leave Font Awesome's <i> glyphs untouched so the icon font's metrics
   work normally. */
.px-mobile-nav,
.px-mobile-nav__list,
.px-mobile-nav__item,
.px-mobile-nav__link,
.px-mobile-nav__label,
.px-mobile-nav__icon {
    writing-mode: horizontal-tb !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-orientation: mixed !important;
}
.px-mobile-nav__label,
.px-mobile-nav__link { transform: none !important; }

/* Active state — pill-shaped highlight on the icon, brand color */
.px-mobile-nav__item.is-active .px-mobile-nav__link { color: #5b3df5; }
.px-mobile-nav__item.is-active .px-mobile-nav__icon {
    background: linear-gradient(135deg, rgba(91,61,245,0.14) 0%, rgba(6,182,212,0.10) 100%);
    color: #5b3df5;
}

/* =========================================================================
   PUSH EXISTING WHATSAPP WIDGET ABOVE THE BOTTOM-NAV STRIP
   The widget's own CSS pins it to bottom:14px on mobile, which would sit
   *behind* the bottom-nav. Bump it above by the nav height + a 16px gap +
   the iPhone safe-area-inset-bottom.
   ========================================================================= */
@media (max-width: 720px) {
    #pf-wa {
        bottom: calc(var(--px-nav-height-mobile) + var(--px-safe-bottom) + 16px) !important;
        right: 14px !important;
    }
    /* Widget's open panel — push above the toggle the same way */
    #pf-wa .pf-wa-panel,
    #pf-wa [class*="pf-wa-panel"] {
        bottom: calc(var(--px-nav-height-mobile) + var(--px-safe-bottom) + 84px) !important;
    }
}

/* =========================================================================
   PREMIUM MOBILE HEADER — tight 56px, glass effect, scroll-shrink
   Modeled after Linear / Stripe / Vercel mobile patterns. Aggressive height
   reduction frees vertical real estate for actual hero content. Hamburger
   now lives inside a pill-shaped tap target with hover/active feedback.
   ========================================================================= */
@media (max-width: 720px) {
    .px-header {
        padding-top: var(--px-safe-top) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid rgba(229, 231, 235, 0.55) !important;
        transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        /* NOTE: do NOT set will-change/transform/filter on .px-header — any
           of those create a new containing block for position:fixed
           descendants. The .px-mobile-drawer is a position:fixed child of
           the header in the DOM, and we need it to position relative to
           the VIEWPORT, not the header. (Bug seen: drawer collapsed to
           ~0 height showing only the bottom-most submenu item.) */
    }
    .px-header__inner {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        min-height: 52px !important;
        gap: 12px !important;
    }
    .px-logo img {
        height: 26px !important;
        width: auto !important;
        display: block;
    }
    .px-header__cta { display: none !important; }

    /* Scroll-active state — slightly stronger glass + subtle elevation. */
    .px-header.is-scrolled {
        background: rgba(255, 255, 255, 0.88) !important;
        border-bottom-color: rgba(229, 231, 235, 0.75) !important;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 10px 24px -18px rgba(15, 23, 42, 0.18) !important;
    }
}

/* =========================================================================
   ANIMATED HAMBURGER — 3 bars morph to X when drawer opens.
   Aria-expanded on the toggle drives the open state — no JS class flip needed
   beyond what the existing v2.js toggle already does.
   ========================================================================= */
.px-mobile-toggle {
    position: relative !important;
    z-index: 1090 !important;
    -webkit-tap-highlight-color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    flex-direction: row !important;       /* override v2 flex-column */
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.18s ease, transform 0.18s ease !important;
}
.px-mobile-toggle:hover,
.px-mobile-toggle:focus-visible {
    background: rgba(91, 61, 245, 0.08);
    outline: none;
}
.px-mobile-toggle:active { transform: scale(0.92); }
/* Hamburger wrapper — !important is required because v2.css has
   `.px-mobile-toggle span` (specificity 0,1,1) which would otherwise
   squash this wrapper to 2px tall. */
.px-mobile-toggle .px-mobile-toggle__bars {
    position: relative !important;
    width: 22px !important;
    height: 16px !important;
    display: inline-block !important;
    background: transparent !important;
    flex-direction: row !important;  /* override v2's flex-direction: column */
    gap: 0 !important;
    padding: 0 !important;
}
.px-mobile-toggle .px-mobile-toggle__bars span {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: #0b1220 !important;
    border-radius: 2px !important;
    transition: transform 0.28s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.18s ease, top 0.18s ease, background 0.18s ease !important;
    transform-origin: center !important;
    margin: 0 !important;
}
.px-mobile-toggle .px-mobile-toggle__bars span:nth-child(1) { top: 0 !important; }
.px-mobile-toggle .px-mobile-toggle__bars span:nth-child(2) { top: 7px !important; }
.px-mobile-toggle .px-mobile-toggle__bars span:nth-child(3) { top: 14px !important; }

/* Open state — morph 3 bars into an X. */
.px-mobile-toggle[aria-expanded="true"] {
    background: rgba(91, 61, 245, 0.10);
}
.px-mobile-toggle[aria-expanded="true"] .px-mobile-toggle__bars span:nth-child(1) {
    top: 7px !important;
    transform: rotate(45deg) !important;
    background: #5b3df5 !important;
}
.px-mobile-toggle[aria-expanded="true"] .px-mobile-toggle__bars span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-8px) !important;
}
.px-mobile-toggle[aria-expanded="true"] .px-mobile-toggle__bars span:nth-child(3) {
    top: 7px !important;
    transform: rotate(-45deg) !important;
    background: #5b3df5 !important;
}

/* Desktop: hide the hamburger. Required because the rules above use
   `display: inline-flex !important` outside any media query (so the
   bars render correctly on mobile), which would otherwise override
   v2.css's `display: none` at >=992px and leak the hamburger into the
   desktop header alongside the full nav. This rule lands AFTER the
   inline-flex declaration in source order, so the !important cascade
   resolves in its favour at desktop widths. Matches v2.css's
   992px desktop/mobile breakpoint. */
@media (min-width: 992px) {
    .px-mobile-toggle { display: none !important; }
}

/* =========================================================================
   MOBILE DRAWER — full-screen native-feeling slide-down
   ========================================================================= */
@media (max-width: 720px) {
    .px-mobile-drawer {
        position: fixed !important;
        inset: calc(52px + var(--px-safe-top)) 0 calc(var(--px-nav-height-mobile) + var(--px-safe-bottom)) 0 !important;
        padding: 12px max(16px, var(--px-safe-right)) 20px max(16px, var(--px-safe-left)) !important;
        background: rgba(255,255,255,0.985) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        z-index: 1085 !important;
        box-shadow: 0 8px 24px -16px rgba(15,23,42,0.18);
        animation: pxDrawerIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes pxDrawerIn {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .px-mobile-drawer__list {
        display: grid !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .px-mobile-drawer__list > li {
        list-style: none;
        position: relative;
    }
    .px-mobile-drawer__list a,
    .px-mobile-drawer__expand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0b1220 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 12px !important;
        min-height: 48px !important;
        text-align: left !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .px-mobile-drawer__expand {
        justify-content: space-between !important;
        font-family: inherit !important;
    }
    .px-mobile-drawer__expand > span:last-child {
        font-size: 18px !important;
        font-weight: 400 !important;
        color: #94a3b8 !important;
        width: 24px !important;
        text-align: center !important;
        transition: transform 0.18s ease, color 0.18s ease;
    }
    .px-mobile-drawer__list a:hover,
    .px-mobile-drawer__list a:active,
    .px-mobile-drawer__expand:hover,
    .px-mobile-drawer__expand:active {
        background: rgba(91, 61, 245, 0.08) !important;
        color: #5b3df5 !important;
    }
    /* Submenu (level 2) — branded left bar + indent */
    .px-mobile-drawer__sublist {
        padding: 4px 0 8px 14px !important;
        margin: 0 0 4px 6px !important;
        list-style: none !important;
        display: grid !important;
        gap: 0 !important;
        border-left: 2px solid rgba(91, 61, 245, 0.15) !important;
    }
    .px-mobile-drawer__sublist a {
        font-size: 14.5px !important;
        font-weight: 500 !important;
        color: #475569 !important;
        padding: 11px 14px !important;
        min-height: 42px !important;
    }
    /* Bottom CTA — keep it visually prominent */
    .px-mobile-drawer__cta {
        margin-top: 16px !important;
        padding-top: 16px !important;
        border-top: 1px solid #e5e7eb !important;
    }
    .px-mobile-drawer__cta a.px-btn,
    .px-mobile-drawer__cta a.px-btn--primary {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 14px 20px !important;
        background: linear-gradient(135deg, #5b3df5 0%, #06b6d4 100%) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        border-radius: 999px !important;
        box-shadow: 0 14px 28px -10px rgba(91, 61, 245, 0.45) !important;
        text-decoration: none !important;
        min-height: 52px !important;
    }
    .px-mobile-drawer__cta a.px-btn:active { transform: scale(0.98); }
}

/* Tablet (721-1024) readability bump */
@media (min-width: 721px) and (max-width: 1024px) {
    .px-body { font-size: 16.5px; }
}

/* Ultra-wide cap so reading length stays sane */
@media (min-width: 1600px) {
    .px-container { max-width: 1320px; }
}

/* Compress hero top spacing + prevent horizontal overflow on mobile.
   Two real bugs this targets:
     1. Empty band between sticky header and the first hero content
     2. Hero copy lines clipping on the right edge (CSS Grid 1fr
        track expanded by min-content of a long word inside the column
        — known grid overflow trap. Explicit min-width: 0 on the grid
        items fixes it; word-break enforces line-wrap as belt-and-braces) */
@media (max-width: 720px) {
    .px-hero,
    .px-page-hero,
    .px-svc-hero {
        padding-top: 12px !important;
        padding-bottom: 28px !important;
        margin-top: 0 !important;
        overflow-x: clip !important;     /* defense vs decoration bleed */
    }
    .px-hero__inner,
    .px-page-hero__inner,
    .px-svc-hero__inner {
        padding-top: 0 !important;
        margin-top: 0 !important;
        gap: 16px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Grid + flex children — `min-width: 0` is required to let them
       shrink below their natural min-content size. Without it, a long
       word in a 1fr column expands the track and overflows the viewport. */
    .px-hero__inner > *,
    .px-page-hero__inner > *,
    .px-svc-hero__inner > * { min-width: 0 !important; }

    /* Tighten the hero h1 + paragraph wrapping on small screens. */
    .px-hero h1, .px-page-hero h1, .px-svc-hero__title, .px-hero__title {
        line-height: 1.08 !important;
        margin-bottom: 14px !important;
        margin-top: 0 !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .px-hero__copy p,
    .px-hero__subtitle,
    .px-page-hero__lead,
    .px-svc-hero p {
        max-width: 100% !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    /* First child inside hero copy column should have zero top margin */
    .px-hero__copy > :first-child,
    .px-page-hero__copy > :first-child { margin-top: 0 !important; }
}

/* Belt-and-braces: stop any horizontal overflow on the document under
   720px regardless of cause. Pairs with the per-page container clips. */
@media (max-width: 720px) {
    html, body { overflow-x: hidden !important; max-width: 100vw !important; }
    .px-body img, .px-body video, .px-body iframe { max-width: 100%; height: auto; }
}

/* iOS Safari font-size 16px floor on inputs — kills the focus-zoom behaviour */
@media (max-width: 720px) {
    .px-body input[type="text"],
    .px-body input[type="email"],
    .px-body input[type="tel"],
    .px-body input[type="number"],
    .px-body input[type="search"],
    .px-body input[type="url"],
    .px-body input[type="password"],
    .px-body select,
    .px-body textarea {
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .px-mobile-nav__link,
    .px-mobile-nav__icon { transition: none !important; }
}