/* #region Home Body */

h2.home-header-decorate {
    margin: 0 0 0.5em 0.5em;
    text-decoration: underline var(--accent-two-medium-light) solid;
    text-underline-offset: 0.5rem;
    text-wrap: nowrap;
}

div.home-body {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4em 3em;
    padding: 0 10%;
    margin: 2em 0;
    transition: padding ease 0.75s;
}

div.home-item {
    display: flex;
    flex-flow: column nowrap;
    padding: 1.5em 0.75em;
    border-width: 0.15em;
    border-color: var(--accent-one-medium-light);
    border-style: solid;
    border-radius: 2em;
    box-shadow: 0 0.15em 0.65em var(--shadow-color);
    background-color: var(--accent-one-medium-bright);
    box-sizing: border-box;
}

.home-featured {
    grid-column: 1 / 4;
}

    .home-featured > a {
        color: inherit; /* blue colors for links too */
        text-decoration: inherit; /* no underline */
    }

    .home-featured > .home-featured-image {
        position: absolute;
        opacity: 0;
    }

.home-trending {
    grid-column: 4 / 7;
    min-width: fit-content;
}

.home-explain {
    grid-column: 1 / 7;
}

    .home-explain p {
        padding: 0 4em;
        text-indent: 2em;
        text-wrap: pretty;
    }

.home-suggestion {
    grid-column: 2 / 6;
    min-width: fit-content;
}

.home-blog {
    grid-column: 1 / 7;
}

/* #endregion Home Body */

/* #region Featured */

.home-featured-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
    height: 100%;
}

.home-featured-image {
    grid-row: 1;
    grid-column: 1;
    aspect-ratio: 1;
    border-radius: 2em;
    object-fit: cover;
    overflow: hidden;
}

.home-featured-description {
    grid-row: 1;
    grid-column: 2;
    line-height: 1.6;
    text-wrap: pretty;
    overflow: hidden;
}

/* #endregion Featured */

/* #region Trending */

a.home-trending-recipe, a.home-trending-recipe:visited {
    text-decoration: none;
    color: var(--main-text);
    background-clip: text;
    -webkit-background-clip: text;
}

h3.home-trending-recipe-name {
    margin: auto 0;
    padding: 0.5em 0.75em;
    border-radius: 2em;
    text-wrap: nowrap;
}

/* Menu list hover (when not mobile), auto hover, and mobile hover */
div.menuList-menu-container *:not(home-trending-mobile-hover):hover, a.home-trending-auto-hover > *, a.home-trending-mobile-hover > * {
    background-color: var(--accent-two-medium-light);
}

/* Puts the background color on the first Trending recipe when none of the first recipe's siblings (~) have hover or home-trending-auto-hover or home-trending-mobile-hover */
div.menuList-menu-container a:first-child:not(:has(~ :hover, ~ .home-trending-auto-hover, ~ .home-trending-mobile-hover)) > h3 {
    background-color: var(--accent-two-medium-light);
}

/* #endregion Trending */

/* #region Suggestion */

form.home-suggestion-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr minmax(min-content, max-content) min-content 1.5fr;
    gap: 1em 1.5em;
}

    form.home-suggestion-form input[type="submit"] {
        position: relative;
        grid-row: 5;
        grid-column: 2;
        justify-self: end;
        margin-right: 2em;

        anchor-name: --suggestion-submit;
    }

div.suggestion-loader {
    position-anchor: --suggestion-submit;
    position-visibility: always;
    position-area: left center;
    width: anchor-size(width);
    margin-right: 0.25em;
}

input#SuggestionFlavor {
    grid-column: 2;
    grid-row: 2;
}

div.suggestion-textarea-container {
    grid-column: 1 / 3;
    grid-row: 3;
}

textarea.suggestion-description-input {
    box-sizing: border-box;
    width: 100%;
    resize: vertical;
    field-sizing: content;
}

div.suggestion-input-counter-container {
    font-size: 0.7rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    gap: 0.5ch;
    padding-right: 0.5em;
}

label:has(input.suggestion-marketing-input) {
    grid-column: 2;
    grid-row: 4;
    width: fit-content;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: flex-end;
    gap: 0.25em;
    padding-right: 1em;
}

div.suggestion-toast-container {
    grid-column: 1;
    grid-row: 5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
}

div.suggestion-toast {
    position: absolute;
    transform: translateY(6em);
    opacity: 0;
    padding: 0.5em 1em;
    color: var(--main-text);
    background-color: var(--accent-two-medium-light);
    border-radius: 0.35em;
    border: 1px solid var(--accent-two-medium-dim);
    transition: transform 0.35s ease-in, opacity 0.25s ease-in;
}

div.suggestion-toast-container .suggestion-toast-popped {
    transform: translateY(0em);
    opacity: 1;
}

/* #endregion Suggestion */

/* #region Blog */

div.home-blog-body {
    display: flex;
    flex-flow: column nowrap;
    padding: 0 4em;
}

    div.home-blog-body div.home-blog-project-container:not(:last-child)::after {
        display: block;
        content: "";
        border-bottom: 0.15em solid var(--accent-two-medium-light);
        margin: 0 1rem;
    }

/* #endregion Blog */

/* #region Media Queries */

/* Desktop */
@media (max-width: 1500px) {
    div.home-body {
        padding: 0 4%;
        gap: 4rem 2rem;
    }
}

@media (max-width: 1250px) {
    div.home-body {
        padding: 0 10%;
    }

    h2.home-header-decorate {
        text-wrap: wrap;
    }

    /* Featured */
    .home-featured-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        row-gap: 1em;
    }

    .home-featured-description {
        grid-column: 1;
        grid-row: 2;
    }

    /* Trending */
    .menuList-container {
        grid-template-columns: 1fr !important;
        row-gap: 1em;
    }

    div.menuList-menu-container {
        grid-column: 1;
        grid-row: 1;
    }

    div.menuList-image-container {
        grid-column: 1;
        grid-row: 2;
    }
}

/* Tablet */
@media (max-width: 800px) {
    div.home-body {
        padding: 0 2.5%;
        gap: 3em 2em;
    }

    .home-explain p, div.home-blog-body {
        padding: 0 2em;
    }
    
    .home-suggestion {
        grid-column: 1 / 7;
    }
}

/* Mobile */
@media (max-width: 500px) {
    div.home-body {
        grid-template-columns: 1fr;
        padding: 0 5%;
    }

    div.home-item {
        grid-column: 1;
    }

    .home-explain p, div.home-blog-body {
        padding: 0 1em;
    }

    /* Suggestion */
    form.home-suggestion-form {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, 1fr) auto min-content 1.5fr;
        gap: 1em;
    }

    input#SuggestionFirstName {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    input#SuggestionLastName {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    input#SuggestionEmail {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    input#SuggestionFlavor {
        grid-column: 1 / 3;
        grid-row: 4;
    }

    div.suggestion-textarea-container {
        grid-column: 1 / 3;
        grid-row: 5;
    }

    label:has(input.suggestion-marketing-input) {
        grid-column: 1 / 3;
        grid-row: 6;
        padding-right: 0.5em;
    }

    form.home-suggestion-form input[type="submit"] {
        grid-column: 2;
        grid-row: 7;
        margin-right: 0.5em;
    }

    div.suggestion-toast-container {
        grid-column: 1;
        grid-row: 7;
    }

    div.suggestion-toast {
    }

    div.suggestion-toast-container .suggestion-toast-popped {
    }
}

/* #endregion Media Queries */