/* #############################################################################
   INTERACTIVE
   --------------------------------------------------------------------------- */

nav .a--gp-contact-info:hover,
nav .a--print:hover { color: var(--a-color-hover); }

nav .a--print,
nav ul a {
  color: var(--a-color);
  display: block;
  line-height: 1;
  padding: .7rem 1rem;
}

nav .a--gp-contact-info {
  color: var(--oil);
  display: block;
  line-height: 1;
  padding: .7rem 1rem;
}

.header-nav--mobile a {
  flex-grow: 1;
  line-height: 1;
  padding: .7rem 1rem;
}

.header-nav--mobile button { margin: .7rem 1rem; }

/* Transform mobile nav burger [𝝣] into conventional mobile nav close [x]
   (intercepted by nav_animation.css if :not(.nav-close-x-has-animated)) */
.nav--mobile {
  /* Transform each bar (rect) of the burger: */
  .rect-svg--nav-burger {
    transform-box: fill-box;
    transform-origin: center;
    /* burger top bar down then clockwise: */
    &:nth-child(1) { transform: translateY(7px) rotate(45deg) scaleY(0.8); }
    /* burger middle bar fade out: */
    &:nth-child(2) { opacity: 0; }
    /* burger bottom bar up then counterclockwise: */
    &:nth-child(3) { transform: translateY(-7px) rotate(-45deg) scaleY(0.8); }
  }
}



/* #############################################################################
   LAYOUT
   --------------------------------------------------------------------------- */

.header-nav--mobile.flexrow { /* mirror: layout.css::.header--interior-pg-mobile.flexrow */
  align-items: center; /* mirror */
  display: flex; /* mirror */
  justify-content: space-between; /* mirror */
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav--mobile { margin-top: 1.5rem; }

.nav--mobile.is-open {
  box-shadow: 2px 0 15px rgba(50, 50, 50, 0.74);
  transform: translateX(0);
}

.div--canvas-overlay.is-open { display: block; }

.nav--mobile {
  background: white;
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  width: 16rem;
  z-index: 200;
}

.div--canvas-overlay {
  background: rgba(0, 0, 0, 0.3);
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 150;
}



@media (prefers-color-scheme: dark) {

  /* INTERACTIVE --------------------------------------------------------------- */

  nav .a--gp-contact-info { color: var(--cloud-gray); }

  nav .a--print,
  nav ul a { color: var(--a-color-dm); }

  /* LAYOUT -------------------------------------------------------------------- */

  .nav--mobile.is-open { box-shadow: 10px 0 20px 6px rgba(35, 43, 53, 0.84); }

  .nav--mobile { background: var(--body-background-dm); }

  .div--canvas-overlay { background: rgba(35, 43, 53, 0.7); }
}