/*
Theme Name:   Kadence Child — DOTW
Description:  Kadence child theme for drinkoftheweek.com. Restores recipe field
              injection (ingredients, instructions, recipe_footer via postmeta)
              and floats the featured image alongside recipe content.
Template:     kadence
Version:      1.2.0
*/

/* ============================================================
   Recipe image — float is set inline in PHP (immune to wpautop);
   these rules add polish and handle the responsive override.
   ============================================================ */

.dotw-featured-img-wrap {
    /* Inline style owns float, max-width, and margin — don't override here. */
    padding: 0;
    line-height: 0;         /* removes phantom whitespace below the img */
}

.dotw-featured-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ============================================================
   Recipe body — block formatting context so the float is
   contained and doesn't escape into surrounding Kadence markup
   ============================================================ */

.dotw-recipe-body {
    margin-top: 1.5em;
}

/* Clearfix — clears the image float so footer/comments start cleanly */
.dotw-clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* ============================================================
   Ingredients
   ============================================================ */

.dotw-ingredients {
    margin-bottom: 1.25em;
}

.dotw-ingredients h4,
.dotw-instructions h4 {
    margin-top: 0;
    margin-bottom: 0.4em;
}

.dotw-ingredients ul.ingredients {
    margin: 0;
    padding-left: 1.4em;
    list-style: disc;
}

.dotw-ingredients ul.ingredients li {
    margin-bottom: 0.25em;
    padding: 0;
}

/* ============================================================
   Instructions
   ============================================================ */

.dotw-instructions {
    margin-bottom: 1.25em;
}

/* ============================================================
   Recipe footer
   ============================================================ */

.dotw-recipe-footer {
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px solid #e5e7eb;
    font-size: 0.9em;
    color: #6b7280;
}

/* ============================================================
   Responsive — stack image above text on narrow viewports.
   Overrides the inline float with !important because the inline
   style would otherwise win at this breakpoint.
   ============================================================ */

@media (max-width: 540px) {
    .dotw-featured-img-wrap {
        float: none !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 0 1.25em 0 !important;
    }
}