/* 
So because we want to use round numbers, we will not use 1366 instead we'll use 1350px.
- We will not use rem, because some browsers have a problem with rem so we are going to use em.
- Now to convert pixel to em:
  - 1350px / 16px *the default browser font size* = 84em */

/****************************/
/* BELOW: LET'S CALCULATE 
THE PIXELS AGAIN IN REVERSE TO 
GET THE EXACT PIXELS.
84em /16 = 1344px; 
So, this media query will fire of at or below: 1344px.

THIS IS FOR SMALLER COMPUTERS.
*/
/****************************/

@media (max-width: 84em) {
  .hero {
    max-width: 120rem;
  }

  /* So, now since we have decreased the hero width the primary hero heading is in 4 rows, which is not ideal. so we need to decrease it */

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

/****************************/
/* BELOW 1200px (Landscape Tablets) */
/* 1200px /16 = 75em */
/****************************/

/* So, since we used repsonsive font size from the start this means we can make very thing small with just changing one font size. html{font-size 62.5%} */
@media (max-width: 75em) {
  html {
    /* We want to change everything to 9px. So: 9px / 16 = 0.5625 which is 56.25% */
    font-size: 56.25%;
  }

  /* Let's also decrease the space between items by decreasing the row and column gaps */
  .grid {
    column-gap: 4.8rem;
    row-gap: 6.4rem;
  }

  /* Let now decrease the secondar heading size down a bit, because at the moment they have the same size of 4.4rem. Remeber we decrease the primary heading in the previous query. */

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

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

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

  .header {
    padding: 0 3.2rem;
  }

  .hero {
    gap: 4.8rem;
  }

  /* NAVIGATION SECTION */

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

  /* HOW IT WORKS SECTION */
  .testimonials-container {
    padding: 9.6rem 3.2rem;
  }
}

/****************************/
/* BELOW 944px (Tablets) */
/* 940px /16 = 58.75 round to 59em which is 59 / 16 = 944px*/
/****************************/

@media (max-width: 59em) {
  /* Now, to move to even smaller rem to make it 8px*/

  html {
    /* We want to change everything to 9px. So: 8px / 16 = 0.5 which is 50% */
    font-size: 50%;
  }

  /* Let's turn the hero section into one column */
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 0 8rem;
    gap: 6.4rem;
  }

  .hero-img {
    width: 60%;
  }

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

  /* FEATURED IN SECTION */

  .logos img {
    height: 2.4rem;
  }

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

  /* HOW IT WORKS SECTION */
  .meal-content {
    padding: 2.4rem 3.2rem 3.2rem 3.2rem;
  }

  /* TESTIMONIALS SECTION */

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

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

  /* PRICING SECTION */
  .section-princing {
    padding: 9.6rem 3.2rem;
  }
  .princing-plan {
    width: 85%;
  }

  /* CALL TO ACTION SECTION */

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

    /* I gave it the z-index so that it can appear on top. */
    z-index: 9999;
  }
  /* We now need to postion the main nav absolutely. It will obviously need to occupy 100 width and 100 viewport height. */
  .main-nav {
    background-color: rgba(255, 255, 255, 0.95);
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    /* This is to move the whole navigation to the right. It's used for a slide in navigation transtion. */
    transform: translateX(100%);

    /* Center center the navigation */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;

    /* We need to hide the navigation, until the menu item is clicked.
       we can use: * display: none; * but this does not allow transitions. WE CANNOT ANIMATE!
       So we are going to use opacity.

       Even, the opacity does not hide it completely, because visually it not there but the actual element is there once you use your keyboard or hover with a mouse.
    */
    /*01. Hide it visually. */
    opacity: 0;

    /*02.  Make it unaccessible to mouse and keyboard. */
    pointer-events: none;

    /*03. Hide it from screen readers. */
    visibility: hidden;
  }

  /*We needed to place the "nav-open" class on the header to make "nav-open" the parent to "main-nav", because the header is the parent to "main-nav". 
    
    We needed to do the above because we needed to reference as below.
    */
  .nav-open .main-nav {
    /* This means once the navigation is made visible again. */
    opacity: 1;
    pointer-events: auto;
    visibility: visible;

    /* Once .nav-open is clicked the navigation will slide in from the right. */
    transform: translateX(0);
  }

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

  .nav-open .icon-mobile-nav[id="menu-open-icon"] {
    display: none;
  }
  .main-nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }

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

/****************************/
/* BELOW 736px (Smaller Tablets) */
/* 740px /16 = 46.25 round to 46em which is 46 * 16 = 736px*/
/****************************/

/* We will now transform those grids that have 3 or 4 columns to 2 columns */
@media (max-width: 46em) {
  .grid--3-cols,
  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
  }

  /* we now need to span the *diet* */

  .diet {
    grid-column: 1 / -1;

    /* We use justify-self for the indidual item not all the grid-items */
    justify-self: center;
  }

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

  .princing-plan {
    width: 100%;
  }

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

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

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

/****************************/
/* BELOW 544px (Smaller Tablets) */
/* 550px /16 = 34.375 round to 34em which is 34 * 16 = 544px*/
/****************************/
@media (max-width: 34em) {
  /* Let's also increase the row gab now since everything is vertically presented. */
  .grid {
    row-gap: 4.8rem;
  }

  /* All grids will now be on 1 column */
  .grid--2-cols,
  .grid--3-cols,
  .grid--4-cols {
    grid-template-columns: 1fr;
  }

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

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

  .hero-img {
    width: 80%;
  }

  .logos img {
    height: 1.2rem;
  }

  .step-img-box:nth-child(2) {
    grid-row: 1;
  }

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

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

  .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 {
    grid-row: 1;
    height: 32rem;
  }
}
/* 

---- 01 TYPOGRAPHY SYSTEM

  - 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  
  - Font-weights:
    Default: 400
    Medium: 500
    Semi-Bold: 600
    Bold: 700

  - Line-heights:
    - Defaults: 1
    - Small: 1.05
    - Medium: 1.2
    - Paragraph default: 1.6

  - Letter-spacing:
    - 0.5px
    - 0.75px

--- 02 COLORS

  - Primary: #e67e22
  - Tints(Use the tints and shades generators: maketintsandshades.com): #fdf2e9 #fae5d3
  - Shades(check thiese on coolors.com):#cf711f
  - Accents:
  - Greys:
  #ddd
  #555
  #333

--- 03 IMAGES
  - For 'food' and 'restuarant' get from Unsplash.
  - For Faces on Testimonials get from uifaces.co

--- 04 ICONS

--- 05 SHADOWS
0 2.4rem 4.8rem rgba(0, 0, 0, 0.075)
--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITE SPACES

 */