/* =========================================
   RESPONSIVE
   ========================================= */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-section::before {
        animation: none;
    }
}

/* =========================================
   FLUID TYPOGRAPHY & SPACING
   ========================================= */

html {
    font-size: clamp(14px, 1vw + 12px, 16px);
}

.fluid-padding {
    padding: clamp(2rem, 5vw, 4rem);
}

.section-spacing {
    padding-top: clamp(3rem, 8vw, 6rem);
    padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* =========================================
   CONTAINER QUERIES (Modern Browsers)
   ========================================= */

/* Define containers */
.card-container,
.service-card,
.blog-card,
.testimonial-card {
    container-type: inline-size;
}

/* Container query for cards */
@container (max-width: 350px) {
    .card-content {
        padding: 1rem;
    }

    .card-title {
        font-size: 1.1rem;
    }
}

/* =========================================
   LARGE DESKTOP (1400px+)
   ========================================= */

@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1320px;
    }

    .display-mega {
        font-size: 8rem;
    }
}

/* =========================================
   DESKTOP (1200px - 1399px)
   ========================================= */

@media (max-width: 1399px) {
    .display-mega {
        font-size: clamp(4rem, 8vw, 6rem);
    }
}

/* =========================================
   SMALL DESKTOP (992px - 1199px)
   ========================================= */

@media (max-width: 1199px) {
    .hero-section {
        min-height: 0;
        /* Changed from 'auto' for Firefox compatibility */
        padding: 10rem 0 6rem;
    }
}

/* =========================================
   TABLET (768px - 991px)
   ========================================= */

@media (max-width: 991px) {
    .stats-grid {
        gap: 2rem;
    }

    .stat-item h4 {
        font-size: clamp(2.5rem, 6vw, 4rem);
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 1rem;
    }

    /* Note: Mobile menu styles are in layout.css (.glass-header .navbar-collapse) */
}

/* =========================================
   MOBILE LANDSCAPE (576px - 767px)
   ========================================= */

@media (max-width: 767px) {
    :root {
        --mesh-size: 30px;
    }

    .contact-wrapper,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .contact-content h2 {
        font-size: 2rem;
    }

    .testimonial-bg-text {
        font-size: 20vw;
    }

    .stats-grid {
        gap: 2rem;
        flex-direction: column;
    }

    .stat-item h4 {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    /* --- Blog Filter Mobile Horizontal Scroll --- */
    #primary .blog-filter-bar,
    #primary .archive-filter-bar,
    .sabha-sticky-nav .blog-filter-bar,
    .sabha-sticky-nav-archive .blog-filter-bar,
    div.blog-filter-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 0.5rem;
        gap: 0.75rem !important;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .blog-filter-bar::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .blog-filter-bar .btn {
        flex-shrink: 0;
        white-space: nowrap;
        width: auto !important;
        /* Force auto width */
        margin-bottom: 0 !important;
    }

    h1 {
        font-size: clamp(2.25rem, 8vw, 3.5rem);
        line-height: 1.1;
    }

    h2 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }

    .hero-section,
    .sabha-hero-archive {
        /* Fluid top padding: min 90px, preferred 18% of viewport height, max 8rem */
        padding: clamp(90px, 18vh, 8rem) 0 4rem;
    }

    .feature-card {
        padding: 2rem 1.5rem;
    }

    /* Lighter animations on mobile */
    .animate-on-scroll {
        transition-duration: 0.4s;
    }

    .btn {
        padding: 0.875rem 2rem;
        font-size: 0.9rem;
    }

    /* Touch-friendly targets */
    .nav-link,
    .btn,
    .footer-link,
    .social-link {
        min-height: 48px;
        min-width: 48px;
    }
}

/* =========================================
   MOBILE PORTRAIT (max 575px)
   ========================================= */

@media (max-width: 575px) {

    .hero-section,
    .hero-home,
    .blog-hero,
    .sabha-hero-archive,
    .hero-generic-section {
        /* Unified Fluid Top Padding for All Pages on Mobile */
        /* Starts at 70px to clear header, grows slightly with screen */
        padding: clamp(70px, 12vh, 6rem) 0 3rem !important;
        text-align: center;
    }

    .hero-section {
        text-align: center;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    /* Full-width buttons on mobile */
    .hero-section .btn {
        width: 100%;
        justify-content: center;
    }

    /* Social Share Buttons Fix - Plain Icons */
    .btn-social {
        width: 40px !important;
        /* Force fixed width to override 100% */
        height: 40px !important;
        flex: none !important;
        display: inline-flex !important;
        /* Responsive font size varies slightly */
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    }

    .btn-social:hover {
        color: var(--color-primary) !important;
        /* Hover color */
        transform: scale(1.1);
        background: transparent !important;
    }

    /* Stack flex items on mobile - but NOT footer social icons OR share buttons */
    .hero-section .d-flex.gap-3,
    .contact-section .d-flex.gap-3 {
        flex-direction: column;
        width: 100%;
    }

    /* Keep footer social icons horizontal */
    .footer-bottom .d-flex.gap-3 {
        flex-direction: row !important;
        justify-content: center !important;
    }

    /* Add spacing between header and hero badge */
    .hero-home .sabha-badge,
    .hero-home__content .sabha-badge {
        margin-top: 2rem;
    }

    /* Reduce spacing */
    .section-header {
        margin-bottom: 0.5rem;
    }

    /* Simpler effects on mobile */
    .card-tilt:hover {
        transform: translateY(-5px);
    }
}

/* =========================================
   SMALL MOBILE (max 375px)
   ========================================= */

@media (max-width: 375px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .btn {
        padding: 0.7rem 1.25rem;
        font-size: 0.8rem;
    }

    h1 {
        font-size: 1.75rem;
        line-height: 1.15;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .display-mega {
        font-size: 2.25rem;
        letter-spacing: -1px;
    }

    /* Hero section adjustments */
    .hero-section,
    .hero-home {
        padding: 5rem 0 2.5rem;
    }

    .hero-home .sabha-badge,
    .sabha-badge {
        font-size: 0.65rem;
        padding: 0.4rem 0.75rem;
        margin-top: 1.5rem;
    }

    /* Cards smaller padding */
    .glass-card,
    .service-card,
    .feature-card {
        padding: 1.25rem;
    }

    /* Section spacing */
    .sabha-section {
        padding: 3rem 0;
    }

    /* Footer adjustments */
    .site-footer {
        padding: 2rem 0 1.5rem;
    }

    .site-footer h4 {
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }

    .footer-links a {
        font-size: 0.8rem;
    }

    .footer-bottom {
        font-size: 0.7rem;
    }

    /* Social icons smaller */
    .footer-bottom .d-flex.gap-3 {
        gap: 0.75rem !important;
    }

    .footer-bottom .btn-icon,
    .footer-bottom a[class*="btn"] {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    /* Form inputs */
    .form-control,
    .form-select {
        font-size: 0.875rem;
        padding: 0.6rem 0.75rem;
    }

    /* Testimonials */
    .avis-card {
        padding: 1rem;
    }

    .avis-card h3 {
        font-size: 1rem;
    }

    /* Stats */
    .stat-item h4 {
        font-size: 1.75rem;
    }

    /* Process steps */
    .process-step {
        padding: 1rem;
    }

    /* FAQ */
    .accordion-button {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }

    .accordion-body {
        font-size: 0.85rem;
        padding: 0.75rem 1rem;
    }
}

/* =========================================
   EXTRA SMALL MOBILE (max 320px)
   iPhone SE, Galaxy Fold, etc.
   ========================================= */

@media (max-width: 320px) {
    html {
        font-size: 13px;
    }

    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    h1 {
        font-size: 1.5rem;
        word-break: break-word;
    }

    h2 {
        font-size: 1.25rem;
    }

    .display-mega {
        font-size: 1.75rem;
    }

    /* Header adjustments */
    .glass-header .navbar-brand {
        font-size: 0.9rem;
    }

    .header-logo-icon {
        width: 32px;
        height: 32px;
    }

    .brand-text {
        font-size: 0.8rem !important;
    }

    /* Hero ultra compact */
    .hero-section,
    .hero-home {
        padding: 4.5rem 0 2rem;
    }

    .sabha-badge {
        font-size: 0.55rem;
        padding: 0.3rem 0.5rem;
        letter-spacing: 0.5px;
    }

    /* Buttons full width and smaller */
    .btn {
        padding: 0.6rem 1rem;
        font-size: 0.75rem;
        width: 100%;
    }

    /* Cards ultra compact */
    .glass-card,
    .service-card,
    .feature-card {
        padding: 1rem;
        border-radius: 8px;
    }

    .service-card .card-icon {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    /* Section spacing reduced */
    .sabha-section {
        padding: 2.5rem 0;
    }

    /* Footer ultra compact */
    .site-footer {
        padding: 1.5rem 0 1rem;
    }

    .site-footer .row>div {
        margin-bottom: 1rem;
    }

    .footer-bottom {
        font-size: 0.65rem;
        padding-top: 0.75rem;
    }

    .footer-bottom .d-flex.gap-3 {
        gap: 0.5rem !important;
    }

    /* Hide some elements on tiny screens */
    .hero-home__floating-logo,
    .orbit-icons,
    .bg-glow-top-right {
        display: none;
    }

    /* Testimonials compact */
    .avis-card {
        padding: 0.75rem;
    }

    .avis-card h3 {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* Stats compact */
    .stat-item h4 {
        font-size: 1.5rem;
    }

    .stat-item p {
        font-size: 0.75rem;
    }

    /* Process steps */
    .process-step {
        padding: 0.75rem;
    }

    .process-step h4 {
        font-size: 1rem;
    }

    /* FAQ compact */
    .accordion-button {
        font-size: 0.8rem;
        padding: 0.6rem 0.75rem;
    }

    .accordion-body {
        font-size: 0.75rem;
        padding: 0.6rem 0.75rem;
    }

    /* Contact form */
    .contact-form {
        padding: 1rem;
    }

    /* Newsletter */
    .newsletter-form .input-group {
        flex-direction: column;
        gap: 0.5rem;
    }

    .newsletter-form .btn {
        border-radius: var(--radius-md) !important;
    }

    /* Breadcrumbs smaller */
    .breadcrumbs-nav {
        font-size: 0.7rem;
    }

    /* Blog cards */
    .blog-card-img {
        height: 150px;
    }

    /* Single post */
    .entry-content {
        font-size: 0.9rem;
    }

    /* Chat widget smaller */
    .sabha-chat-widget {
        bottom: 10px;
        right: 10px;
    }

    .sabha-chat-toggle {
        width: 48px;
        height: 48px;
    }
}

/* =========================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================= */

@media (hover: none) {

    /* Disable hover effects on touch */
    .hover-lift:hover,
    .card-tilt:hover {
        transform: none;
    }

    .btn-magnetic:hover {
        transform: none;
    }

    /* Show active states instead */
    .btn:active {
        transform: scale(0.98);
    }
}

/* =========================================
   PRINT STYLES
   ========================================= */

@media print {

    .site-header,
    .site-footer,
    .scroll-progress,
    .btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        color: black;
        text-decoration: underline;
    }
}