/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.2
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* Default Desktop Layout */
.product-card {
    display: grid;
    grid-template-columns: 50% 50%; /* Two equal-width columns */
    gap: 20px;
    padding: 20px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    align-items: start;
    margin-top: 3%;
    margin-bottom: 10%;
}

.product-content {
    grid-column: 1; /* Content will be in the first column */
    padding: 4% 5% 2% 5%;
}

.product-image {
    grid-column: 2; /* Image will be in the second column */
    justify-self: center;
}

.product-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Button Styling */
.product-button {
    font-family: inherit;
    font-weight: bold;
    font-size: 15px;
    padding: 10px 15px;
    background: #ffd814 !important;
    color: black !important;
    margin: 10px 0;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    display: inline-block;
    border: none;
    border-radius: 5px;
    width: 250px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.product-button:hover {
    background: #ffa500; /* Gradient or different color for hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Deep shadow on hover */
}

.product-title {
    font-family: inherit !important;
    font-weight: bold !important;
    font-size: 30px !important;
    color: #ad0000 !important;
    line-height: 1.5;
    margin: 10px 0 !important;
    text-align: left;
    text-decoration: none !important;
    transition: 0.25s ease;
}

.product-pros, .product-cons {
    margin-top: 5%;
    margin-bottom: 5%;
}

/* Responsive for Tablets and Smaller Screens */
@media (max-width: 1024px) {
    .product-card {
        grid-template-columns: 100%; /* Switch to a single column layout */
        text-align: center; /* Center text and image */
    }

    .product-image {
        grid-column: 1; /* Ensure the image takes full width */
        margin-bottom: 20px; /* Add some space between image and content */
    }

    .product-content {
        grid-column: 1; /* Content takes full width */
        text-align: center; /* Center text */
    }
}

/* Extra Small Screens */
@media (max-width: 768px) {
    .product-card {
        padding: 10px; /* Reduced padding for small screens */
        grid-template-columns: 100%; /* Ensure it's one column on mobile */
    }

    .product-button {
        width: 100%; /* Full width button on mobile */
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 44px; /* Apple's minimum tap target */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 20px;
    }
    
    .product-title {
        font-size: 26px !important; /* Slightly smaller on mobile */
        line-height: 1.3;
    }
}

/* SEO & Performance Enhancements */

/* Last Updated Notice */
.last-updated {
    margin: 15px 0;
    padding: 12px;
    background: #f0f7ff;
    border-left: 4px solid #0073aa;
    font-size: 14px;
    border-radius: 0 6px 6px 0;
    color: #333;
}

/* Enhanced Product Pros/Cons for Better UX */
.product-pros {
    background: #e8f5e8;
    border-left: 4px solid #4caf50;
    padding: 15px;
    border-radius: 6px;
    margin-top: 5%;
    margin-bottom: 5%;
}

.product-cons {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px;
    border-radius: 6px;
    margin-top: 5%;
    margin-bottom: 5%;
}

.product-pros h3,
.product-cons h3 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #333;
    font-weight: 600;
}

/* Better Focus States for Accessibility */
.product-button:focus,
.product-title:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Author Bio Enhancement */
.author-bio {
    background: #f0f7ff;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #cce7ff;
}

.author-bio h4 {
    color: #0073aa;
    margin: 0 0 10px 0;
    font-size: 1.2em;
}

/* Category Description Enhancement */
.category-description {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    border-left: 4px solid #0073aa;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .last-updated {
        font-size: 13px;
        padding: 10px;
        margin: 10px 0;
    }
    
    .product-pros,
    .product-cons {
        padding: 12px;
        margin: 15px 0;
        font-size: 15px;
        line-height: 1.5;
    }
}