/*
Theme Name: Novevet
Theme URI: 
Author: Antigravity
Author URI: 
Description: Modern veterinary theme built with PHP, GSAP and Tailwind CSS.
Version: 1.0
Text Domain: novevets
*/

/* Responsive Title Fixes */
@media (max-width: 768px) {
    .gsap-hero-title {
        font-size: clamp(3rem, 15vw, 4.5rem) !important;
        line-height: 0.9 !important;
    }
    
    .gsap-hero-subtitle {
        font-size: 1.125rem !important; /* text-lg */
        line-height: 1.6 !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .gsap-hero-title {
        font-size: clamp(2.5rem, 18vw, 3.5rem) !important;
    }
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mobile Translator - Scaling up */
@media (max-width: 768px) {
    .mobile-translator {
        transform: scale(1.3);
        transform-origin: left center;
        margin-top: 2.5rem !important;
        margin-bottom: 2rem !important;
    }
}

/* (WYSIWYG typography now handled via Tailwind wrapper classes in templates) */

/* Base scale fix: ensure rem-based typography matches home */
:root {
    font-size: 16px !important;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    zoom: 1 !important;
    transform: none !important;
}
body {
    zoom: 1 !important;
    transform: none !important;
}

/* Mobile menu: force translator (gtranslate) text to stay white */
#mobile-menu .gtranslate_wrapper,
#mobile-menu .gtranslate_wrapper * {
    color: #ffffff !important;
}

/* ============================================================
   MOBILE MENU TOGGLE: fallback sizing (when Tailwind CDN not ready)
   ============================================================ */
#mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 10001;
}
@media (min-width: 768px) {
    #mobile-menu-toggle { display: none !important; }
}
#mobile-menu-toggle svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    visibility: visible !important;
}

/* ============================================================
   PREVENT HORIZONTAL SCROLL ON MOBILE (global safety net)
   ============================================================ */
html, body {
    max-width: 100vw;
    overflow-x: clip;
}
@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}
#primary {
    overflow-x: clip;
    max-width: 100vw;
}
@supports not (overflow: clip) {
    #primary { overflow-x: hidden; }
}

/* ============================================================
   MOBILE SCROLL-REVEAL SYSTEM
   Approach: define the hidden initial state in CSS (not reliant on
   Tailwind CDN timing) + a smooth transition. JS adds ".is-revealed"
   when the element enters the viewport. A fail-safe timer in main.js
   guarantees nothing stays hidden if the observer never fires.
   ============================================================ */
@media (max-width: 767px) {
    /* Hero-level elements (above the fold): reveal immediately, no scroll needed. */
    .gsap-hero-title,
    .gsap-hero-subtitle,
    .gsap-hero-button,
    .gsap-hero-img,
    .gsap-float {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Scroll-triggered elements: hidden initial state + elegant transition */
    .gsap-reveal-up,
    .gsap-reveal-left,
    .gsap-reveal-right,
    .gsap-reveal-scale,
    .gsap-slide-in-left,
    .gsap-slide-in-right,
    .gsap-pop-scale,
    .gsap-spec-card-mobile,
    .gsap-counter,
    .process-step {
        opacity: 0;
        will-change: opacity, transform;
        transition:
            opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Directional starting transforms — subtle, premium feel */
    .gsap-reveal-up      { transform: translate3d(0, 28px, 0); }
    .gsap-reveal-left,
    .gsap-slide-in-left  { transform: translate3d(-28px, 0, 0); }
    .gsap-reveal-right,
    .gsap-slide-in-right { transform: translate3d(28px, 0, 0); }
    .gsap-reveal-scale,
    .gsap-pop-scale      { transform: scale(0.94); }
    .gsap-spec-card-mobile,
    .process-step        { transform: translate3d(0, 36px, 0); }
    .gsap-counter        { transform: translate3d(0, 16px, 0); }

    /* ===== Revealed state (added by IntersectionObserver) ===== */
    .is-revealed {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Respect user motion preferences */
    @media (prefers-reduced-motion: reduce) {
        .gsap-reveal-up,
        .gsap-reveal-left,
        .gsap-reveal-right,
        .gsap-reveal-scale,
        .gsap-slide-in-left,
        .gsap-slide-in-right,
        .gsap-pop-scale,
        .gsap-spec-card-mobile,
        .gsap-counter,
        .process-step {
            transition: none;
            opacity: 1;
            transform: none;
        }
    }
}

/* ============================================================
   ULTIMATE FAIL-SAFE: if main.js fails to load entirely (network/CSP),
   the <html> element NEVER gets the .js-reveal-ready class, and this
   rule kicks in to show elements normally. The JS adds that class
   synchronously at startup, so users with JS always see the hidden
   initial state + smooth scroll-reveal animation.
   ============================================================ */
@media (max-width: 767px) {
    html:not(.js-reveal-ready) .gsap-reveal-up,
    html:not(.js-reveal-ready) .gsap-reveal-left,
    html:not(.js-reveal-ready) .gsap-reveal-right,
    html:not(.js-reveal-ready) .gsap-reveal-scale,
    html:not(.js-reveal-ready) .gsap-slide-in-left,
    html:not(.js-reveal-ready) .gsap-slide-in-right,
    html:not(.js-reveal-ready) .gsap-pop-scale,
    html:not(.js-reveal-ready) .gsap-spec-card-mobile,
    html:not(.js-reveal-ready) .gsap-counter,
    html:not(.js-reveal-ready) .process-step {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   PROCESS TIMELINE: ensure images render even before reveal.
   ============================================================ */
#process-timeline img {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================
   TRUSTINDEX REVIEWS: give the widget breathing room on mobile
   ============================================================ */
.ti-widget,
.ti-widget-container,
[class*="trustindex"] {
    max-width: 100% !important;
    box-sizing: border-box;
}
.ti-widget iframe {
    max-width: 100% !important;
}

/* ============================================================
   EQUIPO PAGE: neutralize decorations that caused horizontal scroll
   ============================================================ */
#equipo .flex.flex-col {
    max-width: 100%;
}
/* Blur halos use -left-16 / -right-16; clip them */
#equipo .blur-3xl {
    pointer-events: none;
}