:root {
    --page-background: rgb(254, 251, 247);
    --background: white;
    --foreground: #16161d;
    --nav: gray;
    --original-title: gray;
    --icons-separator: #ccc;
    --search-bar: #efeeee;
    --search-bar-outline: #ccc;
    --search-results-separator: #ddd;
    --highlighted-search-result: #f8f8f8;
    --h2: gray;
    --link: #239;
    --attention: #810;
    --horizontal-rule: #ddd;
    --footer: #bbb;

    --sans: Barlow, Fabrikat, Helvetica, sans-serif;
    --serif: Lora, Georgia, serif;

    --images-on-index-size: 5em;

    --step-number-column-width: 3em;
    --ingredient-quantity-column-width: 5em;
    --ingredient-name-column-width: 10em;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-background: black;
        --background: #202020;
        --foreground: #eee;
        --nav: #bbb;
        --original-title: #bbb;
        --icons-separator: #404040;
        --search-bar: #383838;
        --search-bar-outline: #555;
        --search-results-separator: #383838;
        --highlighted-search-result: #181818;
        --h2: #bbb;
        --link: #9ae;
        --attention: #fa7;
        --horizontal-rule: #484848;
        --footer: #555;
    }

    /* accessing the colors defined inside the svg isn't possible when embedded as an image and i don't want to inline them, so this is the best i can do */
    header ul li img,
    h3 .icons img {
        filter: invert() hue-rotate(180deg);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 18px;
    line-height: 1.4;
    font-family: var(--sans);
}
body {
    background-color: var(--page-background);
    color: var(--foreground);
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    counter-reset: step;
}

header {
    padding: 1em;
    overflow: auto;  /* clearfix */
    max-width: 48em;
    margin: 0 auto 1em auto;
}
header .name {
    display: inline-block;
}
header nav {
    margin: 0;
    color: var(--nav);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8em;
    display: flex;
    align-items: center;
}
header nav a {
    text-decoration: none;
    color: inherit;
}
header nav i {
    font-style: normal;
    padding: 0 0.2em;
}
header .logo {
    height: 5em;
    padding-right: 0.1em;
}
h1 {
    font-size: 2rem;
    margin: 0.4rem 0;
    line-height: 1.2;
}
h1 sup {
    font-size: 0.64rem;
    vertical-align: text-top;
    color: orange;
    margin-left: -0.1rem;
    line-height: 1.6;
}
h1 em {
    color: var(--original-title);
    font-size: 1.4rem;  /* to match x-height of heading */
    font-weight: normal;
    font-style: normal;
    display: inline-block;
}
h1 span,
h3 span {  /* separate original name after this a little (but not if it's on another line) */
    padding-right: 0.4rem;
}
header ul {
    font-size: 0.8em;
    font-weight: normal;
    text-transform: uppercase;
    float: right;
    margin: 0;
}
header ul li {
    list-style-type: none;
    padding: 0.5em 0.7em 0.5em 0.6em;  /* different on left and right to compensate for space (on left) and border (on right) */
    border-right: 1px solid var(--icons-separator);
    text-align: center;
    display: inline-block;
}
header ul li:last-child {
    border-right: none;
    padding-right: 0;
}
header ul li img {
    height: 2em;
    padding-bottom: 0.4em;
    display: block;
    margin: auto;
}
header ul li a {
    text-decoration: none;
    color: inherit;
}
header p {
    max-width: 66%;
    margin: 0.5rem 0;
    font-family: var(--serif);
}
header .nutrition {
    padding-bottom: 0.5em;
    font-size: 0.8em;
    font-family: var(--sans);
    opacity: 0.67;  /* slightly gray */
}
header .nutrition img {
    vertical-align: bottom;
    height: 1.3em;
    padding-right: 0.3em;
}
@media screen and (max-width: 700px) {
    header {
        margin-bottom: 0;
    }
    header ul {
        float: none;
        margin-top: 1em;
    }
    header ul li {
        padding: 0;
        padding-bottom: 0.5em;
        display: block;
        border: none;
        text-align: left;
    }
    header ul li img {
        vertical-align: bottom;
        height: 1.3em;
        padding: 0;
        padding-right: 0.3em;
        display: inline;
    }
    header p {
        max-width: 100%;
    }
}

.search {
    margin: 2em auto 1em;
    max-width: 40em;
}
.search input {
    border: 0;
    width: 100%;
    padding: 0.6em 1.1rem;
    font-size: 1.2em;
    font-family: var(--sans);
    background-color: var(--search-bar);
    color: inherit;
    border-radius: 0.2em;
    border: 0.2em solid var(--search-bar);  /* same color as background, different on focus */
    -webkit-appearance: none;  /* hide inset shadow on ios */
}
.search input:focus {
    border-color: var(--search-bar-outline);
    outline: none;
}
.search input[disabled] {
    cursor: not-allowed;
}
.search .error {
    color: darkred;
    font-size: 0.64em;
}
.search .results a {
    text-decoration: none;
    color: inherit;
}
.search .results h3 {
    border-bottom: 1px solid var(--search-results-separator);
    padding: 0.3rem 1rem 0.4rem;
    margin: 0 auto;
    width: calc(100% - 0.5em);
    background-color: var(--background);
}
.search .results a:last-child h3 {
    border-radius: 0 0 0.2em 0.2em;
    border-bottom: none;
}
.search .results a.selected h3 {
    background-color: var(--highlighted-search-result);
}

.entry {
    margin-top: 1em;  /* fix for category pages */
    min-height: var(--images-on-index-size);
    margin-left: calc(1em + var(--images-on-index-size));
}
.entry .servingsuggestion {
    margin-left: calc(-1em - var(--images-on-index-size));
    margin-bottom: 1em;
    width: var(--images-on-index-size);
    height: var(--images-on-index-size);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
    background-image: url(placeholder.png);
}

.servingsuggestion {
    width: 48em;
    max-width: 100%;
    margin: auto;
}
.servingsuggestion img {
    display: block;
    width: 100%;
}
.servingsuggestion a {
    text-decoration: none;
    color: inherit;
}
.servingsuggestion a:hover {
    opacity: 1;
}
.servingsuggestion .attribution {
    font-size: 0.6em;
    line-height: 1;
    padding: 0 0.4em 0.4em 0;
    margin-top: -1.4em;  /* 1em text height plus 0.4em bottom padding */
    text-align: right;
    color: var(--background);
}

section {
    padding: 0.01em 1em;  /* avoid margin collapse */
    max-width: 48em;
    background-color: var(--background);
    margin: 0 auto 1em;
    overflow: auto;  /* clearfix */
    border-radius: 1em;
}

h2 {
    margin: 0.8rem 0;
    color: var(--h2);
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    font-weight: normal;
    counter-reset: step;  /* handy if used on a recipe page */
    clear: both;
}
h3 {
    margin: 0.5rem 0 1rem;  /* larger bottom margin to fix spacing if the last recipe in a category has no description */
    font-size: 1.3rem;
}
h2 a,
h3 a {
    text-decoration: none;
    color: inherit;
}
h3 em {
    color: var(--original-title);
    font-size: 0.95rem;  /* to match x-height of heading */
    font-weight: normal;
    font-style: normal;
    display: inline-block;
}
h3 .icons {
    font-size: 0.9em;
    margin-left: 0.5em;  /* avoid text getting too close to them */
    float: right;
    line-height: 1.8;  /* visually center them */
}
h3 .icons img {
    height: 1em;
}
h3 + p {
    margin-top: -0.5rem;  /* move the description a bit closer to the recipe's title */
    font-family: var(--serif);
}
h3 + h3 {
    margin-top: -0.5rem;  /* in the same vein, move the recipe title below a description-less recipe a bit upwards */
}

ul, p {
    margin: 1rem 0;
}
hr {
    border: 0;
    width: 100%;
    border-top: 1px solid var(--horizontal-rule);  /* using a border instead of background color to circument no-background-colors print settings */
}
.recipe hr {
    counter-increment: step;
    margin-bottom: -2.4em;
    clear: right;  /* fix for long descriptions pushing across the hr in firefox */
}
.recipe hr + hr {  /* in case there is a leading hr in the document in addition to the hardcoded one */
    display: none;
}
.recipe hr:first-child {  /* hide first hr's line, but keep the step number */
    border-color: transparent;
}
.recipe hr::after {
    content: counter(step);
    display: inline-block;
    color: var(--background);
    background-color: var(--foreground);
    min-width: 1.5em;
    padding: 0.15em 0.2em 0.2em;
    text-align: center;
    border-radius: 0.2em;
    font-size: 0.8em;
    margin-top: 1.1rem;
}
.recipe hr + ul {
    display: inline-block;
    margin-left: var(--step-number-column-width);
    width: calc(var(--ingredient-quantity-column-width) + var(--ingredient-name-column-width));
    vertical-align: top;
}
.recipe hr + ul + blockquote {
    display: inline-block;
    width: calc(100% - var(--step-number-column-width) - var(--ingredient-name-column-width) - var(--ingredient-quantity-column-width));
    vertical-align: top;
    float: right;
}
.recipe hr + blockquote {
    display: inline-block;
    margin-left: var(--step-number-column-width);
    width: calc(100% - var(--step-number-column-width));
}
@media screen and (max-width: 700px) {
    .recipe hr + ul {
        margin-bottom: 0;
        width: auto;
    }
    .recipe hr + ul + blockquote,
    .recipe hr + blockquote {
        display: block !important;
        width: calc(100% - var(--step-number-column-width));
        margin-left: var(--step-number-column-width);
    }
}
.recipe hr + ul li {
    list-style-type: none;
    text-indent: calc(-1 * var(--ingredient-quantity-column-width));
    padding-left: var(--ingredient-quantity-column-width);
    padding-right: 1em;  /* prevent ingredient names getting too close to the instructions */
}
.recipe hr + ul li > code:first-child {
    display: inline-block;
    margin-left: var(--ingredient-quantity-column-width);
    margin-right: calc(-1 * var(--ingredient-quantity-column-width) - .2em);  /* to account for space between em and ingredient name */
    min-width: var(--ingredient-quantity-column-width);
}
code {
    font-family: var(--sans);
}
blockquote {
    font-family: var(--serif);
}
blockquote img {
    max-width: 100%;
}
blockquote blockquote blockquote {  /* for drawing attention to part of an instruction */
    background-image: url("tabler-icons/tabler-icon-flag.svg");
    background-size: 1.2em;
    background-position: -0.2em 0.1em;
    background-repeat: no-repeat;
    padding-left: 1.3em;
    font-style: italic;
    color: var(--attention);
}
blockquote blockquote blockquote em {
    font-style: normal;
}
a {
    color: var(--link);
}
a:hover {
    opacity: 0.6;
}

footer {
    text-align: center;
    color: var(--footer);
    margin: 2em 0;
}
footer .updatededit {
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
footer .updatededit a {
    color: inherit;
    text-decoration: none;
}

@media print {
    html {
        font-size: 10pt;
    }
    body {
        background-color: initial;
    }
    .servingsuggestion {
        width: auto;
        max-width: 50%;
        max-height: 20em;
    }
    .search {
        display: none;
    }
    section {
        max-width: 100%;
    }
    footer {
        display: none;
    }
}