/*
Theme Name:		Accessibility Consulting 2023
Author:			CMS Web Solutions
Author URI:		https://cmswebsolutions.com
Version: 1.01
*/

/* montserrat-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
		url('fonts/montserrat-v25-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
		url('fonts/montserrat-v25-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root {
	--main-dark: #000000;
	--main-light: #FFFFFF;
	--accent-aqua: #96FCFD;
	--accent-blue: #0079EB;
	--accent-gray: #F2F2F2;
	--accent-green: #96D300;
	--accent-purple: #34135F;
}

html, body {
	height: 100%;
}

body {
	position: relative;
	margin: 0 auto;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: var(--main-dark);
	background-color: var(--main-light);
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: 1.3;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}
/* 
body.opennav {
	position:fixed;
} */

@media (prefers-reduced-motion: reduce) {
	* {
		-webkit-animation-duration: 0.01ms !important;
		        animation-duration: 0.01ms !important;
		-webkit-animation-iteration-count: 1 !important;
		        animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

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

.has-background {
	padding: 1em;
}

.home .has-background {
	font-size: 1.2rem;
}

.has-black-color {
	color: var(--main-dark);
}

.has-black-background-color {
	background-color: var(--main-dark);
}

.has-white-color {
	color: var(--main-light);
}

.has-white-background-color {
	background-color: var(--main-light);
}

.has-aqua-color {
	color: var(--accent-aqua);
}

.has-aqua-background-color {
	background-color: var(--accent-aqua);
}

.has-blue-color {
	color: var(--accent-blue);
}

.has-aqua-background-color {
	background-color: var(--accent-blue);
}

.has-gray-color {
	color: var(--accent-gray);
}

.has-gray-background-color {
	background-color: var(--accent-gray);
}

.has-green-color {
	color: var(--accent-green);
}

.has-green-background-color {
	background-color: var(--accent-green);
}

.has-purple-color {
	color: var(--accent-purple);
}

.has-purple-background-color {
	background-color: var(--accent-purple);
}

.content_container {
	flex: 1 0 auto;
}

header, main, footer, iframe, embed, figcaption, figure, section, summary {
	display: block;
	position: relative;
	margin: 0 auto;
}

figure {
	display: table;
}

figcaption {
    display: table-caption;
	caption-side: bottom;
}

main {
	padding-bottom: 5%;
}

.inner,
.inner_block {
	display: block;
	margin: 0 auto;
	padding: 0 1em;
	max-width: 1020px;
	position: relative;
	z-index: 1;
}
/* 
header .inner {
	max-width: 1366px;
}

header .inner {
	padding: 0 7.5%;
} */


h1 {
	margin: 1.5em 0 .75em;
	color: var(--main-dark);
	font-size: 2.5rem;
	font-weight: 700;
}

h2 {
	margin: 1.5em 0 1em;
	font-size: 1.333rem;
	font-weight: 700;
}

h2.category {
	margin: .75em 0 0;
	font-size: 1rem;
	font-weight: 700;
}

h2.category span {
	font-weight: 700;
}

h2 br {
	display: block;
}

h1 + h2,
h2 + h3 {
	margin: .25em 0 .75em;
}

h2 a {
	-webkit-text-decoration-color: #aaa;
	text-decoration-color: #aaa;
}

h2 a:hover,
h2 a:focus {
	color: var(--main-dark);
	-webkit-text-decoration-color: #222;
	text-decoration-color: #222;
}

h3 {
	margin: 1.5em 0 .75em;
	color: var(--main-dark);
	font-size: 1.222rem;
	font-weight: 700;
}

h4 {
	margin: 1.5em 0 .75em;
	color: var(--main-dark);
	font-weight: 700;
}

li, p + p, p * {
	margin-top: 0;
}

hr {
	height: 1.5em;
	border: 0;
	margin: 2em 0;
}

img {
	max-width: 100%;
	height: auto;
	border-style: none;
}

img.is-style-rounded {
	border-radius: 50%;
}

a {
	color: var(--main-dark);
	text-decoration: none;
	border-bottom: 2px solid var(--main-dark);
}

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	        text-decoration-skip-ink: auto;
}

a[href^="tel:"] {
	text-decoration: none;
}

a:hover,
a:focus {
	border-bottom: 2px solid var(--accent-blue);
}

/* Remove the default :focus outline */
*:focus {
	outline: none;
}
   
/* Show a custom outline on :focus-visible */
*:focus-visible {
	outline: 2px solid var(--accent-blue);
	outline-offset: 4px;
}

nav a:focus-visible,
footer a:focus-visible {
	outline: 2px solid var(--accent-aqua);
}

a:active {
	transition: color 2s;
	color: var(--main-dark);
}

a img {
	border: none;
	outline: none;
}

iframe,embed {
	max-width: 100%;
}

.sr-only {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
.clearfix {
	overflow: hidden;
	content: '';
	visibility: hidden;
	display: block;
	height: 1px;
	width: 1px;
	clear: both;
}

a.skip {
	position: absolute;
	z-index: 5;
	top: 0;
	left: -1000em;
	color: var(--main-light);
	background-color: var(--main-dark);
	text-decoration: none;
	border-radius: 0 0 3px 3px;
}

a.skip:focus,
a.skip:hover {
	left: 1em;
	top: 0;
	padding: .5em 1em;
}

input,
textarea,
select {
	margin: 0;
	font: inherit;
}

input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input:focus {
	outline: 2px solid var(--main-dark);
	box-shadow: 1px 1px 8px 1px var(--main-dark);
}

button,
.button,
.wp-block-button__link,
.wp-block-button__link:visited,
.newer a,
.older a,
a[rel~=category] {
	display: block;
	position: relative;
	left: 0;
	padding: .5em 2em;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	color: var(--main-light);
	background-color: var(--main-dark);
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	flex: 0 0 auto;
}

@media (prefers-color-scheme: dark) {
	button,
	.button,
	.wp-block-button__link,
	.wp-block-button__link:visited,
	.newer a,
	.older a,
	a[rel~=category] {
		border: 1px solid currentColor;
	}
}

button:hover,
button:focus,
.button:hover,
.button:focus,
.newer a:hover,
.newer a:focus,
.older a:hover,
.older a:focus,
.wp-block-button__link:active,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	color: var(--main-light);
	background-color: var(--accent-blue);
	border-bottom: 1px solid transparent;
}

@media (prefers-color-scheme: dark) {
	button:hover,
	button:focus,
	.button:hover,
	.button:focus,
	.newer a:hover,
	.newer a:focus,
	.older a:hover,
	.older a:focus,
	.wp-block-button__link:active,
	.wp-block-button__link:hover,
	.wp-block-button__link:focus {
		border-bottom: 1px solid currentColor;
	}
}

form label {
	display: block;
}

form button {
	margin: 0;
}

header {
	color: var(--main-dark);
	text-align: center;
}

.logo_link,
.logo_link:hover,
.logo_link:focus {
	display: block;
	border-bottom: none;
}

.logo {
	max-width: 300px;
	margin: 0 auto;
	display: inline-block;
}

nav {
	margin: 0;
	padding: .5em 0;
	font-weight: 400;
}

nav.main_nav {
	color: var(--main-light);
	background-color: var(--accent-purple);
}

nav ul {
	width: 100%;
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: none;
}

nav li {
	list-style: none;
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 .25em;
}

nav a {
	color: var(--main-light);
	display: block;
	padding: .5em;
	text-align: center;
	text-decoration: none;
	border-bottom: 4px solid transparent;
}

nav a:hover,
nav a:focus,
nav [aria-current="page"],
.home nav [aria-current="page"]:hover,
.home nav [aria-current="page"]:focus {
	color: var(--main-light);
	border-bottom: 4px solid var(--accent-aqua);
}

.home nav [aria-current="page"] {
	color: var(--main-light);
	border-bottom: 4px solid transparent;
}

nav img {
	vertical-align: middle;
	margin-right: .2em;
}

nav .desktop {
	display: none;
}

.menu-toggle[aria-expanded=true] + ul {
	display: block;
}

nav .open + ul ul {
	display: block;
	font-size: 1rem;
}

nav .open + ul li {
	margin: 0;
}

nav .open + ul li a {
	padding: .75em 1em;
	text-align: left;
}

button.menu-toggle {
	position: relative;
	display: inline-block;
	width: 100%;
	border: none;
	border-radius: 0;
	color: currentColor;
	background: transparent;
  	cursor: pointer;
	font-size: 1rem;
	padding: .5em;
	text-align: center;
}

button.menu-toggle[aria-expanded=true] span {
	display: inline;
	vertical-align: middle;
}

button.menu-toggle:focus {
	outline: thin dotted;
	outline-offset: -2px;
}

.menu-toggle span {
	display: block;
}

.post_container img {
	max-width: 300px;
}

.post-navigation,
.post-categories {
	padding-left: 0;
	display: inline-block;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1em;
	list-style: none;
}


.hero_img {
	position: relative;
	margin-top: 10%;
	margin-bottom: -5%;
	float: right;
	max-height: 200px;
	width: auto;
}

footer {
	width: 100%;
	padding: 1em 0 0;
	clear: both;
	flex-shrink: 0;
}

footer hr {
	display: block;
	margin: 1em auto;
	max-width: 1020px;
	border-top: 6px solid var(--main-light);
}

.footer_main {
	position: relative;
	padding: 2em 0;
	color: var(--main-light);
	background-color: var(--accent-purple);
}

.footer_secondary {
	padding: .25em 0;
	color: var(--main-light);
	background-color: var(--main-dark);
}

footer h1,
footer h2,
footer h3,
footer a {
	color: var(--main-light);
}

footer h1 {
	font-size: 1.333rem;
}

footer h2 {
	margin: 0 0 .75em;
}

footer a {
	border-bottom: 2px solid var(--main-light);
}

footer a:hover,
footer a:focus {
	color: var(--main-light);
	border-bottom: 2px solid var(--accent-aqua);
}

.footer_links {
	display: inline-block;
	padding-left: 0;
}

.footer_links li {
	margin: 0 .5em;
	display: inline-block;
	list-style: none;
}

footer a.button {
	color: var(--main-dark);
	background-color: var(--main-light);
}

@media (prefers-color-scheme: dark) {
	footer a.button {
		border: 1px solid currentColor;
	}
}

/* Gutenberg styling */

.wp-block-image {
	padding: 0 1em;
}

.wp-block-group__inner-container .wp-block-image {
	padding: 0;
}

.wp-block-group__inner-container h2::after {
	content: '';
	display: flex;
	margin-top: .25em;
	max-width: 70px;
	height: 4px;
	background-color: var(--accent-blue);
}

.indent {
	margin-left: 60px;
}

.wp-block-media-text {
	margin-bottom: 2em;
}

.wp-block-media-text h2,
.wp-block-media-text h3 {
	margin: 0 0 .75em;
}

.wp-block-columns {
	margin: 2em 0;
	gap: 4em;
}

.wp-block-column h2 {
	margin: 0 0 .5em;
}

@media screen and (min-width: 37.5em) {
    .alignleft,img.alignleft {
        float: left;
        margin: 0 1.5em 1.5em 0;
    }
    
    .alignright,img.alignright {
        float: right;
        margin: 0 0 1.5em 1.5em;
    }
    
    .aligncenter,img.aligncenter {
        display: block;
        clear: both;
        margin: 1.5em auto;
	}
}

@media screen and (min-width: 48em) {
	.hero_img {
		display: none;
	}
}

@media screen and (min-width: 56.25em) {
	
	header {
		text-align: left;
	}

	.logo {
		max-width: 420px;
	}

	nav .menu-toggle,
	nav .mobile {
		display: none;
	}

	nav .desktop {
		display: flex;
	}

	nav ul {
		display: flex;
		justify-content: flex-start;
		gap: 2em;
	}

	nav li {
		margin: 0;
		padding: 0;
		width: auto;
	}

	nav li a {
		display: inline;
		display: flex;
		align-items: center;
	}

	nav > li:first-of-type {
		margin-left: 0;
	}

	nav > li:last-of-type {
		margin-right: 0;
	}

	main h1 br {
		display: none;
	}

	.post_container {
		display: flex;
		justify-content: space-between;
		gap: 2em;
	}
	
	.post_container h2 {
		margin-top: 0;
	}

	.footer_main {
		padding: 2em 0 4em;
	}

	.footer_main::before {
		content: url(img/footer_blue.png);
		display: block;
		position: absolute;
		bottom: -4px;
	}

	.footer_main::after {
		content: url(img/footer_fish.png);
		display: block;
		position: absolute;
		right: 0;
		bottom: -4px;
	}

	footer .inner {
		display: inline-block;
		display: flex;
		justify-content: space-between;
		gap: 2em;
	}

	footer .column {
		padding-bottom: 4em;
		flex-basis: 40%;
	}

	.footer_links li {
		margin: 0 0 0 1em;
	}
}