/* Application styles for Propshaft asset pipeline
 *
 * With Propshaft, CSS files are loaded individually by Rails.
 * The loading order is controlled by Rails configuration, not by CSS imports.
 * This file can contain application-wide styles that should be applied globally.
 */
/* Any additional application-wide styles can be added below this comment */

::selection {
  background-color: var(--color--selection-bg);
  /* color: var(--color--selection-text); */
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color--selection-bg);
  /* color: var(--color--selection-text); */
  text-shadow: none;
}

html,
body {
  background-color: var(--color--bg-base) !important;
}

body {
  padding-bottom: 12rem;
}

html.debug * {
  outline: 1px solid #ff00ff22;
}

body {
  /* padding-left: var(--space--large); */
  /* padding-right: var(--space--large); */
}

main {
  padding-bottom: 4rem;
  margin: auto;
}

.page-shell {
  padding-top: var(--space--large);
}

/* todo rename */
.container-max {
  max-width: var(--container--base);
  padding-inline: var(--container-inline-padding);
  margin: auto;
}

.capped-width {
  max-width: var(--container--base);
  margin: auto;
}

.container-padding {
  padding-inline: var(--container-inline-padding);
}

nav.nav-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
  /* margin-bottom: 2rem; */
  border-bottom: 1px solid var(--color--border-low-contrast);
}

.nav-inner {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: var(--container--base);
  padding: 0 2rem;
  margin: 0;
  margin-bottom: -1px;
  /* Pull down to overlap nav border */
}

.main-links,
.secondary-links {
  gap: 1rem;
}

.nav-item {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  padding: 0.75rem 0;
  /* background-color: #DDD; */
  border-bottom: 1px solid #ffffff00;
  a { text-decoration: none; }

  &[aria-selected="true"] {
    color: var(--color--max-text);
    border-bottom: 1px solid var(--color--max-text);
  }

  &:not([aria-selected="true"]) {
    color: var(--color--aa-text);
    a { color: inherit; }

    &:hover { color: var(--color--max-text); }
  }
}

/* todo rename and fix */
.header {
  padding-top: 2rem;
  /* padding-bottom: 2rem; */
}