/* ================================================================
   MOBILE CONTENT VISIBILITY & FLUID TYPOGRAPHY
   Full responsive font scaling — overrides inline styles
   ================================================================ */

/* ----------------------------------------------------------------
   1. FLUID BASE TYPOGRAPHY (fluid clamp for all screen sizes)
   ---------------------------------------------------------------- */
:root {
    --fs-xs: clamp(0.7rem, 2vw, 0.85rem);
    --fs-sm: clamp(0.8rem, 2.5vw, 0.95rem);
    --fs-base: clamp(0.9rem, 3vw, 1rem);
    --fs-md: clamp(1rem, 3.5vw, 1.1rem);
    --fs-lg: clamp(1.1rem, 4vw, 1.35rem);
    --fs-xl: clamp(1.25rem, 4.5vw, 1.65rem);
    --fs-2xl: clamp(1.4rem, 5vw, 2rem);
    --fs-3xl: clamp(1.5rem, 6vw, 2.5rem);
}

/* ----------------------------------------------------------------
   2. SUPPRESS INLINE font-size AT MOBILE (≤768px)
   Targets elements with hardcoded inline font sizes
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    /* --- Section heading overrides (inline style: font-size: 2.5rem) --- */
    [style*="font-size: 2.5rem"],
    [style*="font-size: 2.25rem"],
    [style*="font-size: 2rem"] {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
        line-height: 1.25 !important;
    }

    /* --- Sub-headings (1.75rem / 1.5rem) --- */
    [style*="font-size: 1.75rem"],
    [style*="font-size: 1.65rem"],
    [style*="font-size: 1.5rem"] {
        font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
        line-height: 1.3 !important;
    }

    /* --- Card headings (1.3rem / 1.2rem) inlined --- */
    [style*="font-size: 1.3rem"],
    [style*="font-size: 1.2rem"] {
        font-size: clamp(1rem, 3.5vw, 1.1rem) !important;
    }

    /* --- Body/paragraph text inlined --- */
    [style*="font-size: 1.1rem"],
    [style*="font-size: 1.05rem"],
    [style*="font-size: 1rem"] {
        font-size: clamp(0.88rem, 3vw, 0.95rem) !important;
        line-height: 1.65 !important;
    }

    /* --- Small caption/badge text --- */
    [style*="font-size: 0.85rem"],
    [style*="font-size: 0.8rem"] {
        font-size: 0.78rem !important;
    }

    /* --- Hero special: animated stat numbers --- */
    [style*="font-size: 1.75rem"][style*="font-weight: 800"],
    [style*="font-size: 2rem"][style*="font-weight: 800"] {
        font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
    }

    /* --- Stat labels/counters --- */
    [style*="font-size: 0.75rem"][style*="text-transform: uppercase"] {
        font-size: 0.65rem !important;
        letter-spacing: 0.5px !important;
    }
}

/* ----------------------------------------------------------------
   3. HERO SECTION — CENTER TEXT + FULL VISIBILITY (mobile)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    /* ── Container & layout ── */
    .hero-futuristic {
        text-align: center !important;
        padding-top: 100px !important;
        padding-bottom: 60px !important;
        min-height: 100svh !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-futuristic .container,
    .hero-futuristic>div {
        text-align: center !important;
        align-items: center !important;
    }

    /* ── Badge / pill label above heading ── */
    .hero-futuristic [style*="border-radius: 50px"],
    .hero-futuristic [style*="letter-spacing: 2px"],
    .hero-futuristic [style*="letter-spacing: 1px"] {
        font-size: 0.68rem !important;
        letter-spacing: 1px !important;
        padding: 6px 14px !important;
        display: inline-flex !important;
        margin: 0 auto 1rem !important;
    }

    /* ── Heading ── */
    .hero-futuristic h1 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.2 !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }

    /* ── Subtitle / description paragraph ── */
    .hero-futuristic p {
        font-size: clamp(0.88rem, 3.5vw, 1rem) !important;
        line-height: 1.65 !important;
        text-align: center !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ── CTA Buttons — stack, full width ── */
    .hero-futuristic [style*="display: flex"][style*="gap: 1"] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .hero-futuristic a[style*="padding"],
    .hero-futuristic a[style*="border-radius"] {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
        text-align: center !important;
        display: flex !important;
    }

    /* ── Stats bar — wrap & center ── */
    .hero-futuristic [style*="gap: 2.5rem"],
    .hero-futuristic [style*="gap: 2rem"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
    }

    /* Stat numbers */
    .hero-futuristic [style*="font-weight: 800"] {
        font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
    }

    /* Stat dividers — hide on very small screens */
    .hero-futuristic [style*="width: 2px"],
    .hero-futuristic [style*="height: 40px"] {
        display: none !important;
    }

    /* Stat labels */
    .hero-futuristic [style*="text-transform: uppercase"][style*="font-size"] {
        font-size: 0.62rem !important;
        letter-spacing: 0.5px !important;
    }
}

/* ----------------------------------------------------------------
   4. BLOG SECTION — force 1 column on mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .wka-blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Blog header section compact */
    .wka-homepage-blog-header h2 [style*="font-size: 2.5rem"],
    .wka-homepage-blog-header h2 {
        font-size: 1.5rem !important;
    }
}

/* ----------------------------------------------------------------
   5. FLOATING BUTTONS — reposition to avoid content overlap
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    /* WhatsApp floating button — move to bottom-left with more bottom margin */
    .whatsapp-float,
    [class*="whatsapp"],
    a[href*="wa.me"],
    a[href*="whatsapp"] {
        bottom: 80px !important;
        left: 15px !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
    }

    /* Back-to-top button — reduce size and shift in from edge */
    .back-to-top,
    #backToTop,
    [id*="back-top"],
    [class*="back-to-top"],
    [class*="scroll-top"],
    a[href="#top"] {
        bottom: 20px !important;
        right: 15px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 0.9rem !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ----------------------------------------------------------------
   6. "WHY CHOOSE US" / 4-col grid — force 1 col on small phones
   ---------------------------------------------------------------- */
@media (max-width: 480px) {

    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* ----------------------------------------------------------------
   7. SECTION PADDING — tighter on very small devices
   ---------------------------------------------------------------- */
@media (max-width: 480px) {

    section,
    .wka-front-page-content section {
        padding: 30px 0 !important;
    }

    .container,
    [style*="max-width: 1200px"],
    [style*="max-width: 1100px"],
    [style*="max-width: 900px"] {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ----------------------------------------------------------------
   8. ABOUT / CTA / CONTACT — block inline grids
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    /* About section 2-col grid → stacked */
    .about-us-section [style*="display: grid"],
    [style*="grid-template-columns: 1fr 1fr"][style*="gap: 3rem"],
    [style*="grid-template-columns: 1fr 1fr"][style*="gap: 2rem"] {
        display: block !important;
    }

    /* Mini cards within about (Vision/Mission) */
    [style*="grid-template-columns: 1fr 1fr"][style*="gap: 1.5rem"],
    [style*="grid-template-columns: 1fr 1fr"][style*="gap: 1rem"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* CTA section buttons — full width stacked */
    [style*="background: linear-gradient(135deg, #800020"] [style*="display: flex"][style*="gap"],
    [style*="background: linear-gradient(135deg, #800020"] [style*="gap: 1rem"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    [style*="background: linear-gradient(135deg, #800020"] a[style*="padding: 14px"] {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
}

/* ----------------------------------------------------------------
   9. CONTACT SECTION — stacked on mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Contact form + info columns → stacked */
    [style*="grid-template-columns: 1fr 1fr"][style*="gap: 3rem"]>div {
        width: 100% !important;
    }
}

/* ----------------------------------------------------------------
   10. GLOBAL REACH MAP — prevent overflow
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    #globalMap {
        height: 220px !important;
    }

    .global-reach-section {
        padding: 30px 0 !important;
    }
}

/* ----------------------------------------------------------------
   11. TESTIMONIAL CARDS — 1 col on small mobile
   ---------------------------------------------------------------- */
@media (max-width: 599px) {

    .testimonials-section [style*="display: grid"],
    .testimonials-section [style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
}

/* ----------------------------------------------------------------
   12. FAQ DETAILS — ensure all text readable
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    details summary {
        font-size: 0.88rem !important;
        line-height: 1.4 !important;
    }

    details p {
        font-size: 0.85rem !important;
        padding-left: 1rem !important;
    }

    /* FAQ 2-col → 1-col */
    [style*="display: grid"][style*="repeat(2, 1fr)"][style*="gap: 1.5rem"] {
        grid-template-columns: 1fr !important;
    }
}

/* ----------------------------------------------------------------
   13. MAX-WIDTH CONTAINERS with inline style — full-width on mobile
   ---------------------------------------------------------------- */
@media (max-width: 600px) {

    [style*="max-width: 600px"],
    [style*="max-width: 700px"],
    [style*="max-width: 550px"] {
        max-width: 100% !important;
    }
}

/* ----------------------------------------------------------------
   14. GLOBAL OVERFLOW GUARD
   ---------------------------------------------------------------- */
* {
    max-width: 100%;
    word-break: break-word;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal scroll */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* ================================================================
   TARGETED FIXES — exact class names from footer.php
   ================================================================ */

/* ----------------------------------------------------------------
   WhatsApp floating button — move up on mobile so it doesn't
   overlap card content (default bottom: 30px is too low on short
   screens where cards reach the bottom edge)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 90px !important;
        left: 12px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .whatsapp-float .whatsapp-icon {
        width: 26px !important;
        height: 26px !important;
    }

    /* Hide the tooltip on mobile — it covers content */
    .whatsapp-tooltip {
        display: none !important;
    }
}

/* ----------------------------------------------------------------
   Back-to-top button — shift inward from right edge
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 90px !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
    }
}

/* ----------------------------------------------------------------
   BLOG GRID — force 1 column on mobile
   Using both class selector AND inline-style attribute selector
   for maximum specificity (previous rule wasn't matching)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Class-based (wka-blog-grid shortcode output) */
    .wka-blog-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Inline-style grid used in home/blog template */
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* ----------------------------------------------------------------
   TESTIMONIALS — force 1 column on mobile (≤768px)
   The 3-column layout in inline styles is overriding CSS classes
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Inline grid from page-content.php testimonials */
    .testimonials-section [style*="display: grid"],
    .testimonials-section>.container>div,
    .testimonials-section [style*="grid-template-columns: repeat(3"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Testimonial card — remove any fixed widths */
    .testimonial-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ================================================================
   COMPACT MOBILE NAV MENU
   Overrides premium-header.css which uses 100px top padding and
   1rem vertical padding per link — causing huge spacing on mobile
   ================================================================ */
@media (max-width: 1024px) {

    /* Slide-in panel — reduce top padding from 100px → 70px */
    .nav-menu {
        padding: 70px 1.25rem 1.5rem !important;
        gap: 0 !important;
    }

    /* Each menu item — tighter border */
    .nav-menu li {
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 215, 0, 0.08) !important;
    }

    /* Link rows — compact padding and smaller font */
    .nav-link {
        padding: 0.6rem 1rem !important;
        font-size: 0.82rem !important;
        letter-spacing: 0.03em !important;
    }

    /* Consultation CTA button — compact */
    .nav-cta {
        margin-top: 1rem !important;
    }

    .nav-cta.btn-primary,
    .btn.btn-primary.nav-cta {
        padding: 0.7rem 1.5rem !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .nav-menu {
        padding: 65px 1rem 1.25rem !important;
        max-width: 240px !important;
    }

    .nav-link {
        padding: 0.55rem 0.875rem !important;
        font-size: 0.8rem !important;
    }
}