/* 1366 is a popular HDready screen */

/* in media queries, 1 rem is not the 10px that we set it to be.  Instead in the media queries
1rem will always be the default browser font size setting ...that is 16px */

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

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

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

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

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


  .testimonials {
    /* reuseable grid is more for overall site layout
    and maybe too big gaps for this purpose....so we will create a new grid here just
    for this purpose */
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 6.0rem;
    column-gap: 8rem;

  }

  .testimonials-container {
    padding: 0 9.6rem 9.6rem 9.6rem;
  }

}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/*  POLICY PAGE/s */

.policy-wording {
  margin: 1rem 12rem 1rem;
  font-size: 1.5rem;
  line-height: 1.6;


}

.policy-wording-header {
  font-weight: 700;

}







/* #####################
BELOW 1200px (Tablets landscape and some mobiles landscape)
######################*/


/* 1200 / 16 = 75em ....landscape tablet and mobile*/
@media (max-width: 75em) {

  /* will change everything on site (including container size ...but except images) - because we have been sizing everything in rem  */
  html {
    /* 9px / 16px = 56.25% */
    font-size: 56.25%;
  }

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

  .heading-secondary {
    font-size: 3.6rem;
    /* here...relating back to initial code, we still assume that 1rem = 10px ....as we initially set it to be*/
  }

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

  .header {
    padding: 0 3.2rem;
  }

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

  .hero {
    gap: 4.8rem;
  }

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


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/*  POLICY PAGE/s */

.policy-wording {
  margin: 1rem 9rem 1rem;
  font-size: 1.5rem;
  line-height: 1.6;


}

.policy-wording-header {
  font-weight: 700;

}






/* #####################
BELOW 944px (Tablets [portrait])
######################*/

/* 940 / 16 = 58.75em ....Tablet*/
@media (max-width: 59em) {

  html {
    /* 8px / 10px = 0.5 = 50% */
    font-size: 50%;
  }

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

  .hero-text-box,
  /* an img is an inline element so it is also affected by 'text-align' */
  .hero-img-box {
    text-align: center;
  }


  .hero-img {
    width: 60%;

  }

  /* So that hero image goes behind the opaque full screen of the mobile menu */
  .section-hero {
    z-index: -1;
  }


  .delivered-meals {
    /* with flexbox we use justify content ....rather than text-align*/
    justify-content: center;
    margin-top: 3.2rem;
  }

  .logos {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 1fr);

    /* grid-template-columns: repeat(autofit, minmax(50px, 1fr)); */
    grid-row-gap: 5rem;
    margin-bottom: 2rem;
  }

  .logos img {
    /* the combo of display block and margin auto centers the logos in the grid containers */
    display: block;
    margin: auto;
    height: 4.4rem;
  }

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


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

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

  .testimonials {

    grid-template-columns: 1fr 1fr;
  }

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

  .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 NAV */
  .btn-mobile-nav {
    display: block;
    z-index: 9999;

  }

  /* ..now to overlay menu on top of page and arrange vertically*/
  /* ....we do this using css with absolute positioning  */
  .main-nav {
    /* background-color: rgba(255, 255, 255, 0.8); */
    background-color: rgba(16, 29, 44, 0.8);

    -webkit-backdrop-filter: blur(5px);
    /* some browsers need webkit for this to work*/
    backdrop-filter: blur(5px);
    position: absolute;  /*we are setting in relation to entire viewport, so dont need to set that to position: relative.  This will take .main-nav out of the flow, so no longer a flex item like it used to be */

    /* dont forget parent element needs to be positioned as 'relative'*/
    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 */
    /* ..display:none doesnt allow transitions */
    /* 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;
  }

  /* ...'nav-open'  is a parent of 'main-nav' in the html*/
  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
    /*  for bringing mobile menu in*/
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
    /* we can use 'display' as we dont need animations*/
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
    /* we can use 'display' as we dont need animations*/
  }

  .main-nav-list {
    /* already set to display flex in 'style.css' so now just change direction */
    flex-direction: column;
    gap: 4.8rem;
  }

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

}



/* #####################
BELOW 704px (Smaller Tablets)
######################*/
/* 704 / 16 = 44em ....smaller Tablet*/

@media (max-width: 44em) {

  .grid--3-cols,
  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);


  }

  /* to make this element span across 2 grid columns */
  .diets {
    grid-column: 1 / -1;
    /* then use 'justify-self' as a settingon the individual grid item and not on the grid container */
    justify-self: center;

  }

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

  .pricing-plan {
    width: 100%
  }


  .feature-icon {
    margin-top: 3.2rem;
    display: block;
    margin: auto;

  }

  .feature-title {
    /* display: block;
    margin: auto; */
    text-align: center;
  }

  .feature-text {
    text-align: center;
  }

  #focus-areas {
    padding-top: 6rem;
    margin-bottom: 6rem;
  }








  /* THE following 3 work together */
  .grid--footer {
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: repeat(6, 1fr);
  }

  .logo-col,
  .address-col {
    grid-column: span 6;
    align-items: center;
  }

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

}


/* #####################
BELOW 544px (Phones)
######################*/
/* 544 / 16 = 34em ....smaller Tablet*/

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


  .logo {
    height: 3rem;
    width: auto;
  }

  .logo-center-coa {
    width: 20rem;
    height: 20rem;
  }

  .section-hero {
    /* padding: 2.4rem 0 6.4rem 0; */
    padding: 2.4rem 0 0.4rem 0;
    min-height: 80vh;
  }

  .hero {
    padding: 0 3.2rem;

  }

  .policy__hero {
    padding: 5rem 3.2rem 5rem;
  }

  .hero-img {
    width: 80%;
    display: none;
  }

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

  .logos img {
    height: 3.0rem;
  }


  .delivered-meals {
    padding-top: 8rem;
    flex-direction: column;
    flex-direction: column-reverse;

  }

  .delivered-imgs img {
    margin-right: -0.5rem;
    height: 5.8rem;
    width: 5.8rem;
    filter: brightness(.95);
    margin-bottom: 8rem;
  }


  /* feature .. benefits */


  .feature-icon {
    margin-top: 3.2rem;
    display: block;
    margin: auto;

  }

  .feature-title {
    /* display: block;
    margin: auto; */
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
  }

  .feature-text {
    text-align: center;
  }




  /* nth-child number is order in container...not in the element '.step-img-box' */
  .step-img-box:nth-child(2) {
    grid-row: 1;
  }

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

  .step-img-box {
    /* translate is easiest way to move element/s about without effecting the rest of the elements around it   */
    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 {
    height: 32rem;
    grid-row: 1;
  }

}



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/*  POLICY PAGE/s */

.policy-wording {
  margin: 1rem 4rem 1rem;
  font-size: 1.5rem;
  line-height: 1.6;


}

.policy-wording-header {
  font-weight: 700;

}






/* ################################# */

/* Following goes with the js hack to fix issue with Flexbox gap in Safari */

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