/* Circle of Māmā — Recipe card styling
   -------------------------------------------------------------------
   These classes are only for the pieces the shortcodes render
   (tagline, ingredients box, method box, serve-with / freezer-tip
   boxes). The decorative background, leaves and photo are expected
   to live in the Divi template itself.
 
   Colours and fonts are set as CSS variables at the top (on :root, so
   they're available to the print button too, not just the boxes) --
   easy to nudge to match the rest of the site without hunting through
   the rest of the file. */
 
:root {
    --com-pink:        #D28179;
    --com-pink-soft:   #fbeae5;
    --com-green:       #D28179;
    --com-green-soft:  #fbeae5;
    --com-freeze:      #a5d6f1;
    --com-freeze-soft: #f1faff;
    --com-gold:        #D28179;
    --com-gold-soft:   #fbeae5;
    --com-heading-font: 'Playfair Display', Georgia, "Times New Roman", serif;
    --com-body-font:    'Inter', Helvetica, Arial, Lucida, sans-serif;
    --com-text:         #3c3b2e;
}
.com-recipe-card,
.com-recipe-box {
    box-sizing: border-box;
}
.com-recipe-card *,
.com-recipe-box * {
    box-sizing: border-box;
}
 
/* ---- tagline ---- */
.com-recipe-tagline {
    display: inline-block;
    font-family: var(--com-body-font);
    font-style: italic;
    font-size: 1.15em;
    color: #7a6a5a;
    background: var(--com-pink-soft);
    padding: 0.5em 1.25em;
    border-radius: 999px;
    margin: 0 0 1.5em;
}
 
/* ---- layout grids ---- */
.com-recipe-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-bottom: 1.5em;
}
.com-recipe-grid--main > .com-recipe-box {
    flex: 1 1 320px;
}
.com-recipe-grid--footer > .com-recipe-box {
    flex: 1 1 240px;
}
 
/* ---- shared box shell ---- */
.com-recipe-box {
    font-family: var(--com-body-font);
    color: var(--com-text);
    border-radius: 18px;
    padding: 1.5em 1.6em;
    border: 1px solid rgba(0,0,0,0.05);
}
.com-recipe-box--ingredients { background: var(--com-green-soft); }
.com-recipe-box--method      { background: #fff; }
.com-recipe-box--pink        { background: #fff; }
.com-recipe-box--green       { background: var(--com-green-soft); }
.com-recipe-box--freeze       { background: var(--com-freeze-soft); }
.com-recipe-box--small       { padding: 1.25em 1.4em; }
 
.com-recipe-box__head {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 1em;
}
.com-recipe-box h3, .com-recipe-box h4 {
    font-family: var(--com-heading-font);
    margin: 0;
    line-height: 1.25;
    color:#d28179;
}
.com-recipe-box h3 { font-size: 1.3em; }
.com-recipe-box h4 { font-size: 1.1em; }
.com-recipe-box .com-recipe-count {
    font-weight: normal;
    font-size: 0.75em;
    opacity: 0.75;
}
 
.com-recipe-box__icon {
    flex: 0 0 auto;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.com-recipe-box__icon i { font-size: 1.1em; line-height: 1; }
.com-recipe-box__icon--green { background: var(--com-green); }
.com-recipe-box__icon--freeze { background: var(--com-freeze); }
.com-recipe-box__icon--gold  { background: var(--com-gold); }
.com-recipe-box__icon--pink  { background: var(--com-pink); }
 
/* ---- ingredients list ---- */
.com-recipe-ingredient-list {
    list-style: none!important;
    margin: 0;
    padding: 0!important;
}
.com-recipe-ingredient-list li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: 0.6em;
    line-height: 1.4;
}
.com-recipe-ingredient-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: var(--com-gold);
}

/* ---- a "just a comment" row -- a note like "(if you want to stretch
   or boost nutrition)" sitting in the ingredients list without looking
   like an actual ingredient: no bullet dot, shown in italics. ---- */
.com-recipe-ingredient-list li.com-recipe-ingredient-note {
    font-style: italic;
    color: #7a6a5a;
    opacity: 0.85;
    padding-left: 0;
}
.com-recipe-ingredient-list li.com-recipe-ingredient-note::before {
    content: none;
}
 
/* ---- method steps ---- */
.com-recipe-method-list {
    list-style: none;
    margin: 0;
    padding: 0!important;
}
.com-recipe-step {
    display: flex;
    gap: 1em;
    position: relative;
    padding-bottom: 1.2em;
}
.com-recipe-step:last-child { padding-bottom: 0; }
.com-recipe-step::before {
    /* dotted connector line running down through the numbers */
    content: "";
    position: absolute;
    left: 1.1em;
    top: 2.2em;
    bottom: 0;
    border-left: 2px dotted rgba(0,0,0,0.15);
}
.com-recipe-step:last-child::before { display: none; }
.com-recipe-step__num {
    flex: 0 0 auto;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background: var(--com-pink);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.com-recipe-step__text {
    padding-top: 0.3em;
    line-height: 1.5;
}

/* ---- a "just a comment" row -- a note like "(optional but
   recommended)" sitting between steps without taking a number. Keeps
   the same indent as a numbered step (via the blank placeholder
   standing in for the circle) so it still reads as part of the list. ---- */
.com-recipe-step--comment .com-recipe-step__num--blank {
    display: none;
}
.com-recipe-step__text--comment {
    font-style: italic;
    color: #7a6a5a;
    opacity: 0.85;
}
 
/* ---- small boxes (serve with / freezer tip) ---- */
.com-recipe-box--small p {
    margin: 0;
}
 
/* ---- optional ingredient / method sections, e.g. "Filling" / "Topping"
   on a recipe like cottage pie. Only appears at all on a recipe where
   you've actually filled in a Section on at least one row -- otherwise
   nothing below applies and the box looks exactly as it always has. ---- */
.com-recipe-ingredient-group,
.com-recipe-method-group {
    margin-bottom: 1.25em;
}
.com-recipe-ingredient-group:last-child,
.com-recipe-method-group:last-child {
    margin-bottom: 0;
}
.com-recipe-box .com-recipe-group-title {
    margin: 0;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
 
/* ---- narrow screens ---- */
@media (max-width: 480px) {
    .com-recipe-grid { gap: 1em; }
    .com-recipe-box { padding: 1.2em 1.2em; }
}
 
/* ---- print button (on-screen only -- hidden again below when printing) ---- */
.com-recipe-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-size: 1em;
    font-weight: 300;
    color: #fff;
    background: var(--com-green);
    border: none;
    border-radius: 999px;
    padding: 0.65em 1.5em;
    cursor: pointer;
    margin: 0 0 1.5em;
}
.com-recipe-print-btn:hover,
.com-recipe-print-btn:focus {
    background: var(--com-gold);
    color: #fff;
}
.com-recipe-print-btn i { font-size: 0.95em; }
 
/* ---- reusable escape hatch --------------------------------------
   Add a CSS Class of "no-print" to any Divi row/section/module
   (Advanced -> CSS ID & Classes) to hide it when printing, without
   needing any code. ------------------------------------------------ */
@media print {
    .no-print { display: none !important; }
}
 
/* ---- turning "Print Recipe" into a clean recipe-card PDF ----------
   Scoped to body.single-com_recipe so it only affects recipe pages,
   never anything else on the site. Strips the site header/footer,
   the "Return to Recipes" button, and the decorative background on
   the title banner, leaving just the title, photo and recipe boxes. */
@media print {
    body.single-com_recipe #wpadminbar,
    body.single-com_recipe header.et-l--header,
    body.single-com_recipe footer.et-l--footer,
    body.single-com_recipe .et_pb_button_module_wrapper,
    body.single-com_recipe .et_pb_row_2_tb_body,
    body.single-com_recipe .et_pb_section_1_tb_body,
    body.single-com_recipe .com-recipe-print-btn,
    body.single-com_recipe .et_pb_header_content_wrapper, 
    body.single-com_recipe .com-recipe-box__icon {
        display: none !important;
    }
    body.single-com_recipe,
    body.single-com_recipe .et_pb_section {
        background: #fff !important;
    }
    body.single-com_recipe .com-recipe-box h4 {
        padding:0!important;
    }
    
    body.single-com_recipe .et_pb_fullwidth_header_container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    body.single-com_recipe .et_pb_fullwidth_header {
        padding:0!important;
    }
    
     body.single-com_recipe .header-content {
         margin:0!important;
         padding:0!important;
     }
     
    /* ---- reclaim Divi's 80%-width gutter ----
       Divi's gutter setting keeps rows at 80% width, auto-centred --
       comfortable for reading on screen, but on an already-narrow
       printed page it's most of what was making the margins look
       oversized. Let the row use the full page width when printing. */
    body.single-com_recipe .et_pb_row_1_tb_body {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
 
 
    body.single-com_recipe .et_pb_module_header {
        font-size:20px!important;
    }
    
     body.single-com_recipe .et_pb_fullwidth_header_subhead {
        font-size:14px!important;
        padding:0!important;
    }
    /* ---- keep Ingredients / Method side by side ----
       At a printed page's width, Divi's own responsive breakpoint
       treats it like a tablet and stacks the two columns full-width,
       one above the other -- which is what was pushing this to 3
       (then 2) pages instead of 1: everything was effectively being
       shown in a single narrow column twice as tall. Forcing a plain
       flex row here keeps them side by side regardless of page width. */
    body.single-com_recipe .et_pb_row_1_tb_body {
        display: flex !important;
    }
    body.single-com_recipe .et_pb_row_1_tb_body > .et_pb_column {
        float: none !important;
        width: auto !important;
        flex: 1 1 0 !important;
    }
    body.single-com_recipe .et_pb_column_1_tb_body {
        margin-right: 20px !important;
    }
 
    /* ---- squeeze out Divi's on-screen breathing room ----
       On screen the title banner alone carries 70px+130px of top/
       bottom padding to look like a hero band; sections and rows
       each add their own padding on top of that. None of it is
       needed on paper. */
    body.single-com_recipe .recipe-head {
        background: #fff !important;
        padding-top: 0 !important;
        padding-bottom: 6px !important;
    }
    body.single-com_recipe .et_pb_section {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    body.single-com_recipe .et_pb_row {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    body.single-com_recipe .et_pb_column > .et_pb_module {
        margin-bottom: 8px !important;
    }
 
    /* ---- tighten the boxes themselves a bit further ---- */
    body.single-com_recipe .com-recipe-box {
        background: #fff !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        padding: 0.85em 1em !important;
        break-inside: avoid;
        page-break-inside: avoid;
        font-size:12px!important;
    }
    body.single-com_recipe .com-recipe-box__head {
        margin-bottom: 0em !important;
    }
    body.single-com_recipe .com-recipe-ingredient-list li {
        margin-bottom: 0.25em !important;
        font-size:12px!important;
    }
    body.single-com_recipe .com-recipe-step {
        padding-bottom: 0.5em !important;
        font-size:12px!important;
    }
    body.single-com_recipe .com-recipe-grid {
        gap: 0.75em !important;
        margin-bottom: 0.5em !important;
    }
    body.single-com_recipe .com-recipe-tagline {
        background: none !important;
        padding: 0 !important;
        margin-bottom: 0.3em !important;
    }
    body.single-com_recipe .et_pb_image_0_tb_body img {
        max-height: 160px !important;
        width: auto !important;
        margin: 0 auto !important;
    }
}