:root {
  /* Body background */
  --sand-300: #fffcf5;

  /* Sidebar background */
  --sand-400: #f3f0e9;

  /* Sidebar border */
  --sand-500: #cbc9c3;

  /* Sidebar nav item background */
  --sand-600: #dfddd7;

  /* Main text color */
  --onyx-500: #141202;

  /* Text highlight */
  --gold-500: #b17f21;

  /* Spacers */
  --spacer-md: 1rem;
  --spacer-sm: 0.5rem;

  /* Border radius */
  --border-md: 0.5rem;
}

html,
body {
  height: 100%;
}

body {
  background: var(--sand-300);
  color: var(--onyx-500);
  font-size: 14px;
}

a {
  color: var(--onyx-500);
}

.site-grid {
  display: flex;
  height: 100%;
  flex-direction: column;
}

@media (min-width: 52rem) {
  .site-grid {
    display: flex;
    height: 100%;
    flex-direction: row;
  }
}

/* Main sidebar */

/*
 Title
 Subtitle
 Nav
*/
.site-sidebar {
  padding: 0 var(--spacer-sm);
  border-bottom: 1px solid var(--sand-500);
}

@media (min-width: 52rem) {
  .site-sidebar {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 20vw;
    background: var(--sand-400);
    border-right: 1px solid var(--sand-500);
    border-bottom: 0;
    overflow: hidden;
  }
}

.site-title {
  margin: 0;
  padding: var(--spacer-sm) var(--spacer-sm) 0 var(--spacer-sm);
  font-size: 1rem;
}

.site-subtitle {
  margin: 0;
  padding: 0 var(--spacer-sm);
  font-size: 0.8rem;
}

@media (min-width: 52rem) {
  .site-subtitle {
    margin: 0 0 var(--spacer-sm);
  }
}

.site-nav {
  flex: 1;
  overflow-y: scroll;
  padding: 0 var(--spacer-sm) var(--spacer-sm);
}

.site-sidebar > .site-nav {
  display: none;
}

@media (min-width: 52rem) {
  .site-sidebar > .site-nav {
    display: block;
  }
}

.site-nav.mobile-search {
  padding: var(--spacer-sm);
}

filterable-list::part(search) {
  position: sticky;
  top: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacer-sm);
  margin: 0 0 var(--spacer-sm) 0;
  border: 1px solid var(--sand-500);
  border-radius: var(--border-md);
  outline: none;
  font-size: 14px;
}

filterable-list::part(list) {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.site-nav li.active a {
  background: var(--sand-500);
}

.site-nav li.hidden {
  display: none;
}

.site-nav a {
  display: block;
  padding: var(--spacer-sm);
  border-radius: var(--border-md);
  text-decoration: none;
  transition: background ease 0.25s;
}

.site-nav a:hover {
  background: var(--sand-600);
}

/* Credit link */
.site-credit {
  margin: 0;
  padding: 0 var(--spacer-sm) var(--spacer-sm);
  font-size: 0.8rem;
}

@media (min-width: 52rem) {
  .site-credit {
    padding: var(--spacer-sm);
  }
}

.site-credit a {
  color: var(--gold-500);
}

/* Main content area */
.site-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.discussion-wrapper {
  height: 100%;
  overflow-y: scroll;
}

.discussion {
  height: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--spacer-md);
}

.discussion::after {
  content: "";
  display: block;
  height: var(--spacer-md);
}

.discussion > p,
.dsicussion > pre {
  font-family: ui-monospace;
}

.discussion a {
  color: var(--gold-500);
}

.discussion-header {
  margin: 0 0 var(--spacer-md);
}

.section-header {
  text-transform: capitalize;
}

/* Main map */

.main-map {
  height: 100%;
}

.main-map.leaflet-container {
  background-color: rgba(255, 0, 0, 0);
}

/* Mobile search trigger */
.mobile-search-trigger {
  display: block;
  padding: var(--spacer-sm);
  border-top: 1px solid var(--sand-500);
  color: var(--gold-500);
  text-align: center;
}

@media (min-width: 52rem) {
  .mobile-search-trigger {
    display: none;
  }
}

.mobile-back {
  display: block;
  padding: var(--spacer-sm) var(--spacer-md);
  color: var(--gold-500);
}