/* font */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* css reset styles*/
/* https://www.joshwcomeau.com/css/custom-css-reset/ */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    line-height: 1.5;
    /* seems to mess with font-weight */
    /* -webkit-font-smoothing: antialiased; */
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* variables */

:root {
    --brown-0: #F5EEDE;
    --brown-200: #DB9C60;
    --brown-400: #AE794B;
    --brown-600: #976841;
    --brown-800: #6A452C;
    --brown-1000: #3D2217;

    --neutral-0: #FFF;
    --neutral-1000: #000;

    --font-primary: Inter;
    --font-fallback: sans-serif;
}

/* ___________________________________ PHONE ___________________________________ */

/* general styles*/

body {
    font-family: var(--font-primary), var(--font-fallback);
}

section, header, footer {
    display: flex;
    padding: 8px 16px;
}

ul {
    list-style: none;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

#services, #about, #locations, #contact {
    scroll-margin-top: 64px;
}

/* sub navigation */

#sub-navigation {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 24px;

    background-color: var(--brown-800);
}

#sub-navigation p {
    font-size: 16px;

    color: var(--brown-0);
}

/* header */

header {
    position: sticky;
    top: 0;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding-top: 12px;
    padding-bottom: 12px;

    background-color: var(--brown-0);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

header .logo-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    gap: 8px;
}

header .logo-svg {
    width: 32px;
    height: 40px;

    background-color: var(--brown-1000);
}

header .logo-text {
    font-size: 20px;
    font-weight: 400;
}

header .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 8px;
}

header .line {
    width: 36px;
    height: 4px;

    background-color: var(--neutral-1000);
}

/* navigation */

#navigation {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#navigation .navigation-links {
    display: none;
}

#navigation .side-bar {
    position: fixed;
    top: 0;
    right: 0;

    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;


    height: 100vh;
    width: 100%;
    z-index: 999;
    padding: 32px;
    gap: 32px;

    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.2);
}

#navigation .side-bar li:not(:first-child) {
    width: 100%;
}

#navigation .side-bar a {
    width: 100%;
    color: var(--neutral-1000);
}

/* hero */

#hero {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 24px;

    padding-top: 24px;
    padding-bottom: 24px;
}

#hero .image {
    width: 100%;
    height: 208px;

    background-color: var(--brown-1000);
}

#hero .text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    width: 100%;

    gap: 8px;
}

#hero h1 {
    font-size: 36px;
    letter-spacing: -4%;

    color: var(--neutral-1000);
}

#hero .sub-heading {
    font-size: 24px;

    color: var(--brown-200);
}

#hero .button {
    display: flex;

    padding: 12px 24px;

    background-color: var(--brown-1000);
}

#hero .button p {
    font-size: 16px;
    font-weight: 400;

    color: var(--neutral-0);
}

/* facts */

#facts {
    padding-top: 8px;
    padding-bottom: 64px;
}

#facts .grid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;

    width: 100%;
    padding: 16px;
    gap: 16px;

    background-color: var(--brown-0);
}

#facts .fact {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 16px 8px;

    font-size: 14px;
    text-align: center;
}

#facts .one {
    background-color: var(--brown-1000);
    color: var(--brown-200);
}

#facts .two {
    background-color: var(--neutral-0);
    border: 2px solid var(--brown-1000);
    color: var(--brown-1000);
}

#facts .three {
    background-color: var(--brown-200);
    color: var(--brown-1000);
}

#facts .four {
    background-color: var(--neutral-0);
    border: 2px solid var(--brown-200);
    color: var(--brown-200);
}

/* services */

#services {
    flex-direction: column;

    padding-top: 64px;
    padding-bottom: 128px;
    gap: 16px;
}

#services h2 {
    font-size: 32px;
}

#services .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 16px;
}

#services .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    width: 100%;
    padding: 64px 16px 16px 16px;
    gap: 8px;
}

#services .one {
    background-color: var(--brown-0);
}

#services .two {
    background-color: var(--brown-1000);
}

#services p {
    font-size: 24px;
}

#services .one p {
    color: var(--brown-1000);
}

#services .two p {
    color: var(--brown-0);
}

#services .one .button p {
    font-size: 14px;
    color: var(--brown-0);
}

#services .two .button p {
    font-size: 14px;
    color: var(--brown-1000);
}

#services .button {
    padding: 8px 16px;
}

#services .one .button {
    background-color: var(--brown-1000);
}

#services .two .button {
    background-color: var(--brown-0);
}

/* about */

#about {
    flex-direction: column;

    padding-top: 16px;
    padding-bottom: 16px;
    gap: 20px;

    background-color: var(--brown-800);
}

#about .image {
    width: 100%;
    height: 208px;

    background-color: var(--brown-400);
}

#about .text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    
    gap: 4px;
}

#about .sub-heading {
    font-size: 14px;
    color: var(--neutral-0);
}

#about h2 {
    font-size: 32px;
    color: var(--neutral-0);
}

#about .paragraph {
    margin-top: 24px;

    font-size: 14px;
    color: var(--neutral-0);
}

/* menu */

#menu {
    padding-top: 128px;
    padding-bottom: 128px;
}

#menu .image {
    width: 100%;
    height: 160px;

    background-color: var(--brown-400);
}

/* foodtruck */

#foodtruck {
    flex-direction: column;

    padding-top: 16px;
    padding-bottom: 16px;
    gap: 20px;

    background-color: var(--brown-0);
}

#foodtruck .image {
    width: 100%;
    height: 208px;

    background-color: var(--brown-1000);
}

#foodtruck .text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    
    gap: 4px;
}

#foodtruck .sub-heading {
    font-size: 14px;
    color: var(--neutral-1000);
}

#foodtruck h2 {
    font-size: 32px;
    color: var(--neutral-1000);
}

#foodtruck .paragraph {
    margin-top: 24px;

    font-size: 14px;
    color: var(--neutral-1000);
}

/* locations & times */

#locations {
    flex-direction: column;
    align-items: center;

    padding-top: 40px;
    padding-bottom: 60px;

    gap: 48px;
}

#locations h2 {
    font-size: 32px;
    text-align: center;
    color: var(--neutral-1000);
}

#locations .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    width: 100%;
    gap: 24px;
}

#locations .card-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    gap: 8px;
}

#locations .day {
    font-size: 16px;
}

#locations .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    padding: 16px;
    gap: 16px;

    background-color: var(--brown-0);
} 

#locations .card>div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;

    width: 100%;
    padding: 16px;
}

#locations .time {
    font-size: 16px;
}

#locations .location {
    font-size: 16px;
    text-align: center;
}

#locations .one>div {
    background-color: var(--brown-1000);
}

#locations .one .time {
    color: var(--brown-200);
}

#locations .two>div {
    border: 2px solid var(--brown-1000);
    background-color: var(--neutral-0);
}

#locations .two .time {
    color: var(--brown-1000);
}

#locations .three>div {
    background-color: var(--brown-200);
}

#locations .three .time {
    color: var(--brown-1000);
}

#locations .four>div {
    border: 2px solid var(--brown-200);
    background-color: var(--neutral-0);
}

#locations .four .time {
    color: var(--brown-200);
}

#locations .five>div {
    background-color: var(--neutral-1000);
}

#locations .five .time {
    color: var(--neutral-0);
}

/* contact */

#contact {
    padding-top: 40px;
    padding-bottom: 40px;
}

#contact .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    width: 100%;
    padding: 16px;
    gap: 16px;

    background-color: var(--brown-600);
} 

#contact h2 {
    font-size: 32px;
    color: var(--brown-0);
}

#contact .card-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    width: 100%;
    gap: 20px;
}

#contact .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    width: 100%;
    padding: 24px;
    gap: 8px;

    background-color: var(--brown-0);
}

#contact .description {
    font-size: 14px;
    color: var(--neutral-1000);
}

#contact .phone, .mail {
    font-size: 20px;
    color: var(--neutral-1000);
}

/* footer */

footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: min-content;

    padding-top: 24px;
    padding-bottom: 24px;
    gap: 56px;

    background-color: var(--brown-800);
}

footer .logo-wrapper, .navigation-heading-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    gap: 8px;
}

footer .logo-image, .navigation-image {
    width: 32px;
    height: 40px;

    background-color: var(--brown-1000);
}

footer .logo-text {
    font-size: 20px;
    font-weight: 400;
    color: var(--brown-0);
}

footer .social-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 16px;
}

footer .instagram, .youtube, .tiktok {
    width: 48px;
    height: 48px;

    background-color: var(--brown-400);
}

footer .navigation-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 16px;
}

footer .navigation-heading {
    font-size: 20px;
    color: var(--brown-0);
}

footer a {
    font-size: 16px;
    color: var(--brown-0);
}

footer .legal-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 8px;
}

footer .legal-wrapper a {
    font-size: 16px;
    color: var(--brown-0);
    text-decoration: underline;
}

/* ___________________________________ HORIZONTAL PHONE ___________________________________ */

@media screen and (min-width: 481px) {
    /* general */

    #services, #about, #locations, #contact {
        scroll-margin-top: 72px;
    }

    /* header */

    header {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    
    /* sub navigation */

    #sub-navigation {
        gap: 32px;
    }

    /* navigation */

    #navigation .side-bar {
        width: 50%;
    }

    /* hero */

    /* facts */

    #facts .fact {
        padding: 24px 16px;

        font-size: 20px;
    }

    /* services */

    #services .card {
        padding: 96px 32px 32px 32px;
    }

    #services p {
        font-size: 28px;
    }

    #services .button {
        padding: 12px 24px;
    }

    /* about */

    /* menu */

    #menu .image {
        height: 200px;
    }

    /* foodtruck */

    /* locations */

    #locations .day {
        font-size: 20px;
    }

    #locations .time {
        font-size: 20px;
    }

    #locations .location {
        font-size: 20px;
    }

    /* contact */

    #contact .content-wrapper {
        padding: 24px;
        gap: 24px;
    }

    #contact .description {
        font-size: 16px;
    }
    
    #contact .phone, .mail {
        font-size: 24px;
    }

    /* footer */

    footer {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

/* ___________________________________ TABLET ___________________________________ */

@media screen and (min-width: 769px) {
    /* general styles */

    section, header, footer {
        padding: 12px 32px;
    }

    #services, #about, #locations, #contact {
        scroll-margin-top: 88px;
    }

    /* header */

    header {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    header .logo-text {
        font-size: 24px;
    }

    /* navigation */

    /* hero */

    #hero {
        flex-direction: row;
        align-items: center;

        padding-top: 32px;
        padding-bottom: 8px;
        gap: 16px;
    }

    #hero .text-wrapper {
        order: -1;
    }

    #hero h1 {
        font-size: 48px;
    }

    #hero .button {
        margin-top: 16px;
    }

    #hero .image {
        height: 400px;
    }

    /* facts */

    /* services */

    #services .wrapper {
        flex-direction: row;
    }

    #services .card {
        padding: 128px 16px 16px 16px;
    }

    #services p {
        font-size: 32px;
    }

    /* about */

    #about {
        flex-direction: row;
        align-items: center;
        
        padding: 32px;
        gap: 32px;
    }

    #about .image {
        width: 100%;
        height: 400px;
    }

    #about .text-wrapper {
        width: 100%;
    }

    #about .sub-heading {
        font-size: 20px;
    }

    #about h2 {
        font-size: 40px;
    }

    #about .paragraph {
        font-size: 16px;
    }

    /* menu */

    #menu .image {
        height: 240px;
    }

    /* foodtruck */

    #foodtruck {
        flex-direction: row;
        align-items: center;
        
        padding: 32px;
        gap: 32px;
    }

    #foodtruck .image {
        width: 100%;
        height: 400px;
    }

    #foodtruck .text-wrapper {
        width: 100%;

        order: -1;
    }

    #foodtruck .sub-heading {
        font-size: 20px;
    }

    #foodtruck h2 {
        font-size: 40px;
    }

    #foodtruck .paragraph {
        font-size: 16px;
    }

    /* locations */

    #locations {
        align-items: flex-start;
    }

    #locations .card-wrapper {
        align-items: flex-start;
    }

    #locations .card {
        flex-direction: row;

        padding: 8px;
        gap: 48px;
    }

    #locations .card>div {
        width: fit-content;
        padding-left: 32px;
        padding-right: 32px;
    }

    /* contact */

    #contact .content-wrapper {
        padding: 32px;
    }

    #contact .description {
        font-size: 20px;
    }
    
    #contact .phone, .mail {
        font-size: 28px;
    }

    /* footer */

    footer {
        grid-template-columns: 1fr 1fr;

        padding-top: 32px;
        padding-bottom: 64px;
    }

    footer .logo-wrapper {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    footer .social-wrapper {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    footer .legal-wrapper {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
    }

    footer .navigation-wrapper {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 4;
    }
}

/* ___________________________________ DESKTOP ___________________________________ */

@media screen and (min-width: 1281px) {
    /* general styles */

    section, header, footer {
        padding: 12px 120px;
    }

    /* header */

    header {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    header>.hamburger {
        display: none;
    }

    /* navigation */
    
    #navigation .navigation-links {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;

        gap: 32px;
    }

    #navigation a {
        color: var(--neutral-1000);
    }

    /* hero */

    #hero h1 {
        font-size: 72px;
    }

    #hero .sub-heading {
        font-size: 32px;
    }

    #hero .button {
        padding: 16px 32px;
    }

    #hero .image {
        height: 480px;
    }

    /* facts */

    #facts .grid {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    /* services */

    #services .wrapper {
        gap: 32px;
    }

    #services .card {
        padding: 196px 32px 32px 32px;
    }

    #services p {
        font-size: 48px;
    }

    /* about */

    #about {
        padding: 32px 120px;
        gap: 60px;
    }

    /* menu */

    #menu .image {
        height: 360px;
    }

    /* foodtruck */

    #foodtruck {
        padding: 32px 120px;
        gap: 60px;
    }

    /* locations */

    #locations .card {
        padding: 16px;
    }

    #locations .time {
        font-size: 24px;
    }

    #locations .location {
        font-size: 24px;
    }

    /* contact */

    #contact .content-wrapper {
        padding: 40px;
    }

    #contact .card-wrapper {
        flex-direction: row;

        gap: 40px;
    }

    #contact

    #contact .description {
        font-size: 20px;
    }
    
    #contact .phone, .mail {
        font-size: 32px;
    }

    footer {
        grid-template-columns: 1fr 1fr min-content;

        padding-top: 40px;
        padding-bottom: 120px;
    }

    footer .logo-wrapper {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    footer .social-wrapper {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
    }

    footer .legal-wrapper {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    footer .navigation-wrapper {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 3;
    }
}