/* Setup variables and style basic HTML tags */

/* AVOID using base color vars directly to make future changes easier. Prefer semantic or Bootstrap color vars instead. */
/* Base colors from Freedom Lifemap branding booklet */
:root {
  /* Taken from CSS from https://philanthropydatacommons.org/ */
  --brand-color1: #ffffff;
  --brand-color2: #e0e0e0;
  --brand-color3: #f48420;
  --brand-color4: #1573bb;
  --brand-color5: #323232;
  --brand-color6: #004188;
  --brand-color7: #212934;
  --brand-color8: #020202;

  --brand-color9: #d5731b; /* Darker version of brand #f48420 that has better WCAG contrast ratio (3.3:1) vs white */
}
/* Bootstrap overrides */
:root {
  --color-muted: #6f6f6f;
  
  --bs-body-bg: var(--brand-color1);
  --bg-light: var(--brand-color2);
  --bs-primary: var(--brand-color4);
  --bs-secondary-color: var(--brand-color5);
  --color-accent1: var(--brand-color9);
  
  --bs-link-color: var(--brand-color4);
  --bs-body-color: var(--brand-color7);
  --color-hover-primary: #1c5b92;

  --color-border-strong: #8c94a0;
  --color-border-weak: var(--brand-color2);
  --bs-border-color-translucent: var(--color-border-weak);
  --bs-border-radius: 6px;
  --bs-border-width: 1.5px;
}

body {
  font-family: "Source Sans Pro", system-ui, sans-serif;
  font-weight: 400;
}

/* While printing, print colors for elements using background colors without the user having to enable `Background graphics` in print settings */
@media print {
  body {
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
}

*:focus-visible {
  box-shadow: none !important;
  outline-offset: 1.5px;
  outline: 4px solid var(--color-accent1) !important;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-bottom: 0.75em;
  font-weight: 600;
}
h1 {
  margin-bottom: 1.5rem;
}

section + section {
  margin-top: 2em;
}

/* Use .prose for formatting article-like text */
.prose :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
  margin-top: 1.25em;
}

a {
  color: var(--bs-link-color);
  text-decoration: underline;
  text-underline-offset: 0.1em;
}
a:hover {
  color: var(--color-hover-primary);
}

.text-primary {
  color: var(--bs-primary) !important;
}

.text-muted {
  color: var(--color-muted) !important;
}

.code {
  color: var(--bs-code-color) !important;
  font-family: var(--bs-font-monospace);
  font-size: .875em;
}

.alert ul {
  margin-bottom: 0px;
}