/**** recipe ****/
section.recipe {
    /* spacing */
    margin: 0 !important;
}

section.recipe * {
    /* spacing */
    margin: 0;
}

section.recipe .container {
    /* sizing */
    width: 100%;
    height: 100%;

    /* grid */
    display: grid;
    grid-template-columns: 300px 1fr;
}

/* sidebar */
section.recipe .sidebar {
    /* sizing */
    width: 300px;
    height: 100%;
    min-height: 75vh;

    /* spacing */
    padding: var(--header-width);

    /* styling */
    background-color: var(--secondary-color);

    /* flex */
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* transition*/
    transition: background-color var(--transition-duration) var(--transition-method), opacity var(--transition-duration) var(--transition-method);
}

section.recipe .sidebar .offset {
    /* sizing */
    height: 42px;
}

section.recipe .sidebar .author {
    /* flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

section.recipe .sidebar .author picture {
    /* flex */
    display: flex;
    justify-content: center;
    align-items: center;
}

section.recipe .sidebar .author img {
    /* sizing */
    max-width: 450px;
    width: 75%;
    aspect-ratio: 1/1;

    /* styling */
    border-radius: 50%;
    background-color: var(--tertiary-color);

    /* image */
    object-fit: cover;

    /* flex */
    display: flex;
    justify-content: center;
    align-items: center;

    /* text */
    text-align: center;
}

section.recipe .sidebar .author span {
    /* text */
    font-size: min(18px, max(3vw, 14px));
    font-weight: 700;
    line-height: 1;
    text-align: center;

    /* transition*/
    transition: color var(--transition-duration) var(--transition-method);

    /* styling */
    color: var(--primary-text-color);
}

section.recipe .sidebar .author span.small {
    /* text */
    font-size: min(12px, max(3vw, 8px));
    font-weight: 600;
    line-height: 1;
    text-align: center;

    /* transition*/
    transition: color var(--transition-duration) var(--transition-method);

    /* styling */
    color: var(--primary-text-color);
}

section.recipe .sidebar .ingredients {
    /* flex */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

section.recipe .sidebar h5 {
    /* styling */
    color: var(--primary-text-color);

    /* transition*/
    transition: color var(--transition-duration) var(--transition-method);
}

section.recipe .sidebar ul {
    /* list */
    list-style: inside;
    list-style-position: outside;
    padding: 0;
}

section.recipe .sidebar li {
    /* styling */
    color: var(--primary-text-color);

    /* transition*/
    transition: color var(--transition-duration) var(--transition-method);
}

@media (max-width: 1000px) {
    #recipe-nav-btn {
        display: block;
    }

    section.recipe .container {
        /* flex */
        display: flex;
    }

    section.recipe .sidebar {
        /* position */
        position: fixed;
        inset: 0;
        z-index: 998;

        /* sizing */
        width: 100vw !important;
        height: 100vh !important;
        overflow-x: hidden;
        overflow-y: scroll;

        /* hiding */
        opacity: 0;
        pointer-events: none;
    }

    section.recipe .sidebar.visible,
    section.recipe .sidebar:focus-within {
        /* hiding */
        opacity: 1;
        pointer-events: auto;
    }
}


/* content */
section.recipe .content {
    /* sizing */
    width: 100%;
    height: max-content;

    /* flex */
    display: flex;
    flex-direction: column;
    align-items: center;
}

section.recipe .content .header {
    /* sizing */
    width: 100%;
    height: 300px;

    /* styling */
    background-color: red;
}

section.recipe .content .header img {
    /* sizing */
    width: 100%;
    height: 100%;

    /* image */
    object-fit: cover;
}

section.recipe .content .spacer {
    /* sizing */
    width: 100%;
    height: max-content;

    /* spacing */
    padding: 10px 20px;

    /* flex */
    display: flex;
    flex-direction: column;
}

section.recipe .content .about {
    /* sizing */
    width: 100%;
    height: max-content;

    /* flex */
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    /* spacing */
    margin-bottom: 30px;
}

section.recipe .content .about .headers {
    /* flex */
    display: flex;
    flex-direction: column;
}

section.recipe .content .about .headers h2 {
    /* text */
    font-size: min(35px, max(4vw, 20px));
    font-weight: 800;
    line-height: 1;
    text-align: left;
    transition: color var(--transition-duration) var(--transition-method);

    /* styling */
    color: var(--primary-text-color);
}

section.recipe .content .about .headers h3 {
    /* text */
    font-size: min(18px, max(3vw, 14px));
    font-weight: 700;
    line-height: 1;
    text-align: left;
    transition: color var(--transition-duration) var(--transition-method);

    /* styling */
    color: var(--primary-text-color);
}

section.recipe .content .about .info {
    /* flex */
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* styling */
    color: var(--primary-text-color);
}

section.recipe .content .about .info .data {
    /* flex */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 20px;
}

section.recipe .content .about .info .data .part {
    /* flex */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    /* text */
    text-align: right;
}

section.recipe .content .about .info .quick {
    /* flex */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

section.recipe .content .about .info .quick h4 {
    /* text */
    text-align: right;
}

section.recipe .content .about .info .quick ul {
    /* spacing */
    margin: 0;
    padding: 0;

    /* flex */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    /* list */
    list-style: none;
}

section.recipe .content .about .info .quick ul a {
    /* text */
    color: inherit;
}

/* instructions */
section.recipe .content .instructions {
    /* spacing */
    margin-bottom: 100px;
}

section.recipe .content .instructions h4 {
    /* text */
    font-size: min(22px, max(4vw, 16px));
    font-weight: 700;
    line-height: 1;
    text-align: left;
    transition: color var(--transition-duration) var(--transition-method);

    /* styling */
    color: var(--primary-text-color);

    /* spacing */
    margin-bottom: 10px;
}

section.recipe .content .instructions ul {
    /* list */
    list-style: decimal-leading-zero;


    /* flex */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

section.recipe .content .instructions li {
    /* text */
    font-size: min(16px, max(3vw, 12px));
    font-weight: 400;
    line-height: 1;
    text-align: left;
    transition: color var(--transition-duration) var(--transition-method);

    /* styling */
    color: var(--primary-text-color);
}

@media (max-width: 650px) {
    section.recipe .content .about {
        /* flex */
        flex-direction: column;
        gap: 5px;
    }

    section.recipe .content .about .info .data {
        justify-content: left;
    }

    section.recipe .content .about .info .quick h4 {
        /* text */
        text-align: left;
    }

    section.recipe .content .about .info .data .part {
        /* flex */
        justify-content: left;

        /* text */
        text-align: left;
    }
}