/**
 * Mobile Responsive Fixes
 * Asas Al-Maarifah Law Firm
 * Comprehensive responsive design improvements
 */

/* ===== Anti-Flash: Hide inline nav before shared-header.js replaces it ===== */
/* When shared-header.js is loaded, it removes old nav by ID. This prevents flash of duplicate nav. */
body > nav#navbar:not(:only-of-type),
body > .mobile-menu:not(#shared-header .mobile-menu) {
    display: none !important;
}

/* ===== Global Mobile Fixes ===== */

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

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
}

/* ===== Navigation Mobile Fixes ===== */

/* Mobile menu width adjustment for small screens */
@media (max-width: 360px) {
    #mobile-menu {
        width: 100% !important;
    }
}

/* Nav spacing is handled by padding-top on sections */

/* ===== Hero Section Mobile ===== */

@media (max-width: 640px) {
    /* Hero section */
    #home {
        min-height: 100svh; /* Use svh for mobile browsers */
        padding-top: 80px;
    }

    #home .text-4xl {
        font-size: 2rem !important;
        line-height: 1.3;
    }

    #home .text-2xl {
        font-size: 1.25rem !important;
    }

    #home .text-lg {
        font-size: 1rem !important;
    }

    /* Hero buttons - stack vertically with full width */
    #home .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        width: 100%;
        padding: 0 1rem;
    }

    #home .flex.flex-col.sm\:flex-row a {
        width: 100%;
        justify-content: center;
    }

    /* Hero logo smaller on mobile */
    #home img.h-24 {
        height: 5rem !important;
    }

    /* Scroll indicator */
    .scroll-indicator {
        bottom: 1rem !important;
    }
}

/* ===== About Section - Stats Overlay ===== */

@media (max-width: 640px) {
    /* Stats overlay - make it relative instead of absolute on mobile */
    #about .absolute.-bottom-8 {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        margin-top: 1rem;
        margin-left: 0;
        margin-right: 0;
    }

    /* Stats numbers smaller on mobile */
    .stat-number {
        font-size: 2rem !important;
    }

    /* About section reduce padding */
    #about {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* About section grid */
    #about .grid.lg\:grid-cols-2 {
        gap: 2rem !important;
    }

    /* About section heading */
    #about .text-4xl {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 768px) {
    /* Stats overlay better spacing on tablets */
    #about .absolute.-bottom-8 {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        margin-top: 1rem;
    }
}

/* ===== Services Section Mobile ===== */

@media (max-width: 640px) {
    /* Services section heading */
    #services .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Service cards - remove large padding */
    #services .p-8 {
        padding: 1.25rem !important;
    }

    #services .lg\:p-10 {
        padding: 1.25rem !important;
    }

    /* Featured service card - stack content */
    #services .flex-col.lg\:flex-row {
        flex-direction: column !important;
    }

    /* Service card title */
    #services .text-3xl {
        font-size: 1.5rem !important;
    }

    /* Service tags wrap better */
    #services .flex-wrap {
        gap: 0.5rem !important;
    }

    #services .flex-wrap span {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }

    /* Extra services grid */
    #services .grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ===== Journey / Workflow Section ===== */

@media (max-width: 640px) {
    /* Journey section padding */
    #workflow {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    /* Journey accordion button - reduce gap */
    .journey-btn {
        padding: 1rem !important;
        gap: 0.5rem !important;
    }

    /* Journey step number circle */
    .journey-btn .flex-shrink-0.w-10 {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 0.75rem !important;
    }

    /* Journey icon */
    .journey-btn .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        display: none; /* Hide icon on very small screens */
    }

    /* Journey content - less left margin */
    .journey-content {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 1rem !important;
    }

    /* Journey step heading */
    .journey-btn h4 {
        font-size: 1rem !important;
    }

    /* Section headings */
    .light-section .text-4xl {
        font-size: 1.75rem !important;
    }
}

/* ===== Success Stories Section ===== */

@media (max-width: 640px) {
    #success .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Story cards */
    .story-card {
        padding: 1.25rem !important;
    }

    .story-card .text-xl {
        font-size: 1.125rem !important;
    }

    /* Story icon */
    .story-card .w-14 {
        width: 3rem !important;
        height: 3rem !important;
    }
}

/* ===== Partners / Clients Logo Slider ===== */

@media (max-width: 640px) {
    #partners .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Logo items smaller on mobile */
    .logo-item {
        height: 70px !important;
        padding: 0.75rem 1rem !important;
    }

    .logo-item img {
        max-height: 45px !important;
        max-width: 100px !important;
    }

    /* Reduce gap in slider */
    .logos-track {
        gap: 2rem !important;
    }

    /* Reduce fade edges */
    .logos-slider::before,
    .logos-slider::after {
        width: 60px !important;
    }
}

/* ===== Team Section ===== */

@media (max-width: 640px) {
    #structure .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Team cards - 1 column on mobile */
    #structure .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Team card photo height */
    #structure .h-64 {
        height: 200px !important;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    /* Team cards - 2 columns on tablet */
    #structure .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== News / Blog Section ===== */

@media (max-width: 640px) {
    #news .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Blog slider - single card */
    #news .w-full.md\:w-1\/2.lg\:w-1\/3 {
        width: 100% !important;
        flex-shrink: 0;
    }

    /* Blog card image */
    #news .h-48 {
        height: 180px !important;
    }

    /* Navigation arrows - adjust position */
    #news button.absolute {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* ===== Contact Section ===== */

@media (max-width: 640px) {
    #contact {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    #contact .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Contact grid */
    #contact .grid.lg\:grid-cols-2 {
        gap: 2rem !important;
    }

    /* Contact info cards */
    #contact .flex.items-center.gap-4.p-4 {
        padding: 0.75rem !important;
    }

    #contact .w-14.h-14 {
        width: 3rem !important;
        height: 3rem !important;
    }

    /* Contact form */
    #contact form {
        padding: 1.5rem !important;
    }

    /* Social links */
    #contact .flex.gap-4 a.w-12 {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
}

/* ===== Memberships Section ===== */

@media (max-width: 640px) {
    #memberships .text-3xl {
        font-size: 1.5rem !important;
    }

    .membership-card {
        min-width: 140px !important;
        min-height: 80px !important;
        padding: 1rem !important;
    }

    .membership-card img {
        max-height: 45px !important;
        max-width: 100px !important;
    }

    .membership-track {
        gap: 1rem !important;
    }
}

/* ===== Branches Section ===== */

@media (max-width: 640px) {
    #branches .text-3xl {
        font-size: 1.5rem !important;
    }

    /* Map iframe height */
    #branches .h-64 {
        height: 200px !important;
    }

    /* Branch cards */
    #branches .grid.lg\:grid-cols-2 {
        gap: 1.5rem !important;
    }

    /* Branch info card */
    #branches .flex.items-center.gap-4 {
        gap: 0.75rem !important;
    }

    #branches .w-14 {
        width: 3rem !important;
        height: 3rem !important;
    }
}

/* ===== Footer ===== */

@media (max-width: 640px) {
    footer {
        padding-top: 2.5rem !important;
    }

    /* Footer grid - single column */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Footer logo */
    footer .h-16 {
        height: 3rem !important;
    }

    /* Footer bottom bar */
    footer .border-t {
        text-align: center;
    }

    footer .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
}

/* ===== Fixed Buttons (WhatsApp & Back to Top) ===== */

@media (max-width: 640px) {
    /* WhatsApp button */
    a[href*="wa.me"] {
        width: 3.25rem !important;
        height: 3.25rem !important;
        bottom: 1rem !important;
        right: 1rem !important;
    }

    a[href*="wa.me"] svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    /* Back to top button */
    #back-to-top {
        width: 2.75rem !important;
        height: 2.75rem !important;
        bottom: 1rem !important;
        left: 1rem !important;
    }
}

/* ===== Service Detail Pages (litigation, consulting, etc.) ===== */

@media (max-width: 640px) {
    /* Service hero section */
    .service-hero,
    section:first-of-type {
        padding-top: 6rem !important;
    }

    /* Service page headings */
    .service-page .text-5xl,
    .service-page .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Service detail cards */
    .service-detail-card {
        padding: 1.25rem !important;
    }

    /* Grid adjustments for service pages */
    .grid.md\:grid-cols-2 {
        gap: 1rem !important;
    }

    .grid.lg\:grid-cols-3 {
        gap: 1rem !important;
    }
}

/* ===== About Page Specific ===== */

@media (max-width: 640px) {
    /* Values grid */
    .values-grid {
        grid-template-columns: 1fr !important;
    }

    /* Timeline */
    .timeline-item::before {
        display: none !important;
    }

    .timeline-dot {
        display: none !important;
    }
}

/* ===== Blog Page Specific ===== */

@media (max-width: 640px) {
    /* Blog grid */
    .blog-grid {
        grid-template-columns: 1fr !important;
    }

    /* Blog card */
    .blog-card {
        margin-bottom: 1rem;
    }
}

/* ===== Careers Page Specific ===== */

@media (max-width: 640px) {
    /* Job cards */
    .job-card {
        padding: 1.25rem !important;
    }
}

/* ===== General Responsive Typography ===== */

@media (max-width: 640px) {
    /* Reduce all section padding */
    .py-24 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

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

    .lg\:py-32 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    /* Section headers spacing */
    .mb-16 {
        margin-bottom: 2rem !important;
    }

    .mb-12 {
        margin-bottom: 1.5rem !important;
    }

    /* Max width helpers */
    .max-w-5xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ===== Tablet Specific ===== */

@media (min-width: 641px) and (max-width: 1023px) {
    /* General section padding adjustment */
    .py-24 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* Grid adjustments */
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Footer grid */
    footer .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== Safe Area (Notch) Support ===== */

@supports (padding: env(safe-area-inset-bottom)) {
    #back-to-top,
    a[href*="wa.me"] {
        padding-bottom: env(safe-area-inset-bottom);
    }

    footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===== Loading Screen Mobile ===== */

@media (max-width: 640px) {
    .loading-screen .w-32 {
        width: 6rem !important;
    }
}

/* ===== Smooth scroll fix for iOS ===== */

@supports (-webkit-touch-callout: none) {
    html {
        scroll-behavior: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Touch target minimum sizes ===== */

@media (max-width: 1023px) {
    /* Ensure all clickable elements meet minimum touch target */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }

    /* But not inline links in text */
    p a, li a, span a {
        min-height: auto;
        min-width: auto;
    }
}

/* ===== Print styles (bonus) ===== */

@media print {
    #navbar, #shared-header, #mobile-menu, #mobile-overlay,
    .scroll-indicator, #back-to-top, a[href*="wa.me"],
    .loading-screen {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}