/**
 * JAI AMBEY ROADLINE — responsive.css
 * Phase 5: Accessibility (skip-link, focus states) + edge-case
 * responsive fixes not already covered by page-level stylesheets.
 * Loaded last so it can safely override where needed.
 */

/* ---------------------------------------------------------------
   1. SKIP TO CONTENT LINK (keyboard / screen-reader accessibility)
--------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -48px;
    left: 1rem;
    z-index: 2000;
    background: var(--color-secondary, #0B2A5B);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: top 0.25s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-primary, #D50000);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   2. FOCUS-VISIBLE STATES
   Bootstrap's default focus ring is easy to miss against the navy
   hero / dark sections. Give every interactive element a crisp,
   on-brand focus ring that only shows for keyboard navigation.
--------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary, #D50000);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Remove the outline for mouse users so it never looks accidental */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
}

/* ---------------------------------------------------------------
   3. ULTRA-WIDE DESKTOP (>= 1440px)
   Prevent hero/section content from stretching too thin on large
   monitors; cap the readable measure and re-center.
--------------------------------------------------------------- */
@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
    }

    .hero-heading {
        max-width: 720px;
    }

    .section-subtitle,
    .about-lead {
        max-width: 640px;
    }
}

/* ---------------------------------------------------------------
   4. SMALL PHONES (<= 375px — iPhone SE / older Android)
   Tighten spacing and type scale one notch further than the
   existing 575.98px breakpoint so nothing wraps awkwardly.
--------------------------------------------------------------- */
@media (max-width: 375px) {
    .hero-title {
        font-size: clamp(1.6rem, 7vw, 2.1rem);
    }

    .section-title {
        font-size: clamp(1.4rem, 6vw, 1.8rem);
    }

    .btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.85rem;
    }

    .hero-trust-badges .trust-badge {
        font-size: 0.72rem;
        padding: 0.4rem 0.7rem;
    }

    .quote-form .form-control,
    .contact-form .form-control {
        font-size: 0.9rem;
    }
}

/* ---------------------------------------------------------------
   5. LANDSCAPE PHONES (short viewport height)
   Hero sections sized with vh units can overflow or feel cramped
   in landscape on phones. Relax the min-height there.
--------------------------------------------------------------- */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding-top: 5rem;
        padding-bottom: 2rem;
    }

    .hero-content {
        padding-top: 80px;
    }
}

/* ---------------------------------------------------------------
   6. TABLET LANDSCAPE / SMALL LAPTOP GAP (992px – 1100px)
   Bootstrap's lg breakpoint (992px) sometimes leaves the navbar
   feeling cramped just above it. Tighten nav item spacing only
   in that narrow band.
--------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1100px) {
    .navbar .nav-link {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        font-size: 0.9rem;
    }
}

/* ---------------------------------------------------------------
   7. PRINT STYLES
   Quote/contact pages are sometimes printed by dispatch staff;
   strip decorative chrome so the essentials are legible on paper.
--------------------------------------------------------------- */
@media print {
    .site-header,
    .whatsapp-float,
    .back-to-top,
    footer,
    .cta-banner,
    #page-loader {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #555;
    }
}

/* ---------------------------------------------------------------
   8. FIX: HORIZONTAL OVERFLOW ON MOBILE
   overflow-x: hidden on body alone causes sticky/fixed elements
   to break on iOS Safari and clips content on mobile. Apply it
   to both html AND body, and ensure sections with decorative
   absolute elements don't bleed out.
--------------------------------------------------------------- */
html {
    overflow-x: hidden;
}

/* Sections with decorative pseudo-elements or absolute children
   that can bleed outside the viewport on narrow screens */
.hero-section,
.services-section,
.stats-section,
.cta-section,
.partners-section,
.fleet-section,
.process-section,
.testimonials-section,
.industries-section,
.faq-section,
.about-section,
.network-section,
footer {
    max-width: 100vw;
    overflow-x: clip; /* clip instead of hidden preserves sticky inside */
}

/* Mobile: Ensure map iframe / SVG doesn't overflow */
@media (max-width: 767.98px) {
    iframe,
    .india-map-svg,
    .map-container {
        max-width: 100%;
        width: 100% !important;
    }

    /* Fix partner logo strip overflow on mobile */
    .partners-track,
    .partner-logos-track {
        width: max-content;
    }
}

/* Tablet: Fix any side-by-side card rows that overflow */
@media (max-width: 991.98px) {
    .row {
        --bs-gutter-x: 1rem;
    }
}

/* ---------------------------------------------------------------
   9. FIX: iOS Safari 100vh issue (address bar pushes content)
--------------------------------------------------------------- */
@supports (-webkit-touch-callout: none) {
    .hero-section {
        min-height: -webkit-fill-available;
    }
}