/* rem and em in media queries do NOT depend on html font-size setting in html. It means, 1rem = 1em will not be 10px anymore and it will be 16px as default value in the Browser!
INSTEAD, 1rem = 1em = 16px*/
/* rem is root font-size and 
em is current font-size - BUT WE TAKE BOTH OF THEM HERE AS EQUAL AND USE EM AND NOT REM - BECAUSE SOME OF THE BROWSERS HAVE BUGS WHEN WE USE MEDIA QUERIES, THAT'S WHY REM DOESN'T WORK WELL HERE! */

/******************************************/
/*BELOW 1344px (Smaller desktops)*/
/******************************************/
/* 1344px / 16px = 84em => our first breakpoint */
@media (max-width: 84em) {
  /* Our very first CSS Rule in MEDIA QUERY: 
  CHANGE THE MAX-WIDTH TO 1200px INSTEAD OF 1300px - WITH 1200px THE HERO SECTION AND NEXT SECTION ARE ALIGNED GOOD TOGETHER!*/
  .hero {
    max-width: 120rem;
  }

  .heading-primary {
    /* We make the font-size a little bit smaller to stay still in 3 line instead of 4 lines!*/
    font-size: 4.4rem;
  }

  /* changing the column from three to two columns in 1344px or lower!*/
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*  A NEW MEDIA QUERY FOR 1200px => 1200px / 16 = 75em */
/******************************************/
/*BELOW 1200px (Tablets in Landscape mode and not in Portrait mode!)*/
/******************************************/
@media (max-width: 75em) {
  html {
    /* we want here to make everything smaller just one pixel, we change the font-size from 10px to 9px */
    /* 9px / 16px = 0.5625 * 100 = 56.25% => 56.25% is 9px */
    font-size: 56.25%;
  }

  /* to decrease the grid gap in entire page where grid layout is available!*/
  .grid {
    column-gap: 4.8rem;
    row-gap: 6.4rem;
  }

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

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

  /*  to be aligned with heading-primary */
  .header {
    padding: 0 3.2rem;
  }

  /* to decrease the distance between woman-image in hero section and the texts in the left side!*/
  .hero {
    gap: 4.8rem;
  }

  /* Change the space between the items in nav like How it works, Meals, ... */
  .main-nav-list {
    gap: 3.2rem;
  }

  /* To reduce only right and left paddings for testimonial texts to have more space and the texts will be maximum in four lines and not more => and so looks good! */
  .testimonials-container {
    padding: 9.6rem 3.2rem;
  }
}

/******************************************/
/*BELOW 944px (Tablets in Landscape mode and not in Portrait mode!)*/
/******************************************/
/* 944px / 16 = 59em*/
@media (max-width: 59em) {
  html {
    /* we want here to make everything smaller just one pixel, we change the font-size from 10px to 9px */
    /* 8px / 16px = 0.5 * 100 = 50% => 50% is 8px */
    font-size: 50%;
  }

  /* we make the entire hero only one column for 944px and below that! */
  .hero {
    grid-template-columns: 1fr;
    padding: 0 8rem;
    gap: 6.4rem;
  }

  /* TEXT IS AN INLINE ELEMENT AND WE CAN CENTER TEXT WITH text-align: center; */
  .hero-text-box {
    text-align: center;
  }

  /* IMAGE LIKE TEXT IS AN INLINE ELEMENT AND WE CAN CENTER IT USING THE SAME ABOVE SATEMENT:  text-align: center; */
  .hero-image-box {
    text-align: center;
  }

  /* We have to make the hero image smaller! */
  .hero-img {
    width: 60%; /*get the 60% width of its parent(hero-image-box) which is a complete GRID cell.*/
  }

  /* delivered-meals class is a flex item and using text-align: center; doesn't work for that because it is not a inline element, rather it is a flex item and to center a flex item, we have to use the justify-content: center; */
  .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;
  }

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

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

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

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

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

  /* MOBILE NAVIGATION SECTION */
  /* ONCE WE REACH THIS MEDIA QUERY(944px AND UNDER THAT), WE HAVE TO SHOW THIS BUTTON*/
  .btn-mobile-nav {
    display: block;
    z-index: 9999; /*We give always a big number, in orther to stay our focuns(our orange cartesien) on TOP when we click on the button mobile nav(the three horizontal line and also the cross sign for closing the page)!*/
  }

  .main-nav {
    /* background-color: rgba(255, 255, 255, 0.97); */
    background-color: rgba(255, 255, 255, 0.5);
    /* The content behind the sticky navBar page is blur now and looks good and interesting! */
    -webkit-backdrop-filter: blur(10px);
    /*I got the -webkit- prefix from caniuse.com website!*/
    backdrop-filter: blur(10px);
    /* The parent has to be positioned as relative => The parent is header, but we want that to be displayed in entire page, that's why the parent would be entire view port => that's why we don't need to specify the parent and when i specify that, that i did already in header class, but i commented it out already => the result will not change and will stay the same!*/

    /* THE THREE ROUTINE STAMENETS THAT WE NEED ALWAYS TO DO THE ABSOLUTE POSITIONING:*/
    position: absolute;
    top: 0;
    left: 0;

    /* width: 100%; OR*/
    width: 100vw; /*entire view port width => it covers only the entire width of the current page that i see now on the monitor!*/
    height: 100vh; /*entire view port height => it covers only the entire height of the current page that i see now on the monitor!*/

    /*  Center the item on the white page using flex page, otherwise the items stay top left*/
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hide the navigation => because it must be hidden as default and then when i click on the Symbol it should be opened! */
    /* THE PROBLEM WITH display: none; IS THAT, WE CAN NOT DO ANY TARNSITION AT ALL, THAT'S WHY I WILL COMMENT IT OUT!*/
    /* display: none; */

    /* SOME STEPS TO HIDE THE NAV PAGE: */

    /* 1) HIDE IT VISUALLY: */
    opacity: 0; /*This will hide the element(nav page), something like display:none; but not exactly that, because with display: none, we can not animate, but with opacity set to zero, we can animate!*/

    /* opacity: 20%; */
    /*with this opacity, the nav page is a little bit visible => it means we can give the different values to the opacity and see the visibility of the page!*/

    /* NOW, WE HAVE TO THINK ABOUT THE MECHANISM OF THE SHOWING AND HIDING THE NAV PAGE: */

    /* 2) MAKE IT UNACCESSIBLE TO MOUSE AND KEYBOARD: */
    /* with opacity:0 it is still on the page and for example with TAB we can activate it yet - but with display:none, it will not exist on the page anymore and doesn't work at all! */
    pointer-events: none;

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

    /* Animation: */
    /* ease-in: move fast in the beginning and move slow at the end! When we specify nothing => the movement would be linear!*/
    transition: all 0.5s ease-in;

    /* ******************************** */
    /* ADDING NOW A REALLY REALLY COOL EFFECT WHICH WHOLE NAVIGATION COMES SLIGHTLY FROM RIGHT SIDE IN */
    /* ******************************** */
    transform: translateX(100%);
    /* moving the nav page from right side to the page => 100% in X direction means => it goes to the right side out of the page and transform: translateX(0); means it comes back to the page (original state) and then we will see it there!*/
  }

  /* This selector works because there is .nav-open selector in header, when i remove this selector from header, it would not work anymore! */
  .nav-open .main-nav {
    opacity: 1;
    /* we have to bring the above parameters back to make the nav page visible again! */
    pointer-events: auto;
    visibility: visible;

    transform: translateX(0);
    /* moving the nav page from right side to the page => 100% in X direction means => it goes to the right side out of the page and transform: translateX(0); means it comes back to the page (original state) and then we will see it there!*/
  }

  /* This selector works because there is .nav-open selector in header, when i remove this selector from header, it would not work anymore! */
  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  /* This selector works because there is .nav-open selector in header, when i remove this selector from header, it would not work anymore! */
  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  /* ADDING NOW A REALLY REALLY COOL EFFECT WHICH WHOLE NAVIGATION COMES SLIGHTLY FROM RIGHT SIDE IN - THIS STEP IS DONE IN main-nav CLASS USING TRANSFORM AND TRANSLATE => Please see this class above!*/

  /* the display in this class was already set to flex, but we want to display the content vertically in 944px and below that, that's why we have to change the flex-direction to column and bring back the gap to 4.8rem!*/
  .main-nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }

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

/******************************************/
/*BELOW 704px (Smaller Tablets in Landscape mode and not in Portrait mode!)*/
/******************************************/
/* 700 / 16px = 43.75em => 44em * 16 = 704px*/
@media (max-width: 44em) {
  /* Change it to two columns */
  .grid--3-cols {
    grid-template-columns: 1fr 1fr;
  }

  /* Change it to two columns */
  .grid--4-cols {
    grid-template-columns: 1fr 1fr;
  }

  .diets {
    /* Bring the diet section in the middle under the two cards, and specify the two columns(the entire columns) to that! */
    grid-column: 1/-1;

    /* to center the content in the middle of the GRID CELL(TWO COLUMNS) and not in the middle of the container => that's why we use justify-self:cente and not the justify-content:center*/
    justify-self: center;
  }

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

  .pricing-plan {
    width: 100%;
  }

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

  /* To bring the Account, Company and Resources on Top side of the footer and Logo and Comtact us at the bottom side of the footer!*/
  /* MY SOLUTION => THIS SOLUTION IS IN DETAILS */
  /* ***************************************** */
  .nav-col-Account {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .nav-col-Company {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .nav-col-Resources {
    grid-column: 3/-1;
    grid-row: 1/2;
  }
  /* ***************************************** */

  /* ***************************************** */
  /* JONAS SOLUTION => Very short => Personaly i don't like it - I like my Solution in details!*/
  /* ***************************************** */
  /* The Account, Company and Resources which have nav-col as class will move from second row to the first row! */
  /* .nav-col {
    grid-row: 1;
  } */

  .nav-col {
    /* Using Span to say, every item can take how many cells in a GRID? here 2 cells! */
    grid-column: span 2;

    /* We can here change the gap, but it is in original .grid class in general.css and we don't want to manipulate that, that's why we use margin-bottom instead!*/
    margin-bottom: 3.2rem;
  }

  .address-col,
  .logo-col {
    /* Using Span to say, every item can take how many cells in a GRID? here 3 cells! */
    grid-column: span 3;
  }
}

/******************************************/
/*BELOW 544px (Phones)*/
/******************************************/
/* 550 / 16px = 34.375em => 34em * 16 = 544px*/
@media (max-width: 34em) {
  /* There would be no multiple columns and there would be only one column, because we don't have enough space more! */

  /* Change two columns to one column */
  .grid--3-cols {
    grid-template-columns: 1fr;
  }

  /* Change two columns to one column */
  .grid--4-cols {
    grid-template-columns: 1fr;
  }

  /* Change two columns to one column */
  .grid--2-cols {
    grid-template-columns: 1fr;
  }

  .grid {
    /* row-gap: 6.4rem; */
    /* decrease it from 6.4rem to 4.8rem */
    row-gap: 4.8rem;
  }

  .btn,
  .btn:link,
  .btn:visited {
    /* padding: 1.6rem 3.2rem; change to the following values => making the both sides right and left smaller to be placed side by side in a row and make them from top and bottom sides big, user can click the buttons with a bigger surface more easier than before  */
    padding: 2.4rem 1.6rem;
  }

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

  .section-hero {
    /* padding: 4.8rem 0 9.6rem 0; */
    padding: 2.4rem 0 6.4rem 0;
  }

  /* We have to make the hero image a little bit bigger! */
  .hero-img {
    width: 80%; /*get the 80% width of its parent(hero-image-box) which is a complete GRID cell.*/
  }

  .logos img {
    height: 1.2rem;
  }

  /* changing the text and image of step text box and step-img box for numbers of 1 and 3*/
  /* MY SOLUTION => writing 01 & 03 in classes******* */
  /* .step-text-box-01 {
    grid-row: 2/3;
  }

  .step-text-box-03 {
    grid-row: 6/7;
  } */
  /* MY SOLUTION => writing 01 & 03 in classes******* */

  /* JONAS SOLUTION => using nth-child()************* */
  .step-img-box:nth-child(2) {
    /* this is second child of the GRID => it means first mobile photo */
    /* grid-row: 1; OR*/
    grid-row: 1/2;
  }

  .step-img-box:nth-child(6) {
    /* this is sixth(last) child of the GRID => it means third mobile photo */
    /* grid-row: 5; OR*/
    grid-row: 5/6;
  }
  /* JONAS SOLUTION => using nth-child()************* */

  .step-img-box {
    /* Translate is simply the easiest way of moving the elements around without effecting the rest of elements around it => positive side of the Y axis is bottom and negative side is top => it is exactly the reverse of mathematical axis!*/
    transform: translateY(4.8rem);
  }

  /* We did this one manually, that's why we have to change it here too manually. We didn't use grid--2-cols, otherwise we have to chnage it top!*/
  .testimonials {
    grid-template-columns: 1fr;
  }

  /* changing from 2*6 to 3*4 */
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
  }

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

  .cta-img-box {
    height: 32rem;
    /* grid-row: 1/2; OR*/
    /* place the image first and as the second the text */
    grid-row: 1;
  }

  /* expanding the text on all the sides! */
  .cta-text-box {
    padding: 3.2rem;
  }
}

/* - 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 flexbox gap property missing in some Safari versions*/
/******************************************/
.no-flexbox-gap .main-nav-list li:not(:last-child) {
  margin-right: 4.8rem; /*Applying on all of li but not the last child!*/
}

.no-flexbox-gap .list-item:not(:last-child) {
  margin-bottom: 1.6rem; /*We have now here the margin-bottom, because the flex-direction changed to the column - Above we have the margin-right, because we didn't change the flex-direction to column!*/
}

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

/* We have the exactly the same media query with 75em above and there is no problem at all to have the same media query several times and they will apply at the same time! */
@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;
  }
}