/* The navigation is in the reusable file global_nav.html, and is loaded in 
   global_nav_script.js. All related styles and queries are in 
   global_nav_styles.css and global_nav_queries.css. */

/* 16px = 1.6rem = 1em */

/* ********************************* */
/* ABOVE 2000px */
/* 4K Screens */
/* ********************************* */

@media (min-width: 125em) {
  /* GENERAL */

  .nav-bar {
    width: 200rem; /* Same as width of hero-img--global in global_queries.css */
    margin: auto;
  }
}

/* ********************************* */
/* BELOW 1456px */
/* Smaller desktops */
/* ********************************* */

@media (max-width: 91em) {
  /* GENERAL */

  .nav-logo-image {
    height: 9.6rem;
  }
}

/* ********************************* */
/* BELOW 1200px */
/* Landscape Tablets */
/* ********************************* */

@media (max-width: 75em) {
  /* GENERAL */

  .nav-logo-image {
    height: 8rem;
  }

  /* MAIN NAVIGATION */

  .main-nav-list,
  .sticky .header .main-nav-list {
    font-size: 2rem;
  }

  /* SUB AND SSUB NAVIGATION */

  .sub-nav-list,
  .sSub-nav-list,
  .sticky .header .sub-nav-list,
  .sticky .header .sSub-nav-list {
    font-size: 1.8rem;
  }

  .sub-nav-link,
  .sub-nav-link:link,
  .sub-nav-link:visited,
  .sSub-nav-list {
    min-width: 14rem;
  }
}

/* ********************************* */
/* BELOW 1072px */
/* Tablets */
/* ********************************* */

@media (max-width: 67em) {
  /* MOBILE NAVIGATION */

  /* The mobile navigation is not displayed by default (for bigger screens), and 
     is only accessible at this media query.  Styles for 'hiding' the navigation 
     at bigger queries are in global_nav_style.css. */

  .button-mobile-nav {
    display: block;
    z-index: 9999;
  }

  /* Do not show the navigation when .nav-open is not a class (i.e. the nav is 
     closed). nav-open is added as a class according to global_nav_script.js. */
  .main-nav {
    position: absolute;
    display: flex;

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

    z-index: 9999;

    background-color: var(--colour--black--transparency-lowest);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(
      5px
    ); /* For browsers that do not currently support backdrop-filter */

    transition: all 0.5s ease-in; /* Navigation must fade in */

    /* When the nav is closed, the following properties hide the navigation without 
       using display: none in order to allow for transitions: */

    /* 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;
  }

  /* The navigation is now styled differently for mobile: */
  .main-nav-list {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    padding: 8rem;

    width: 100%;
  }

  .main-nav-list,
  .sub-nav-list,
  .sSub-nav-list,
  .sticky .header .main-nav-list,
  .sticky .header .sub-nav-list,
  .sticky .header .sSub-nav-list {
    font-size: 2.4rem;
  }

  .main-nav-link,
  .main-nav-link:link,
  .main-nav-link:visited,
  .sub-nav-link,
  .sub-nav-link:link,
  .sub-nav-link:visited,
  .sSub-nav-link,
  .sSub-nav-link:link,
  .sSub-nav-link:visited,
  button.main-nav-link,
  button.main-nav-link:link,
  button.main-nav-link:visited,
  button.sub-nav-link,
  button.sub-nav-link:link,
  button.sub-nav-link:visited,
  button.sSub-nav-link,
  button.sSub-nav-link:link,
  button.sSub-nav-link:visited {
    color: var(--colour--primary-tint-white);
  }

  .main-nav-link:hover,
  .main-nav-link:active,
  .sub-nav-link:hover,
  .sub-nav-link:active,
  .sSub-nav-link:hover,
  .sSub-nav-link:active,
  button.main-nav-link:hover,
  button.main-nav-link:active,
  button.sub-nav-link:hover,
  button.sub-nav-link:active,
  button.sSub-nav-link:hover,
  button.sSub-nav-link:active {
    color: var(--colour--primary);
  }

  /* The last link must have a bottom margin for scrolling in the mobile nav */
  .main-nav-list li:last-child .main-nav-link {
    margin-bottom: 8rem;
  }

  /* SUB-NAV */

  .sub-nav-list {
    position: relative;

    background-color: transparent; /* Takes on the colour (black blur) of the main nav */

    gap: 4.8rem;
    padding: 4.8rem 0rem 0rem 4.8rem;
  }

  /* SUB-SUB-NAV */

  .sSub-nav-list {
    position: relative;
    transform: none;

    background-color: transparent; /* Takes on the colour (black blur) of the main nav */

    gap: 2.4rem;
    padding: 2.4rem 0rem 0rem 4.8rem;
  }

  /* ICONS */

  /* No longer use forward and back arrows in the sSub-navs */
  button.sub-nav-link .nav-icon-arrow[name="caret-forward-outline"] {
    /* Do not display the down arrow in the sub-nav-link, only display the right arrow */
    /* This changes in the mobile nav (reusable_queries.css) */
    display: none;
  }

  .expanded-sSub-nav
    > button.sub-nav-link
    .nav-icon-arrow[name="caret-back-outline"] {
    display: none;
  }

  /* Use down and up arrows in mobile nav */
  button.sub-nav-link .nav-icon-arrow[name="caret-down-outline"] {
    /* Do not display the down arrow in the sub-nav-link, only display the right arrow */
    /* This changes in the mobile nav (reusable_queries.css) */
    display: inline-block;
  }

  /* Swap arrows when expanding */
  .expanded-sSub-nav
    > button.sub-nav-link
    .nav-icon-arrow[name="caret-up-outline"] {
    display: inline-block;
  }

  .expanded-sSub-nav
    > button.sub-nav-link
    .nav-icon-arrow[name="caret-down-outline"] {
    display: none;
  }

  /* INTERACTIVE NAVIGATION ELEMENTS */

  /* nav-open is added as a class according to global_nav_script.js (when the 
     menu button is clicked) */

  /* Show the navigation when .nav-open is a class */
  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;

    /* To allow the navigation to be scrollable */
    overflow-y: scroll;
  }

  /* When clicking on the menu, .lock-scroll is added to the body and html to pause 
     scrolling of the main page: according to global_nav_script.js */
  .lock-scroll {
    overflow: hidden;
  }

  /* When the navigation is open, use the close icon */
  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  /* When the navigation is open, do not use the menu icon */
  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }
}

/* ********************************* */
/* BELOW 832px */
/* Small Tablets */
/* ********************************* */

@media (max-width: 52em) {
  /* NAVIGATION LISTS */

  .main-nav-list,
  .sub-nav-list,
  .sSub-nav-list,
  .sticky .header .main-nav-list,
  .sticky .header .sub-nav-list,
  .sticky .header .sSub-nav-list {
    font-size: 2rem;
  }
}

/* ********************************* */
/* BELOW 640px */
/* Phones */
/* ********************************* */

@media (max-width: 40em) {
  /* GENERAL */

  .nav-logo-image {
    height: 6.4rem;
  }

  .icon-mobile-nav {
    height: 3.2rem;
  }

  .sticky .header .nav-logo-image {
    height: 4.8rem;
  }

  /* NAVIGATION LISTS */

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

  .sub-nav-list {
    gap: 3.2rem;
    padding: 3.2rem 0 0 4.8rem;
  }

  .main-nav-list,
  .sub-nav-list,
  .sSub-nav-list,
  .sticky .header .main-nav-list,
  .sticky .header .sub-nav-list,
  .sticky .header .sSub-nav-list {
    font-size: 1.8rem;
  }

  .main-nav-list li:last-child .main-nav-link {
    margin-bottom: 6.4rem;
  }
}

/* ********************************* */
/* BELOW 368px */
/* Small Phones */
/* ********************************* */

@media (max-width: 23em) {
  /* GENERAL */

  .nav-logo-image {
    height: 6rem;
  }

  .sticky .header .nav-logo-image {
    height: 4.8rem;
  }

  /* NAVIGATION LISTS */

  .main-nav-list {
    padding: 4.8rem;
  }

  .main-nav-list li:last-child .main-nav-link {
    margin-bottom: 4.8rem;
  }
}