/*
 * ACCESSIBILITY STYLES
 * Loaded after style.css, so overrides reuse its selectors.
 */



/******************************************************************************
 * * *  COLOR CONTRAST PALETTE (WCAG 2.1 AA)  * * * * * * * * * * * * * * * * *
 *
 *  Change a color here and it updates everywhere below.
 *  Ratio = contrast against the background it sits on (4.5:1 normal text,
 *  3:1 large/bold text). Original style.css color in brackets.
 ******************************************************************************/

:root {
	--a11y-orange:          #b85e13; /* footer / bottom bar bg, slider links   4.52 (#e87a1e 2.90) */
	--a11y-footer-link:     #ffffff; /* footer / bottom bar links on orange    4.52 (#f9dcc4 2.22) */
	--a11y-blue:            #007db7; /* menu bar, buttons, icons               4.55 (#0094d9 3.37) */
	--a11y-menu-active:     #ffffff; /* current / hover menu item on blue      4.55 (#ffac67 2.24) */
	--a11y-yellow-text:     #333333; /* menu text on yellow (service pages)    7.82 (#727676 2.85) */
	--a11y-blog-link:       #767676; /* top bar "Visit Our Blog"               4.54 (#888    3.54) */
	--a11y-placeholder:     #777484; /* newsletter field text                  4.55 (#aba9b3 2.32) */
	--a11y-body-text:       #6d6d6d; /* body text (on cream #fff1ce)           4.61 (#777    4.11) */
	--a11y-link:            #46792b; /* default link green (on cream)          4.65 (#5ea339 2.84) */
	--a11y-accordion-orange:#e67619; /* orange accordion (large bold text)     3.01 (#e7791f 2.93) */
	--a11y-text-orange:     #d26a29; /* .text-orange headings on cream         3.21 (#d77234 2.95) */
	--a11y-form-button:     #c94e24; /* Cognito form Submit button bg          4.57 (#d85427 4.02) */
}





/******************************************************************************
 * * *  COLOR CONTRAST OVERRIDES  * * * * * * * * * * * * * * * * * * * * * * *
 ******************************************************************************/

/* Body text & links */

body {color: var(--a11y-body-text);}

.green-col h4 span, .blue-col h4 span {color: var(--a11y-body-text);}

a {color: var(--a11y-link);}

.text-orange {color: var(--a11y-text-orange);}


/* Blue: menu bar, buttons, icons */

.header,
.scroll-bar,
.mobile-nav,
.mobile-nav::-webkit-scrollbar {background-color: var(--a11y-blue);}

.mobile-nav::-webkit-scrollbar-thumb {border-color: var(--a11y-blue);}

.button {
	border-color: var(--a11y-blue);
	background-color: var(--a11y-blue);
}

.button-empty, .button-empty .icon {color: var(--a11y-blue);}

a .icon {color: var(--a11y-blue);}

a .icon-bg {background-color: var(--a11y-blue);}

a .icon-br {border-color: var(--a11y-blue);}

input[type="submit"], input[type="reset"], input[type="button"] {background-color: var(--a11y-blue);}

.accordion-blue {background-color: var(--a11y-blue);}


/* Current / hover menu item */

.header-menu > li.current-menu-item > a,
.scroll-menu > li.current-menu-item > a,
.header-menu > li.current-page-parent > a,
.scroll-menu > li.current-page-parent > a,
.header-menu > li.current-page-ancestor > a,
.scroll-menu > li.current-page-ancestor > a,
.header-menu > li:hover > a,
.scroll-menu > li:hover > a,
.mobile-nav ul li.current-menu-item > a,
.mobile-nav ul li:hover > a {color: var(--a11y-menu-active);}


/* Yellow menu (Services page template) */

.page-template-page-services .header-menu > li > a,
.page-template-page-services .scroll-menu > li > a,
.page-template-page-services .header-menu > li.current-menu-item > a,
.page-template-page-services .scroll-menu > li.current-menu-item > a,
.page-template-page-services .header-menu > li.current-page-parent > a,
.page-template-page-services .scroll-menu > li.current-page-parent > a,
.page-template-page-services .header-menu > li.current-page-ancestor > a,
.page-template-page-services .scroll-menu > li.current-page-ancestor > a,
.page-template-page-services .header-menu > li:hover > a,
.page-template-page-services .scroll-menu > li:hover > a {
	color: var(--a11y-yellow-text);
	text-shadow: none;
}


/* Top bar */

.top-bar .blog-link {color: var(--a11y-blog-link);}


/* Orange: footer, bottom bar, slider links */

.footer,
.bottom-bar {background-color: var(--a11y-orange);}

.footer a,
.bottom-bar a,
.bottom-bar-menu > li > a {color: var(--a11y-footer-link);}

.slider a {color: var(--a11y-orange);}

.accordion-orange {background-color: var(--a11y-accordion-orange);}


/* Newsletter form */

.ctct-form-wrapper .ctct-form-field {color: var(--a11y-placeholder);}

.ctct-form-wrapper .ctct-form-field input::placeholder {color: var(--a11y-placeholder);}

/* Footer newsletter: a single footer widget uses the full row, not 1/3 */

.footer .footer-widget:only-child {
	display: block;
	width: 100%;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.footer .footer-widget:only-child .ctct-form-field-submit {clear: both;}

/* Cognito embedded forms */

html .cog-cognito .cog-button--primary {
	--button-primary__background-color: var(--a11y-form-button);
	--button-primary__border-color: var(--a11y-form-button);
}





/******************************************************************************
 * * *  HELPERS  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 ******************************************************************************/

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--a11y-blue);
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.skip-link:focus {
	top: 0;
	color: #ffffff;
	outline: 3px solid #ffffff;
	outline-offset: -6px;
}

#main-content:focus {outline: none;}

/* Hidden sticky menu must not take keyboard focus before it slides in */
.scroll-bar:not(.active) {
	visibility: hidden;
	transition: all 750ms ease-in-out, visibility 0s linear 750ms;
}

/* Text links must not rely on color alone */
.locations-cols p a:not(.button) {
	text-decoration: underline;
}