/* rem and em do NOT depend on font-size in parent, it depends on the root font-size */
/* Instead, 1rem = 1em = 16px */


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


@media (max-width: 106em) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*1344px = 1344px / 16px = 84rem */
@media (max-width: 84em) {
  .hero {
    max-width: 120rem;
  }

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

  .section-testimonials {
    grid-template-columns: 1fr;
  }

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

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

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

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

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

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

  .header {
    padding: 0 3.2rem;
  }

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

  .hero {
    gap: 4.8rem;
  }


}

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

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

  .hero {
    grid-template-columns: 1fr;
    padding: 0 8rem;
    gap: 6.4rem;
  }

  .hero-text-box,
  .hero-image-box {
    text-align: center;
  }

  .hero-image {
    width: 60%;
  }

  .delivered-meals {
    justify-content: center;
    margin-top: 3.2rem;
  }

  .logos img {
    height: 2.4rem;
  }

  .step-number {
    font-size: 7.4rem;
  }

  .meal-content {
    padding: 2.4rem 3.2rem 3.2rem 3.2rem;
  }

  .section-testimonials {
    grid-template-columns: 1fr;
  }

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

  .pricing-plan {
    width: 90%;
  }

  .cta {
    /* 3/5 = 60% + 2/5 = 40% */
    grid-template-columns: 3fr 2fr;
  }

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

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

  /* MOBILE NAVIGATION */
  .btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .main-nav {
    background-color: rgb(255, 255, 255, 0.9);

    /* This backdrop filter is not supported by Safari, so we need to use -webkit - take this kinda stuff out in https://caniuse.com/ */
    backdrop-filter: blur(5px);

    /* For Safari - take this kinda stuff out in https://caniuse.com/ */
    -webkit-ackdrop-filter: blur(5px);

    /* Position it absolutely to the top of the viewport - also position: relative in the header */
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.5s ease-in;

    /* Hide navigation by default */
    /* Hidding by using display: none; is not the best solution, because it does allows NO transition at all */
    /* display: none; */

    /* 1) Hide it visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }


  /* When nav is open */
  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

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

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


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

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

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

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

/* 704px = 704px / 16px = 44rem */
@media (max-width: 44rem) {

  .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 (Phones) */
/* ************************************************************ */

/* 544px = 544px / 16px = 34rem */
@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: 1.8rem 1.4rem;
  }

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

  .hero {
    padding: 0 3.2rem;
  }

  .hero-image {
    width: 80%;
  }

  .logos img {
    height: 1.2rem;
  }

  /*Here 2nd child is the image of the 1st step and 6th child is the image of the 3rd step which are to be moved to the top of the grid i.e. its respective step (Because of the z pattern we used which won't work in this case of mobile devices with single column for all elements) */
  .step-image-box:nth-child(2) {
    grid-row: 1;
  }

  .step-image-box:nth-child(6) {
    grid-row: 5;
  }

  .step-image-box {
    transform: translateY(2.4rem);
  }

  .testimonials-container {
    padding: 9.6rem 3.2rem 6.4rem 3.2rem;
  }

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

  .gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
  }

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

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

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

/*
- FONT SIZE SYSTEM (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 FLEXBOX GAP PROPERTY MISSING IN SOME SAFARI VERSIONS */
/* ************************************************************ */

.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;
  }
}