@charset "UTF-8";

/* All clamps 320 - 750 unless noted */

html {
	scroll-padding-top: 2.5em; /* Scroll offset for sticky mobilenav */
}


.anchor>div {
	top: -2.5em;
}

body.admin-bar .anchor>div {
	top: -3.375em;
}




/* TRANSITIONS ------------------------------ */
#mobilenav span, #navContainer ul ul {
	transition: all .3s ease;
}




/* HEADER ------------------------------ */
#wpadminbar {
	position: fixed;
}

body>header {
	background: #FFF;
	display: contents;
}

body>header #brand {
	display: block;
	margin: 0 auto 0 0;
	max-width: 16em;
	padding: 1em;
}

body>header #brand img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

body>header::before {
	content: '';
	opacity: 0;
	background-color: #000;
	display: block;
	height: 100vh;
	left: 100vw;
	position: fixed;
	top: 0;
	transition: left 0s ease .2s, opacity .2s ease;
	width: 100vw;
	z-index: 4;
}

body.slideNav>header:before {
	left: 0;
	opacity: .5;
	transition: left 0s ease 0s, opacity .2s ease;
}

body>header .wrap {
	display: contents;
}

#navContainer {
	background-color: #333;
	bottom: 0;
	left: 100%;
	max-height: 100vh;
	overflow: auto;
	position: fixed;
	top: 0;
	transition: left 200ms ease;
	width: 75%;
	z-index: 5;
	-webkit-overflow-scrolling: touch;
}

.admin-bar #navContainer {
	top: 46px;
}

body.slideNav {
	overflow: hidden;
}

.slideNav #navContainer {
	left: 25%;
}

#navContainer nav {
	display: block;
}

#navContainer ul {
	display: block;
	margin: 0;
	padding-left: 0;
	width: 100%;
}

#navContainer li {
	display: block;
	position: relative;
	width: 100%;
}

#navContainer :where(a, button.toggleNav) {
	color: #CCC;
	display: block;
	padding: .875em 1em;
	width: 100%;
}

#navContainer button.toggleNav {
	background: transparent;
	border: unset;
	border-bottom: 1px solid rgba(255,255,255,.125);
	border-radius: 0;
	text-align: left;
}

#navContainer button.toggleNav::before {
	aspect-ratio: 1;
	background: #FFF;
	content: '';
	display: inline-block;
	height: .8125em;
	margin: 0 .375em 0 0;
	mask: url('./images/icons/close.svg') no-repeat center / contain;
	position: relative;
	top: .0625em;
}

#navContainer li.open {
	background-color: var(--ws-orange);
}

#navContainer li.open a {
	color: #FFF;
}

#navContainer #mainnav>ul>li {
	border-bottom: 1px solid rgba(255,255,255,.125);
}

#navContainer #mainnav>ul>li>button {
	aspect-ratio: 1;
	background: transparent;
	opacity: .75;
	display: block;
	position: absolute;
	right: 0.1875rem;
	top: .375em;
	width: 2.8125em;
}

#navContainer #mainnav>ul>li.open>button {
	opacity: 1
}

#navContainer #mainnav>ul>li>button::after,
#navContainer #mainnav>ul>li>button::before {
	background-color: #fff;
	content: '';
	display: block;
	height: 0.125rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform-origin: center center;
	transition: transform .2s ease;
	width: 40%;
}

#navContainer #mainnav>ul>li>button::before {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform .2s ease;
}

#navContainer #mainnav>ul>li.expand {
	background: rgba(255,255,255,.1);
}

#navContainer #mainnav>ul>li>button::after,
#navContainer #mainnav>ul>li.expand>button::before {
	transform: translate(-50%, -50%) rotate(0deg);
}


#navContainer ul div {
  display: grid;
	grid-template-rows: 0fr;
  transition: var(--ws-transition);
}

#navContainer ul .expand div {
	grid-template-rows: 1fr;
}


#navContainer ul ul {
	font-size: .8em;
	overflow: hidden;
}

#navContainer ul ul a {
	padding: 0.5em 1em 0.5em 2em;
	line-height: 1.5em
}

#navContainer ul ul li.current-menu-item {
	background-color: rgba(255,255,255,.1)
}

#navContainer :is(.current_page_parent, .current_page_item, .current_page_ancestor)>ul {
	height: auto;
}

#navContainer ul ul ul a {
	padding: 0.5em 1em 0.5em 2.5em;
}




/* MOBILENAV ------------------------- */
#mobilenav {
	align-items: center;
	background-color: var(--ws-orange);
	display: flex;
	justify-content: center;
	position: sticky;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 3;
}

body.admin-bar #mobilenav {
	top: 46px
}

#mobilenav ul {
  display: flex;
  flex: 1 0 66.67%;
  justify-content: space-between;
  margin: 0;
  text-align: center;
}

#mobilenav ul>li {
  flex: 1 0 auto;
}

#mobilenav ul>li:nth-child(n+3) {
		display: none;
}

#mobilenav a {
	align-self: auto;
	color: #FFF;
	cursor: pointer;
	flex: 1 1 auto;
	font-weight: 500;
	line-height: 2.5em;
	order: 0;
}

#mobilenav :is(a, button) {
	font-size: .875em;
}

#mobilenav *+* {
	border-left: 1px solid #FFF;
}

#mobilenav button {
	align-items: center;
	background: transparent;
  border: 0;
	color: #FFF !important;
	display: flex;
	justify-content: center;
	padding-inline: clamp(1em, .6279em + 1.86vw, 1.5em);
}

#mobilenav button::before {
	aspect-ratio: 1;
	background: #FFF;
	content: '';
	height: .875em;
	margin: 0 .375em 0 0;
	mask: url('./images/icons/bars.svg') no-repeat center / contain;
}



/* search */
.search-link {
	height: 3.5em;
	position: absolute;
	right: .5em;
	top: 1.25em;
	width: 2em;
}

.admin-bar .search-link {
	top: 4.5em;
}

#search {
	background: #FFF;
	padding: 1rem;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: translateY(-100%);
	transition: all .4s ease;
	width: 100%;
	z-index: 5;
}

body.admin-bar #search {
	top: 46px;
}

.search-active #search {
	opacity: 1;
	pointer-events: initial;
	transform: translateY(0);
}

#search input {
	padding: .5rem 0.875rem;
}

#search button {
	padding: .875rem 1.5rem;
}




/* TYPOGRAPHY  ------------------------------ */


/* Columms */
.twoCol, .threeCol, .resCol {
	columns: auto;
}




/* MAIN ------------------------------ */

#content {
	padding: 2em 0 3em;
}

#sidenav {
	margin-bottom: 5.5em;
}

#content.fullWidth {
	padding: 2em 0 5.5em;
}




/* FAMILY BAR */
#nkr-familybar {
        padding:1em .5em;
}
#nkr-familybar nav ul {
        text-align: center;
}
#nkr-familybar nav > ul > li > a {
  margin-inline: auto;
}
#nkr-familybar nav ul ul {
        padding-right: 1.875rem;
}
#nkr-familybar nav > ul > li + li {
        margin-top: 1rem;
}
/* /family bar */




/* FOOTER ------------------------------ */

body>footer .wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	text-align: center;
}

body>footer .wrap nav {
	display: block;
}

body>footer .social-links {
	margin-bottom: 1em;
}

body>footer nav li:first-child::before {
	display: none;
}

body>footer a:is(:hover,:focus-visible) {
	color: #FFF;
}

#web-solutions {
	order: 1;
}





/* CALL-TO-ACTION --------------------------------- /
* - All pages
*/

.call-to-action {
	text-align: center;
}

.call-to-action img {
	margin-bottom: 1em;
}

.call-to-action .button {
	display: table;
	margin-inline: auto;
}

.call-to-action .button + .button {
	margin-top: 1em;
}




/* TEXT PHOTO RIBBON --------------------------------- /
* Homepage Hero ribbon, Homepage Featured Blog Posts ribbon, Blog News page
*/

.text-photo .textbox {
	padding-block: 2.5em;
}

/* Re-add this when "count-up" widget re-added: */
/*
.text-photo.hero .textbox {
	padding-block: 2.5em 5em;
}
*/

.text-photo.last-ribbon .textbox {
	padding-block: 2.5em 5em;
}

.text-photo img {
	aspect-ratio: 700 / 400;
}

.text-photo.blog-ribbon img {
	aspect-ratio: 700 / 522;
}

.text-photo.hero .wp-block-buttons {
	margin-bottom: 0;
}


/* Count-up Link in homepage hero ribbon */
a.count-up-link {
  font-size: clamp(.8125em, .673em + .7vw, 1em);
	left: 50%;
  max-width: min(calc(100% - 3em), 32.5em);
	transform: translate(-50%,-50%);
}

a.count-up-link span.number {
  font-size: clamp(2em, .5116em + 7.44vw, 4em);
}



/* MAP RIBBON --------------------------------- /
* - Homepage
*/

.map-ribbon .textbox {
	margin-bottom: 2.5em;
}




/* ICONS RIBBON --------------------------------- /
* - Homepage
*/

.icons-ribbon ul.ws-flex {
	--ws-column-count: 3;
}



/* MEDIA QUERIES --------------------------------- */

/* 500px */
@media (max-width: 31.25rem) {

	figure.wp-block-pullquote,
	.wp-block-quote {
		float: none;
		margin: 1.5em 0;
		max-width: 100%;
		width: 100%;
	}

	.icons-ribbon ul.ws-flex {
		--ws-column-count: 2;
	}

	#content .alignright, #content .align-right {float: none; width: 100%; margin: 1rem auto; max-width: 100%; text-align: left;}
	#content .profile .alignright {margin-block: 1rem 2rem;}
  	.alignright figcaption, .alignleft figcaption {text-align: center;}


}



/* 400px */
@media (max-width: 25em) {
	body>footer nav li {
		display: block;
		padding: .25em;
	}
	body>footer nav li::before {
		display: none;
	}
}




/* ----------~~~~~~~~~ STYLE-M.CSS ~~~~~~~~~---------- */