/* ==========================================================================
   Shared small-viewport layer.

   Loaded last on every page, after light-mode.css, so it can settle the
   things that were previously decided three times over — the header lives in
   style-forms.css, style2-header.css and style3-base.css, and each page block
   re-invented its own spacing. Anything that has to hold across the whole
   site belongs here; anything genuinely local to one page stays in that
   page's own <style>.
   ========================================================================== */

:root {
    /* Fixed header height. Anchor targets and any "clear the header" padding
       measure against this instead of each guessing a number. */
    --xp-header-h: 82px;
}

/* ------------------------------------------------------------- anchors --- */

/* The header is position:fixed, so an in-page jump (#contact, the FAQ
   deep links) lands with the target hidden underneath it. */
[id] {
    scroll-margin-top: calc(var(--xp-header-h) + 0.75rem);
}

/* --------------------------------------------- floating contact button --- */

/* The WhatsApp button is position:fixed so it stays reachable the whole way
   down the page — but it shipped at Tailwind's z-50 while
   #xpera-isolated-footer carries z-index: 999999, so it disappeared behind the
   footer the moment you reached the bottom of any page. That is exactly where
   someone who has read to the end is most likely to want it.

   The site's layers, in the order they were built: page content 0-50, fixed
   header 9999, footer 999999, mobile menu overlay 9999999. This button is
   persistent chrome, so it belongs above the footer and below the full-screen
   menu — raising it here rather than lowering the footer, because the footer's
   value is load-bearing against the fixed decorative backgrounds.

   !important because the element still carries Tailwind's z-50 and the CDN
   build injects its stylesheet at runtime, so it lands after this file and
   wins the specificity tie between two single-class selectors. The utility is
   left on the element on purpose: it is the fallback if this file ever fails
   to load, and z-index:auto would drop the button behind the footer anyway
   since it comes first in the document. */
.xpera-wa-fab {
    z-index: 1000000 !important;
}

/* ------------------------------------------------ header / burger edge --- */

/* Tailwind's md: breakpoint is min-width 768px, and every page's mobile block
   is max-width 767px — but the three header stylesheets switch to the burger
   at max-width 768px. That one pixel is a real layout: at exactly 768px the
   burger showed while the page still used its desktop styles. Pin both sides
   of the switch to the same edge. */
@media (max-width: 767px) {
    .xpera-hdr-nav {
        display: none;
    }
    .xpera-hdr-mobile-btn {
        display: flex;
    }
}
@media (min-width: 768px) {
    .xpera-hdr-nav {
        display: flex;
    }
    .xpera-hdr-mobile-btn {
        display: none;
    }
}

/* --------------------------------------------------------- small print --- */

@media (max-width: 767px) {
    :root {
        --xp-header-h: 67px;
    }

    /* A long unbroken Latin token (a URL, "Salesforce/HubSpot") in an
       otherwise Hebrew paragraph is the one thing that still pushes past the
       viewport once the decorative layers are contained. */
    body {
        overflow-wrap: break-word;
    }

    h1,
    h2,
    h3 {
        text-wrap: balance;
    }

    /* iOS zooms the whole page in when a focused field is under 16px, and
       never zooms back out. Every text field on the site is smaller than
       that. */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* Touch targets. The burger and the overlay's close button are icon-only
       and were sized by their glyph. */
    .xpera-hdr-mobile-btn,
    .xpera-mobile-close {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .xpera-mobile-close {
        display: flex;
    }
    .xpera-mobile-overlay a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.25rem 1.5rem;
    }
    .xpera-mobile-overlay {
        gap: 1rem;
    }

    /* The tap flash is the default translucent black, which reads as a grey
       smear on this palette. */
    a,
    button,
    summary,
    [role='button'] {
        -webkit-tap-highlight-color: rgba(179, 102, 255, 0.2);
    }

    /* Any section that still asks for a full screen gets the *small*
       viewport unit, so the mobile browser's collapsing address bar cannot
       leave a strip of blank page below the fold. */
    .min-h-screen {
        min-height: 100svh;
    }
}

/* The overlay menu is position:fixed over a page that keeps scrolling
   underneath it. Locking means closing the menu returns you to where you were
   rather than wherever the background drifted to.

   The class goes on <html> as well as <body>: <html> is the scrolling element
   here, and overflow:hidden on <body> alone is ignored. */
.xpera-menu-open {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

/* ---------------------------------------------------- motion behaviour --- */

/* The animation scripts bail out under prefers-reduced-motion, which leaves
   the handful of elements that start hidden in the markup hidden for good.
   Reveal them here instead. */
@media (prefers-reduced-motion: reduce) {
    /* Exactly the elements that ship at opacity 0 in the markup and wait for a
       tween to reveal them. Deliberately not a blanket .opacity-0 rule —
       Tailwind uses that class for hover overlays too, which would then sit
       permanently on top of their cards. */
    #purple-reveal-text,
    .global-cta-reveal,
    .stats-banner-reveal,
    .vintage-horizontal-form,
    .word-illuminate {
        opacity: 1 !important;
    }
    .floating-icon-wrapper {
        display: none;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* No blanket will-change here on purpose. GSAP promotes the elements it is
   actually tweening for the duration of the tween and releases them after;
   a standing declaration across every revealed card and every scatter icon
   would hold thirty-odd compositor layers alive for the life of the page,
   which costs more on a phone than the promotion saves. */