/* Layout Fixes CSS - Applied January 2025 */

/* ===================================
   1. TOOL SECTION FIXES
   =================================== */
.calculators {
    padding: 80px 0 20px 0 !important; /* Reduced bottom padding */
    background-color: #ffffff;
    height: auto !important; /* Ensure height adjusts to content */
    margin-bottom: 20px; /* Controlled margin */
}

/* Remove any fixed height from tool sections */
.calculator-grid {
    height: auto !important;
    margin-bottom: 2rem;
}

/* ===================================
   2. COMPARISON SECTION FIXES
   =================================== */
.comparison-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Fixed 3 columns */
    gap: 2rem;
    justify-items: center; /* Center items in grid cells */
}

/* Center items when less than 3 - modern approach */
@supports (selector(:has(*))) {
    .comparison-grid:has(:nth-child(-n+2):last-child) {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
        justify-content: center;
    }
}

/* Fallback for browsers without :has support */
.comparison-grid[data-items="1"],
.comparison-grid[data-items="2"] {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
    justify-content: center;
}

/* Fix comparison cards layout */
.comparison-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    justify-content: center;
}

/* ===================================
   3. MOBILE TABLE FIXES (Specific sections only)
   =================================== */
   
/* Make Breed-Based Feeding Guide tables scrollable on mobile */
@media (max-width: 768px) {
    #feeding-guide .feeding-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }
    
    #feeding-guide .feeding-table table {
        min-width: 600px !important; /* Prevent table from collapsing */
    }
    
    #feeding-guide .feeding-table th,
    #feeding-guide .feeding-table td {
        white-space: nowrap !important; /* Prevent text wrapping */
        font-size: 0.85rem !important;
        padding: 0.6rem !important;
    }
    
    /* Add scroll indicator */
    #feeding-guide .feeding-table::after {
        content: "← Scroll horizontally →";
        display: block;
        text-align: center;
        color: #718096;
        font-size: 0.75rem;
        margin-top: 0.5rem;
        font-style: italic;
    }
}

/* Make Quick Comparison Chart table scrollable on mobile */
@media (max-width: 768px) {
    .chart-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }
    
    .comparison-table {
        min-width: 500px !important; /* Prevent table from collapsing */
    }
    
    .comparison-table th,
    .comparison-table td {
        white-space: nowrap !important; /* Prevent text wrapping */
        font-size: 0.85rem !important;
        padding: 0.6rem !important;
    }
    
    /* Add scroll indicator */
    .chart-container::after {
        content: "← Scroll horizontally →";
        display: block;
        text-align: center;
        color: #718096;
        font-size: 0.75rem;
        margin-top: 0.5rem;
        font-style: italic;
    }
}

/* ===================================
   4. ADVANCED DOG CARE TOOLS SECTION
   =================================== */
#interactive-tools {
    padding: 60px 0 20px 0 !important; /* Reduced padding */
    height: auto !important;
    margin-bottom: 20px;
}

#interactive-tools .calculator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* ===================================
   5. BACK TO TOP BUTTON
   =================================== */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #68d391, #4fd1c7);
    color: white;
    border: none;
    cursor: pointer;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1000;
}

#back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #48bb78, #38b2ac);
}

#back-to-top.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #back-to-top {
        width: 45px;
        height: 45px;
        bottom: 15px;
        right: 15px;
        font-size: 18px;
    }
}

/* ===================================
   6. GOOGLE ADS - TEMPORARILY DISABLED
   =================================== */
.ads-disabled {
    display: none !important;
}

/* Hide all ad containers until AdSense approval */
.ad-container,
.ad-responsive,
[class*="google-ad"],
[id*="google-ad"] {
    display: none !important;
}

/* Comment out or remove these rules once AdSense is approved */

/* ===================================
   ADDITIONAL RESPONSIVE FIXES
   =================================== */
@media (max-width: 768px) {
    /* Improve mobile spacing */
    .calculators,
    #interactive-tools {
        padding: 40px 0 15px 0 !important;
    }
    
    .calculator-grid,
    .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    
    /* Ensure cards don't overflow on mobile */
    .calculator-card,
    .comparison-card,
    .food-type-card {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* ===================================
   SMOOTH SCROLL BEHAVIOR
   =================================== */
html {
    scroll-behavior: smooth;
}

/* iOS smooth scroll support */
body {
    -webkit-overflow-scrolling: touch;
}