/* 
* Pawtica - Premium Pet Toys & Supplies Store
* Responsive Stylesheet
*/

/* Base responsive styles */
@media (max-width: 1400px) {
    :root {
        /* Font Sizes */
        --fs-h1: 3rem;
        --fs-h2: 2.25rem;
        --fs-h3: 1.5rem;
        --fs-h4: 1.2rem;
        --fs-h5: 1.05rem;
    }
    
    .container {
        max-width: 100%;
        padding: 0 var(--spacing-xl);
    }
}

/* Tablet Styles */
@media (max-width: 992px) {
    :root {
        /* Font Sizes */
        --fs-h1: 2.5rem;
        --fs-h2: 2rem;
        --fs-h3: 1.25rem;
        --fs-h4: 1.1rem;
        --fs-h5: 1rem;
        --fs-h6: 0.95rem;
        --fs-p: 0.95rem;
        --fs-small: 0.85rem;
        --fs-span: 0.95rem;
        --fs-a: 0.95rem;
        --fs-li: 0.95rem;
        --fs-button: 0.85rem;
        --fs-label: 0.95rem;
        --fs-input: 0.95rem;
    }

    /* Header & Navigation */
    .desktop-nav {
        display: none;
    }

    .burger-menu {
        display: block;
    }

    .mobile-nav {
        display: block;
    }
    
    /* Hero Section */
    .hero-section {
        min-height: auto;
        padding: 120px 0 80px;
    }
    
    .hero-section .container {
        flex-direction: column;
    }
    
    .hero-content {
        text-align: center;
        margin-bottom: var(--spacing-xl);
    }
    
    .hero-content h2 {
    }
    
    .hero-content p {
        margin: 0 auto var(--spacing-xl);
    }
    
    /* Products Section */
    .product-category {
        flex-direction: column;
        gap:0px;
    }

    .category-content{
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .category-content h3::after, .reverse .category-content h3::after{
        left: 50%;
        transform: translateX(-50%);
    }
    
    .product-category.reverse {
        flex-direction: column-reverse;
    }
    
    .category-content {
        padding: var(--spacing-lg) 0;
    }
    
    /* Special Offers Section */
    .offer-slide {
        flex-direction: column;
    }
    
    .offer-image img {
        max-height: 300px;
        width: 100%;
        object-fit: cover;
    }
    
    .offer-content{
        padding: 20px;
    }
    /* Pet Guides Section */
    .tab-content.active {
        flex-direction: column;
        gap:0px;
    }
    
    .guide-image {
        margin-bottom: var(--spacing-lg);
    }
    
    /* FAQ Section */
    .faq-container {
        flex-direction: column;
    }
    
    /* Contact Section */
    .contact-container {
        flex-direction: column;
    }
    
    .contact-info {
        margin-bottom: var(--spacing-xl);
        padding-right: 0;
    }
    
    /* Footer */
    .footer-content {
        flex-wrap: wrap;
    }
    
    .footer-column {
        flex: 0 0 calc(50% - var(--spacing-lg));
        margin-bottom: var(--spacing-xl);
    }
    
    .brand-column {
        flex: 0 0 100%;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
}

/* Mobile Styles */
@media (max-width: 576px) {
    :root {
        /* Font Sizes */
        --fs-h1: 2rem;
        --fs-h2: 1.75rem;
        --fs-h3: 1.25rem;
        --fs-h4: 1rem;
        --fs-h5: 0.95rem;
        --fs-h6: 0.9rem;
        --fs-p: 0.9rem;
        --fs-small: 0.8rem;
        --fs-span: 0.9rem;
        --fs-a: 0.9rem;
        --fs-li: 0.9rem;
        --fs-button: 0.8rem;
        --fs-label: 0.9rem;
        --fs-input: 0.9rem;
    }
    
    /* Container */
    .container {
        padding: 0 var(--spacing-lg);
    }
    
    /* Section Spacing */
    section {
        padding: var(--spacing-xl) 0;
    }
    
    /* Hero Section */
    
    /* Products Section */
    
    /* Special Offers Section */
    .offer-content {
        padding: var(--spacing-lg);
    }
    
    .offer-details {
        flex-wrap: wrap;
    }
    
    /* Testimonials */
    
    /* FAQ Section */
    
    /* Contact Section */
    
    /* Footer */
    .footer-column,.footer-contact, .footer-content,.footer-contact li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer-column h3::after{
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Adjustments for better mobile experience */
@media (max-width: 360px) {
    .btn-primary, .btn-secondary {
        width: 100%;
        text-align: center;
    }
    
    .offer-details {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .guide-tabs{
        flex-direction: column;
    }
    
    .hex-shape {
        width: 120px;
        height: 120px;
    }
}