/* Main stylesheet for the website */

/* Variables */

:root {
    --padding:          12px;
    --border-thickness: 5px;
    --border-radius:    8px;
    --max-width:        65vw;
    --phone-logo-width: 20vw;
    --hover-scale:      1.03;
    --active-scale:     0.98;
    --ease-time:        0.2s;

    --col-bg:   #282A36;
    --col-ln:   #44475A;
    --col-fg:   #F8F8F2;
    --col-sec:  #6272A4;
    --col-acc:  #FF79C6;
    --col-mid:  #535D7F;
}

html {
    height: 100%;
}

/* Top-level Body is a vertical flex box */

body {
    display: flex;
    flex-direction: column;
    padding: var(--padding);
    background-color: var(--col-bg);
    align-items: stretch;
    height: auto;
    min-height: 100%;
}

#expand {
    height: 50vh;
}

h1 {
    font-family: Arial;
    font-size: clamp(18pt, 5vw, 34pt);
    color: var(--col-fg);
    text-align: center;
}

h2 {
    font-family: Arial;
    font-size: clamp(16pt, 4.5vw, 30pt);
    color: var(--col-fg);
    text-align: left;
}

h3 {
    font-family: Arial;
    font-size: clamp(14pt, 3.5vw, 24pt);
    color: var(--col-fg);
    text-align: left;
}

li {
    font-family: Arial;
    font-size: clamp(12pt, 3vw, 20pt);
    color: var(--col-fg);
    text-align: left;
}

ul {
    font-family: Arial;
    font-size: clamp(11pt, 2.7vw, 18pt);
    color: var(--col-fg);
    text-align: left;
}

p {
    font-family: Arial;
    font-size: clamp(12pt, 3vw, 20pt);
    color: var(--col-fg);
    text-align: center;
}

/* Bar at top of page */

.titlebar {
    display: flex;
    flex-direction: row;
    padding: var(--padding);
    border: var(--border-thickness) solid var(--col-ln);
    border-radius: var(--border-radius);
    background-color: var(--col-sec);
    width: calc(100% - 2 * (var(--padding) + var(--border-thickness)));
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all var(--ease-time) ease;
}

.titlebar:hover {
    scale: var(--hover-scale);
    border-color: var(--col-acc);
    transition: all var(--ease-time) ease;
}

.titlebar:active {
    scale: var(--active-scale);
    filter: brightness(0.7);
    transition: all var(--ease-time) ease;
}

.titlebar img {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: 0;
    width: 90px;
}

.titlebar h1 {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0;
    margin-right: auto;
}

@media (orientation: portrait) {
    .titlebar {
        flex-direction: column;
    }

    .titlebar img {
        margin: auto;
        width: var(--phone-logo-width);
    }

    .titlebar h1 {
        font-size: clamp(20pt, 7vw, 50pt);
        margin: auto;
        width: 100%;
    }
}

/* Basic Information */

.info {
    width: var(--max-width);
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}

@media (orientation: portrait) {
    .info {
        width:  calc(100% - 2 * (var(--padding) + var(--border-thickness)));
    }

    .info p {
        font-size: clamp(14pt, 4.5vw, 30pt);
    }
}

/* Main Page Navigational Buttons */

.img-nav {
    display: flex;
    flex-direction: row;
    padding: var(--padding);
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-ln);
    width: calc(var(--max-width) + var(--padding) + var(--border-thickness));
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

.img-nav a {
    margin: auto;
    margin-top: 0;
    max-width: calc(var(--max-width) / 5);
    text-decoration: none;
}

.img-nav-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: flex-start;
    align-items: center;
    transition: all var(--ease-time) ease;
}

.img-nav-btn:hover {
    scale: var(--hover-scale);
    transition: all var(--ease-time) ease;
    img {
        border-color: var(--col-acc);
    }
}

.img-nav-btn:active {
    scale: var(--active-scale);
    filter: brightness(0.7);
    transition: all var(--ease-time) ease;
}

.img-nav-btn img {
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-ln);
    margin-top: 0;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.img-nav-btn p {
    margin: auto;
    text-align: center;
}

@media (orientation: portrait) {
    .img-nav {
        flex-direction: column;
        width:  calc(100% - 2 * (var(--padding) + var(--border-thickness)));
    }

    .img-nav a {
        width: 100%;
        max-width: none;
    }

    .img-nav-btn {
        flex-direction: row;
        margin-top: auto;
        margin-bottom: auto;
        width: 100%;
        max-width: none;
    }

    .img-nav-btn img {
        width: 40vw;
    }

    .img-nav-btn p {
        font-size: clamp(14pt, 4.5vw, 30pt);
        width: 100%;
        margin-right: 0;
    }
}

/* Search Bar */

.search {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: var(--padding);
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-ln);
    width: calc(var(--max-width) + var(--padding) + var(--border-thickness));
}

.search input {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    font-size: 24pt;
    font-family: Arial;
    color: var(--col-fg);
    transition: all var(--ease-time) ease;
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-mid);
}

.search input:hover {
    scale: var(--hover-scale);
    border-color: var(--col-acc);
    transition: all var(--ease-time) ease;
}

.search button {
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    margin-left: 20px;
    width: 120px;
    font-size: 24pt;
    font-family: Arial;
    color: var(--col-fg);
    transition: all var(--ease-time) ease;
    background-color: var(--col-mid);
}

.search button:hover {
    scale: var(--hover-scale);
    transition: all var(--ease-time) ease;
    border-color: var(--col-acc);
}

.search button:active {
    scale: var(--active-scale);
    filter: brightness(0.7);
    transition: all var(--ease-time) ease;
}

@media (orientation: portrait) {
    .search {
        width: calc(100% - 2 * (var(--padding) + var(--border-thickness)));
    }

    .search button {
        width: 140px;
        font-size: clamp(14pt, 4.5vw, 30pt);
    }

    .search input {
        font-size: clamp(14pt, 4.5vw, 30pt);
    }
}

/* List of recipes */

.recipe-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: var(--padding);
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-ln);
    width: calc(var(--max-width) + var(--padding) + var(--border-thickness));
}

.recipe-hdr {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: auto;
    justify-content: flex-start;
    align-items: center;
    transition: all var(--ease-time) ease;
    margin-bottom: 30px;
    text-decoration: none;
    transition: all var(--ease-time) ease;
    cursor: pointer;
}

.recipe-hdr-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.recipe-hdr-info a {
    position: relative;
    z-index: 2;
}

.recipe-hdr:hover {
    scale: var(--hover-scale);
    transition: all var(--ease-time) ease;
    img {
        border-color: var(--col-acc);
    }
}

.recipe-hdr:active {
    scale: var(--active-scale);
    filter: brightness(0.7);
    transition: all var(--ease-time) ease;
}

.recipe-hdr img {
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-sec);
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0;
    margin-right: auto;
    width: 150px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.recipe-hdr-info {
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-left: 20px;
    justify-content: flex-start;
    align-items: center;
}

.recipe-hdr-info h1 {
    font-size: 24pt;
    margin: auto;
}

.recipe-hdr-info p {
    margin: auto;
    text-align: center;
    color: var(--col-sec);
    font-size: 18pt;
}

@media (orientation: portrait) {
    .recipe-list {
        width: calc(100% - 2 * (var(--padding) + var(--border-thickness)));
    }

    .recipe-hdr img {
        width: 25vw;
    }

    .recipe-hdr-info h1 {
        font-size: clamp(12pt, 4vw, 30pt);
    }

    .recipe-hdr-info p {
        font-size: clamp(10pt, 3.5vw, 24pt);
    }
}

/* The description and image for the main recipe content page */

.recipe-subtitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: var(--max-width);
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-ln);
    padding: var(--padding);
}

.recipe-subtitle img {
    width: 150px;
    aspect-ratio: 1.0;
    object-fit: cover;
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-sec);
}

.recipe-subtitle p {
    margin-left: 40px;
}

@media (orientation: portrait) {
    .recipe-subtitle {
        width: calc(100% - 2 * (var(--padding) + var(--border-thickness)));
        max-width: none;
    }

    .recipe-subtitle img {
        width: 25vw;
    }
}

/* Recipe Content */

.recipe {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

.recipe a {
    color: var(--col-acc);
}

@media (orientation: portrait) {
    .recipe {
        width: calc(100% - 2 * (var(--padding) + var(--border-thickness)));
        max-width: none;
    }
}

/* Comment Section */

.comment-section {
    width: calc(var(--max-width) + var(--padding) + var(--border-thickness));
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 0;
}

.comment-section h2 {
    margin-bottom: 10px;
}

.comment-form {
    display: flex;
    flex-direction: column;
    padding: var(--padding);
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-ln);
    gap: 10px;
}

.comment-form input,
.comment-form textarea {
    font-size: 18pt;
    font-family: Arial;
    color: var(--col-fg);
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-mid);
    padding: var(--padding);
}

.comment-form textarea {
    min-height: 100px;
    resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--col-acc);
    outline: none;
}

.comment-form p {
    text-align: left;
    margin: 0;
}

.comment-form button {
    font-size: 20pt;
    font-family: Arial;
    color: var(--col-fg);
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-mid);
    padding: var(--padding);
    cursor: pointer;
    transition: all var(--ease-time) ease;
}

.comment-form button:hover {
    scale: var(--hover-scale);
    border-color: var(--col-acc);
    transition: all var(--ease-time) ease;
}

.comment-form button:active {
    scale: var(--active-scale);
    filter: brightness(0.7);
    transition: all var(--ease-time) ease;
}

.comments-list {
    margin-top: 15px;
}

.comment {
    padding: var(--padding);
    border: var(--border-thickness) solid var(--col-sec);
    border-radius: var(--border-radius);
    background-color: var(--col-ln);
    margin-bottom: 10px;
}

.comment-author {
    font-weight: bold;
    font-size: 20pt;
    text-align: left;
    margin: 0;
    color: var(--col-acc);
}

.comment-date {
    font-size: 14pt;
    text-align: left;
    margin: 0;
    color: var(--col-sec);
}

.comment-body {
    font-size: 18pt;
    text-align: left;
    margin-top: 8px;
    margin-bottom: 0;
}

@media (orientation: portrait) {
    .comment-section {
        width: calc(100% - 2 * (var(--padding) + var(--border-thickness)));
        max-width: none;
    }
}