:root {
    --background: #fefadc;
    --text: #20160c;
    --header: #4C351F;
    --navbar: #ffd695;
    --navbar-button: #faedca;
    --navbar-button-hover: #fef8e7;
    --navbar-button-open: #ffedcf;
    --navbar-button-focus: #ffde84;
    --navbar-button-selected: #ffded3;
    --highlight: #e7866a;
    --chip: #ffd695;
    --print: #5b9129;
    --print-hover: #4d7825;
    --print-focus: #2d5803;
    --checked: #bd9584;
    --search: #bda884;
    --link: #cb344d;
    --easy-difficulty: #129c39;
    --medium-difficulty: #d57900;
    --hard-difficulty: #b70606;
    --spine: url("./img/spine_light.png");
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #000;
        --text: #E4C8B8;
        --header: #d4aa55;
        --navbar: #2A0909;
        --navbar-button: #510F0F;
        --navbar-button-hover: #631818;
        --navbar-button-open: #5d1313;
        --navbar-button-focus: #820b0b;
        --navbar-button-selected: #81232e;
        --highlight: #47572F;
        --chip: #62482b;
        --print: #5b9129;
        --print-hover: #4d7825;
        --print-focus: #2d5803;
        --checked: #c36c62;
        --search: #ae7777;
        --link: #e45b72;
        --easy-difficulty: #20c04e;
        --medium-difficulty: #ee9522;
        --hard-difficulty: #ef4343;
        --spine: url("./img/spine_dark.png");
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--text);
    scrollbar-color: var(--navbar) var(--background);
    font-family: 'Arbutus Slab', Tahoma, Geneva, Verdana, sans-serif;
}

button {
    font-size: 1rem;
}

li {
  list-style: inside;
}

li > * {
    display: inline;
}

@font-face {
    font-family: 'IM Fell Double Pica';
    src: url(./fonts/IMFellDoublePica.ttf) format(truetype);
}

@font-face {
    font-family: 'Arbutus Slab';
    src: url(./fonts/ArbutusSlab.ttf) format(truetype);
}

@font-face {
    font-family: Material;
    src: url(./fonts/material.woff2) format('woff2');
    font-display: block;
}

.material {
    font-family: Material;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* HTML: <div class="wavy-line"></div> */
.wavy-line, .generic hr {
  --s: 4px; /* size of the wave */
  --b: 2px; /* thickness of the line */
  --m: 1; /* curvature of the wave [0 2] */
  margin-bottom: 20px;
  margin-top: 25px;
  
  background: var(--highlight);
  --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  height: calc(2*var(--R));
  width: 100%;
  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g)) 
     calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g)) 
     50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
}



/* main */
.mainbody {
    padding: 0;
    display: flex;
    flex-direction: row;
    overflow-y: hidden;
}

body {
    padding: 2rem;
    background-color: var(--background);
}

body:not(.mainbody) {
    max-width: 1000px;
}

iframe, .maincontent {
    width: 100%;
    height: 100dvh;
}

h1, h2 {
    margin-bottom: 20px;
}



/* navigation */
#spine {
    width: 40px;
    height: 100%;
    object-fit: contain;
    background-image: var(--spine);
    background-position: 105px;
    background-repeat: repeat;
}

.sidebar {
    position: relative;
    display: flex;
    flex-direction: row;
    transition: 300ms;
    z-index: 2;
}

#sidebar_toggle {
    display: none;
    position: absolute;
    top: 30px;
    left: -21%;
    height: 55px;
    width: 60px;
    background-color: var(--navbar);
    border-radius: 20px 0 0 20px;
    padding: 5px;
}

#sidebar_toggle > div > input, .overlay > input {
    display: none;
}

#sidebar_toggle > div > h2 {
    color: var(--text);
    text-align: center;
    margin: 0;
    transition: 200ms;
    transform: rotate(180deg);
}

#sidebar_toggle > div {
    background-color: var(--navbar-button);
    border-radius: 15px;
    width: 100%;
    height: 100%;
    transition: 200ms;
    align-content: center;
}

#sidebar_toggle > div:hover {
    background-color: var(--navbar-button-hover);
}

#sidebar_toggle:has(> div > input:active) > div:hover {
    background-color: var(--navbar-button-focus);
    transform: scale(98%);
}

nav {
    position: relative;
    padding: 2rem 1rem 1rem 1rem;
    background-color: var(--navbar);
    height: 100dvh;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    scrollbar-color: var(--background) var(--navbar);
}

nav > button {
    text-align: center;
    color: black;
    width: 100%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    text-decoration: none;
    margin-bottom: 20px;
}

nav > button > h1 {
    color: var(--header);
    font-variation-settings: "wght" 1000;
    font-family: 'IM Fell Double Pica', 'Times New Roman', Times, serif;
    margin-bottom: 0;
}

nav > button > h4 {
    color: var(--header);
    font-variation-settings: "wght" 600;
    font-family: 'IM Fell Double Pica', 'Times New Roman', Times, serif;
    margin-bottom: 0;
}

nav > * {
    width: 100%;
}

nav > div:not(:last-child) {
    margin-bottom: 20px;
}

nav > div > *:not(:last-child) {
    margin-bottom: 5px;
}

.overlay {
    pointer-events: none;
    z-index: 1;
    position: absolute;
    height: 100dvh;
    width: 100vw;
    background-color: #0000;
    transition: 300ms;
}



/* dropdown */
.dropdown {
    background-color: var(--navbar-button);
    border-radius: 7px;
    display: grid;
    grid-template-rows: minmax(2.75rem, max-content) 0fr;
    transition: 200ms;
}

.dropdown > div > *:first-child {
    margin-top: 5px;
    border-radius: 15px 15px 5px 5px;
}

.dropdown > div > *:last-child {
    border-radius: 5px 5px 15px 15px;
}

.dropdown > div > *:only-child {
    border-radius: 15px;
}

.dropdown > label > input {
    display: none;
}

.dropdown > label {
    padding: 10px 15px;
    border-radius: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: 200ms;
}

.dropdown > label:hover {
    background-color: var(--navbar-button-hover);
}

.dropdown:has(input:active) > label:hover {
    background-color: var(--navbar-button-focus);
    transform: scale(98%);
}

.dropdown > label > span {
    transition: 200ms;
    margin-left: 5px;
}

.dropdown > div {
    overflow: hidden;
    padding: 0 5px;
}

.dropdown > div > * {
    margin-bottom: 5px;
}

.dropdown > div > button, nav > div > button, .search_result {
    background-color: var(--navbar-button);
    border: none;
    text-align: left;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    transition: 200ms;
}

.dropdown > div > button:hover, nav > div > button:hover, .search_result:hover {
    background-color: var(--navbar-button-hover);
}

.dropdown > div > button:focus:hover:active, nav > div > button:focus:hover:active, .search_result:focus:hover:active {
    background-color: var(--navbar-button-focus);
    transform: scale(98%);
}

.dropdown > div > .selected, .dropdown.selected > label, button.selected {
    background-color: var(--navbar-button-selected);
}

.dropdown > div > .selected, button.selected {
    border-radius: 15px;
}

.dropdown:has(> label > input:checked), .dropdown.selected {
    grid-template-rows: minmax(2.75rem, max-content) 1fr;
    border-radius: 20px;
}

.dropdown:has(> label > input:checked) > label > span, .dropdown.selected > label > span {
    transform: rotate(90deg);
}

nav > div > *:first-child {
    border-radius: 20px 20px 7px 7px;
}

nav > div > *:last-child {
    border-radius: 7px 7px 20px 20px;
}

nav > div > *:only-child {
    border-radius: 20px;
}



/* recipe header */
.recipe-header > div:first-child {
    display: flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.recipe-header > div > div:not(:last-child) {
    margin-right: 10px;
}

.chip {
    background-color: transparent;
    border-color: var(--chip);
    border: 1.5px solid var(--chip);
    padding: 5px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.chip > span {
    margin-right: 5px;
}

#difficulty > div {
    display: flex;
    align-items: center;
    margin-right: 5px;
}

#difficulty > div > span {
    font-variation-settings: "FILL" 100;
}

#difficulty.easy {
    border-color: var(--easy-difficulty);
    color: var(--easy-difficulty);
}

#difficulty.easy > *, #difficulty.easy > * > * {
    color: var(--easy-difficulty);
}

#difficulty.medium {
    border-color: var(--medium-difficulty);
    color: var(--medium-difficulty);
}

#difficulty.medium > *, #difficulty.medium > * > * {
    color: var(--medium-difficulty);
}

#difficulty.hard {
    border-color: var(--hard-difficulty);
    color: var(--hard-difficulty);
}

#difficulty.hard > *, #difficulty.hard > * > * {
    color: var(--hard-difficulty);
}

.print {
    border: none;
    background-color: var(--print);
    transition: 200ms;
    cursor: pointer;
}

.print > * {
    color: white;
}

.print:hover {
    background-color: var(--print-hover);
}

.print:focus:hover:active {
    background-color: var(--print-focus);
    transform: scale(98%);
}

#description > *:not(:last-child) {
    margin-bottom: 10px;
}

#description > * > a {
    color: var(--link);
}



/* ingredients */
#ingredients, #ingredients > div {
    display: flex;
    flex-direction: column;
}

#ingredients > div > label {
    width: fit-content;
}

#ingredients > div > label:not(:last-child) {
    margin-bottom: 10px;
}

#ingredients > div > label > input {
    margin-right: 10px;
    accent-color: var(--highlight);
}

#ingredients > div > label > input:checked + p {
    color: var(--checked);
    text-decoration: line-through;
}

#ingredients > div > label > p {
    display: inline;
}

#ingredients > .section:not(:last-child) {
    margin-bottom: 20px;
}

#ingredients > * > h3 {
    margin-bottom: 10px;
}

#special > p > b:first-child {
    font-size: 1.2rem;
}



/* steps */
#steps > div > h2 {
    margin: 0;
    flex: 0 0 50px;
}

#steps > div {
    display: flex;
    align-items: center;
}

#steps > div:not(:last-child) {
    margin-bottom: 25px;
}



/* search */
search {
    display: grid;
    grid-template-rows: minmax(2.75rem, max-content) 0fr;
    transition: 200ms;
    background-color: var(--navbar-button);
    border-radius: 20px;
    margin-bottom: 20px;
    text-align: center;
}

search:has(#searchbox:focus), search:has(#results:hover) {
    grid-template-rows: minmax(2.75rem, max-content) 1fr;
}

#searchbox::placeholder {
    color: var(--search);
}

#searchbox {
    font-size: 1rem;
    width: 100%;
    padding: 10px 15px;
    background-color: var(--navbar-button);
    border: 5px solid var(--navbar-button);
    border-radius: 20px;
    height: 2.75rem;
    transition: 200ms;
    border-bottom: 5px solid var(--highlight);
}

#searchbox:hover:not(:focus, :active) {
    background-color: var(--navbar-button-hover);
}

#searchbox:focus {
    outline: none;
    background-color: var(--navbar-button-hover);
}

#results {
    overflow: hidden;
    padding: 0 5px;
}

#results > button {
    margin-bottom: 5px;
}

#results > button > b {
    font-weight: 800;
}

#results > button:first-child {
    margin-top: 5px;
    border-radius: 15px 15px 5px 5px;
}

#results > button:last-child {
    border-radius: 5px 5px 15px 15px;
}

#results > button:only-child {
    border-radius: 15px;
}

#results > p {
    margin-top: 5px;
    margin-bottom: 10px;
    color: var(--search);
}



/* generic text pages */
.generic > p {
    margin-bottom: 10px;
}

ul > li:not(:last-child) {
    margin-bottom: 10px;
}

.generic button, .generic a {
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    color: var(--link);
}



/* links for google play and app store */
#platform-links {
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

#platform-links > a > img {
    height: 60px
}

#platform-links > a {
    margin-bottom: 10px;
}



/* self portrait on main page */
.self-portrait {
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.self-portrait > img {
    width: 100%;
    max-width: 200px;
}

.self-portrait > p {
    color: #000;
}



/* responsive */
@media only screen and (width <= 900px) {
    .mainbody {
        flex-direction: row-reverse;
    }

    .sidebar {
        transform: translateX(100%);
        position: fixed;
        flex-direction: row-reverse;
    }
    
    .sidebar:has(#sidebar_toggle > div > input:checked) {
        transform: translateX(0);
    }

    #sidebar_toggle > div:has(> input:checked) > h2 {
        transform: rotate(0);
    }

    .mainbody:has(#sidebar_toggle > div > input:checked) > .overlay {
        background-color: #0003;
        pointer-events: all;
        backdrop-filter: blur(6px);
    }

    #sidebar_toggle {
        display: block;
    }

    #spine {
        width: 30px;
    }

    body:not(.mainbody) > *:first-child {
        max-width: calc(100% - 15px);
    }

    nav {
        width: 250px;
    }
}



/* print layout */
#qrcode {
    display: none;
}

@media only print {
    button.print {
        display: none;
    }

    .recipe-header {
        display: none;
    }

    input[type=checkbox] {
        display: none;
    }

    div.wavy-line {
        display: none;
    }

    * {
        font-size: 14px;
    }

    h1 {
        font-size: 28px;
        margin-bottom: 20px;
        width: 80%;
    }

    h2 {
        font-size: 21px;
        margin-bottom: 15px;
    }

    h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    #ingredients {
        max-height: 40vh;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .section {
        margin-right: 30px;
        margin-bottom: 0;
    }

    #steps > div:not(:last-child) {
        margin-bottom: 10px;
    }

    #qrcode {
        display: block;
        position: relative;
    }

    #qrcode > img {
        content: '';
        position: absolute;
        top: 0;
        left: calc(100vw - 125px);
        width: 96px;
        height: 96px;
    }
}