/* ============================================================
   mobile-fix.css — Aethon Overseas
   Fixes all mobile / tablet responsiveness issues
   ============================================================ */

/* ── 0. VC_ROW GUTTER SAFETY NET ─────────────────────────── */

/* builder.min.css is now deferred (non-blocking). That file supplies
   .vc_row { margin-left: -15px; margin-right: -15px } which compensates
   for Bootstrap column padding. Redeclare it here so it is present
   from the very first render, preventing a flash of narrower columns. */
.vc_row {
    margin-left: -15px;
    margin-right: -15px;
}

/* ── 1. HERO SECTION ──────────────────────────────────────── */

/* 100svh = viewport height MINUS browser UI chrome (address bar on iOS/Android).
   100vh on mobile includes the UI chrome, making the hero taller than the visible
   screen and cutting off the CTA button. Older browsers fall back to 100vh. */
@media (max-width: 767px) {
    .start-screen {
        height: 100vh;      /* fallback for browsers without svh support */
        height: 100svh;     /* modern mobile: excludes address bar */
        min-height: 500px;
    }

    /* Prevent hero text from being hidden behind the fixed header */
    .start-screen__content-container {
        padding-top: 80px;
    }

    /* critical.css sets overflow:hidden + height:inherit on this element.
       On very narrow phones that clips the CTA button. Allow visible. */
    .start-screen__content__item {
        overflow: visible !important;
        height: auto !important;
        min-height: 100%;
    }

    /* Hero heading */
    .start-screen__content__item .__title {
        font-size: clamp(26px, 7vw, 36px) !important;
        line-height: 1.2 !important;
    }

    /* Hero paragraph text — readable on small screens */
    .start-screen__content__item p {
        font-size: 1.4rem;
        padding: 0 10px;
    }
}

/* Extra-small phones ≤400px (iPhone SE, Galaxy Mini) */
@media (max-width: 400px) {
    .start-screen__content-container {
        padding-top: 65px;
    }

    .start-screen__content__item .__title {
        font-size: clamp(22px, 6.5vw, 30px) !important;
    }

    .start-screen__content__item p {
        font-size: 1.3rem;
    }
}

/* ── 2. HEADER / NAV ──────────────────────────────────────── */

@media (max-width: 991px) {
    /* Keep logo from being oversized on tablet */
    .top-bar__logo img,
    .site-logo img {
        height: 60px !important;
        max-width: 180px !important;
        width: auto !important;
    }

    /* Give the nav toggler (hamburger) enough tap target */
    .top-bar__navigation-toggler {
        padding: 15px 10px;
    }
}

@media (max-width: 575px) {
    .top-bar__logo img,
    .site-logo img {
        height: 50px !important;
        max-width: 150px !important;
    }
}

/* ── 3. APEDA REGISTERED BANNER SECTION ──────────────────── */
/* On desktop the logo is decorative in a tiny col-lg-2 with the text
   visually escaping via overflow. On mobile both collapse into a single
   full-width block causing the yellow logo to dominate the screen.
   Fix: hide the in-banner logo on mobile; normalize the text column.    */

@media (max-width: 991px) {
    /* Hide the duplicate logo inside the APEDA banner — header logo is enough */
    .simple-banner--style-1 .__inner > img,
    .simple-banner--style-1 .col-12.col-lg-2 > .\\__inner > img,
    .simple-banner--style-1 img[alt="site_logo.webp"] {
        display: none !important;
    }

    /* Expand the column that holds the text to full width */
    .simple-banner--style-1 [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Reduce excessive top/bottom padding on mobile */
    .simple-banner--style-1 .banner__text {
        padding-top: 40px !important;
        padding-bottom: 50px !important;
    }

    /* col-30 is a non-standard WPBakery class — make it full width */
    .col-30, [class="col-30"],
    [class*="col-30"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* The section gutter adds side margins that are too tight on mobile */
    .section--gutter {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* APEDA title — scale down on mobile */
    .simple-banner--style-1 .__title {
        font-size: clamp(28px, 6vw, 44px);
        line-height: 1.15;
    }
}

/* ── 4. BLOG SLIDER / VIEW ALL INSIGHTS ──────────────────── */

@media (max-width: 991px) {
    /* Give the slider enough bottom space so slick-dots don't sit
       right on top of the "View All Insights" button below */
    .blog-slider {
        padding-bottom: 20px;
    }

    /* Push the "View All Insights" button further down */
    .section-blog .posts > div[style*="text-align:center"],
    .section-blog > .container > div[style*="text-align:center"] {
        margin-top: 50px !important;
    }

    /* Slick dots — ensure they stay inside the slider */
    .blog-slider .slick-dots {
        position: relative;
        margin-top: 24px;
        padding-bottom: 8px;
        z-index: 1;
    }
}

/* ── 5. CATEGORY ICONS ROW ────────────────────────────────── */

@media (max-width: 575px) {
    /* 2-column grid is already set (col-6) — just ensure consistent spacing */
    .feature--style-1 .__item {
        margin-bottom: 24px;
    }

    .feature--style-1 .__ico img {
        width: 60px;
        height: 60px;
    }

    .feature--style-1 .__title {
        font-size: 1.3rem;
        margin-top: 8px;
    }
}

/* ── 6. PRODUCT SECTIONS ─────────────────────────────────── */

@media (max-width: 767px) {
    /* Product preview cards — ensure images don't overflow */
    .product-preview--style-1 .__item,
    .product-preview--style-2 .__item {
        height: auto !important;
    }

    /* Product grid — stack nicely on small screens */
    .products-list .__item {
        margin-bottom: 20px;
    }
}

/* ── 7. SECTION HEADINGS ─────────────────────────────────── */

@media (max-width: 575px) {
    /* Large headings that go off-screen on narrow viewports */
    .section-heading .__title {
        font-size: clamp(24px, 7vw, 36px) !important;
        word-break: break-word;
    }

    .h1, h1 { font-size: clamp(28px, 8vw, 44px) !important; }
    .h2, h2 { font-size: clamp(22px, 6vw, 36px) !important; }

    /* Special-offer oversized text */
    .special-offer--style-1 .text,
    .special-offer--style-2 .text,
    .special-offer--style-3 .text {
        font-size: 5rem !important;
    }
}

/* ── 8. FOOTER ────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Footer nav wraps to multiple lines — add breathing room */
    #footer__navigation li {
        display: inline-block;
        margin-top: 8px;
        margin-right: 12px;
    }

    /* Copyright bar — stack properly */
    .nt-footer-copyright {
        text-align: center;
        padding: 10px 0;
    }

    /* Social icons — bigger tap targets on mobile */
    .social-btns a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
}

/* ── 9. FLOATING ACTION BUTTONS ──────────────────────────── */

@media (max-width: 575px) {
    /* WhatsApp + scroll-to-top buttons — keep visible but not overlapping content */
    .floating-actions {
        bottom: 16px;
        right: 12px;
        gap: 10px;
    }

    .floating-actions a,
    .floating-actions button {
        width: 46px !important;
        height: 46px !important;
    }
}

/* ── 10. CERTIFICATES & TRUST BADGES ─────────────────────── */

@media (max-width: 575px) {
    /* Certificate cards — single column, consistent spacing */
    .certificates-grid,
    .cert-item {
        margin-bottom: 20px;
    }

    /* Certificate images */
    .cert-item img,
    .certifications img {
        max-width: 120px;
        height: auto;
    }
}

/* ── 11. CONTACT / INQUIRY FORM ──────────────────────────── */

@media (max-width: 575px) {
    /* Ensure form fields are touch-friendly */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important; /* prevents iOS auto-zoom on focus */
        min-height: 44px;
    }
}

/* ── 12. TABLES — Specs & Incoterms ──────────────────────── */

@media (max-width: 575px) {
    /* Product spec tables — allow horizontal scroll */
    .product-specs-table,
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

/* ── 13. ABOUT PAGE — INDIA MAP ──────────────────────────── */

/* Global: override FlaMap's inline fixed width/height on the wrapper div so
   the SVG (which JS sets to width:100%; height:auto + viewBox) can scale freely */
#india-map-container .fm-map-container {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}
#india-map-container svg {
    display: block;
    max-width: 100%;
}

@media (max-width: 991px) {
    /* Tablet + mobile: let the map column fill available width */
    .india-map-wrap {
        width: 100% !important;
        overflow: visible !important;
    }
    #india-map-container {
        width: 100% !important;
        overflow: visible !important;
    }
}

@media (max-width: 767px) {
    /* Stack map then cards vertically on mobile */
    .india-map-layout {
        display: block !important;
        grid-template-columns: unset !important;
    }

    /* Region cards below the map */
    .india-region-panel {
        max-height: 320px;
        margin-top: 24px;
    }
}

/* ── 14. GENERAL OVERFLOW PREVENTION ────────────────────── */

@media (max-width: 767px) {
    /* Intentionally excludes .nt-column and .nt-shortcode-wrapper:
       the Bootstrap grid relies on .vc_row having margin:-15px and
       .col-sm-* having padding:15px. Capping .nt-column at 100vw
       breaks that compensation and leaves a ~15px white strip on the
       right side of full-bleed sections like the hero. */
    .agro-section-wrapper,
    .section {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Prevent horizontal scrollbar from any other source */
    body {
        overflow-x: hidden;
    }

    /* Negative margin used in .posts .__inner can cause dots to sit on the button */
    .posts--style-1 .__inner {
        margin-bottom: 0 !important;
        padding-bottom: 10px;
    }
}

/* ── 15. FAQ SECTION ─────────────────────────────────────── */

@media (max-width: 991px) {
    /* Shrink decorative background text on tablet so it doesn't overflow */
    .pg-faq-decor {
        font-size: 140px;
    }
}

@media (max-width: 767px) {
    .pg-faq-section {
        padding: 60px 0;
    }

    /* Decorative large background "FAQ" text — scale down on mobile */
    .pg-faq-decor {
        font-size: 90px;
    }

    .pg-faq-list {
        margin-top: 36px;
    }

    /* FAQ question row */
    .pg-faq-q {
        font-size: 15px;
        padding: 18px 0;
    }

    .pg-faq-a {
        padding-right: 30px;
    }

    /* "Still have questions?" card — stack vertically on mobile */
    .pg-faq-still {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
    }

    /* Remove min-width so text doesn't overflow on narrow screens */
    .pg-faq-still-text {
        min-width: 0;
        width: 100%;
    }

    /* WhatsApp button — full-width tap target on mobile */
    .pg-faq-wa-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
}