/* You can add global styles to this file, and also import other style files */

/* use atkinson hyperlegible throughout all elements */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('./assets/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Bold-102.ttf');
  font-weight: bold;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('./assets/Atkinson-Hyperlegible/Atkinson-Hyperlegible-BoldItalic-102.ttf');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('./assets/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Regular-102.ttf');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('./assets/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Italic-102.ttf');
  font-style: italic;
}

body *
{
   font-family: "Atkinson Hyperlegible" !important;
}

/* define common colors to use throughout the design */

/* default font color is dark blue */
body {
    color: #374987;
}

/* don't use light font when printing */
@media screen {
    .light-font-color {
	color: #FFFFFF;
    }
}

/* use intermediate-font-color only on screen, not on print */
@media screen {
    a {
	color: #2D4EC0;
    }

    .intermediate-font-color {
	color: #6C8DFF;
    }
}
@media print {
    a {
	color: #2D4EC0;
    }

    a[href]:not([href*="/"]):after {
	content: " (" attr(href) ")";
    }
}

/* omit colored backgrounds when printing */
@media screen {
    .bright-top-border {
	border-top-style: solid;
	border-color: #FFF9B1;
	border-top-width: 0.5rem;
    }

    .light-background-color {
	background-color: #F8F8F8;
    }
    
    body, .intermediate-background-color {
	background-color: #6C8DFF;
    }

    .dark-background-color {
	background-color: #374987;
    }
}

.light-link {
    color: #FFFFFF;
}

.light-link:visited {
    color: #DDDDDD;
}

.dark-side-borders {
    border-style: none solid;
    border-width: 2px;
    border-color: #374987;
}

/* add full borders to multi-col header when printing */
@media print {
    .multi-col-borders {
	border-style: solid;
    }
}

.white-background-color {
    background-color: #FFFFFF;
}

/* key body and content spacing definitions */

/* when printing, use reasonable page margins */
@media print {
    @page {
	margin: 1in !important;
    }
}

body {
    margin: 0;
}

#container {
    background-color: #FFFFFF;
    width: 100%;
    height: fit-content;
}

.full-width {
    width: 100%;
    height: fit-content;
}

.left {
    float: left;
}

.clear {
    clear: both;
}

#content {
    padding-bottom: 2rem;
}

@media print {
    #content {
	width: 100%;
    }
}

@media screen and (1333px <= width) {
    nav.breadcrumb, #content, .content {
	margin: auto;
	width: 1200px;
    }
}

@media screen and (600px <= width < 1333px) {
    nav.breadcrumb, #content, .content {
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
    }
}

@media screen and (width < 600px) {
    nav.breadcrumb, #content, .content {
	margin-left: 2%;
	margin-right: 2%;
	width: 96%;
    }
}

/* define key "top-of-page" (header, nav) styles */

#header {
    padding-top: 0;
    padding-bottom: 0.5rem;
}

nav {
    padding-bottom: 0.5rem;
    height: fit-content;
}

nav.breadcrumb ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.crumb {
  display: inline;
}

nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  content: "\2192";
}

ul.children li + li::before {
    content: none;
}

nav.breadcrumb [aria-current="page"] {
  font-weight: bold;
}

/* skip link and nav shouldn't show when printed */
@media print {
    nav.breadcrumb {
	display: none;
    }
    
    #skip-link {
	display: none;
    }
}

#skip-link {
    padding-left: 0.75rem;
    height: 1rem;
    font-size: 0.5rem;
    color: #6C8DFF;
}

#skip-link:focus, #skip-link:active {
    color: #ffffff;
}

ul {
    margin-top: 1px;
    padding-left: 1.75rem;
}

/* set logo left margin when on screen */
@media screen {
    #logo-initials {
	margin-left: 0.75rem;
    }
}

#logo {
    display: flex;
}

#logo-initials {
    margin-left: 0.75rem;
    margin-right: 0.75rem;

    font-weight: bold;
    font-size: 3rem;
}

@media (width > 800px) {
    #logo-small {
	font-weight: normal;
	font-size: 3rem;
    }

    #logo-br {
	display: none;
    }
}

@media (width <= 800px) {
    #logo-small {
	padding-top: 0.2rem;
	font-weight: normal;
	font-size: 1.25rem;
    }
}

/* define key "bottom-of-page" (footer) styles */

#disclaimer p {
    margin-top: 0;
    margin-left: 0.75rem;
    margin-bottom: 0.25rem;
}

/* skip footer fade when printing */
@media print {
    footer-fade {
	display: none;
    }
}
@media screen {
    #footer-fade {
	background: linear-gradient(#6C8DFF, #374987);
	height: 300px;
	position: relative;
    }
}

.footer-icons {
    height: 1.5rem;
}

.footer-text {
    margin-bottom: 0.75rem;
    margin-left: 0.75rem;
    margin-right: auto;
}

/* make header link white on screen but not when printing */
@media screen {
    .header-footer-link {
	color: #FFFFFF;
    }
}
@media print {
    .header-footer-link {
	color: #374987;
    }
}

.header-footer-link {
    text-decoration: none;
}

/* header and large text item styles */

h1,h2,h3,h4,h5 {
    margin: 0;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h2 ~ p {
    margin-top: 0;
}

.large-text {
    font-weight: normal;
    font-size: 1.5rem;
}

.child-link {
    font-weight: normal;
    padding-left: 0.5rem;
}

/* styles for large text blocks */

.indented-item {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    padding-bottom: 10px;
}

.cell {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    min-width: 300px;
    width: fit-content;
    height: fit-content;
    padding: 0.5rem;
}

/* table styles --> .date is for dates displayed in tables */

table {
    border-collapse: collapse;
    border-spacing: 0.75rem 1.5rem;
}

table.one-row-header tr:nth-child(even) {
    background-color: #F8F8F8;
}

table.two-row-header tr:nth-child(2n+3) {
    background-color: #F8F8F8;
}

th {
    font-size: 1rem;
    width: fit-content;
    vertical-align: bottom;
}

th .date {
    width: max-content;
}    

th,td {
    min-height: 2rem;
    padding: 1rem;
}

td {
    font-size: 1rem;
    vertical-align: top;
    text-align: center;
}

.lcol {
    text-align: right;
}

.rcol {
    text-align: left;
}

/* elements that should show on screen only */
@media not screen {
    .screen {
	display: none;
    }
}

ol {
    list-style: circle;
}

@media screen {
    svg g text {
	display: none;
    }
    svg g:hover text {
	display: block;
    }
    svg g rect {
	display: none;
    }
    svg g:hover rect {
	display: block;
    }
}

svg line {
    vector-effect: non-scaling-stroke;
}

@media screen and (1333px > width) {
    .svg {
	overflow-x: scroll;
    }
}

.svg {
    height: fit-content;
    width: 100%;
}

/* remove spacing between table formatter paragraphs */
#table-formatters p {
    margin-top: 0;
    margin-bottom: 0;
}

#table-formatters {
    padding: 0.5rem 0;
}