@import "fonts.css";

:root {
    --text-white: white;
    --light-brown: #B57348;
    --dark-brown: #4A3228;
    --text-dark-brown: #2B1911;
    --dark-red: #712200;
    --heading-padding-inline: max(7vw, 20px);
}

* {
    box-sizing: border-box;
}

body {
    font-size: 15px;
    margin: 0;
    padding: 0;
    background: #4b3b2e;
}

/*Body background is separate to avoid a jarring color on overscroll*/
.page {
    background: white;
}

.cta-button {
    position: relative;
    display: inline-block;
    padding: 14px 18px;

    font-family: 'Changa';
    font-weight: 600;
    font-size: 1.1em;
    line-height: 1em;

    --text-color: var(--text-white);

    background-color: transparent; /* reset */
    text-decoration: none;
    border: none;
    cursor: pointer;

    --bg-image: url("../assets/cta-button-background.svg");
    --bg-color-placeholder: var(--light-brown);
    &.secondary {
        --bg-image: url("../assets/cta-button-background-body.svg");
        --bg-color-placeholder: var(--dark-brown);
    }
    &.tertiary {
        --bg-image: url("../assets/cta-button-background-footer.svg");
        --bg-color-placeholder: var(--dark-red);
        --text-color: var(--dark-red);
    }
    &::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;

        background: var(--bg-color-placeholder);
        background: var(--bg-image);
        background-position: center;
        background-size: 100% 100%;
        transition: 0.1s;
    }

    span {
        display: inline-block;
        position: relative;
        top: 1px;
        border-top: 2px solid transparent;
        color: var(--text-color);
        border-bottom: 2px solid transparent;
        transition: 0.1s;
    }
    svg {
        vertical-align: middle;
        height: 1em;
        margin-block: -1em;
        margin-right: 0.15em;
    }
    &:hover span {
        border-bottom-color: var(--text-color);
    }
}

.navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;

    position: absolute;
    top: max(3vw, 20px);
    left: var(--heading-padding-inline); /*Same as heading padding*/
    z-index: 1;

    .mobile-hamburger-open {
        position: relative;
        display: none;
        input {
            position: relative;
            left: 13px;
            transform: scale(3);
            opacity: 0;
        }
        svg {
            color: white;
            position: relative;
            height: 30px;
            left: -25px;
            top: 11px;
        }
    }
    .logo-home-link:hover {
        border-color: transparent;
    }
    .logo-nav {
        padding-right: 7px;
        height: 1.75em;
    }
    a {
        color: var(--text-white);
        text-decoration: none;
        border-bottom: 1.5px solid transparent;
        font-family: 'Changa';
        font-size: 1.1em;
        line-height: 1.1em;
        transition: 0.1s;
        &:hover {
            border-bottom-color: var(--text-white);
        }
    }

    @media (width < 500px) {
        flex-direction: column;
        align-items: start;
        position: absolute;
        top: var(--heading-padding-inline);
        right: 0;
        bottom: 0;
        clip-path: circle(25px at 25px 25px);
        background: var(--light-brown);
        outline: 10vw solid var(--light-brown);
        transition: clip-path 0.25s;
        padding-inline: 10px;

        a {
            font-size: 1.3em;
        }
        .mobile-hamburger-open {
            display: block;
            margin-bottom: 30px;
        }
        .logo-nav {
            position: fixed;
            top: calc(100dvh - 100px);
            height: 60px;
        }
        &:not(:has(:checked)) {
            .close {
                display: none;
            }
        }
        &:has(:checked) {
            position: fixed; /*prevent the menu from scrolling while open*/
            clip-path: circle(200% at 25px 25px);
            .open {
                display: none;
            }
        }
    }
}

.header-wrapper {
    background-color: #6e4d2a;
    background-image: url("../assets/pulpo.jpg");
    background-size: 115%;
    background-position: left 20%;
    &.background-b {
        background-color: #736f3a;
        background-image: url("../assets/green-yellow.jpg");
        background-position: center 20%;
    }
    &.background-c {
        background-color: #686868;
        background-image: url('../assets/soup-taylor-kiser.jpg');
        background-position: 60% 25%;
    }
    &.background-d {
        background-color: #641b04;
        background-image: url('../assets/meats-basket.jpg');
        background-position: left 30%;
        background-size: 100%;
    }

    --extra-height: 18vh;
    height: calc(100vh + var(--extra-height));
    max-height: 76.5vw;
    min-height: 450px;
    margin-bottom: 10px;

    clip-path: polygon(100% 0%, 100% 99.5%, 66% 100%, 53% 88%, 0% 85%, 0% 0%);
    &.noclip {
        clip-path: none;
        margin-bottom: -70px;
    }
    &.less-clip {
        @media (width >= 450px) {
            margin-bottom: -20px;
        }
    }
    &.short {
        max-height: max(50vh, 45vw);
        @media (width >= 450px) {
            clip-path: polygon(100% 0%, 100% 99.5%, 66% 100%, 53% 84%, 0% 82%, 0% 0%);
        }
        .header .header-content {
            margin-top: 16vh;
        }
    }

    @media (width < 800px) {
        background-size: 150%;
        background-position: center 15%;
        margin-bottom: 50px;
        max-height: 100vw;
        clip-path: polygon(100% 0%, 100% 99.5%, 82% 100%, 68% 94%, 0% 92%, 0% 0%);;
    }
    @media (width < 450px) {
        background-position: center 15%;
        max-height: 160vw;
        background-size: 270%;
        &.short {
            clip-path: polygon(100% 0%, 100% 99.5%, 66% 100%, 53% 88%, 0% 85%, 0% 0%);
            &.background-c {
                 background-position: left center;
            }
            .header {
                background: rgba(0, 0, 0, .64);
            }
        }
    }

    .header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding-inline: var(--heading-padding-inline);
        padding-bottom: var(--extra-height);
        padding-top: 50px; /*Space for the navigation menu*/

        background-image: linear-gradient(120deg, rgba(0, 0, 0, .64) 25%, rgba(0, 0, 0, 0) 60%);

        .header-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            margin-block: 10vh;
            @media (width >= 800px) {
                margin-bottom: 18vh;
            }
        }
        h1, h2 {
            position: relative;
            font-size: max(90px, 15vh);
            font-family: 'Changa One';
            line-height: 0.7em;
            color: var(--text-white);
            left: -4px;
            margin: 0;
        }
        h2 {
            font-size: min(max(70px, 13vw), 100px);
            @media (width < 450px) {
                font-size: 20vw;
            }
        }
        .logo-large {
            max-height: 20vh;
            max-width: 40vw;
            min-width: min(80vw, 200px);
            min-height: 75px;
            @media (width < 800px) {
                max-width: 70vw;
            }
        }
    }
}

.brick-heading-container {
    background-image: url('../assets/menu-heading-background.svg');
    &.background-b {
        background-image: url('../assets/menu-heading-background-b.svg');
    }
    background-size: 120% 120%;
    background-position: 60% 40%;
    @media (width < 550px) {
        background-size: 160% 120%;
        background-position: 45% 40%;
    }

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;

    height: 18vw;
    min-height: 13em;
    margin-bottom: -4%;

    h3 {
        color: var(--text-white);
        font-family: 'Changa';
        font-weight: 500;
        font-size: 2em;
        @media (width < 450px) {
            font-size: 1.8em;
        }
        padding-left: 20vw;
        flex-grow: 1;
    }
}

.content {
    margin-left: 12vw;
    @media (width < 450px) {
        margin-left: 10vw;
    }
    &.extra-indent {
        @media (width >= 800px) {
            margin-left: 17vw;
        }
    }
    font-family: 'Reforma 2018';
    color: var(--text-dark-brown);

    h3 {
        font-size: 1.36em;
        margin: 0;
    }
    p {
        margin-block: .65em;
        max-width: 42vw;
        @media (width < 800px) {
            max-width: 76vw;
        }
    }
    a {
        color: inherit;
        text-decoration: underline;
    }
    br {
        display: block;
        margin-top: .5em;
    }
}

.menu-item {
    display: grid;
    grid-template: auto / min(150px, 30vw) auto;
    grid-template-areas: "image description";
    column-gap: 30px;
    margin-bottom: 20px;
    margin-right: 10vw;
    margin-left: -2vw;
    @media (width >= 800px) {
        margin-left: 1vw;
    }
    min-height: 125px;

    h4 {
        font-size: 1.5em;
        font-family: 'Reforma 2018';
        margin: 0;
    }
    p {
        margin: 0;
    }
    .description {
        align-self: start;
        grid-area: description;
        margin-bottom: 1em;
    }
    img {
        grid-area: image;
        height: 125px;
        max-height: 30vw;
        width: 100%;
        object-fit: cover;
    }
}

.middle-image-section {
    position: relative;
    height: min(50vw, 80vh);
    margin-top: 120px;
    margin-bottom: 0;
    overflow: hidden;

    @media (width < 800px) {
        margin-top: 70px;
        margin-bottom: 40px;

        &>* {
            left: -5vw;
            width: 120vw;
        }
        height: max(40vh, 70vw);
        max-height: 90vh;
    }

    &>* {
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
    }
    .image-container {
        display: flex;
        align-items: center;
        justify-content: center;
        clip-path: polygon(73.1% 1.9%, 76.6% 57%, 68.1% 76.9%, 12.1% 80.2%, 9.9% 18.2%, 16% 5.1%);
        img {
            position: relative;
            width: 66%;
            top: -9%;
            left: -6%;
            transform: rotate(-4.8deg);

            @media (width < 800px) {
                width: unset;
                object-fit: cover;
                height: 90%;
                min-width: 80%;
            }
        }
    }
    .supporting-blocks {
        background-image: url("../assets/middle-image-supporting-blocks.svg");
        background-size: 100% 100%;
    }
}

form {
    display: flex;
    flex-direction: column;
    align-items: start;

    margin-block: 1em;
    font-size: 1.1em;
    max-width: 600px;

    color: var(--text-dark-brown);

    label {
        display: flex;
        flex-direction: column;
        align-items: start;
        margin-top: .75em;
    }
    .row {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        &:not(.zero-gap) {
            gap: 1em;
        }
    }
    .separator {
        display: inline-block;
    }

    input, select, .separator {
        padding: .5em .7em;
        border: none;
        background: #eee;
        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent;
        transition: 0.1s;
        font-family: 'Reforma 2018';
        &.separator {
            padding-block: .2em;
        }
        &:not(.separator):hover {
            background: #ddd;
            border-bottom-color: var(--dark-brown);
        }
        &[type=number] {
            text-align: center;
            max-width: 3em;
            &.four-digit {
                max-width: 4em;
            }
            &.six-digit {
                max-width: 5em;
            }
        }
        &:not(.show-spin-btn) {
            -moz-appearance: textfield;
            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }
    }
    .cta-button {
        margin-top: 1.4em;
        font-size: 1em;
    }
}

.footer {
    display: grid;
    justify-items: center;
    grid-template: 1fr auto 1fr / 1fr 1fr;
    grid-template-areas:
            "logo phone"
            "logo address"
            "cta-button links";

    padding-inline: 8vw;
    padding-bottom: 60px;
    padding-top: 120px;
    margin-top: 12%;

    background-color: var(--dark-red);
    clip-path: polygon(0% 100%, 0% 9.8%, 40.1% 0%, 53.5% 26.4%, 100% 26.4%, 100% 100%);

    @media (width < 800px) {
        clip-path: polygon(0% 100%, 0% 3%, 40.1% 0%, 53.5% 11.4%, 100% 11.4%, 100% 100%);
        margin-top: 22%;
        font-size: 1.1em;
        grid-template: auto auto auto auto auto / auto;
        grid-template-areas: "logo" "address" "phone" "links" "cta-button";
    }
    p {
        text-align: center;
        line-height: 1.3em;
        margin: 0;
        color: var(--text-white);
        font-family: 'Changa';
    }
    a {
        color: var(--text-white);
        transition: 0.1s;
        &:hover { text-decoration-color: transparent; }
    }
    .links {
        grid-area: links;
    }
    .phone {
        margin-top: 1em;
        grid-area: phone;
        font-weight: 600;
        align-self: end;
    }
    .address { grid-area: address; }
    .cta-button {
        align-self: start;
        grid-area: cta-button;
        font-size: 1em;
        margin-top: 1em;
    }
    .logo {
        height: 90px;
        max-width: 70vw;
        grid-area: logo;
    }
}