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

/* In media queries, use em instead of rem (in some browsers, rem do not work!) */

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

@media (max-width: 84rem) {
}

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

@media (max-width: 75rem) {
  }

/* ********************************* */
/* BELOW 1020px                      */
/* ********************************* */

@media (max-width: 64rem) {

/* MOBILE NAVIGATION */

   /* We change the nature of the header from position: fixed;  */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.4rem;
  }

  /* Hide the horizontal nav links immediately on mobile */
   .main-nav {
      display: none; 
    }

  /* FORCE THE BUTTON TO APPEAR */
  .btn-mobile-nav {
    display: block !important; /* Force it to show */
    z-index: 9999;
    position: relative;
  }

  /* Reformat the INITIAL STATE OF THE "X" ICON */
  .icon-mobile-nav[name="close-outline"] {
    display: none;
  }
   
  /* 2. THE HAMBURGER ICON */
  .icon-mobile-nav {
    height: 4.8rem;
    width: 4.8rem;
    color: var(--brand-text);
  }

/* Styling of "OPEN STATE */
  /* If  nav-open is removed (e.g. by JS) 
  then all these declarations will not operate anymore */

  /* DESCENDANT SELECTOR! This selects only the "main-nav" class
  containing elementsc that are 
  children of "nav-open". 
  If nav-open is removed (by JS) 
  then this selector will not operate anymore*/

  /* WHEN MENU IS OPEN: SWAP ICONS */
  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }
  
  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }
  
  /* When JS toggles .nav-open on the <header> */
    .nav-open .main-nav {
      display: flex;
      position: fixed;
      top: var(--nav-height);          /* CSS variable with the height of the header */
      right: 0;
      Padding: 2.4rem 2.4rem;
      background: var(--forest-dark);
      z-index: 500;
      width: 30rem; 
      height: auto;
      border-bottom-left-radius: 12px;
      box-shadow: -4px 10px 30px rgba(0, 0, 0, 0.25);
      border-top: 4px solid var(--brand-green);
      justify-content: center;
      align-items: center;
       }

    .nav-open .main-nav-list {
      display: flex !important;
      flex-direction: column !important;
      align-items: center;
      justify-content: center;
      padding: 0 !important; 
      margin: 0 !important;
      list-style: none !important;
      gap: 0 !important;
      width: 100%;
    }

    .nav-open .main-nav-list li {
     margin: 0 !important;
     padding: 0 !important;
     width: 100%;
     text-align: center;
     border-bottom: 1px solid rgba(188, 224, 170, 0.15);
    }

     .nav-open .main-nav-list li:last-child {
      border-bottom: none;                     /* 👈 remove last divider */
     }

    .nav-open .main-nav-link {
      display: block !important;
      padding: 1.4rem 0 !important;
      font-size: 1.6rem !important;
      letter-spacing: 0.2em !important;
      color: var(--brand-green-light) !important; /* 👈 light green on dark background */
      transition: all 0.2s !important;
      }

    .nav-open .main-nav-link:hover {
      color: var(--brand-green) !important;               /* 👈 brighter green on hover */
      letter-spacing: 0.25em !important;                  /* 👈 subtle expand on hover */
      background: rgba(188, 224, 170, 0.05) !important; /* 👈 very subtle highlight */
      }

    .nav-open .main-nav-link.active {
      color: var(--amber) !important;              /* 👈 amber for active section */
      }
}


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

@media (max-width: 59rem) {
  html {
    /* 9px / 16px x 100 */
    font-size: 56.25%;
  }
}

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

@media (max-width: 50rem) {
  
  .home-inner {
    grid-template-columns: 1fr;
  }
  .home-logo-card {
    display: none;
  }
}

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

@media (max-width: 44rem) {
  
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 4.8rem;
  }
  .sustain-grid {
    grid-template-columns: 1fr;
  }
  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .sustain-banner {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }
  
}

/* ********************************/
/* BELOW 544px (Phones)           */
/* ****************************** */

@media (max-width: 34rem) {
  html {
    /* 7.5px / 16px x 100 */
    font-size: 50%;
  }
}

/* ************************************************************************* */
/* BELOW 480px (Phones)  Samsung Galaxy S10 has viewport size 360 x 760 px   */
/* ************************************************************************* */

@media (max-width: 30rem) {

  .nav-logo-text {
    font-size: 3.2rem;
  }

  footer {
    grid-template-columns: auto;
    gap: 1.5rem;
     }

  .footer-brand {
     justify-self: center;
     align-self: center;
      }

   footer p:last-child {
     text-align: center;
      }
  
}


/* ********************************************************* */
/* Fixing Safari Flexbox Gap  JS adds .no-flexbox-gap class  */
/* to elements that are Flex and contain the attribute "gap" */
/* ********************************************************* */

  .no-flexbox-gap .main-nav-list li:not(:last-child) {
    margin-right: 6.4rem;
  }

  .no-flexbox-gap .social-links li:not(:last-child) {
    margin-right: 2.4rem;
  }

  .no-flexbox-gap .research-main-area-title:not(:last-child) {
    margin-right: 4.8rem;
  }

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

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

  @media (max-width: 30rem) {
    .no-flexbox-gap .research-main-area-title:not(:last-child) {
      margin-right: 1.6rem;
    }
  }
}