@import url('./navigation.css');
@import url('./index.css');
@import url('./press-releases.css');
@import url('./page.css');
/* Global variables. */
:root {
	/* Set sans-serif & mono fonts */
	--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
		"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
		"Helvetica Neue", sans-serif;
	--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

	/* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
	--base-fontsize: 1.15rem;

	/* Major third scale progression - see https://type-scale.com/ */
	--header-scale: 1.25;

	/* Line height is set to the "Golden ratio" for optimal legibility */
	--line-height: 1.618;

	/* Default (light) theme */
	--bg: #fff;
	--accent-bg: #F1F2E2;
	--accent-blue: #102F5E;
	--text: #212121;
	--text-light: #585858;
	--border: #898EA4;
	--accent: #8C1C17;
	--code: #d81b60;
	--preformatted: #444;
	--marked: #ffdd33;
	--disabled: #efefef;
}


/* Reset box-sizing */
*, *::before, *::after {
	box-sizing: border-box;
}

/* Reset default appearance */
textarea,
select,
input,
progress {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

html {
	/* Set the font globally */
	font-family: var(--sans-font);
	scroll-behavior: smooth;
}

/* Make the body a nice central block */
body {
	color: var(--text);
	background-color: var(--bg);
	font-size: var(--base-fontsize);
	line-height: var(--line-height);
	margin: 0;
	border: solid 1px #ccc;
}
body > * {
	transition: all .3s ease-in;
}

/* Make the header bg full width, but the content inline with body */
body > header {
	background-color: var(--accent-bg);
	text-align: center;
	width: 100%;
}

body > header h1, body > header h3 {
	margin: .2em;
}
body > header p {
	max-width: 40rem;
	margin: 1rem auto;
	color: var(--accent);
	font-size: 1.5em;
}
body > header #coa {
	max-width: 160px;
}
body > header > nav {
	background-color: var(--accent);
	position: relative;
}
/* Main Menu */
#main_nav {
	overflow: hidden;
	list-style-type: none;
}
#main_nav a {
	color: #fff;
}

/* Add a little padding to ensure spacing is correct between content and header > nav */
main {
	
}

body > footer {
	background-color: var(--accent-blue);
	color: #fff;
}
body > footer > #legal {
	padding: .2em;
	background-color: var(--accent);
	color: #fff;
}
#footer_info {
	display: flex;
	flex-direction: column;
}
#footer_info ul {
	columns: 2;	
	column-gap: 5em;
}
#footer_info ul a {
	color: #fff;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

/* Format headers */
h1 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
	margin-top: calc(var(--line-height) * 1.5rem);
}

h2 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
	margin-top: calc(var(--line-height) * 1.5rem);
}

h3 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
	margin-top: calc(var(--line-height) * 1.5rem);
}

h4 {
	font-size: calc(var(--base-fontsize) * var(--header-scale));
	margin-top: calc(var(--line-height) * 1.5rem);
}

h5 {
	font-size: var(--base-fontsize);
	margin-top: calc(var(--line-height) * 1.5rem);
}

h6 {
	font-size: calc(var(--base-fontsize) / var(--header-scale));
	margin-top: calc(var(--line-height) * 1.5rem);
}

/* Prevent long strings from overflowing container */
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* Fix line height when title wraps */
h1,
h2,
h3 {
	line-height: 1.1;
}

/* Format links & buttons */
a,
a:visited {
	color: var(--accent);
}

a:hover {
	text-decoration: none;
}

button,
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"],
label[type="button"] {
	border: none;
	border-radius: 5px;
	background-color: var(--accent);
	font-size: 1rem;
	color: var(--bg);
	padding: 0.7rem 0.9rem;
	margin: 0.5rem 0;
}

button[disabled],
[role="button"][aria-disabled="true"],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][disabled],
select[disabled] {
	cursor: not-allowed;
}

input:disabled,
textarea:disabled,
select:disabled,
button[disabled] {
	cursor: not-allowed;
	background-color: var(--disabled);
	color: var(--text-light)
}

input[type="range"] {
	padding: 0;
}

/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
abbr[title] {
	cursor: help;
	text-decoration-line: underline;
	text-decoration-style: dotted;
}

button:enabled:hover,
[role="button"]:not([aria-disabled="true"]):hover,
input[type="submit"]:enabled:hover,
input[type="reset"]:enabled:hover,
input[type="button"]:enabled:hover,
label[type="button"]:hover {
	filter: brightness(1.4);
	cursor: pointer;
}

button:focus-visible:where(:enabled, [role="button"]:not([aria-disabled="true"])),
input:enabled:focus-visible:where(
[type="submit"],
[type="reset"],
[type="button"]
) {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.content-wrap {
	width: 95%;
	max-width: 1920px;
	margin: 0 auto;
	position: relative;
}

/* >= 568px */
@media screen and (min-width: 35.5em) {}

/* >= 768px */
@media screen and (min-width: 48em) {
	#footer_info ul{
		columns: 3;
	}
	#footer_info {
		flex-direction: row;
		gap: 2em;
	}
}

/* >= 1024px */
@media screen and (min-width: 64em) {}

/* >= 1280px */
@media screen and (min-width: 80em) {}

/* >= 1920px */
@media screen and (min-width: 120em) {}

/* >= 2560px */
@media screen and (min-width: 160em) {}

/* >= 3840px */
@media screen and (min-width: 240em) {}