/* ========================================
   Riyadh Fireworks - Auto Responsive
   Modern CSS Approach
   ======================================== */

/* Auto-scaling Typography with clamp() */
:root {
    /* Auto-scaling font sizes - grows/shrinks automatically */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --fs-md: clamp(1.125rem, 1rem + 0.65vw, 1.5rem);
    --fs-lg: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
    --fs-xl: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
    --fs-2xl: clamp(2rem, 1.5rem + 2.5vw, 5rem);
    
    /* Auto-scaling spacing */
    --sp-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --sp-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
    --sp-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --sp-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --sp-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    
    /* Auto container width */
    --container-width: min(95%, 1400px);
}

/* Apply auto-scaling typography */
html {
    font-size: var(--fs-base);
}

/* Auto container - never wider than screen */
.container {
    width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--sp-md);
}

/* Hero auto-scaling */
.hero-title {
    font-size: var(--fs-2xl);
    line-height: 1.2;
}

.hero-description {
    font-size: var(--fs-md);
}

.section-title {
    font-size: var(--fs-xl);
}

.section-subtitle {
    font-size: var(--fs-sm);
}

/* Auto-responsive grids */
.products-grid,
.certificates-grid,
.services-grid {
    display: grid;
    gap: var(--sp-lg);
    /* Auto-fit: creates as many columns as fit */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Smaller cards on mobile */
@media (max-width: 480px) {
    .products-grid,
    .certificates-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* Two columns on medium screens */
@media (min-width: 481px) and (max-width: 768px) {
    .products-grid,
    .certificates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Areas grid auto */
.areas-grid {
    display: grid;
    gap: var(--sp-sm);
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* Flex layouts auto-wrap */
.hero-features,
.trust-badges,
.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
    justify-content: center;
    align-items: center;
}

/* Buttons auto-size */
.btn {
    padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-base);
}

.btn-large {
    padding: var(--sp-md) var(--sp-lg);
    font-size: var(--fs-md);
}

/* Cards auto-padding */
.product-card,
.certificate-card,
.service-card,
.review-card {
    padding: var(--sp-md);
}

/* Auto-spacing for sections */
section {
    padding-block: var(--sp-xl);
}

/* Images auto-fit */
img {
    max-width: 100%;
    height: auto;
}

/* Top Bar - Responsive */
@media (max-width: 992px) {
    .top-bar-content {
        gap: 6px;
    }

    .top-bar a {
        margin-left: 14px;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .top-bar {
        padding: 6px 0;
    }

    .top-bar-content {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .top-bar a {
        margin-left: 10px;
        font-size: 0.8rem;
    }

    .top-bar .delivery-info {
        font-size: 0.75rem;
        width: 100%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Nav responsive */
    .logo {
        font-size: 1.2rem;
    }

    .logo i {
        font-size: 1.4rem;
    }

    .nav-menu {
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .top-bar-content {
        justify-content: center;
    }

    .top-bar .contact-info {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .top-bar .delivery-info {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .top-bar {
        padding: 4px 0;
    }

    .top-bar-content {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .top-bar .contact-info {
        gap: 6px;
    }

    .top-bar a {
        margin-left: 0;
        font-size: 0.75rem;
    }

    .top-bar i {
        margin-left: 3px;
        font-size: 0.7rem;
    }

    .top-bar .delivery-info {
        font-size: 0.65rem;
    }
}

@media (max-width: 360px) {
    .top-bar a {
        font-size: 0.65rem;
    }

    .top-bar .delivery-info {
        font-size: 0.6rem;
    }
}

/* Mobile menu - only show on small screens */
.mobile-menu-toggle {
    display: none;
}

@media (max-width: 992px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-menu {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--dark-bg);
        flex-direction: column;
        padding: var(--sp-xl);
        z-index: 100;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-cta {
        display: none;
    }
}

/* Floating buttons auto-position */
.whatsapp-float {
    width: clamp(45px, 10vw, 60px);
    height: clamp(45px, 10vw, 60px);
    font-size: clamp(20px, 5vw, 28px);
    bottom: var(--sp-md);
    left: var(--sp-md);
}

.quick-order-btn {
    padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-sm);
    bottom: var(--sp-md);
    right: var(--sp-md);
}

/* Hide text on very small buttons */
@media (max-width: 400px) {
    .quick-order-btn span {
        display: none;
    }
}

/* Auto-adjust hero padding */
.hero {
    padding-top: clamp(80px, 15vh, 120px);
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
}

/* Landscape mode fixes */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-bottom: var(--sp-lg);
    }
    
    .scroll-down {
        display: none;
    }
}

/* Notch support */
@supports (padding-top: env(safe-area-inset-top)) {
    .header {
        padding-top: env(safe-area-inset-top);
    }
    
    .hero {
        padding-top: calc(100px + env(safe-area-inset-top));
    }
}

/* Ultra-wide screens */
@media (min-width: 2000px) {
    .container {
        --container-width: min(90%, 1600px);
    }
}