/* Root wrapper */
.cnbm {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Reset button styles only inside this plugin */
.cnbm button.cnbm__toggle,
.cnbm button.cnbm__close,
.cnbm button.cnbm__back-button {
  cursor: pointer !important;
  all: unset;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
}

.cnbm button.cnbm__toggle::before,
.cnbm button.cnbm__toggle::after,
.cnbm button.cnbm__close::before,
.cnbm button.cnbm__close::after,
.cnbm button.cnbm__back-button::before,
.cnbm button.cnbm__back-button::after {
  content: none !important;
  display: none !important;
}

.cnbm__toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-decoration: none;
}
.cnbm button.cnbm__toggle:hover,
.cnbm button.cnbm__toggle:focus,
.cnbm button.cnbm__toggle:active,
.cnbm button.cnbm__close:hover,
.cnbm button.cnbm__close:focus,
.cnbm button.cnbm__close:active,
.cnbm button.cnbm__back-button:hover,
.cnbm button.cnbm__back-button:focus,
.cnbm button.cnbm__back-button:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none;
}
.cnbm__bar {
  width: 28px;
  height: 2px;
  display: block;
}

/* Fullscreen overlay container */
.cnbm__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92); /* Background color of the overlay */
  color: #fff;
  display: grid;
  grid-template-rows: auto 1fr; /* Grid for content and menu */
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
  transition: opacity .2s cubic-bezier(0.25, 1, 0.5, 1), transform .45s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s .45s;
  z-index: 2147483646 !important;
  isolation: isolate;
  will-change: opacity, transform;
}

.cnbm__overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 1);
  pointer-events: none;
  z-index: 1;
}

/* Active state: when the menu is open */
.cnbm--open .cnbm__overlay {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: opacity .2s cubic-bezier(0.25, 1, 0.5, 1), transform .45s cubic-bezier(0.25, 1, 0.5, 1);
}

.cnbm__overlay.cnbm__overlay--open {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: opacity .2s cubic-bezier(0.25, 1, 0.5, 1), transform .45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Back Button */
.cnbm__back-button{
  left: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff;
}

/* Close button (top-right) */
.cnbm__close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 10px;
  justify-self: center;
  cursor: pointer;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  text-decoration: none;
}

.cnbm__close .cnbm__icon-selection,
.cnbm__back-button .cnbm__icon-selection {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .35s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.cnbm__overlay.cnbm__overlay--open .cnbm__close .cnbm__icon-selection {
  transform: rotate(360deg);
}

.cnbm__close svg,
.cnbm__close svg *,
.cnbm__back-button svg,
.cnbm__back-button svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.cnbm__close .cnbm__icon-selection svg,
.cnbm__back-button .cnbm__icon-selection svg {
  display: block;
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
}

.cnbm__close__wrapper{
  text-align: center;
  border-bottom: 1px solid white;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .25s cubic-bezier(0.25, 1, 0.5, 1) .1s, transform .25s cubic-bezier(0.25, 1, 0.5, 1) .1s;
  will-change: opacity, transform;
}

/* Navigation area */
.cnbm__nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  padding: 48px;
  overflow-y: scroll;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .25s cubic-bezier(0.25, 1, 0.5, 1) .1s, transform .25s cubic-bezier(0.25, 1, 0.5, 1) .1s;
  will-change: opacity, transform;

  ul li a{
    text-underline-offset: 10px;
  }
}

.cnbm__overlay.cnbm__overlay--open .cnbm__close__wrapper,
.cnbm__overlay.cnbm__overlay--open .cnbm__nav {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cnbm__overlay,
  .cnbm__close__wrapper,
  .cnbm__nav,
  .cnbm__close .cnbm__icon-selection,
  .cnbm__back-button .cnbm__icon-selection {
    transition: none !important;
  }

  .cnbm__close__wrapper,
  .cnbm__nav {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Menu items list */
.cnbm__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center; /* Default center alignment */
}

/* Add the text alignment based on user selection */
.cnbm__menu--left li{
  justify-content: flex-start; /* Left alignment */
}

.cnbm__menu--right li{
  justify-content: flex-end; /* Right alignment */
}
.cnbm__menu--center li{
  justify-content: center;
}

/* Menu links */
.cnbm__menu a {
  display: flex;
  align-items: center; /* Align text and arrow vertically */
  position: relative;
  color: inherit;
  text-decoration: none;
}

/* Arrow SVG positioning and initial state */
.arrow-svg {
  opacity: 0; /* Initially hide the arrow */
  transform: translateX(-10px); /* Position the arrow slightly to the right */
  transition: transform 0.3s ease; /* Only slide initially */
  margin-left: 0;
  padding: 0;
}

/* Menu item hover effects */
.cnbm__menu li:hover .arrow-svg {
  transform: translateX(15px); /* Slide the arrow to the right */
  transition: transform 0.3s ease; /* Slide effect */
}

/* Fade effect after sliding */
.cnbm__menu li:hover .arrow-svg {
  opacity: 1; /* Fade in after sliding */
  transition: ease 0.5s; 
  /* Delay fade-in after sliding */
}

/* Spacing between items */
.cnbm__menu li + li {
  margin-top: 16px;
}



.cnbm__menu li{
  display: flex;
  align-items: center;
}

/* Prevent page scroll when menu is open */
html.cnbm-lock,
body.cnbm-lock {
  overflow: hidden !important;
  touch-action: none;
}

html.cnbm-lock .md-590a74a7-wrapper,
body.cnbm-lock .md-590a74a7-wrapper {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



/* Search Form */
/* Hide form by default */
.cnbm__search-wrapper{
  display: none;
  width: 100%;
}

.cnbm__search-form {
    display: flex;
    align-items: center;
}

.cnbm__search-results{
  display: none;

  .cnbm__search-grid .cnbm__search-card a{
    display: flex;
    gap: 2em;
    padding: 1.5em 0 1.5em 0;

    .cnbm__search-excerpt{
      margin-top: 3em;
    }
  }
}

.cnbm__menu .menu-item {
    transition: opacity 0.3s ease;
}

.cnbm__menu.cnbm--search-active {
  display: none;
}

.cnbm__search-input {
    width: 30%;
    padding: 6px 10px;
    border-bottom: 1px solid #fff;
}

.cnbm__search-input:focus{
  outline: none;
  box-shadow: none;
  border-color: transparent;
  border-bottom: 3px solid #fff;
}

.cnbm__search-input::placeholder{
  color: #fff;
  opacity: 1;
}

.cnbm__search-submit {
    padding: 6px 12px;
    cursor: pointer;
    position: relative;

    .cnbm__icon-selection{
      position: absolute;
      scale: 1.6;
      bottom: 0;
      right: 2em;
    }
}

/* Title below menu */
.cnbm__title-below-menu{
  width: 100%;

  .split-text{
    display: flex;
    width: 100%;
    padding: 2em 0 2em 0;
    justify-content: space-between;
  }
}

.cnbm__hamburger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cnbm__hamburger-icon svg,
.cnbm__hamburger-icon i {
  display: block;
  line-height: 1;
}

.cnbm__close.cnbm__icon-fallback,
.cnbm__back-button.cnbm__icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
}

.cnbm__close.cnbm__icon-fallback .cnbm__icon-selection,
.cnbm__back-button.cnbm__icon-fallback .cnbm__icon-selection {
  display: none !important;
}

.cnbm__close.cnbm__icon-fallback::before {
  content: "×";
  font-size: 24px;
  line-height: 1;
}

.cnbm__back-button.cnbm__icon-fallback::before {
  content: "←";
  font-size: 22px;
  line-height: 1;
}