/* ==========================================================================
   responsive.css  —  Device-wide responsive fixes for Kiri Chemicals 2
   
   Philosophy:
   - Never override existing UI or logic — only add missing breakpoints
   - Mobile-first where possible; all rules use max-width media queries
   - Covers: xs (< 480px), sm (< 640px), md (< 768px), lg (< 1024px)
   ========================================================================== */


/* ── 1. Typography Scale — Mobile ─────────────────────────────────────────
   main.css forces fixed !important font sizes for h1-h6 and p.
   These overrides restore readable sizing on small screens.             */

@media (max-width: 767px) {
    h1, .h1 { font-size: 2rem    !important; line-height: 1.25 !important; }
    h2, .h2 { font-size: 1.6rem  !important; line-height: 1.3  !important; }
    h3, .h3 { font-size: 1.35rem !important; line-height: 1.4  !important; }
    h4, .h4 { font-size: 1.15rem !important; line-height: 1.45 !important; }
    h5, .h5 { font-size: 1.05rem !important; line-height: 1.5  !important; }
    h6, .h6 { font-size: 0.95rem !important; line-height: 1.5  !important; }

    p, .p {
        font-size: 0.9375rem !important;   /* 15px */
        line-height: 1.6rem  !important;
    }
}

@media (max-width: 479px) {
    h1, .h1 { font-size: 1.65rem !important; line-height: 1.2 !important; }
    h2, .h2 { font-size: 1.35rem !important; line-height: 1.3 !important; }
    h3, .h3 { font-size: 1.2rem  !important; }
    h4, .h4 { font-size: 1.05rem !important; }
}


/* ── 2. General layout — prevent horizontal overflow on all pages ─────── */

img, video, iframe, embed, object {
    max-width: 100%;
}

table {
    max-width: 100%;
}

@media (max-width: 767px) {
    /* Wrap overflow tables in a scroll container */
    .overflow-auto-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Make iframes (Google Maps etc.) scale by height too */
    iframe[src*="google.com/maps"] {
        height: 300px !important;
    }
}

@media (max-width: 479px) {
    iframe[src*="google.com/maps"] {
        height: 240px !important;
    }
}


/* ── 3. Hero sections — reduce overly tall fixed heights on mobile ──────── */

@media (max-width: 767px) {
    /* Page hero banners (relative h-[380px] pattern used site-wide) */
    .relative.h-\[380px\] {
        height: 220px !important;
    }

    /* About / news hero image */
    .news-hero-img {
        height: 240px !important;
    }

    /* Section headings inside hero */
    .relative.h-\[380px\] h1 {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 479px) {
    .relative.h-\[380px\] {
        height: 180px !important;
    }

    .news-hero-img {
        height: 180px !important;
    }
}


/* ── 4. Contact form — phone number row fix ──────────────────────────────
   The country-code + number flex row overflows on narrow screens.       */

@media (max-width: 479px) {
    /* Stack country code + number vertically on very small screens */
    .flex.border-r-0,
    input[name="country_code"] {
        width: 100% !important;
        border-right: 1px solid #d1d5db !important;
    }

    input[name="mobile_number"] {
        width: 100% !important;
    }

    /* Stack the flex wrapper that holds both inputs */
    .flex:has(input[name="country_code"]) {
        flex-direction: column;
    }
}


/* ── 5. Navigation — extra safeguard for very small screens ─────────────
   The mobile overlay is already implemented; this ensures correct sizing  */

@media (max-width: 479px) {
    #mobile-overlay {
        padding: 1rem;
    }

    .mobile-link {
        font-size: 1rem;
        padding: 0.6rem 0;
    }
}


/* ── 6. Footer — social icons row centred on mobile ────────────────────── */

@media (max-width: 639px) {
    footer .flex.gap-6 {
        gap: 1rem;
    }
}


/* ── 7. Careers / About / Media grid cards ───────────────────────────────
   These pages use Tailwind grid-cols-* classes that Tailwind's output.css
   already handles, but we add a safety fallback for very small screens.  */

@media (max-width: 479px) {
    .grid-cols-1,
    [class*="md:grid-cols-"],
    [class*="sm:grid-cols-"] {
        grid-template-columns: 1fr !important;
    }

    /* Exception: don't collapse pill / chip rows */
    .flex.flex-wrap {
        grid-template-columns: unset !important;
    }
}


/* ── 8. Search page highlight results ────────────────────────────────────── */

@media (max-width: 639px) {
    .search-result {
        padding: 1rem !important;
    }
}


/* ── 9. Contact page success/error popups ────────────────────────────────── */

@media (max-width: 639px) {
    #success-popup > div {
        margin: 1rem;
        padding: 1.5rem !important;
    }

    #error-popup {
        left: 1rem;
        right: 1rem;
        font-size: 0.875rem;
    }
}


/* ── 10. Products page — explorer / tab layout ───────────────────────────── */

@media (max-width: 767px) {
    /* Product tabs that can overflow horizontally */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}


/* ── 11. Sustainability / Business page — large quote sections ────────────── */

@media (max-width: 767px) {
    .min-h-\[60vh\] {
        min-height: 40vh !important;
    }

    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}


/* ── 12. News / Media cards — date + title stacking ─────────────────────── */

@media (max-width: 479px) {
    .news-content p {
        font-size: 0.9375rem !important;
        line-height: 1.65 !important;
    }
}


/* ── 13. Sticky back-to-top / floating buttons ────────────────────────────── */

@media (max-width: 479px) {
    /* WhatsApp & similar floating CTAs */
    a[href*="wa.me"] {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}


/* ── 14. Embedded map iframe safe height on all screens ─────────────────── */

section iframe[allowfullscreen] {
    display: block;
    width: 100%;
}