/* =========================================================
   THINGS I'VE MADE
   page-specific styles
   ========================================================= */


/* =========================================================
   RECIPE LIST
   ========================================================= */

.recipe-list {

    margin: 12px 0 20px;

}


/* =========================================================
   RECIPE ENTRIES
   ========================================================= */

.recipe-entry {

    margin: 0 0 9px;

    background:
        rgba(177, 189, 139, .10);

    border:
        1px solid
        rgba(97, 112, 76, .35);

    border-radius: 4px;

    overflow: hidden;

}


/* =========================================================
   RECIPE TITLE / SUMMARY
   ========================================================= */

.recipe-entry summary {

    position: relative;

    display: block;

    padding:
        10px
        34px
        9px
        14px;

    color: var(--forest);

    cursor:
        url("../images/nat801.cur") 0 0,
        pointer;

    list-style: none;

}


/* Remove the browser's default triangle */

.recipe-entry summary::-webkit-details-marker {

    display: none;

}


.recipe-entry summary::marker {

    display: none;

}


/* Little decorative bullet */

.recipe-entry summary::before {

    content: "4";

    position: absolute;

    left: -1px;

    top: 12px;

    color: var(--moss);

    font-family:
        "Go Around the Books";

    font-size: 14px;

    line-height: 1;

}


/* Custom opening arrow */

.recipe-entry summary::after {

    content: "›";

    position: absolute;

    right: 13px;

    top: 50%;

    color: var(--moss);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    line-height: 1;

    transform:
        translateY(-50%);

    transition:
        transform .15s ease,
        color .15s ease;

}


/* Rotate arrow when recipe is open */

.recipe-entry[open] summary::after {

    transform:
        translateY(-50%)
        rotate(90deg);

    color: var(--rust);

}


/* Recipe name */

.recipe-title {

    display: block;

    padding-left: 8px;

    color: var(--brown);

    font-family:
        "MossyNewt",
        Georgia,
        serif;

    font-size: 18px;

    line-height: 1.3;

}


/* Little description beneath title */

.recipe-subtitle {

    display: block;

    margin-top: 2px;

    padding-left: 8px;

    color: var(--moss);

    font-family:
        Alagard,
        "Times New Roman",
        serif;

    font-size: 11px;

    font-style: italic;

    line-height: 1.4;

}


/* =========================================================
   HOVER / OPEN STATES
   ========================================================= */

.recipe-entry summary:hover {

    background:
        rgba(177, 189, 139, .18);

}


.recipe-entry summary:hover .recipe-title {

    color: var(--rust);

}


.recipe-entry[open] summary {

    background:
        rgba(177, 189, 139, .16);

    border-bottom:
        1px dotted
        var(--moss-light);

}


/* =========================================================
   RECIPE BODY
   ========================================================= */

.recipe-body {

    padding:
        14px
        17px
        17px;

    color: var(--forest);

    background:
        rgba(232, 225, 201, .35);

}


.recipe-body p {

    margin:
        0 0 13px;

}


/* =========================================================
   RECIPE HEADINGS
   ========================================================= */

.recipe-body h3 {

    margin:
        20px 0 7px;

    padding-bottom: 3px;

    color: var(--moss);

    border-bottom:
        1px dotted
        var(--moss-light);

    font-family:
        "MossyNewt",
        Georgia,
        serif;

    font-size: 17px;

    font-weight: normal;

}


.recipe-body h3:first-child {

    margin-top: 0;

}


/* =========================================================
   RECIPE LISTS
   ========================================================= */

.recipe-body ul {

    margin:
        8px 0 15px;

    padding-left: 22px;

    list-style: none;

}


.recipe-body li {

    position: relative;

    margin-bottom: 5px;

    padding-left: 3px;

}


.recipe-body li::before {

    content: "4";

    position: absolute;

    left: -21px;

    top: .15em;

    color: var(--moss);

    font-family:
        "Go Around the Books";

    font-size: 1em;

    line-height: 1;

}


/* =========================================================
   CRAFT LIST
   ========================================================= */

.craft-list {

    margin-bottom: 22px;

}


/* =========================================================
   RECIPE WARNING
   ========================================================= */

.recipe-warning {

    margin:
        0 0 16px !important;

    padding:
        8px 10px;

    color: var(--rust);

    background:
        rgba(154, 105, 71, .08);

    border-top:
        1px dashed
        var(--rust);

    border-bottom:
        1px dashed
        var(--rust);

    text-align: center;

    font-family:
        Alagard,
        "Times New Roman",
        serif;

    font-size: 11px;

    font-style: italic;

}


/* =========================================================
   RECIPE ASIDES
   ========================================================= */

.recipe-aside {

    margin:
        14px 4px;

    padding:
        8px 11px;

    color: var(--moss);

    border-left:
        3px solid
        var(--gold);

    background:
        rgba(197, 164, 93, .08);

    font-family:
        Alagard,
        "Times New Roman",
        serif;

    font-size: 11px;

    font-style: italic;

}
/* =========================================================
   RECIPE IMAGE
   ========================================================= */

.recipe-image {

    margin:
        15px
        auto
        20px;

    text-align: center;

}


.recipe-image img {

    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    max-height: 420px;

    margin:
        0
        auto;

    padding: 6px;

    background:
        rgba(232, 225, 201, .75);

    border:
        1px solid
        rgba(97, 112, 76, .45);

    box-shadow:
        2px 2px 0
        rgba(53, 63, 45, .12);

    box-sizing: border-box;

}


.recipe-image figcaption {

    margin-top: 6px;

    color: var(--moss);

    font-family:
        Alagard,
        "Times New Roman",
        serif;

    font-size: 11px;

    font-style: italic;

    line-height: 1.4;

}


/* Keep the image comfortable on small screens */

@media (max-width: 400px) {

    .recipe-image {

        margin:
            13px
            auto
            18px;

    }


    .recipe-image img {

        max-height: 320px;

        padding: 4px;

    }

}

/* =========================================================
   MAKES PAGE MOBILE
   ========================================================= */

@media (max-width: 867px) {

    .recipe-entry summary {

        padding-right: 32px;

    }


    .recipe-title {

        font-size: 17px;

    }


    .recipe-body {

        padding:
            13px
            15px
            16px;

    }

}


@media (max-width: 400px) {

    .recipe-entry summary {

        padding:
            9px
            30px
            8px
            12px;

    }


    .recipe-title {

        font-size: 16px;

    }


    .recipe-subtitle {

        font-size: 10px;

    }


    .recipe-body {

        padding:
            12px
            13px
            15px;

    }

}