@import url('fonts.css');

/* Move down content because we have a fixed navbar that is 3.5rem tall */
body {
  padding-top: 3.5rem;
  font-family: D-DIN, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
  'Segoe UI Symbol';
  color: #000;
}

/* Font styling */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
}

textarea,
pre,
code,
tt,
.plaintext {
  font-family: Iosevka, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
}

/* navbar */

.navbar-brand {
  font-weight: 500;
}

/* .navbar-brand img {
  width: 2rem;
  margin-right: 0.5rem;
} */

.navbar-brand a:hover {
  text-decoration: none;
}

.navbar {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: #ccc !important;
  background-color: #f0f0f0 !important;
}

.navbar-brand img {
  width: 3.2rem;
  position: absolute;
  top: 0.8rem;
}
.navbar-brand > span {
  margin-left: 4rem;
}

hr,
footer,
.table th,
.table td {
  border-color: #ccc !important;
}

footer,
.card-footer {
  background-color: #f0f0f0 !important;
}

.footer {
  margin: 0px;
  background-color: #ffffff;
  border-top-style: solid;
  border-top-width: 1px;
  border-color: #ccc;
}

h2 {
  margin-bottom: 1.25rem;
}

h3:not(.card-title),
h4:not(.card-title) {
  margin-bottom: 1rem;
}

.lead {
  font-weight: inherit;
}

p .btn {
  margin-bottom: 1rem;
}

a.nav-link,
.btn {
  cursor: pointer;
}

.var {
  border-bottom: 1px dashed black;
}

.text-muted,
.form-text {
  color: #5f5f5f !important;
}

.fa-li {
  top: 0.225rem;
}

.card {
  margin-bottom: 1.5rem;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.card-body > :last-child {
  margin-bottom: 0;
}
.card-body > .row:last-child {
  margin-bottom: -1rem;
}
.card-body > .form-group:first-child > label {
  padding-top: 0;
}

h1:target,
*:target > h1:first-child,
h2:target,
*:target > h2:first-child,
h3:target,
*:target > h3:first-child,
h4:target,
*:target > h4:first-child {
  color: #dc3545;
  padding-top: 4.5rem;
  margin-top: -4.5rem;
}

/* I'm not sure what this does, but it leads to funky margins

main {
   If there's a #target with the margin hack above, make sure things haven't fallen out of the top of the container 
  padding-top: 4.5rem;
  margin-top: -4.5rem;
}
*/

h1:target::before,
*:target > h1:first-child::before,
h2:target::before,
*:target > h2:first-child::before,
h3:target::before,
*:target > h3:first-child::before,
h4:target::before,
*:target > h4:first-child::before {
  /* Borrowed from FontAwesome */
  content: '\f061';
  color: #007bff;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  display: inline-block;
  margin-left: -1.2em;
  width: 1.2em;
  animation: target-slide-in 0.75s ease-out 0s 1 both;
}

@keyframes target-slide-in {
  0% {
    transform: translateX(-3em);
  }
  100% {
    transform: translateX(0);
  }
}

/* for preformatted plaintext minutes, mostly */

.plaintext {
  white-space: pre-wrap;
}

/* Monospaced fonts */

code {
  color: #6f23f6;
}

/* docs sidebar */

.sidebar {
  display: none;
}

@media (min-width: 768px) {
  .sidebar {
    display: block;
    float: right;
    width: 18rem;
    margin-left: 1.5rem;
  }
}

.alert {
  display: table; /* Don't overlap the sidebar */
}

/* Formatted lists, like the constitution */

ol {
  margin: 6px 0 6px 0;
  counter-reset: item;
}

ol > li {
  counter-increment: item;
  margin: 0 0 6px 0;
}

ol ol > li {
  display: block;
}

ol ol > li:before {
  content: counters(item, '.') '. ';
}

.jumbotron {
  padding: 3rem 1rem;
  margin-bottom: 0;
}

/* Error pages */

body.layout-card {
  padding-bottom: 5rem;
}
.layout-card .container {
  max-width: 576px;
}
.layout-card.wide .container {
  max-width: 768px;
}
@media (max-width: 576px) {
  body.layout-card {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
}
@media (max-width: 768px) {
  body.layout-card.wide {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
}

.layout-card .logo {
  width: 3.4rem;
  position: absolute;
  top: -0.5rem;
}

.layout-card .logo-title {
  margin-left: 4rem;
  margin-bottom: 1.5rem;
}

/* Control panel */

.card-columns {
  column-gap: 2.25rem;
}
.card-columns .card {
  margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
  .card-columns {
    columns: 1;
  }
}
@media (min-width: 992px) {
  .card-columns {
    columns: 2;
  }
}