/* 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. */

/* The navigation has three different components: the main navigation,
   the sticky navigation, and the mobile navigation.
   The operation of the sticky and mobile navigations are completed
   in global_nav_script.js, and the styling of the mobile navigation
   occurs in global_nav_queries.css. */

/* ********************************* */
/* GENERAL NAVIGATION COMPONENTS      */
/* ********************************* */

:root {
  /* COMPUTED VARIABLES */

  /* Navigation Height */
  /* The navigation height is computed in global_nav_script.js upon startup, and 
     is stored in this variable.  A default initialisation value of 0 is used to 
     show if it is not working (the page will "jump" when leaving the hero image 
     if the navigation height is not set correctly). */
  --nav-height: 0px;
}

.nav-company-logo {
  display: flex;
  align-items: center;
  padding: 1.2rem;
}

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

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 2.4rem;

  background-color: var(--colour--white);
}

/* ********************************* */
/* MAIN NAVIGATION                   */
/* ********************************* */

.main-nav {
  overflow: hidden;
}

.main-nav-list {
  display: flex;
  align-items: center;
  gap: 4.8rem;
  font-size: 2.4rem;
  font-weight: var(--font-weight--medium);

  /* This is included to give the list items "depth" to allow the focus to work 
     correctly. Use the same value as the focus line width. */
  padding: 0.4rem;

  list-style: none;
}

.main-nav-link,
.main-nav-link:link,
.main-nav-link:visited {
  /* The positioning of the sub-nav-list must be relative to the main-nav-link */
  position: relative;

  /* To align icons to text */
  display: flex;
  justify-content: flex-start;
  gap: 1.2rem;

  text-decoration: none;
  outline: none;
  color: var(--colour--black);
}

.main-nav-link:hover,
.main-nav-link:active {
  color: var(--colour--primary);
  outline: none;
}

/* To allow for keyboard accessibility, all expandable navigations must be activated 
   by buttons (not anchor elements), and therefore the buttons are styled through 
   inheritance. */
button.main-nav-link {
  color: var(--colour--black);

  font: inherit;
  outline: inherit;
  cursor: pointer;

  background: none;
  border: none;
  padding: 0;
}

/* ********************************* */
/* SUB NAVIGATION                    */
/* ********************************* */
/* By default, the sub-navigation is not visible */

.sub-nav:hover {
  cursor: pointer;
}

/* The properties of the sub-nav are defined here, even though flexbox is defined
   in .sub-nav.expanded-sub-nav, so that they can be easily changed in queries by
   using sub-nav-list. */
.sub-nav-list {
  display: none;

  /* The positioning of the sub-nav-list must be relative to the main-nav-link */
  position: absolute;
  transform: translate(-2.4rem, 0.4rem);

  list-style: none;
  font-size: 2.2rem;
  font-weight: var(--font-weight--medium);
  background-color: var(--colour--white);

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

.sub-nav.expanded-sub-nav .sub-nav-list {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.sub-nav-link,
.sub-nav-link:link,
.sub-nav-link:visited {
  /* The position of the sub-sub-nav-list must be relative to the sub-nav-link */
  position: relative;
  min-width: 16rem;

  display: flex;
  gap: 1.2rem;
  align-content: space-between;
  justify-content: space-between;
  /* justify-content: flex-start; */

  text-decoration: none;
  color: var(--colour--black);
}

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

button.sub-nav-link {
  color: var(--colour--black);

  font: inherit;
  outline: inherit;
  cursor: pointer;

  background: none;
  border: none;
  padding: 0;
}

/* ********************************* */
/* SUB-SUB (sSub) NAVIGATION         */
/* ********************************* */
/* By default, the sub-navigation is not visible */

.sSub-nav:hover {
  cursor: pointer;
}

.sSub-nav-list {
  display: none;

  /* The position of the sub-sub-nav-list must be relative to the sub-nav-link */
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(
    100%,
    0
  ); /* To move sSubnav left, decrease the first value */

  list-style: none;
  font-size: 2.2rem;
  font-weight: var(--font-weight--medium);
  background-color: var(--colour--white);

  padding: 4.8rem 2.4rem 2.4rem 2.4rem;
  gap: 2.4rem;
  min-width: 16rem;
}

.sSub-nav.expanded-sSub-nav .sSub-nav-list {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.sSub-nav-link,
.sSub-nav-link:link,
.sSub-nav-link:visited {
  display: flex;
  justify-content: space-between;
  gap: 2.4rem;

  text-decoration: none;
  color: var(--colour--black);
}

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

button.sSub-nav-link {
  color: var(--colour--black);

  font: inherit;
  outline: inherit;
  cursor: pointer;

  background: none;
  border: none;
  padding: 0;
}

/* ********************************* */
/* NAVIGATION ICONS                  */
/* ********************************* */

/* Up, down, forwards and back icons used in the navigation */
.nav-icon-arrow {
  height: 1.6rem;
  align-self: center;
  justify-self: flex-end;
}

/* ICONS FOR MAIN-NAV-LINKS (i.e. sub-navs) */

/* Do not display the up arrow in the main-nav-link, only display the down arrow.
   This swaps when the sub-nav is expanded. */
button.main-nav-link .nav-icon-arrow[name="caret-up-outline"] {
  display: none;
}

/* Swap arrows when expanding (up and down) */
.expanded-sub-nav
  > button.main-nav-link /* '>' means button.main-nav-link is a child of .expanded-sub-nav */
  .nav-icon-arrow[name="caret-up-outline"] {
  display: inline-block;
}

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

/* ICONS FOR SUB-NAV-LINKS (i.e. sSub-navs) */

/* Do not display down, up and back icons */
button.sub-nav-link .nav-icon-arrow[name="caret-down-outline"] {
  /* This is used in the mobile nav (global_nav_queries.css) */
  display: none;
}

button.sub-nav-link .nav-icon-arrow[name="caret-up-outline"] {
  /* This is used in the mobile nav (global_nav_queries.css) */
  display: none;
}

button.sub-nav-link .nav-icon-arrow[name="caret-back-outline"] {
  /* This swaps when the sSub-nav is expanded */
  display: none;
}

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

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

/* ********************************* */
/* MOBILE NAVIGATION                 */
/* ********************************* */
/* These properties occur always: the mobile navigation is not displayed by default 
   (for bigger screens).  The mobile navigation is only accessible below 67em.\
   Find other styling in global_nav_queries.css. */

.button-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  /* By default, this button should be hidden */
  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
}

.icon-mobile-nav--menu {
  color: var(--colour--black);
}

.icon-mobile-nav--close {
  color: var(--colour--primary-tint-white);
}

.icon-mobile-nav[name="close-outline"] {
  /* Once the menu button is clicked the 'close' icon will be displayed
     (when the mobile nav is open). */
  display: none;
}

/* ********************************* */
/* STICKY NAVIGATION                 */
/* ********************************* */
/* All of the following styles occur only when the 'sticky' class exists on the
   document body (added in global_nav_script.js when the section-hero is no longer
   visible on any page). */

/* Remove the header from the page flow and keep it 'stuck' to the top of the page. */
.sticky .header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999; /* Sent far forward */

  border-bottom: none;
  box-shadow: 0 20px 30px 0 var(--shadow--lightest);

  padding-top: 0;
  padding-bottom: 0;
}

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

.sticky .header .nav-company-logo {
  padding: 1.2rem 1.2rem;
}

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

.sticky .section-hero--global {
  /* Add the height of the original navigation bar as a margin to the top of
     the section hero.  Because the navigation has been removed from the flow of
     the page, the page will 'jump' if this is not done.  The variable is 
     initialised in the :root, but is populated in global_nav_script.js on startup.
     This is incredibly important, as a difference of a few pixels will cause
     a 'flashing' effect. */
  margin-top: var(--nav-height);
}

/* ********************************* */
/* ACROSS NAVIGATION COMPONENTS      */
/* ********************************* */

/* To prevent unintended highlighting of the text */
.main-nav-link::selection,
.sub-nav-link::selection,
.sSub-nav-link::selection {
  background-color: transparent;
}

/* Focus style of links */
.main-nav-link:focus-visible,
.sub-nav-link:focus-visible,
.sSub-nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.4rem var(--colour--primary);
}

/* To prevent unintended highlight that appears when tapping on a link on 
tablet and mobile versions */
.main-nav-list,
.sub-nav-list,
.sSub-nav-list,
.sticky .header .main-nav-list,
.sticky .header .sub-nav-list,
.sticky .header .sSub-nav-list {
  -webkit-tap-highlight-color: transparent;
}