/* ============================================================
   Frameflow Creatives — Mobile optimization layer
   Loaded AFTER styles.css. Refines the small-screen experience
   without touching the compiled theme stylesheet.
   ============================================================ */

/* Kill horizontal overflow site-wide (clip keeps the sticky header working) */
html {
    overflow-x: clip;
}
#wrapper {
    overflow-x: clip;
}

/* Media never overflows its container */
img,
svg,
video {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

/* Deferred Vimeo embeds — no network request until IntersectionObserver loads src */
iframe[data-vimeo-src]:not([src]) {
    background: rgba(30, 21, 80, 0.06);
}

.ff-showreel__video iframe[data-vimeo-src]:not(.ff-vimeo-loaded) {
    opacity: 0;
}

.ff-showreel__video.ff-vimeo-ready iframe {
    opacity: 1;
    transition: opacity 0.35s ease;
}

/* ---------- Safe area + sticky mobile CTA (all live pages) ---------- */
@media (max-width: 991px) {
    .ff-mobile-cta {
        padding-top: 12px;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    body:has(.ff-mobile-cta) #wrapper,
    body.ff-has-mobile-cta #wrapper {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    body:has(.ff-mobile-cta) #goTop,
    body.ff-has-mobile-cta #goTop {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- Tablets & phones (<= 991px) ---------- */
@media (max-width: 991px) {
    /* Headings always wrap, never clip on the right edge */
    .text-display-1,
    .text-display-2,
    .heading-title,
    .heading-section .heading-title,
    .content-wrap .title {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* ---------- Phones (<= 767px) ---------- */
@media (max-width: 767px) {
    /* Decorative hero pill icon (fixed 255px) — scale so it can't overflow */
    .section-hero .content-wrap .title-icon {
        transform: scale(0.62);
        transform-origin: center top;
        height: 104px;
        margin-top: 4px;
    }

    /* Tighten oversized hero bottom padding on service/inner heroes */
    .section-hero.v2 .content-wrap {
        padding: 115px 0 64px;
    }

    /* Contact info cards: comfortable padding + wrapping text */
    .box-contact-item {
        padding: 24px 18px !important;
    }
    .box-contact-item .text,
    .box-contact-item .title {
        overflow-wrap: anywhere;
    }

    /* Contact social links: stack full-width as tidy rows with good tap area */
    .col-left .tf-social-1 {
        gap: 10px;
    }
    .col-left .tf-social-1 a {
        width: 100%;
        justify-content: space-between;
        padding: 14px 18px;
        border: 1px solid rgba(67, 38, 146, 0.12);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.6);
    }

    /* Minimum 44px tap targets for primary controls */
    .tf-btn,
    .tf-btn-2,
    .header-cta {
        min-height: 46px;
    }

    /* Prevent iOS focus-zoom on form fields (requires >= 16px) */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]),
    select,
    textarea,
    .nice-select {
        font-size: 16px;
        min-height: 46px;
    }

    textarea {
        min-height: 120px;
    }

    /* Remove 300ms tap delay on interactive controls */
    a,
    button,
    .tf-btn,
    .tf-btn-2,
    .mobile-menu,
    .btn-mobile-menu,
    .item-link {
        touch-action: manipulation;
    }

    /* Home hero stat row: wrap gracefully, hide dividers when stacked */
    .hero-stats-row {
        flex-wrap: wrap;
        gap: 18px 24px;
        justify-content: center;
    }
    .hero-stat-divider {
        display: none;
    }

    /* Blog/article wide tables become horizontally scrollable, never overflow */
    .ff-pricetable {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ff-pricetable thead,
    .ff-pricetable tbody,
    .ff-pricetable tr {
        width: 100%;
    }
}

/* ---------- Small phones (<= 480px) ---------- */
@media (max-width: 480px) {
    .text-display-2 {
        font-size: 30px;
        line-height: 38px;
    }
    .heading-section .heading-title {
        font-size: 32px;
        line-height: 40px;
    }
    /* Breathing room at the screen edges */
    .container,
    .container-fluid {
        padding-left: 18px;
        padding-right: 18px;
    }
    /* Article readability */
    .ff-article h1 {
        font-size: 28px;
        line-height: 1.25;
    }
    .ff-article h2 {
        font-size: 22px;
    }
    .ff-article p,
    .ff-article li {
        font-size: 16px;
    }
}

/* Premium text reveal — clip-mask chars & words (hero-animation.js) */
.frameflow-light .ff-rev-char-clip {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: 1.05;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}
.frameflow-light .text-display-2 .ff-rev-char-clip {
    line-height: 1;
}
.frameflow-light .ff-rev-char {
    display: inline-block;
    will-change: transform;
}
.frameflow-light .ff-rev-word-clip {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: 1.3;
    padding-bottom: 0.06em;
    margin-bottom: -0.06em;
}
/* Never let parent span { display:block } rules stack word clips vertically */
.frameflow-light .ff-site-footer__cta-title .ff-rev-word-clip,
.frameflow-light .heading-title .ff-rev-word-clip,
.frameflow-light .ff-process__title .ff-rev-word-clip {
    display: inline-block !important;
}
.frameflow-light .ff-rev-word-clip .ff-rev-word,
.frameflow-light .ff-rev-word {
    display: inline-block;
    will-change: transform;
}
/* Plain (non-gradient) split text must stay readable */
.frameflow-light .ff-rev-char:not([class*="text-gradient"]):not(.text-white),
.frameflow-light .ff-rev-word:not([class*="text-gradient"]):not(.text-white) {
    color: inherit;
    -webkit-text-fill-color: currentColor;
}
.frameflow-light.home-page .section-hero--frameflow .content-wrap h1.title,
.frameflow-light.home-page .section-hero--frameflow .content-wrap h1 .title1,
.frameflow-light.home-page .section-hero--frameflow .content-wrap h1 .title2,
.frameflow-light .heading-title,
.frameflow-light .heading-section .heading-title {
  opacity: 1 !important;
  visibility: visible !important;
}
.frameflow-light.home-page .section-hero--frameflow .hero-image {
    will-change: transform, opacity;
}
/* No-JS / GSAP fallback: never hide all page copy */
.frameflow-light .effectFade[data-ff-revealed="true"] {
    opacity: 1 !important;
    visibility: visible !important;
}
@media (prefers-reduced-motion: reduce) {
    .frameflow-light .ff-rev-char,
    .frameflow-light .ff-rev-word,
    .frameflow-light .ff-rev-word-clip .ff-rev-word {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
    .frameflow-light .effectFade {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Marquees & infinite slides — static layout */
    .infiniteslide_wrap {
        overflow: visible !important;
        width: 100% !important;
    }

    .infiniteslide_wrap > * {
        animation: none !important;
        transform: none !important;
    }

    .infiniteSlide,
    .infiniteSlide.ff-marquee-static {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px 16px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .infiniteSlide .infiniteslide_clone {
        display: none !important;
    }

    .ff-showreel__wave {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* ---------- Phase 3: touch targets & interaction (<= 991px) ---------- */
@media (max-width: 991px) {
    .accordion-asked .accordion-button,
    .accordion-faq_item .accordion-button {
        min-height: 52px;
        padding-top: 14px;
        padding-bottom: 14px;
        align-items: center;
    }

    .offcanvas-menu .close-mb-menu,
    .offcanvas-menu .btn-mobile-menu.close-mb-menu {
        min-height: 48px;
        min-width: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 14px;
        touch-action: manipulation;
    }

    .offcanvas-menu .mb-menu-link,
    .offcanvas-menu .sub-nav-link {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        touch-action: manipulation;
    }

    .offcanvas-menu .has-sub-menu > .mb-menu-link {
        width: 100%;
        justify-content: space-between;
    }

    .offcanvas-menu .sub-nav-menu {
        padding-left: 8px;
    }

    .offcanvas-menu .sub-nav-menu .sub-nav-link {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #goTop {
        min-width: 48px;
        min-height: 48px;
    }

    .ff-tes-swiper .swiper-pagination-bullet,
    .sw-dot-default .swiper-pagination-bullet,
    .group-slider .swiper-pagination-bullet,
    .sw-dot-pagination .swiper-pagination-bullet {
        position: relative;
        width: 24px !important;
        height: 24px !important;
        margin: 0 4px !important;
        background: transparent !important;
        opacity: 1;
    }

    .ff-tes-swiper .swiper-pagination-bullet::after,
    .sw-dot-default .swiper-pagination-bullet::after,
    .group-slider .swiper-pagination-bullet::after,
    .sw-dot-pagination .swiper-pagination-bullet::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background: rgba(117, 85, 245, 0.28);
        transition: background 0.25s ease, transform 0.25s ease;
    }

    .ff-tes-swiper .swiper-pagination-bullet-active::after,
    .sw-dot-default .swiper-pagination-bullet-active::after,
    .group-slider .swiper-pagination-bullet-active::after,
    .sw-dot-pagination .swiper-pagination-bullet-active::after {
        background: #7555f5;
        transform: translate(-50%, -50%) scale(1.15);
    }

    .ff-tes-swiper__dots.sw-dot-pagination,
    .ff-tes-swiper .tf-sw-pagination,
    .sw-dot-pagination {
        gap: 8px !important;
    }

    /* Hover-only partner logos — show feedback on tap/active too */
    .frameflow-light.home-page .ff-partner-marquee__set img:active,
    .frameflow-light.home-page .ff-partner-marquee__set img:focus-visible {
        opacity: 0.75;
        filter: grayscale(0.35);
    }
}

/* Body scroll lock while mobile menu is open */
body.ff-menu-open {
    overflow: hidden !important;
    touch-action: none;
}

body.ff-menu-open .ff-mobile-cta {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}