/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media screen and (max-width: 1024px) {

    .logo img {
        width: 7rem;
        height: auto;
        margin: 1rem 0 0 1rem;
    }

    nav {
        margin: 2rem;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 250px;
        background-color: rgb(27, 37, 128);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1rem;
        padding: 2rem;
        opacity: 0.8;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        transition: right 0.3s ease;
    }

    .nav-links.menu-open {
        right: 0;
    }

    .nav-links.menu-open ul {
        margin-top: 8rem;
    }

    .nav-links ul {
        flex-direction: column;
        gap: 3rem;
    }

    .nav-links ul li a {
        font-size: 1.8rem;
        color: white;
    }

    .hamburger-icon.visible {
        display: block;
    }

    .close-icon {
        display: block;
        position: absolute;
        top: 1rem;
        left: 1rem;
    }

    .contact-infos,
    .contact-map {
        width: 80vw;
        max-width: 72rem;
    }

    .contact-map {

        margin-top: 3rem;
    }
}

@media screen and (max-width: 800px) {
    body {
        font-size: 14px;
    }
}



@media screen and (max-width: 600px) {
    body {
        font-size: 11px;
    }
}

@media (max-width: 84em) {
    #layout-container {
        width: 100vw;
    }

}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
    html {
        /* 9px / 16px  */
        font-size: 56.25%;
    }

    .no-flexbox-gap .main-nav-list li:not(:last-child) {
        margin-right: 3.2rem;
    }


}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
    html {
        /* 8px / 16px = 0.5 = 50% */
        font-size: 50%;
    }

    .flxc-md-4 {
        flex: 0 0 calc(25% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }

    .flxc-md-3 {
        flex: 0 0 calc(33.33% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }

    .flxc-md-2 {
        flex: 0 0 calc(50% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }

    .flxc-md-1 {
        flex: 0 0 calc(100% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }

    .no-flexbox-gap .main-nav-list li:not(:last-child) {
        margin-right: 0;
        margin-bottom: 4.8rem;
    }

}

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {
    .flxc-sm-4 {
        flex: 0 0 calc(25% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }

    .flxc-sm-3 {
        flex: 0 0 calc(33.33% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }

    .flxc-sm-2 {
        flex: 0 0 calc(50% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }

    .flxc-sm-1 {
        flex: 0 0 calc(100% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {


    .d-xs-none {
        display: none !important;
    }

    .flex-row {
        margin: 0 0.2rem;
    }

    .flxc-xs-4 {
        flex: 0 0 calc(25% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }

    .flxc-xs-3 {
        flex: 0 0 calc(33.33% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }

    .flxc-xs-2 {
        flex: 0 0 calc(50% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }

    .flxc-xs-1 {
        flex: 0 0 calc(100% - 5rem);
        /* flex-grow: , flex-shrink:   , flex-basis: */
        margin: 1rem;
    }
}


/* 
  - Font sizes (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
  
  - Spacing system (px)
  2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
  */

/**************************/
/* Fixing Safari flexbox gap */
/**************************/

.no-flexbox-gap .main-nav-list li:not(:last-child) {
    margin-right: 4.8rem;
}

.no-flexbox-gap .list-item:not(:last-child) {
    margin-bottom: 1.6rem;
}

.no-flexbox-gap .list-icon:not(:last-child) {
    margin-right: 1.6rem;
}

.no-flexbox-gap .delivered-faces {
    margin-right: 1.6rem;
}

.no-flexbox-gap .meal-attribute:not(:last-child) {
    margin-bottom: 2rem;
}

.no-flexbox-gap .meal-icon {
    margin-right: 1.6rem;
}

.no-flexbox-gap .footer-row div:not(:last-child) {
    margin-right: 6.4rem;
}

.no-flexbox-gap .social-links li:not(:last-child) {
    margin-right: 2.4rem;
}

.no-flexbox-gap .footer-nav li:not(:last-child) {
    margin-bottom: 2.4rem;
}