/**
 * @file
 * Styles for the off-canvas component.
 *
 * This component provides a slide-in panel for navigation or other content.
 */

.off-canvas-region,
.off-canvas__overlay {
  position: fixed;
  inset: 0;
}

.off-canvas-region {
  z-index: 1000;
  display: flex;
  overflow: auto;
  transform: translate(0);
  padding-block: var(--spacing-lg);
}

/* Hides off-canvas content from tab order when not visible. */
.off-canvas-region[aria-hidden='true'] {
  display: none;
}

.off-canvas__overlay {
  background-color: var(--color-gray-800);
  animation: fade-in 200ms 100ms both, slide-left 200ms 100ms both;
  opacity: 1;
}

.off-canvas__content {
  width: 100%;
  position: relative;
  overflow: auto;
  padding-inline: var(--spacing-md);
  animation: fade-in 200ms 200ms both, slide-left 100ms 100ms both;
}

.off-canvas__close {
  padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-lg);
  background: transparent;
  color: var(--color-white);
  border: none;
  cursor: pointer;
  outline-offset: 2px;
}

.off-canvas__close:hover,
.off-canvas__close:focus-visible {
  background-color: var(--color-gray-800);
  color: var(--color-black);
  text-decoration: none;
}

.off-canvas__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: var(--spacing-2xl);
  padding-top: var(--spacing-2xl);
  gap: var(--spacing-lg);
}

.off-canvas__header .branding__logo svg {
  fill: var(--color-white);
}

.off-canvas__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
  margin-bottom: var(--spacing-lg);
}

/* General menu styles within the off-canvas. */
.off-canvas__menu .menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
}

.off-canvas__menu .menu__item {
  width: 100%;
}

.off-canvas__menu .menu__link {
  padding-block: var(--spacing-xs);
  color: var(--color-white);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;

  &:hover {
    color: var(--color-white);
    text-decoration: underline;
  }
}

/* Styling for top-level menu items (level-1) in mobile. */
.off-canvas__menu .menu__item--level-1 {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* Styles for nested sub-menus in the main navigation. */
.off-canvas__menu-main .menu__item--has-children>.menu {
  background: var(--color-black);
  line-height: 1;
  padding: var(--spacing-lg);
  margin-inline: calc(var(--spacing-md) * -1);
  width: calc(100% + var(--spacing-md) * 2);
  display: none;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* Styles for the menu link that acts as a toggle for sub-menus. */
.off-canvas__menu-main .menu__link--has-children {
  border-left: 1px solid var(--color-white);
  border-radius: 0;
  padding-inline-start: var(--spacing-lg);
  padding-inline-end: var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Shows the sub-menu when expanded by JavaScript. */
.off-canvas__menu-main .menu__item--has-children>.menu[data-disclosure-expanded="true"] {
  display: flex;
}

/* Arrow rotation and margin for icons within expandable links in the off-canvas menu. */
.off-canvas__menu-main .menu__link--has-children svg {
  transition: transform 0.2s ease-in-out;
  margin-inline-start: auto;
  margin-inline-end: var(--spacing-xxs);
  transform: rotate(90deg);
  /* Default state to point DOWN */
}

/* Rotates the arrow when the link's aria-expanded is true (submenu is open). */
.off-canvas__menu-main .menu__link--has-children[aria-expanded="true"] svg {
  transform: rotate(270deg);
  /* Rotated state to point UP */
}

/* Top menu in off-canvas. */
.off-canvas__menu-top {
  padding-bottom: var(--spacing-lg);
}

/* Specific styling for links within the menu--top-menu. */
.off-canvas__menu .menu.menu--top-menu a {
  text-decoration: none;
  text-underline-offset: var(--underline-offset);
}

.off-canvas__menu .menu.menu--top-menu a::before {
  background-color: transparent;
  transform: none;
}

.off-canvas__menu .menu.menu--top-menu a:hover::before {
  background-color: transparent;
  transform: none;
}

.off-canvas__menu .menu.menu--top-menu a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes slide-left {
  from {
    transform: translateX(-50%);
  }
}