/*
 Theme Name:   Cuisine Child - Annis Glutenfria
 Theme URI:    https://annisglutenfria.se
 Description:  Child theme for the Cuisine theme with custom recipe card shortcode
 Author:       Codan Creative
 Author URI:   https://codancreative.com
 Template:     cuisine
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  cuisine-child
*/

/* ==========================================================================
   Recipe Card Shortcode Styles
   
   The shortcode uses the same HTML structure and CSS classes as the parent
   theme's recipe list templates, so cards look identical. These styles
   provide proper spacing when embedded in post content.
   ========================================================================== */

/* Container spacing when embedded in post content */
.entry-content .recipe-card-shortcode-list,
.page-content .recipe-card-shortcode-list,
.post-content .recipe-card-shortcode-list {
    margin: 30px 0;
    padding: 0;
    list-style: none;
}

/* Reset any inherited list styles */
.recipe-card-shortcode-list li {
    list-style: none;
    margin-bottom: 25px;
}

/* Small layout (horizontal cards) - additional spacing */
.recipe-card-shortcode-list .small-post-list-item {
    margin-bottom: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.recipe-card-shortcode-list li:last-child .small-post-list-item {
    border-bottom: none;
    padding-bottom: 0;
}

/* Wide layout - proper spacing between cards */
.recipe-card-shortcode-list .wide-post-list-item {
    margin-bottom: 20px;
}

/* Ensure images don't break layout in post content */
.recipe-card-shortcode-list .post-list-item img.image {
    max-width: 100%;
    height: auto;
}

/* Responsive: ensure proper stacking on smaller screens */
@media (max-width: 768px) {
    .recipe-card-shortcode-list > li {
        width: 100% !important;
        margin-bottom: 25px;
    }
    
    /* Stack small layout vertically on mobile */
    .recipe-card-shortcode-list .small-post-list-item .row > div {
        width: 100% !important;
        margin-bottom: 15px;
    }
}

/* ==========================================================================
   Recipe Info Section - Temperature Field
   
   Custom styling for the cooking temperature field added by child theme.
   ========================================================================== */

/* 5-column layout for recipe info (when we have prep, cook, temp, servings, calories) */
.single-recipe-info .col-xlarge-2-4 {
    width: 20%;
    float: left;
    padding: 0 15px;
}

@media (max-width: 992px) {
    .single-recipe-info .col-xlarge-2-4 {
        width: 50%;
    }
}

@media (max-width: 576px) {
    .single-recipe-info .col-xlarge-2-4 {
        width: 100%;
    }
}

/* Temperature icon styling (using fire icon) */
.single-recipe-info .fa-fire {
    color: #e74c3c;
}