/* Responsive adjustments for YISAINUO website */

:root {
    --section-spacing: 100px;
}

/* Global Minimum Font Size for content text */
p, .text-gray-500, .text-gray-300, .nav-link, .nav-dropdown-item, .footer-link, .contact-info span, 
.text-sm, .text-xs, .text-\[10px\], .text-\[12px\], .text-\[14px\], .text-\[15px\] {
    font-size: 16px !important;
}

/* Ensure icons scale if they are using font-size classes */
.iconfont {
    font-size: 1.25rem; /* ~20px */
}

/* 1680px */
@media (max-width: 1680px) {
    .container { max-width: 1600px; }
    .hero-swiper h1 { font-size: 58px !important; }
    .section-2-title { font-size: 38px !important; }
}

/* 1600px */
@media (max-width: 1600px) {
    .container { max-width: 1520px; }
    .hero-swiper h1 { font-size: 54px !important; }
    .section-2-title { font-size: 36px !important; }
}

/* 1440px */
@media (max-width: 1440px) {
    .container { max-width: 1360px; }
    .hero-swiper h1 { font-size: 50px !important; }
    .section-2-title { font-size: 34px !important; }
}

/* 1366px */
@media (max-width: 1366px) {
    .container { max-width: 1280px; }
    .hero-swiper h1 { font-size: 46px !important; }
    .section-2-title { font-size: 32px !important; }
    nav.space-x-14 > * + * { margin-left: 2.5rem !important; }
}

/* 1280px */
@media (max-width: 1280px) {
    .container { max-width: 1200px; }
    .hero-swiper h1 { font-size: 42px !important; }
    .section-2-title { font-size: 30px !important; }
    nav.space-x-14 > * + * { margin-left: 2rem !important; }
}
@media (max-width: 1023px) {
    .fixed.bottom-0.lg\:hidden {
        height: 80px !important;
    }
    .fixed.bottom-0.lg\:hidden span {
        font-size: 16px !important; 
    }
    body {
        padding-bottom: 80px !important;
    }
}
.subpage-banner-h1 {
    font-size: clamp(28px, 8vw, 52px) !important;
}

.product-item-content h3 {
    font-size: 18px !important;
}
/* 1023px - Mobile Threshold */
@media (max-width: 1023px) {
    :root {
        --section-spacing: 70px;
    }
   .h-\[240px\]{ height: auto;}
    /* Natural scrolling for sections when fullpage is disabled */
    #fullpage, .section, section {
        height: auto !important;
        min-height: auto !important;
        padding: var(--section-spacing) 0 !important;
    }
     #fullpage{ padding: 0 !important;}
    #footer-section {
        padding-top: 0 !important;
    }

    .md\:grid-cols-4,.md\:grid-cols-4{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .h-12{ height: 3rem;}
    
    .section[data-anchor="home"],
    section.relative.h-\[624px\],
    .subpage-banner {
        padding: 0 !important;
    }

    /* Subpage banner height adjustment */
    section.relative.h-\[624px\] {
        height: 400px !important;
        min-height: 400px !important;
        padding-top: 70px !important; /* Distance from top */
    }
    .h-\[240px\]{ height: auto !important;}

    section.relative.min-h-\[600px\] {
        height: auto !important;
        min-height: auto !important; /* Allow content to define height */
        padding-top: 70px !important; /* Distance from top */
        padding-bottom: 40px !important; /* Add some bottom padding for content */
    }

    /* Subpage banner text alignment */
    .md\:w-2\/3.text-left,
    .lg\:w-1\/2.text-left {
        text-align: left !important;
    }

    .flex.flex-col.md\:flex-row.items-center.justify-between.text-white,
    .flex.flex-col.lg\:flex-row.items-center.gap-12.lg\:gap-20 {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .hero-swiper .swiper-slide {
        height: 100vh !important;
        min-height: 600px !important;
    }

    /* Hide subpage breadcrumb on mobile */
    /* .subpage-breadcrumb {
        display: none !important;
    } */

    /* Section 2 (About) adjustments */
    .section[data-anchor="about"] {
        padding-top: calc(var(--section-spacing) + 70px) !important; /* Offset for header */
    }

    /* Section 3 (Services) layout fix */
    #services-section .flex.w-full.h-full {
        flex-direction: column !important;
        height: auto !important;
    }

    .service-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        min-height: 250px;
    }

    .service-item .service-main-content {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        padding: 40px 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .service-item .service-icon-wrapper {
        margin-bottom: 15px !important;
    }

    .service-item .service-hover-content {
        display: none !important; /* Disable hover content on mobile for better UX */
    }

    .service-item .service-btn-wrapper {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        opacity: 1 !important;
        display: flex;
        justify-content: center;
        padding-bottom: 40px;
    }

    /* Section 4 (Products) padding override */
    .products-container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .products-section .lg\:w-1\/4 {
        text-align: center !important;
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 36px !important;
        text-align: center;
    }

    .section-subtitle {
        font-size: 18px !important;
        line-height: 1.4 !important;
        text-align: center;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .products-section .flex.space-x-4 {
        justify-content: center;
    }

    /* Section 5 (News) padding and height */
    .news-section .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .news-section .grid {
        height: auto !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .news-section .h-\[538px\] {
        height: auto !important;
    }

    .news-section .featured-news {
        height: 400px !important;
    }

    /* Section 6 (Footer & Contact) */
    /* #footer-section .bg-primary {
        height: auto !important;
        padding: var(--section-spacing) 0 !important;
    } */

    #footer-section .container.grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px 20px !important;
    }

    /* Navigation */
    .lg\:flex { display: none !important; }
    .lg\:hidden { display: block !important; }
    .fixed.lg\:hidden { display: flex !important; }
    
    header, 
    header.header-transparent,
    header.scrolled {
        height: 70px !important;
        background-color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    header .text-secondary,
    #search-btn,
    #lang-btn {
        color: #000000 !important;
    }

    #lang-btn span,
    #lang-btn i {
        color: #000000 !important;
    }

    /* Mobile Menu Toggle Button Style */
    .menu-toggle {
        background-color: #00a2a5 !important;
        color: #ffffff !important;
        border-radius: 4px !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .menu-toggle i {
        color: #ffffff !important;
        font-size: 24px !important;
    }
    
    header .container {
        height: 100% !important;
    }

    header img {
        height: 32px !important;
    }

    .hero-swiper h1 { font-size: 36px !important; }
    .section-2-title { font-size: 28px !important; }
    .section-2-subtitle { font-size: 20px !important; }
    
    /* Section 2 Grid */
    .section-2-number { font-size: 40px !important; }

    /* Globe position adjustment */
    .absolute.right-\[44px\] {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 40px !important;
        display: flex !important;
        justify-content: center !important;
        pointer-events: auto !important;
    }
    
    .absolute.right-\[44px\] img {
        width: 80% !important;
        max-width: 400px;
        height: auto !important;
    }

    /* About page layout */
    /* .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
    } */
    
    .md\:w-\[55\%\] {
        width: 100% !important;
    }

}

/* 800px */
@media (max-width: 800px) {
    :root {
        --section-spacing: 50px;
    }

    .container { padding-left: 20px; padding-right: 20px; }
    .hero-swiper h1 { font-size: 32px !important; }
    .section-2-title { font-size: 24px !important; }
    
    .grid-cols-3 { 
        display: grid !important;
        grid-template-columns: 1fr !important; 
        gap: 30px !important; 
    }

    /* Section 6 Contact Bar */
    #footer-section .container.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Mobile Bottom Nav height adjustment */
    body {
        padding-bottom: 60px !important;
    }
}

/* 500px */
@media (max-width: 500px) {
    :root {
        --section-spacing: 40px;
    }
    .section[data-anchor="about"]{ padding-top: 0 !important;}
    .pt-\[100px\]{ padding-top: 20px !important;}
    .hero-swiper .swiper-slide{  height: auto !important;}
    .hero-swiper h1 { font-size: 28px !important; }
    .section-2-title { font-size: 22px !important; }
    
    .hero-swiper .swiper-slide {
        padding: 0 15px;
    }
    
    .btn-leaf {
        width: 100% !important;
        justify-content: center;
    }

    .hero-swiper p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* Header adjustments */
    header img {
        height: 28px !important;
    }

    .menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    /* Product card adjustments */
    .product-card-content h3 {
        font-size: 18px !important;
    }

    /* Hide homepage globe on 500px */
    .homepage-globe,.absolute.right-\[44px\] {
        display: none !important;
    }

    /* Hide footer elements on 500px */
    .footer-hide-on-500 {
        display: none !important;
    }

    .text-\[50px\]{ font-size: 24px !important;}
    .mb-16,.mb-20{ margin-bottom: 14px !important;}
    .gap-16{ gap: 14px !important;}
    #timeline-prev-year-nav,#timeline-next-year-nav{ display: none;}
    /* About page subpage banner adjustments for 500px */
    .subpage-banner .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .miccox{ width: 100%;}
    .p-12{ padding: 14px !important;}
    .subpage-banner .md\:w-2\/3.text-left {
        width: 100% !important;
        text-align: center !important;
    }

    .subpage-banner .subpage-breadcrumb {
        width: 100% !important;
        margin-top: 20px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .subpage-banner .subpage-breadcrumb > div {
        align-items: center !important;
    }
    .news-date-action {
        display: none !important;
    }
    .text-\[40px\]{ font-size: 25px !important;}
    .text-4xl{ font-size: 1.5rem !important;}
    .service-item .service-main-content{ padding: 0 20px 30px;}
    #services-section{ background: rgb(0 162 165 / var(--tw-bg-opacity, 1)) !important; padding: 0 !important;}
}

/* Mobile Bottom Nav adjustment for 16px text */