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

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

@media (max-width: 125rem) {
    html {
        font-size: 62.5%; /* 10px */
    }

    .hero {
        max-width: 100vw;
    }

    .heading-primary {
        font-size: 4.4rem;
    }

}

/***********************************/
/* Below 1600px
/***********************************/
@media (max-width: 100rem) {
    html {
        font-size: 56.25%;
    }

    .hero-img {
        height: 54rem;
    }
}

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

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

    .hero-img {
        height: 50rem;
    }

    .grid {
        column-gap: 4.8rem;
        row-gap: 6.4rem;
    }

    .header {
        padding: 0 1.6rem;
    }

    .heading-secondary {
        font-size: 3.6rem;
    }

    .heading-tertiary {
        font-size: 2.4rem;
    }

    .main-nav-list {
        gap: 3.2rem;
    }

    .hero {
        gap: 4.8rem;
    }

}

/**********************************/
/* BELOW 940px (Portrait Tablets) */
/**********************************/

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

    body {
        padding-top: 8vh;
        height: 100vh;
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 120rem; /* if you want to constrain the width */
        min-height: 5rem;
        margin: 0 auto; /* to center the header if max-width is used */
    }

    .hero {
        height: auto;
        margin: 0;
        border: 0;
        grid-template-columns: 1fr;
        padding: 0 2.0rem;
        gap: 0;
    }

    .hero-img {
        width: 90%;
        max-width: 400px;
        height: auto;
    }

    .hero-highlights {
        grid-template-columns: unset;
        grid-column: 1;
        align-items: start;
        height: 100%;
        overflow: visible;
        scrollbar-width: thin;  /* For Firefox */
        scrollbar-color: #606060 transparent;
        /* For Chrome, Safari, and newer browsers */
        &::-webkit-scrollbar {
            width: 8px;  /* or your preferred width */
        }
        &::-webkit-scrollbar-track {
            background: inherit;  /* This will inherit the parent's background color */
        }
        &::-webkit-scrollbar-thumb {
            background: #888;  /* Color of the scrollbar thumb */
            border-radius: 4px;  /* Optional: rounds the corners */
        }

        display: flex;
        flex-direction: column;
   }


    .cta {
        /* 60% content 40% image */
        grid-template-columns: 3fr 2fr;
    }

    .cta-form {
        grid-template-columns: 1fr;
    }

    .btn--form {
        margin-top: 1.2rem;
    }

    /* MOBILE NAVIGATION */
    .desktop-only {
        display: none !important;
    }

    .btn-mobile-nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 4.8rem;
        background-color: #606060;
        border: none;
        cursor: pointer;
        transition: all 0.3s;
        z-index: 999;
        position: relative;
        margin-left: auto;
    }

    .mobile-nav {
        display: block;
    }

    .main-nav {
        display: none;
    }

    .nav-open .main-nav {
        opacity: 0.85;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    }

    .nav-open .icon-mobile-nav[name="close"] {
        display: block;
    }

    .nav-open .icon-mobile-nav[name="menu"] {
        display: none;
    }

    .main-nav-list {
        flex-direction: column;
        gap: 4.8rem;
    }

    .main-nav-link:link,
    .main-nav-link:visited {
        /*font-size: 3rem;*/
    }

    .career-highlights-carousel {
        display: block; /* Change from flex to block */
        transform: none !important; /* Prevent any transformations */
        max-width: 600px;
        margin: 0 auto;
    }

    .career-highlight {
        transform: none !important; /* Prevent any transformations */
        position: static !important; /* Remove any positioning */
        visibility: visible !important; /* Ensure all items are visible */
        opacity: 1 !important; /* Ensure all items are fully visible */
    }

    .highlight-clone {
        display: none;
    }

    .insight-page {
        height: calc(100vh - 8vh);
        position: relative;
        overflow: hidden;
    }

    .navigation-part {
        display: none;
    }

    .illustration-part {
        height: 100%;
    }

    .illustration-carousel {
        visibility: visible;
        overflow-y: scroll;
        scrollbar-width: thin;  /* For Firefox */
        scrollbar-color: #606060 transparent;
        /* For Chrome, Safari, and newer browsers */
        &::-webkit-scrollbar {
            width: 8px;  /* or your preferred width */
        }
        &::-webkit-scrollbar-track {
            background: inherit;  /* This will inherit the parent's background color */
        }
        &::-webkit-scrollbar-thumb {
            background: #888;  /* Color of the scrollbar thumb */
            border-radius: 4px;  /* Optional: rounds the corners */
        }
    }

    .illustration-track {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding-bottom: 30rem;
        transform: none !important;
    }

    .cloned {
        display: none;
    }

    .illustration {
        width: 100%;
        flex: 0 0 auto;
        margin-right: 0;
    }

    .illustration a {
        width: 85%;
    }

    .illustration img {
        width: 100%;
        height: auto;
    }

    .highlight-image {
        transform: none;
        box-shadow: none;
        z-index: auto;
    }

    .text-part {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 30vh;
        background-color: inherit;
        z-index: 10;
    }

    .insight {
        flex-direction: column;
        padding: 0 2.0rem;
    }

    .insight-text {
        font-size: 3.6rem;
        padding-bottom: 0;
    }

    .insight-tag {
        font-size: 2.0rem;
    }

    .insight-block {
        text-align-last: left;
    }

    .personal-info {
        position: relative;
        height: 100%;
        width: 100%;
        /*top: 20vh;*/
        display: flex;
        flex-direction: column;
        gap: 2.0rem;
        padding-top: 22vh;
        margin-bottom: 20vh;
        overflow-y: scroll;
        scrollbar-width: thin;  /* For Firefox */
        scrollbar-color: #606060 transparent;
        /* For Chrome, Safari, and newer browsers */
        &::-webkit-scrollbar {
            width: 8px;  /* or your preferred width */
        }
        &::-webkit-scrollbar-track {
            background: inherit;  /* This will inherit the parent's background color */
        }
        &::-webkit-scrollbar-thumb {
            background: #888;  /* Color of the scrollbar thumb */
            border-radius: 4px;  /* Optional: rounds the corners */
        }
    }

    .personal-photo {
        position: relative;
        width: 90%;
        max-width: 400px;
        height: auto;
    }

    .personal-photo img {
        width:100%;
        height: auto;
        border: 10px solid #606060;
    }

    .short-text {
        height: 20vh;
    }

    .personal-text {
        height: 100%;
        min-height: 100%;
        width: 85%;
        padding: 0;
        margin: 0;
    }

    .contact-photo {
        height: 80%;
        max-height: 50vh;
        width: auto;
        border: 10px solid #606060;
        margin-top: 3%;
    }

    .contact-text {
        width: 100vw;
        height: auto;
        padding: 0 2.0rem;
        position: fixed;
        bottom: 0;
        background-color: #F3EDD9;
        z-index: 20;
    }

    .contact-label {
        font-size: 3.6rem;
    }

    .contact-info-panels {
        grid-column: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 15vh;
    }

    .info-panel-column{
        max-width: 600px;
    }

    .info-panel {
        height: 100%;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2.0rem;
    }
}

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

@media (max-width: 44em) {
    .grid--3-cols,
    .grid--4-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .diets {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .heading-secondary {
        margin-bottom: 4.8rem;
    }

    .pricing-plan {
        width: 100%;
    }

    .grid--footer {
        grid-template-columns: repeat(6, 1fr);
    }

    .logo-col,
    .address-col {
        grid-column: span 3;
    }

    .nav-col {
        grid-row: 1;
        grid-column: span 2;
        margin-bottom: 3.2rem;
    }
}

/**********************************/
/* BELOW 544px (Phone) */
/**********************************/

@media (max-width: 34em) {
    .grid {
        row-gap: 4.8rem;
    }

    .grid--2-cols,
    .grid--3-cols,
    .grid--4-cols {
        grid-template-columns: 1fr;
    }

    .btn,
    .btn:link,
    .btn:visited {
        padding: 2.4rem 1.6rem;
    }

    .section-hero {
        padding: 2.4rem 0 6.4rem 0;
    }

    .hero {
        /*padding: 0 3.2rem;*/
    }

    .hero-img {
        /*width: 80%;*/
    }

    .logos img {
        height: 1.2rem;
    }

    .cta {
        grid-template-columns: 1fr;
    }

    .cta-text-box {
        padding: 3.2rem;
    }

    .cta-img-box {
        height: 32rem;
        grid-row: 1;
    }

}

/**********************************/
/* 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;
}

@media (max-width: 75em) {
    .no-flexbox-gap .main-nav-list li:not(:last-child) {
        margin-right: 3.2rem;
    }
}

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