/**
 * @file
 * The site menu (templates/layout/region--akp-nav.html.twig) and the ArcX bar
 * (templates/menu--arcx.html.twig), library akp/navigation.
 *
 * Bootstrap's navbar and responsive offcanvas do the layout: a bar from
 * 1200 px (ArcX: 992 px), a panel from the left below it. These rules keep
 * today's look: the bar's metrics, and the former Cheeseburger panel's
 * two panes (navy rail with the close button and section links, titled
 * sections on white).
 */

/* Toggler: the former Cheeseburger trigger (40 x 40, #003776, three white
   24 px bars). d-flex d-xl-none / d-lg-none in the markup. */
.navbar-toggler.akp-nav-toggler {
  --bs-navbar-toggler-padding-x: 0;
  --bs-navbar-toggler-padding-y: 0;
  --bs-navbar-toggler-border-radius: 0;
  position: relative;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: #fff;
  background-color: var(--akp-nav-toggler-bg, #003776);
  border: 0;
}
.akp-nav-toggler > span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition: width 0.25s;
}
@media (hover: hover) {
  .akp-nav-toggler:hover > span {
    width: 29px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .akp-nav-toggler > span {
    transition: none;
  }
}

/* Both panels: the former panel's width and colours. */
:is(#akp-nav, #arcx-nav) {
  --bs-offcanvas-width: 500px;
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-bg: var(--akp-nav-panel-bg, #fff);
  --bs-offcanvas-color: var(--akp-nav-panel-color, #1f1f1f);
}

/* Desktop bar (from 1200 px): the former colors.css metrics, 64 px high. */
#akp-nav {
  --akp-nav-pad: 1.5em;
}
#akp-nav .navbar-nav {
  --bs-navbar-nav-link-padding-x: var(--akp-nav-pad);
  --bs-nav-link-padding-y: var(--akp-nav-pad);
}
#akp-nav .navbar-nav .nav-link {
  margin-bottom: -0.5em;
}
#akp-nav .akp-nav-section--main {
  position: relative;
  left: calc(-1 * var(--akp-nav-pad));
}

/* A panel while shown (Bootstrap sets these state classes only on an
   overlay): it and its backdrop start below the admin toolbar. */
:is(#akp-nav, #arcx-nav):is(.showing, .show, .hiding) {
  top: var(--drupal-displace-offset-top, 0px);
}
:is(#akp-nav, #arcx-nav):is(.showing, .show, .hiding) .akp-nav-main {
  overflow-y: auto;
}
#akp-nav:is(.showing, .show, .hiding) {
  --akp-nav-pad: 0px;
}
#akp-nav:is(.showing, .show, .hiding) .navbar-nav {
  flex-direction: column;
  --bs-nav-link-padding-x: 0.75rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-color: #1f1f1f;
  --bs-nav-link-hover-color: #1f1f1f;
  --bs-navbar-active-color: #1f1f1f;
}
#akp-nav:is(.showing, .show, .hiding) .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  margin-bottom: 0;
  font-weight: normal;
  background-color: transparent;
}
.akp-nav-rail {
  width: 75px;
  background-color: var(--akp-nav-rail-bg, #002f67);
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
}
.akp-nav-rail .akp-nav-close {
  margin: 1.25rem auto;
}
.akp-nav-rail-link {
  display: block;
  padding: 1.25rem 0.2rem;
  color: inherit;
  text-decoration: none;
}
.akp-nav-section-title {
  padding: 0.75rem;
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
}

/* Stacking (decision D2): while a panel is open the bar rises above the
   scroll-top button, the notices and the admin toolbar. */
:root body #navbar-main:has(:is(.offcanvas-xl, .offcanvas-lg):is(.show, .showing, .hiding)) {
  z-index: var(--biopama-z-nav-open, 1040);
}
#navbar-main .offcanvas-backdrop {
  top: var(--drupal-displace-offset-top, 0px);
}

/* ArcX bar on all six ArcX pages. From lg (decision D3) the glass bar holds
   the links; below lg a navy strip like the site menu's opens the panel
   (decision D16). The glass is on the link row, which shows as a bar only
   when the panel is not an overlay (no Bootstrap state class). */
#navbar-main .menu--arcx {
  width: 100%;
}
#akp-arcx-bar {
  font-size: 20px;
}
#arcx-nav:not(:is(.showing, .show, .hiding)) .akp-nav-main {
  border: 5px solid var(--bs-emphasis-color);
  border-right: 0;
  border-radius: var(--bs-border-radius-xxl);
  background: color-mix(in srgb, var(--bs-body-bg) 49%, transparent);
  backdrop-filter: blur(3px);
}
#navbar-main:has(#akp-arcx-bar) {
  background-color: transparent;
}
/* The phone strip takes the site menu bar's navy (#navbar-main, colors.css). */
.akp-arcx-strip {
  background-color: var(--bs-primary);
}
#navbar-main:has(#akp-arcx-bar) > .container-lg {
  padding-inline: 0;
}
#akp-arcx-bar .nav {
  --bs-nav-link-font-weight: bold;
  --bs-nav-link-color: var(--bs-white);
  --bs-nav-link-hover-color: var(--bs-emphasis-color);
}
/* The ArcX panel reads like the site menu panel (and the former phone ArcX
   menu): body-size, regular weight, dark text. */
#arcx-nav:is(.showing, .show, .hiding) {
  font-size: 1rem;
}
#arcx-nav:is(.showing, .show, .hiding) .nav {
  flex-direction: column;
  --bs-nav-link-font-weight: normal;
  --bs-nav-link-color: #1f1f1f;
  --bs-nav-link-hover-color: #1f1f1f;
}