//
// Navigation
// ----------------------------
:root {
  --offnav-link-font-size: 1.2rem;
  --offnav-vertical-logo-spacing: calc(#{$spacer} * 2.5);
  --offnav-vertical-menu-social-spacing: calc(#{$spacer} * 2);
}

.region-navigation {
  .site-logo svg {
    max-width: 100%;
    height: auto;
  }

  // Social menu
  .menu--social {
    margin-top: $spacer;
  }

  // Vertical navigation.
  &.offcanvas-start,
  &.offcanvas-end,
  &.offcanvas-top {
    margin-top: var(--beo-region-top-bar-height);

    // Logo spacing.
    .site-logo {
      margin-top: var(--offnav-vertical-logo-spacing);
    }

    // Social menu
    .menu--social {
      margin-top: var(--offnav-vertical-menu-social-spacing);
    }
  }

  // Horizontal navigation.
  &.offcanvas-top,
  &.offcanvas-bottom {
    .offcanvas-header {
      justify-content: center;
    }

    // Adjust header-spacing
    .offcanvas-header {
      padding-bottom: 0;
    }

    // Adjust close btn
    .btn-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
    }
  }
}

// Navigation (Offcanvas Top).
.region-navigation.offcanvas-top {
  .region-top-bar ~ & {
    margin-top: var(--beo-region-top-bar-height);
  }
}
