/*
	Fair Winds palette and CMS integration for Wide Angle by Pixelarity.
	The licensed main.css remains the source of layout, typography, sizing,
	spacing, controls, images, grids, and responsive behavior.
*/

:root {
	--fw-teal: #176E88;
	--fw-purple: #6F3BB3;
	--fw-purple-dark: #562991;
	--fw-ink: #173E4B;
	--fw-surface: #F8FBFB;
	--fw-pale-teal: #E3F0F1;
	--fw-white: #FFFFFF;
	--fw-line: rgba(23, 62, 75, 0.25);
	--fw-soft-line: rgba(23, 62, 75, 0.12);
}

/* Approved light palette; Wide Angle supplies all type metrics. */

body {
	background: var(--fw-surface);
	color: var(--fw-ink);
}

input,
select,
textarea {
	color: var(--fw-ink);
}

a {
	color: var(--fw-purple);
}

a:hover {
	color: var(--fw-teal);
}

strong,
b,
h1,
h2,
h3,
h4,
h5,
h6,
label,
table th {
	color: var(--fw-ink);
}

blockquote {
	border-left-color: var(--fw-line);
}

code {
	background: var(--fw-pale-teal);
	border-color: var(--fw-line);
}

hr,
.box,
ul.alt li,
table tbody tr,
table thead,
table tfoot,
table.alt tbody tr td {
	border-color: var(--fw-line);
}

table tbody tr:nth-child(2n + 1) {
	background-color: rgba(227, 240, 241, 0.55);
}

/* CMS and keyboard-accessibility helpers. */

.fw-visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.fw-skip-link {
	background: var(--fw-purple);
	border-radius: 4px;
	color: var(--fw-white);
	left: 1rem;
	padding: 0.65rem 1rem;
	position: fixed;
	top: -10rem;
	z-index: 1001;
}

.fw-skip-link:focus {
	color: var(--fw-white);
	top: 1rem;
}

:focus-visible {
	outline: 3px solid var(--fw-purple);
	outline-offset: 3px;
}

/* Original header and pennant, recolored and fitted to the Fair Winds logo. */

#header {
	color: var(--fw-ink);
}

#header:after,
#header.alt:after {
	background: var(--fw-surface);
	box-shadow: 0 1px 0 var(--fw-soft-line);
}

#header #logo {
	background: var(--fw-teal);
}

#header #logo:before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpolygon points='0,0 100,0 50,100' fill='%23176E88' /%3E%3C/svg%3E");
}

#header #logo a {
	border-color: rgba(255, 255, 255, 0.55);
	padding: 0.5rem 1.1rem;
}

#header #logo img {
	background: var(--fw-white);
	border-radius: 100%;
	display: block;
	height: 6rem;
	width: 6rem;
}

#header > nav > ul li a:hover,
#header > nav > ul li a[aria-current="page"] {
	color: var(--fw-teal);
}

#header > nav > ul li a.fw-register-link {
	background: var(--fw-purple);
	border-radius: 4px;
	color: var(--fw-white);
	margin: 0 1rem;
	padding: 0.5rem 1rem;
}

#header > nav > ul li a.fw-register-link:hover,
#header > nav > ul li a.fw-register-link[aria-current="page"] {
	background: var(--fw-purple-dark);
	color: var(--fw-white);
}

#header a[href="#navPanel"] {
	background: var(--fw-teal);
	color: var(--fw-white);
}

/* Original off-canvas navigation with the approved light treatment. */

#navPanel {
	background: var(--fw-surface);
}

#navPanel .link {
	border-top-color: var(--fw-line);
	color: var(--fw-ink) !important;
}

#navPanel .link.depth-0 {
	color: var(--fw-ink) !important;
}

#navPanel .link:active,
#navPanel .link:focus,
#navPanel .link:hover,
#navPanel .link[aria-current="page"] {
	color: var(--fw-teal) !important;
}

#navPanel .link.fw-register-link {
	background: var(--fw-purple);
	border-radius: 4px;
	color: var(--fw-white) !important;
	margin-top: 0.75rem;
}

#navPanel .link.fw-register-link:focus,
#navPanel .link.fw-register-link:hover {
	background: var(--fw-purple-dark);
	color: var(--fw-white) !important;
}

#navPanel .close {
	color: var(--fw-ink) !important;
}

#navPanel .close:hover {
	color: var(--fw-teal) !important;
}

/* Original banner geometry and timing, with a lighter neutral readability veil. */

#banner {
	background: var(--fw-pale-teal);
}

#banner > article:after {
	background: linear-gradient(rgba(8, 28, 34, 0.32), rgba(8, 28, 34, 0.32));
}

#banner > article .inner {
	position: relative;
	z-index: 902;
}

#banner > article h2 {
	color: var(--fw-white);
	font-size: 3rem;
	line-height: 1.2;
}

#banner > article p:has(.button):before {
	display: none;
}

#banner > article.fw-hero-no-image {
	background-color: var(--fw-pale-teal);
	background-image: none !important;
}

#banner > article.fw-hero-no-image:after {
	display: none;
}

#banner > article.fw-hero-no-image h1,
#banner > article.fw-hero-no-image h2,
#banner > article.fw-hero-no-image h3,
#banner > article.fw-hero-no-image p {
	color: var(--fw-ink);
}

#banner > article.fw-hero-no-image p:before {
	background-color: var(--fw-line);
}

#banner .indicators li:focus-visible {
	border-radius: 100%;
	outline-color: var(--fw-white);
}

#banner .fw-slider-pause {
	bottom: 1.5rem;
	position: absolute;
	right: 2rem;
	z-index: 903;
}

/* Keep Wide Angle's button geometry; only map its color roles. */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
	box-shadow: inset 0 0 0 1px var(--fw-teal);
	color: var(--fw-teal) !important;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	box-shadow: inset 0 0 0 1px var(--fw-purple);
	color: var(--fw-purple) !important;
}

input[type="submit"]:hover:active,
input[type="reset"]:hover:active,
input[type="button"]:hover:active,
button:hover:active,
.button:hover:active {
	background-color: rgba(111, 59, 179, 0.12);
}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary,
.fw-form button[type="submit"] {
	background-color: var(--fw-purple);
	box-shadow: none;
	color: var(--fw-white) !important;
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover,
.fw-form button[type="submit"]:hover {
	background-color: var(--fw-purple-dark);
	box-shadow: none;
	color: var(--fw-white) !important;
}

input[type="submit"].primary:hover:active,
input[type="reset"].primary:hover:active,
input[type="button"].primary:hover:active,
button.primary:hover:active,
.button.primary:hover:active {
	background-color: var(--fw-purple-dark);
}

#banner .button:not(.fw-slider-pause) {
	box-shadow: inset 0 0 0 1px var(--fw-white);
	color: var(--fw-white) !important;
}

#banner .button.primary:not(.fw-slider-pause) {
	background: var(--fw-purple);
	box-shadow: none;
}

#banner .button.primary:not(.fw-slider-pause):hover {
	background: var(--fw-purple-dark);
}

#banner > article.fw-hero-no-image .button:not(.fw-slider-pause) {
	box-shadow: inset 0 0 0 1px var(--fw-teal);
	color: var(--fw-teal) !important;
}

#banner > article.fw-hero-no-image .button.primary:not(.fw-slider-pause) {
	background: var(--fw-purple);
	box-shadow: none;
	color: var(--fw-white) !important;
}

#banner > article.fw-hero-no-image .button.primary:not(.fw-slider-pause):hover {
	background: var(--fw-purple-dark);
}

#banner .fw-slider-pause {
	background: rgba(248, 251, 251, 0.92);
	box-shadow: inset 0 0 0 1px var(--fw-white);
	color: var(--fw-ink) !important;
}

/* Original open feature grid; only the palette and CMS media need mapping. */

.features-grid > div {
	border-color: var(--fw-line);
}

.features-grid > div .number {
	border-color: var(--fw-teal);
	color: var(--fw-teal);
}

ul.icons li .icon {
	border-color: var(--fw-teal);
	color: var(--fw-teal);
}

ul.icons li .icon:hover {
	border-color: var(--fw-purple);
	color: var(--fw-purple);
}

ul.icons li .icon:hover:active {
	background-color: rgba(111, 59, 179, 0.12);
}

.fw-content-image figcaption {
	color: rgba(23, 62, 75, 0.72);
	font-size: 0.8rem;
	margin-top: 0.5rem;
	text-align: center;
}

.image.fit img {
	height: auto;
}

.fw-home-cta {
	text-align: center;
}

.fw-home-cta p:has(> .button) {
	display: flex;
	gap: 1rem;
	justify-content: center;
}

.fw-home-cta p:has(> .button) .button {
	font-size: 1.15rem;
	height: 4.0625rem;
	line-height: 4.0625rem;
	padding: 0 4rem;
}

.fw-home-cta > div > .fw-content-image {
	margin-top: 3rem;
}

/* CMS form renderer, using Wide Angle's native control dimensions and type. */

.fw-form {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(var(--form-cols, 1), minmax(0, 1fr));
}

.fw-form-field > div {
	min-width: 0;
}

.fw-form input[type="number"],
.fw-form input[type="date"],
.fw-form input[type="datetime-local"],
.fw-form input[type="time"],
.fw-form input[type="month"],
.fw-form input[type="week"] {
	appearance: none;
	background-color: var(--fw-white);
	border: solid 1px var(--fw-line);
	border-radius: 4px;
	color: inherit;
	display: block;
	height: 3.25rem;
	outline: 0;
	padding: 0 1rem;
	width: 100%;
}

.fw-form input[type="text"],
.fw-form input[type="password"],
.fw-form input[type="email"],
.fw-form input[type="tel"],
.fw-form input[type="search"],
.fw-form input[type="url"],
.fw-form select,
.fw-form textarea {
	background-color: var(--fw-white);
	border-color: var(--fw-line);
}

.fw-form select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23173E4B' fill-opacity='0.5' /%3E%3C/svg%3E");
}

.fw-form input:focus,
.fw-form select:focus,
.fw-form textarea:focus {
	border-color: var(--fw-teal);
	box-shadow: 0 0 0 1px var(--fw-teal);
}

.fw-form textarea {
	min-height: 10rem;
}

.required-marker {
	color: var(--fw-purple);
	margin-left: 0.25rem;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
	color: var(--fw-ink);
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
	background: var(--fw-white);
	border-color: var(--fw-line);
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
	background-color: var(--fw-purple);
	border-color: var(--fw-purple);
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
	border-color: var(--fw-teal);
	box-shadow: 0 0 0 1px var(--fw-teal);
}

::-webkit-input-placeholder {
	color: rgba(23, 62, 75, 0.5) !important;
}

:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
	color: rgba(23, 62, 75, 0.5) !important;
}

select option {
	background-color: var(--fw-surface);
	color: var(--fw-ink);
}

/* Original centered footer with a CMS navigation row. */

#footer {
	background: var(--fw-surface);
	color: var(--fw-ink);
}

#footer .inner {
	border-top-color: var(--fw-line);
}

#footer .inner .copyright {
	color: rgba(23, 62, 75, 0.58);
}

.fw-footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0 0 3rem 0;
	padding: 0;
}

.fw-footer-nav li {
	padding: 0 1rem 1rem 1rem;
}

.fw-footer-nav a {
	font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: 0.15rem;
	text-decoration: none;
	text-transform: uppercase;
}

@media screen and (max-width: 736px) {

	#header #logo a {
		padding: 0.5rem 1.25rem;
	}

	#header #logo img {
		height: 5rem;
		width: 5rem;
	}

	#banner > article h2 {
		font-size: 2rem;
		line-height: 1.3;
	}

	#banner .fw-slider-pause {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zm8 0h4v16h-4z' fill='%23173E4B' /%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 1rem;
		bottom: 1rem;
		overflow: hidden;
		padding: 0;
		right: 1rem;
		text-indent: -9999px;
		width: 2.75rem;
	}

	#banner .fw-slider-pause[aria-pressed="true"] {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z' fill='%23173E4B' /%3E%3C/svg%3E");
	}

	.fw-form {
		grid-template-columns: 1fr;
	}

	.fw-home-cta p:has(> .button) {
		flex-direction: column;
	}

	.fw-home-cta p:has(> .button) .button {
		width: 100%;
	}

}

@media (prefers-reduced-motion: reduce) {

	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*:before,
	*:after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

}