/**
  * @file
  * Sidebar spacing and content.
  **/

.sidebar .block {
  border: 1px solid var(--black);
  padding: 15px;
}

.sidebar .block:not(:last-of-type) {
  margin: 0 0 20px;
}

.sidebar h3 {
  margin: 0 0 0.5em;
  border-bottom: 2px solid var(--laurier-purple);
  padding-right: 20px;
  padding-bottom: 5px;
  text-shadow: none;
  font-size: 1.071em;
  line-height: 1.2;
  color: var(--laurier-purple);
}

/** Separator only visible on mobile **/
.sidebar-separator {
  display: none;
}

/** On mobile, sidebar moves below main content and separator shows **/
@media (max-width: 991px) {
  .sidebar_first.sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
  }

  .sidebar-separator {
    display: block;
    margin: var(--gutter-y) auto;
    width: 70%;
    color: var(--laurier-gold);
    opacity: 1;
  }

  .sidebar_second.sidebar {
    order: 7;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.sidebar .guide-nav-header h3 {
  border-bottom: 5px solid var(--laurier-purple);
}

/** Green background blocks in sidebar, used at least for contact **/
.sidebar .block.bg-green {
  border: 1px solid var(--laurier-green);
  background-color: var(--laurier-green);
  color: var(--white);
}

.bg-green h3 {
  border-bottom: 2px solid var(--white);
}

.bg-green :is(a, h3) {
  color: var(--white);
}

.bg-green a:is(:hover, :focus) {
  background-color: var(--white);
  color: var(--laurier-purple);
}

/** Contact sidebar **/
.contact-sidebar:not(:last-child) {
  padding-bottom: 20px;
}

.sidebar .block .content {
  font-size: 0.914em;
  line-height: 1.4;
}

/** Active sidebar links to look different than other links **/
a.sidebar-active {
  color: var(--laurier-green);
  text-decoration: none;
}

a.sidebar-active:is(:hover, :focus) {
  background-color: transparent;
  color: var(--laurier-green);
  text-decoration: none;
}