/* _______________________ Title & Featured Image _______________________ */


.is-style-title-and-featured-image,
.editor-styles-wrapper .is-style-title-and-featured-image {
    position: relative;
    margin: 5vh -2vw 0;
    z-index: 1000;
}
@media only screen and (max-width: 600px) {
    .is-style-title-and-featured-image,
    .editor-styles-wrapper .is-style-title-and-featured-image {
        position: relative;
        margin: 5vh -5vw 0;
        z-index: 1000;
    }
}

.is-style-title-and-featured-image h1,
.editor-styles-wrapper .is-style-title-and-featured-image h1 {
    color: var(--dark-pink);
    font-family: 'Recoleta', sans-serif;
    font-size: min(max(24px, 4.6vw), 72px);
    text-align: center;
    padding: 6vh 47% 4vh 2%;
}

.editor-styles-wrapper .image-button-group>div, 
.image-button-group>div {
    display: flex;
    flex-direction: column;
    width: min(46vw, 700px);
    height: auto;
    max-height: 95vh;
    position: absolute;
    left: 55%;
    padding-top: 0;
    margin-top: -10vh;  
    overflow: hidden;
}

.editor-styles-wrapper .image-button-group img,
.image-button-group img {
    object-fit: contain;
}

.editor-styles-wrapper .print-button,
.print-button {
    padding: 1vw 2vw;
    margin: 5vw auto 0;
    border: 1px solid var(--light-pink);
    border-radius: 0.4vw;
    color: var(--dark-brown);
    background-color: var(--background-color);
    font-size: min(max(8px, 1.4vw), 32px);
    font-family: 'Recoleta', sans-serif;
    transform: translateX(calc(0.225*min(86vw, 1200px) - 0.5*min(46vw, 700px)));

}
@media only screen and (max-width: 600px) {
    .editor-styles-wrapper .print-button,
    .print-button {
        transform: translateX(calc(0.225*min(92vw, 1200px) - 0.5*min(46vw, 700px)));
    }
}

.editor-styles-wrapper .print-button>div,
.print-button>div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1vw;
}

.editor-styles-wrapper .print-button svg,
.print-button svg {
    width: 2vw;
    height: 2vw;
    margin-top: -0.6ex;
}


/* _______________________ Ingredients Section _______________________ */

.is-style-ingredients,
.editor-styles-wrapper .is-style-ingredients {
    margin-left: -2vw;
    margin-right: -2vw;
    padding: 0 0 4vh 0;
    background-color: var(--light-pink);
    font-size: min(max(14px, 2vw), 32px);
    color: var(--dark-brown);

    margin-bottom: 8%;
    font-family: 'Junicode', sans-serif;
    font-weight: 400;
}
@media only screen and (max-width: 600px) {
    .is-style-ingredients,
    .editor-styles-wrapper .is-style-ingredients {
        margin-left: -5vw;
        margin-right: -5vw;
        padding: 0 0 1vh 0;
    }
}


.is-style-ingredients h2,
.editor-styles-wrapper .is-style-ingredients h2 {
    font-size: min(max(15px, 2vw), 32px);
    font-family: 'Recoleta', sans-serif;
    text-align: center;
    padding: 6vh 47% 6vh 2%;
}

.is-style-ingredients h3,
.editor-styles-wrapper .is-style-ingredients h3 {
    font-size: min(max(16px, 2.3vw), 48px);
    margin-bottom: 0.8em;
    margin-left: 6%;
    font-weight: bold;
}

.is-style-ingredients ul,
.editor-styles-wrapper .is-style-ingredients ul {
    padding-left: 1.5em;
    text-indent: -1.5em;
    list-style-type: none;
    padding-right: 47%;
    margin-bottom: 2em;
    margin-left: 6%;
}

@media only screen and (max-width: 600px) {
    .is-style-ingredients ul,
    .editor-styles-wrapper .is-style-ingredients ul {
        padding-left: 0em;
        text-indent: -0.5em;
    }

    .is-style-ingredients h3,
    .editor-styles-wrapper .is-style-ingredients h3 {
        text-indent: -0.5em;
    }
}

.is-style-ingredients li strong,
.editor-styles-wrapper .is-style-ingredients li strong {
    font-weight: 600;
    padding: 60px;
    font-size: min(max(14px, 2vw), 32px);
}



/* _______________________ Process Section _______________________ */
@media only screen and (max-width: 600px) {
    .is-style-recipe-section,
    .editor-styles-wrapper .is-style-recipe-section {
        margin-left: -2vw;
        margin-right: -2vw;
    }
}

/* ----- Procedimento ---- */
.is-style-recipe-section .wp-block-columns,
.editor-styles-wrapper .is-style-recipe-section .wp-block-columns {
    gap: 5.3vw;
    padding: 12% 0 8%;
    align-items: center;
    width: 100vw;
    margin-left: calc((100vw - 100%) / (-2));
}

.is-style-recipe-section .wp-block-columns div:first-child,
.editor-styles-wrapper .is-style-recipe-section .wp-block-columns div:first-child {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc((100vw - min(80vw, 1200px))/2 + 6%);
}

.is-style-recipe-section .wp-block-columns hr,
.editor-styles-wrapper .is-style-recipe-section .wp-block-columns hr {
    border-top: 1px solid var(--dark-brown);
    opacity: 1;
}

.is-style-recipe-section .wp-block-columns div:nth-child(2),
.editor-styles-wrapper .is-style-recipe-section .wp-block-columns div:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: content;
}

/* ---- */

/* Title Styling */
.is-style-recipe-section h2,
.editor-styles-wrapper .is-style-recipe-section h2 {
    color: var(--dark-brown);
    font-family: 'Recoleta', sans-serif;
    font-size: min(max(18px, 3.2vw), 48px);
    text-align: center;
    margin: 0;
}

/* Subtitle Styling */
.is-style-recipe-section h3,
.editor-styles-wrapper .is-style-recipe-section h3 {

    font-size: min(max(16px, 2.2vw), 36px);
    color: var(--light-brown);
    font-family: 'Junicode', sans-serif;
    font-weight: 600;
    padding: 0 3% 4.6%;
}

/* text Styling */
.is-style-recipe-section p,
.editor-styles-wrapper .is-style-recipe-section p {
    font-size: min(max(14px, 2vw), 32px);
    color: var(--light-brown);
    font-family: 'Junicode', sans-serif;
    font-weight: 400;

    padding: 0;
    margin-bottom: 6%;
}



/* ___UPDC Symbol */

.editor-styles-wrapper .updc-symbol,
.updc-symbol {
    margin: 20vh auto 30vh;
    padding: 0;
    scale: 0.5;
    width: fit-content;
}

@media only screen and (max-width: 600px) {
    .editor-styles-wrapper .updc-symbol,
    .updc-symbol {
        margin-top: 10vh;
        scale: 0.3;
    }
}


.editor-styles-wrapper #recipe .cta,
#recipe .cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto 8vh;
    gap: 2vw;
    color: var(--dark-brown);
    text-align: justify;
    font-family: 'Junicode', sans-serif;
    font-size: min(max(10px, 1.8vw), 24px);
}

@media only screen and (max-width: 600px) {
    .editor-styles-wrapper #recipe .cta,
    #recipe .cta {
        margin-left: -2vw;
            margin-right: -2vw;
    }
}

.editor-styles-wrapper #recipe .cta a,
#recipe .cta a {
    text-decoration: none;
    color: var(--dark-brown);
    font-weight: bold;
}

.editor-styles-wrapper #recipe .cta img,
#recipe .cta img {
    height: 40px;
    width: auto;
}