/*
this file contains site-specific styles,
that are not part of the reusable css found in libraries
*/

/* ---------------------------------------------------------------------------
BEGIN settings
----------------------------------------------------------------------------*/

body {
	--hdg-font-family:Vonique, sans-serif;
	--body-font-family:NotoSans, sans-serif;
	--navbar-font-family:Baumans, NotoSans, sans-serif;
	--btn-font-family:Baumans, NotoSans, sans-serif;
	--single-post-subhdg-font-family:Baumans, NotoSans, sans-serif;
	
	--glbl-font-size-flyout-trigger: 3rem;
	--glbl-section-padding: 4rem;
	--glbl-toggle-slider-height:16px;
	
	--hdr-height-blended: 6rem;
	--hdr-height: 5rem;
	
	--site-screenshot-height: 125vh;
	
	--btn-border-radius: 32px;
	--btn-padding: 0.75rem 1rem;
	
	--wp-admin-bar-height: 46px;
	
	--nav-flyout-width: min(70vw,440px);
	
	--light-dark-toggle-slider-height:20px;
	
	--tag-border-radius:8px;
	
	--author-profile-image-height:32px;
	--author-profile-image-width:32px;
	
	--single-line-form-padding:0.5rem;
	--single-line-form-btn-width:5rem;
}

/* ---------------------------------------------------------------------------
END settings
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN global component styles
----------------------------------------------------------------------------*/

/* set fonts */
h1, h2, h3, h4, h5, h6 {
	font-family:var(--hdg-font-family);
	margin:0rem auto; /* no vertical margin on headings */
/* for font-family:Limelight this looks better */
/*
	font-weight:400;
	line-height:1;
*/
/* adjustments for font-family:Vonique */
	line-height:1.25;
	font-weight:600;
}
/* set font sizes */
h1 {
	font-size:2.5rem;
}
h2 {
	font-size:2.25rem;
}
h3 {
	font-size:1.5rem;
}
h4 {
	font-size:1.35rem;
}
h5 {
	font-size:1.25rem;
}
h6 {
	font-size:1.1rem;
}
p {
	font-size:1rem;
	line-height:1.4; /* adjusted from feedback */
}
body {
	font-family:var(--body-font-family);
}
input[type=text], input[type=submit], button, .btn {
	font-family:var(--btn-font-family);
	font-size:1rem;
	font-weight:600;
}

/* allow non-anchor elements to mirror anchor styles */
.link {
	display:inline-block;
	transition:all var(--glbl-transition-time,0.5s) ease;
	color:var(--clr-link-font);
	transition:color var(--glbl-transition-time,0.5s) ease;
}
.link:hover, .link:focus, .link:active {
	color:var(--clr-link-font-hover);
}

/* images should fit in their containers by default */
img {
	width:100%;
	height:100%;
	object-fit:contain;
}

/* svg icons should follow the styling of the surrounding text */
.svg-icon {
	display:inline-block;
	width:auto;
	height:1rem;
	width:1rem;
	margin-bottom:-2px;
	background-color:var(--clr-body-font);
}
a:hover .svg-icon,
a:focus .svg-icon,
a:active .svg-icon {
	background-color:var(--clr-link-font-hover);
}

/*
apply needed styles from wp-block-library
which we aren't loading for performance reasons
*/
.screen-reader-text {
	border: 0px;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	width: 1px;
	overflow-wrap: normal !important;
}

/*
NOTE: we can't change the svg fill color dynamically unless we set this as a mask
but that means every svg icon we use needs its url hard-coded in the css here :/
*/
.svg-icon-canadian-maple-leaf {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/canadian-maple-leaf.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/canadian-maple-leaf.svg') no-repeat center;
}
.svg-icon-rss {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/solid/rss.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/solid/rss.svg') no-repeat center;
}
.svg-icon-atom {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/solid/atom.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/solid/atom.svg') no-repeat center;
}
.svg-icon-envelope {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/solid/envelope.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/solid/envelope.svg') no-repeat center;
}
.svg-icon-indie-hackers {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/images/third-party-icons-and-logos/indie-hackers-light-2026.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/images/third-party-icons-and-logos/indie-hackers-light-2026.svg') no-repeat center;
	--webkit-mask-mode:luminance;
	mask-mode:luminance;
	--webkit-mask-size:contain;
	mask-size:contain;
}
.svg-icon-codeberg {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/images/third-party-icons-and-logos/codeberg-favicon.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/images/third-party-icons-and-logos/codeberg-favicon.svg') no-repeat center;
	--webkit-mask-mode:luminance;
	mask-mode:luminance;
	--webkit-mask-size:contain;
	mask-size:contain;
}
.svg-icon-reddit {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/reddit.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/reddit.svg') no-repeat center;
}
.svg-icon-product-hunt {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/product-hunt.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/product-hunt.svg') no-repeat center;
}
.svg-icon-facebook {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/facebook.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/facebook.svg') no-repeat center;
}
.svg-icon-instagram {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/instagram.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/instagram.svg') no-repeat center;
}
.svg-icon-behance {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/behance.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/behance.svg') no-repeat center;
}
.svg-icon-mastodon {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/mastodon.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/mastodon.svg') no-repeat center;
}
.svg-icon-bluesky {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/bluesky.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/bluesky.svg') no-repeat center;
}
.svg-icon-youtube {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/youtube.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/youtube.svg') no-repeat center;
}
.svg-icon-tiktok {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/tiktok.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/tiktok.svg') no-repeat center;
}
.svg-icon-linkedin {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/linkedin.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/linkedin.svg') no-repeat center;
}
.svg-icon-ycombinator,
.svg-icon-hacker-news {
	-webkit-mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/square-hacker-news.svg') no-repeat center;
	mask:url('/wp-content/themes/peaksite.dev/assets/fonts/fontawesome-free-6.7.2-web/svgs/brands/square-hacker-news.svg') no-repeat center;
}


section ~ section {
	padding-top:var(--glbl-section-padding);
}

button,
.btn,
.btn.cta-btn,
input[type=submit] {
	/* safari on iOS doesn't like to render the correct content width without this */
	min-width:120px;
}

.btn-list {
	display:flex;
	align-items:center;
	justify-content:flex-start;
	flex-direction:row;
	gap:calc(var(--glbl-padding) / 2);
	width:100%;
}

button.alt-btn, .btn.alt-btn {
	background-color:var(--clr-btn-alt-bg);
	color:var(--clr-btn-alt-font);
	border-color:var(--clr-btn-alt-border);
}
button.alt-btn:hover,
button.alt-btn:focus,
button.alt-btn:active,
.btn.alt-btn:hover,
.btn.alt-btn:focus,
.btn.alt-btn:active {
	background-color:var(--clr-btn-alt-hover-bg);
	color:var(--clr-btn-alt-hover-font);
	border-color:var(--clr-btn-alt-hover-border);
}

button.cta-btn,
.btn.cta-btn {
	position:relative;
/*	font-family:var(--hdg-font-family); */
	font-weight:600;
	text-align:center;
	
/*	box-shadow:-0.5rem 0.5rem 0.5rem var(--clr-dropdown-shadow); */
	color:var(--clr-cta-btn-font);
	background:var(--clr-cta-btn-bg);
	border:none;
	
	/* mobile only */
/*	width:100%; */
}
button.cta-btn:hover,
button.cta-btn:focus,
button.cta-btn:active,
.btn.cta-btn:hover,
.btn.cta-btn:focus,
.btn.cta-btn:active {
	box-shadow:0rem 0rem 0.5rem var(--clr-dropdown-shadow);
}

.cta-btn .cta-btn-text {
	position:relative;
	z-index:0;
}

button.cta-btn::before,
.btn.cta-btn::before {
	content:' ';
	opacity:0;
	transition:all var(--glbl-transition-time,0.5s) ease;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	pointer-events:none;
	background:var(--clr-cta-btn-hover-bg);
	border-radius:var(--btn-border-radius);
/*	z-index:-1; */
}

button.cta-btn:hover,
button.cta-btn:focus,
button.cta-btn:active,
.btn.cta-btn:hover,
.btn.cta-btn:focus,
.btn.cta-btn:active {
	color:var(--clr-cta-btn-hover-font);
}

button.cta-btn:hover::before,
button.cta-btn:focus::before,
button.cta-btn:active::before,
.btn.cta-btn:hover::before,
.btn.cta-btn:focus::before,
.btn.cta-btn:active::before {
	opacity:1;
}

.toggle-slider > input[type=checkbox] ~ .toggle-label-unchecked,
.toggle-slider > input[type=checkbox] ~ .toggle-label-checked {
	margin-left:8px;
}
.toggle-slider > input[type=checkbox] ~ .toggle-label-unchecked {
	display:inline-block;
}
.toggle-slider > input[type=checkbox] ~ .toggle-label-checked {
	display:none;
}
.toggle-slider > input[type=checkbox]:checked ~ .toggle-label-unchecked {
	display:none;
}
.toggle-slider > input[type=checkbox]:checked ~ .toggle-label-checked {
	display:inline-block;
}
.toggle-slider > label.toggle-label {
	margin-right:calc(var(--glbl-padding) / 4);
	border:1px solid var(--clr-toggle-label-switch-unchecked);
	transition:all var(--glbl-transition-time) ease;
	
	height:calc(var(--glbl-toggle-slider-height) - 3px);
	overflow:visible;
}
.toggle-slider > label.toggle-label::before {
	width:calc(var(--glbl-toggle-slider-height) + 1.5px);
	height:calc(var(--glbl-toggle-slider-height) + 1.5px);
	border-radius:calc((var(--glbl-toggle-slider-height) + 1.5px) / 2);
	top:calc(50% - 0.75px);
	left:-1.5px;
	transform:translateY(-50%);
}
.toggle-slider > input[type=checkbox]:checked ~ label.toggle-label::before {
	left:calc(100% + 1.5px);
	transform:translateY(-50%) translateX(-100%);
}
.toggle-slider > input[type=checkbox]:focus ~ label.toggle-label,
.toggle-slider > input[type=checkbox]:active ~ label.toggle-label,
form .toggle-slider:has(:hover) > label.toggle-label {
	/*
	I don't think !important should be necessary here but this doesn't seem to work without it!
	:/
	*/
	border:1px solid var(--clr-toggle-label-switch-checked) !important;
	box-shadow:0rem 0rem 0.15rem var(--clr-hdr-shadow);
}

/* form adjustments */
/* reserve space for hcaptcha on load to avoid post-load content shifts */
form .hcaptcha-cell .h-captcha {
	min-height:80px;
}
form.searchform {
	margin-top:calc(var(--glbl-padding) / 2);
}
form.searchform > div {
	display:flex;
	align-items:center;
	justify-content:space-between;
}
form.searchform > div input[type=text] {
	height:calc(var(--glbl-padding) * 2);
	margin-right:var(--glbl-padding);
}

/* header and navbar styling, mobile-first */
header.topbar {
	position:fixed;
	width:100%;
	overflow:visible;
	backdrop-filter:blur(4px);
	font-family:var(--navbar-font-family);
}
header .skip-to-content-link {
	position:absolute;
	top:0px;
	left:0px;
	width:0px;
	height:0px;
	overflow:hidden;
/*	opacity:0; */
	pointer-events:none;
}
header .skip-to-content-link:focus,
header .skip-to-content-link:active {
	overflow:unset;
	height:auto;
	width:auto;
	opacity:1;
	pointer-events:all;
}
/* navbar scroll highlight effect (currently disabled) */
/*
header nav ul.menu a {
	transition:all var(--glbl-transition-time) ease;
}
header nav ul.menu a.scroll-highlighted {
	text-shadow:0px 0px 2px var(--clr-btn-hover-bg);
}
*/
.grid > .cell.hdr-icon-cell {
	display:block;
	height:var(--hdr-height);
}
.hdr-icon {
	display:block;
	height:calc(var(--hdr-height) - 1rem);
	width:auto;
	margin-right:var(--glbl-padding);
	transition:all var(--glbl-transition-time) ease;
}
.hdr-icon-link {
	height:var(--hdr-height);
	display:flex;
	align-items:center;
	justify-content:flex-start;
	text-decoration:none;
	font-weight:600;
	transition:all var(--glbl-transition-time) ease;
	font-family:var(--navbar-font-family);
}
.hdr-icon-link:hover,
.hdr-icon-link:focus,
.hdr-icon-link:active {
	text-shadow:0px 0px 2px var(--clr-btn-hover-bg);
}
.hdr-icon-link:hover img.hdr-icon,
.hdr-icon-link:focus img.hdr-icon,
.hdr-icon-link:active img.hdr-icon {
	filter:drop-shadow(0px 1px 0.25rem var(--clr-btn-hover-bg));
}
header.topbar .hdr-desktop-nav-cell {
	height:var(--hdr-height);
	align-items:center;
	justify-content:center;
	/*
	display:flex will be set on desktop, but is not set here
	because we don't want to override the display:none from the .hidden class on mobile
	*/
}
.hdr-desktop-nav-cell .menu-primary-nav-container {
	height:100%;
}
.hdr-desktop-nav-cell ul.menu {
	position:relative;
	list-style-type:none;
	padding:0px;
	display:flex;
	align-items:stretch;
	justify-content:center;
	flex-direction:row;
	flex-wrap:wrap;
	width:100%;
}
.hdr-desktop-nav-cell ul.menu > li {
	max-width:110px; /* needed to prevent wrap in fr translation at width=1024px */
	max-height:var(--hdr-height);
}
.hdr-desktop-nav-cell ul.menu li > a {
	padding:var(--glbl-padding);
	text-decoration:none;
	width:100%;
	height:100%;
	align-content:center;
	transition:all var(--glbl-transition-time) ease;
	text-align:center;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.hdr-desktop-nav-cell ul.menu li > a:hover,
.hdr-desktop-nav-cell ul.menu li > a:focus,
.hdr-desktop-nav-cell ul.menu li > a:active {
	background-color:var(--clr-btn-bg);
	color:var(--clr-btn-font);
}
header nav ul.menu li.menu-item.current_page_item a,
header nav ul.menu li.menu-item.current_page_parent a,
header nav ul.menu li.menu-item a {
	position:relative;
}
body:not(.is-front-page) header nav ul.menu li.menu-item.current_page_item a::before,
body:not(.is-front-page) header nav ul.menu li.menu-item.current_page_parent a::before,
header nav ul.menu li.menu-item a::before {
	content:' ';
	display:block;
	position:absolute;
	height:0.25rem;
	width:calc(100% - (var(--glbl-padding) * 2));
	left:50%;
	transform:translateX(-50%);
	background-color:var(--clr-btn-bg);
	bottom:calc(var(--glbl-padding) / 2);
}
header nav ul.menu li.menu-item a::before {
	transition:all 0.5s ease;
	opacity:0;
}
body:not(.is-front-page) header nav ul.menu li.menu-item.current_page_item a::before,
body:not(.is-front-page) header nav ul.menu li.menu-item.current_page_parent a::before,
header nav ul.menu li.menu-item a.scroll-highlighted::before {
	opacity:1;
}
.hdr-desktop-nav-cell ul.menu li.menu-item-has-children {
	position:relative;
}
.hdr-desktop-nav-cell ul.menu li.menu-item-has-children > ul.sub-menu {
	opacity:0;
	pointer-events:none;
	transition:opacity var(--glbl-transition-time) ease;
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	transform:translateY(100%);
	list-style-type:none;
	padding:0px;
/*	border-radius:0rem 0rem var(--btn-border-radius) var(--btn-border-radius); */
}
.hdr-desktop-nav-cell ul.menu li.menu-item-has-children:hover > ul.sub-menu,
.hdr-desktop-nav-cell ul.menu li.menu-item-has-children:has(:focus) > ul.sub-menu,
.hdr-desktop-nav-cell ul.menu li.menu-item-has-children:has(:active) > ul.sub-menu {
	opacity:1;
	pointer-events:all;
}
header.topbar .hdr-desktop-nav-cell ul.menu li.menu-item-has-children > ul.sub-menu {
	background-color:var(--clr-hdr-bg);
	box-shadow:0rem 0.5rem 0.5rem var(--clr-hdr-shadow);
	backdrop-filter:blur(4px);
}
/*
.hdr-desktop-nav-cell ul.menu li.menu-item-has-children > ul.sub-menu > li:last-child a {
	border-radius:0rem 0rem var(--btn-border-radius) var(--btn-border-radius);
}
*/

.grid > .cell.hdr-flyout-trigger-cell {
	height:100%;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	color:var(--clr-link-font,white);
	height:var(--hdr-height);
}
.grid > .cell.hdr-flyout-trigger-cell > *:not(:last-child):not(.hdr-flyout-trigger):not(.lang-switcher-cont-desktop) {
	margin-right:calc(var(--glbl-padding) / 2);
}
.hdr-trigger {
	font-size:var(--glbl-font-size-flyout-trigger);
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all var(--glbl-transition-time,0.5s) ease;
	cursor:pointer;
}
.grid > .cell.hdr-flyout-trigger-cell .hdr-trigger:hover,
.grid > .cell.hdr-flyout-trigger-cell .hdr-trigger:focus,
.grid > .cell.hdr-flyout-trigger-cell .hdr-trigger:active {
	color:var(--clr-btn-hover-bg);
}
.hdr-trigger:not(:last-child){
	margin-right:var(--glbl-padding);
}


.hdr-trigger.hdr-query-trigger > label {
	cursor:pointer;
}
.hdr-query-trigger {
	line-height:0.64;
}

/* adjustments for when the topbar is blended into the page (scrolled to top) */
header.topbar.blended {
	/*
	these styles only apply on desktop, not on mobile
	*/
/*
	background-color:transparent;
*/
	box-shadow:none;
}
header.topbar .fixed-bar-height {
	height:auto; /* mobile only, needed for search reveal/hide effect */
}
header.topbar.blended .grid > .cell.hdr-icon-cell {
	height:var(--hdr-height-blended);
}
header.topbar.blended .hdr-icon {
	height:calc(var(--hdr-height-blended) - 1.5rem);
}
header.topbar.blended .hdr-icon-link {
	height:var(--hdr-height-blended);
}
header.topbar.blended .grid > .cell.hdr-flyout-trigger-cell {
	height:var(--hdr-height-blended);
}
header.topbar.blended .hdr-desktop-nav-cell {
	height:var(--hdr-height-blended);
}
/*
header.topbar.blended nav .nav-flyout-toggle-cont {
	top:var(--hdr-height-blended);
	height:calc(100vh - var(--hdr-height-blended));
}
*/
header.topbar.blended .hdr-desktop-nav-cell ul.menu > li {
	max-height:var(--hdr-height-blended);
}

nav .flyout-content ul.menu,
nav .flyout-content ul.menu ul.sub-menu {
	width:100%;
	gap:0px;
	list-style-type:none;
}
nav .flyout-content ul.menu {
	padding-left:0px;
}
nav .flyout-content ul.menu > li,
nav .flyout-content ul.menu ul.sub-menu > li {
	width:100%;
}
nav .flyout-content ul.menu > li > a,
nav .flyout-content ul.menu ul.sub-menu > li > a {
	width:100%;
	padding:var(--glbl-padding);
	text-align:right;
	transition:all var(--glbl-transition-time,0.5s) ease;
	text-decoration:none;
}
nav .flyout-content ul.menu > li > a:hover,
nav .flyout-content ul.menu > li > a:focus,
nav .flyout-content ul.menu > li > a:active,
nav .flyout-content ul.menu ul.sub-menu > li > a:hover,
nav .flyout-content ul.menu ul.sub-menu > li > a:focus,
nav .flyout-content ul.menu ul.sub-menu > li > a:active {
	color:var(--clr-btn-font);
	background-color:var(--clr-btn-hover-bg);
}
nav .flyout-content .btn {
	display:inline-block;
	text-align:center;
}
nav .nav-flyout-toggle-cont input[type=checkbox].nav-flyout-toggle {
	/*
	NOTE: for accessibility reasons we need this to be focus-able
	so we can't use display:none and must instead fake it
	*/
/*	display:none; */
	opacity:0;
	height:0px;
	width:0px;
	position:absolute;
	z-index:-1;
}
nav .nav-flyout-toggle-cont {
	/*
	NOTE: this is fixed relative to the whole page
	but as it sits within the navbar, which is position:fixed,
	we need position:absolute here for it to work as expected
	*/
	position:absolute;
	top:0px;
	height:100vh;
/*
	top:var(--hdr-height);
	height:calc(100vh - var(--hdr-height));
*/
	right:0px;
	width:var(--nav-flyout-width);
	transform:translateX(100%);
	background-color:var(--clr-body-bg);
	transition:all var(--glbl-transition-time) ease;
	box-shadow:0rem 0.5rem 0.5rem transparent;
	
	/* in case of too many menu items being configured, make the menu still be usable */
	overflow:auto;
}
nav .nav-flyout-toggle-cont:has(input[type=checkbox].nav-flyout-toggle:checked),
nav .nav-flyout-toggle-cont:has(*:not(.nav-flyout-toggle):not(.nav-flyout-toggle-icon):focus) {
	right:0px;
	transform:none;
}
body:has(input[type=checkbox].nav-flyout-toggle:checked)::after {
	content:' ';
	width:100%;
	height:100%;
	display:block;
	position:fixed;
	top:0px;
	left:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:1;
}
body:has(input[type=checkbox].nav-flyout-toggle:checked) nav .nav-flyout-toggle-cont {
	box-shadow:0rem 0.5rem 0.5rem var(--clr-hdr-shadow);
}
.flyout-content {
	position:relative;
}
.flyout-content > .flyout-trigger-label {
	position:absolute;
	top:0px;
	left:0px;
	font-size:var(--glbl-font-size-flyout-trigger);
	cursor:pointer;
	height:var(--hdr-height);
	width:var(--hdr-height);
	display:flex;
	align-items:center;
	justify-content:center;
}
.flyout-content .menu-primary-nav-container {
	padding-top:var(--hdr-height);
}
header.topbar.blended .flyout-content .menu-primary-nav-container {
	padding-top:var(--hdr-height-blended);
}
.flyout-content .light-dark-toggle-parent-cont {
	position:relative;
}
.flyout-content .light-dark-toggle-cont {
	position:absolute;
	top:var(--glbl-padding);
	right:var(--glbl-padding);
}

.hdr-navbar .flyout-trigger-label {
	transition:all var(--glbl-transition-time) ease;
}

.hdr-navbar:has(input[type=checkbox].nav-flyout-toggle:focus) .flyout-trigger-label,
.flyout-trigger-label:hover,
.flyout-trigger-label:focus,
.flyout-trigger-label:active {
	color:var(--clr-link-font-hover);
/*	transform:rotate(-90deg); */
}

.hdr-flyout-trigger-cell .flyout-trigger-label {
	display:flex;
	align-items:center;
	justify-content:center;
}

.flyout-content .btn,
.flyout-content .btn.cta-btn {
	margin:var(--glbl-padding);
	width:calc(100% - (var(--glbl-padding) * 2));
}

.light-dark-toggle-cont {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:calc(var(--light-dark-toggle-slider-height) + 1px);
}
.light-dark-toggle-cont.toggle-slider > label.toggle-label {
	margin-left:calc(var(--glbl-padding) / 8);
	margin-right:calc(var(--glbl-padding) / 8);
	height:calc(var(--light-dark-toggle-slider-height) - 5px);
	width:calc(var(--light-dark-toggle-slider-height) * 2);
	border-radius:calc(var(--light-dark-toggle-slider-height) / 2);
}
.light-dark-toggle-cont.toggle-slider > label.toggle-label::before {
	height:calc(var(--light-dark-toggle-slider-height) + 1px);
	width:calc(var(--light-dark-toggle-slider-height) + 1px);
	border-radius:calc((var(--light-dark-toggle-slider-height) + 1px) / 2);
	top:calc(50% - 1px);
	transform:translateY(-50%);
	left:-1px;
}
.light-dark-toggle-cont.toggle-slider > input[type=checkbox]:checked ~ label.toggle-label::before {
	transform:translateY(-50%) translateX(-100%);
	left:calc(100% + 1px);
}
.light-dark-toggle-cont.toggle-slider > label.toggle-label::after {
	font-family:"Phosphor-Bold";
	content:"\e472"; /* sun icon */
	line-height:1;
	font-size:0.8rem;
	font-weight:900;
	width:calc(var(--light-dark-toggle-slider-height) + 1px);
	height:calc(var(--light-dark-toggle-slider-height) + 1px);
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	left:-1px;
	top:calc(50% - 1px);
	transform:translateY(-50%);
	transition:all var(--glbl-transition-time) ease;
	color:var(--clr-body-bg);
}
.light-dark-toggle-cont.toggle-slider > input[type=checkbox]:checked ~ label.toggle-label::after {
	content:"\e330"; /* crescent moon icon */
	left:calc(100% + 1px);
	transform:translateY(-50%) translateX(-100%);
}

main {
	padding-top:var(--glbl-padding);
}
section {
	padding-top:var(--glbl-section-padding);
	padding-bottom:var(--glbl-section-padding);
}
/*
this makes hash links to a section work as expected
NOTE: we don't need to care about hdr-height-blended here
as once scrolled the header should not be blended
*/
.is-jump-dest {
	padding-top:var(--hdr-height);
	margin-top:calc(0px - var(--hdr-height));
	background-color:transparent;
	position:static; /* avoid overlap issues */
}

.dotlink-cont,
.grid > .cell.dotlink-cont {
	display:flex;
	align-items:center;
	justify-content:center;
}
.grid > .cell.dotlink-cont.hidden {
	display:none;
}
.dotlink-cont .dotlink {
	text-decoration:none;
	transition:all var(--glbl-transition-time) ease;
}
.dotlink-cont .dotlink.scroll-highlighted {
	text-shadow:0px 4px 4px var(--clr-dotlink-scroll-highlight-textshadow);
	font-weight:600;
	font-size:1.2rem;
}
.dotlink-cont .dotlink:not(:last-child),
.dotlink-cont li:not(:last-child) .dotlink {
	margin-right:calc(var(--glbl-padding) / 2);
}
ol.dotlink-cont, ul.dotlink-cont {
	list-style-type:none;
	padding-left:0rem;
}

.dotlink-cont.mobile-scroll-dotlink-cont {
	position:sticky;
	z-index:1;
	top:calc(var(--hdr-height) + var(--glbl-padding));
	margin-top:calc(0rem - (var(--glbl-padding) * 3));
	margin-left:var(--glbl-padding);
	margin-right:var(--glbl-padding);
	background-color:var(--clr-dotlink-mobile-scroll-bg);
	backdrop-filter:blur(8px);
	padding:calc(var(--glbl-padding) / 4) calc(var(--glbl-padding) / 2);
	border-radius:var(--btn-border-radius);
}

.outro-links-cont {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:var(--glbl-padding);
	flex-direction:column;
}
.outro-links-cont a,
.outro-links-cont a.btn.cta-btn {
	width:auto;
}

/* used both on the global footer and on the discuss this post on... section on single blog posts */
.social-media-links-cont {
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:calc(var(--glbl-padding) / 2);
	list-style-type:none;
	padding-left:0rem;
	flex-wrap:wrap;
}
.social-media-links-cont .permalink-cont {
	cursor:pointer;
}

.social-discussion-cont {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-start;
	gap:calc(var(--glbl-padding) / 2);
}
.social-discussion-title {
	margin:0rem;
	font-weight:600;
	font-size:0.75rem;
}

/* generic section with background image styling */
section.has-img-bg {
	position:relative;
}
section.has-img-bg > img.section-bg {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:bottom;
	z-index:-1;
}

/* do not use section */
section.do-not-use,
section.do-not-use .grid-container {
	padding-top:0rem;
	padding-bottom:0rem;
}

/* featured image section, mobile first */
section.featured-image.image-bg {
	padding-top:calc(var(--glbl-section-padding) / 4);
}
section.featured-image.image-bg h1 {
	margin-top:0px;
	margin-bottom:0px;
}
section.featured-image.image-bg h1, section.featured-image.image-bg p {
	color:var(--clr-hdg-font);
}
body section.featured-image:not(.image-bg) {
	padding-bottom:0rem;
}
body section.featured-image:not(.image-bg) ~ section {
	padding-top:0rem;
}

/* front page our process section */
section.our-process {
	padding-top:0rem;
	padding-bottom:0rem;
	color:var(--clr-section-our-process-font);
	background:var(--clr-section-our-process-mobile-bg);
	position:relative;
}
section.our-process .our-process-intro {
	padding:var(--glbl-section-padding) 0rem;
}
section.our-process h2,
section.our-process h3,
section.our-process h4,
section.our-process h5,
section.our-process h6 {
	color:var(--clr-section-our-process-hdg-font);
}
section.our-process .our-process-intro h2 {
	text-align:center; /* mobile only */
	margin-bottom:var(--glbl-padding);
}
section.our-process h3 .numeral::after {
	content:'. ';
}
section.our-process .dotlink {
	color:var(--clr-section-our-process-font);
}
section.our-process .dotlink:hover,
section.our-process .dotlink:focus,
section.our-process .dotlink:active {
	color:var(--clr-dotlink-font-hover);
	text-shadow:0px 4px 4px var(--clr-dotlink-hover-textshadow);
}

section.our-process .scrollable-process-steps-cont {
	position:relative;
}
section.our-process .scrollable-process-step:not(:empty) {
	padding:var(--glbl-section-padding) 0rem;
	
	position:sticky;
	top:var(--hdr-height);
}
section.our-process .scrollable-process-step:not(:empty)::before {
	content:' ';
	position:absolute;
	top:0rem;
	left:50%;
	transform:translateX(-50%);
	width:100vw;
	height:100%;
	z-index:-1;
}
section.our-process .scrollable-process-step:empty {
	display:none;
}
section.our-process .scrollable-process-step .step-icon {
	margin-right:calc(var(--glbl-padding) / 2);
}
section.our-process .scrollable-process-step.step-1,
section.our-process .scrollable-process-step.step-1::before {
	background-color:var(--clr-our-process-step-1-bg);
}
section.our-process .scrollable-process-step.step-2,
section.our-process .scrollable-process-step.step-2::before {
	background-color:var(--clr-our-process-step-2-bg);
}
section.our-process .scrollable-process-step.step-3,
section.our-process .scrollable-process-step.step-3::before {
	background-color:var(--clr-our-process-step-3-bg);
}
section.our-process .scrollable-process-step.step-4,
section.our-process .scrollable-process-step.step-4::before {
	background-color:var(--clr-our-process-step-4-bg);
}
section.our-process .scrollable-process-step.step-5,
section.our-process .scrollable-process-step.step-5::before {
	background-color:var(--clr-our-process-step-5-bg);
}
section.our-process .scrollable-process-step.step-6,
section.our-process .scrollable-process-step.step-6::before {
	background-color:var(--clr-our-process-step-6-bg);
}
section.our-process .scrollable-process-step.step-7,
section.our-process .scrollable-process-step.step-7::before {
	background-color:var(--clr-our-process-step-7-bg);
}

/* front page our services section */
section.our-services,
section.cta-section {
	text-align:center;
}
section.our-services .service-icon {
	font-size:1.5rem;
	margin-top:var(--glbl-padding);
	margin-bottom:var(--glbl-padding);
}
section.our-services .our-services-grid {
	justify-content:center;
}

/* front page cta section */
section.cta-section {
	background:var(--clr-section-cta-bg);
	min-height:50vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
section.cta-section > .grid-container {
	width:100%;
}
section.cta-section a.link:hover,
section.cta-section a.link:focus,
section.cta-section a.link:active {
	color:var(--clr-body-bg);
}

/* newsletter signup form, if present, is also an instance of a cta section */
section.newsletter-signup-section .email-entry-area {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	margin-top:var(--glbl-padding);
}
section.newsletter-signup-section .email-entry-area > input[type="text"],
section.newsletter-signup-section .email-entry-area > input[type="email"] {
	padding-right:calc(var(--single-line-form-btn-width) + (6 * var(--single-line-form-padding)));
	min-height:3rem;
	border-radius:var(--btn-border-radius);
}
section.newsletter-signup-section .email-entry-area > input[type="submit"] {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	height:calc(100% - var(--single-line-form-padding));
	right:calc(var(--single-line-form-padding) / 2);
	max-width:var(--single-line-form-btn-width);
	line-height:1;
}

/* front page contact form section */
section.form-input-section h2 {
	margin-bottom:var(--glbl-padding);
}
section.form-input-section .error-details > * {
	display:inline;
}
section.form-input-section .form-output-hdg:empty,
section.form-input-section .form-output-msg:empty {
	display:none;
}
section.form-input-section .form-output-hdg:not(:empty)::after {
	content:': ';
}
.toggle-slider.feedback-rating-toggle-slider:has(> input[type="checkbox"]:checked) label.expanding-label {
	flex-basis:calc(100% - 10.2rem);
}
.toggle-slider.feedback-rating-toggle-slider > input[type="checkbox"]:checked ~ .toggle-label-checked .feedback-rating-cont {
	display:inline-flex;
	align-items:center;
	justify-content:flex-end;
	margin-left:calc(var(--glbl-padding) / 2);
	text-shadow:0px 0px 1px var(--clr-toggle-label-switch-checked);
	color:var(--clr-feedback-star-fill);
	gap:1px;
}
select[name="feedback_rating"] ~ .feedback-rating-cont > i {
	font-family:'Phosphor-Bold';
	
	/* ph-bold styles, without font-family (ph-bold sets that as !important, which we don't want) */
	speak:never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	letter-spacing: 0px;
	-webkit-font-feature-settings: "liga";
	-moz-font-feature-settings: "liga=1";
	-moz-font-feature-settings: "liga";
	-ms-font-feature-settings: "liga" 1;
	font-feature-settings: "liga";
	-webkit-font-variant-ligatures: discretionary-ligatures;
	font-variant-ligatures: discretionary-ligatures;
	font-variant: discretionary-ligatures;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
ph-star doesn't work without ph-bold or ph-fill
so apply that manually here :/
*/
select[name="feedback_rating"] ~ .feedback-rating-cont > i::before {
	content:'\e46a';
}
/*
rating stars, using hidden select (select itself is visible only when js is not available)
*/
select[name="feedback_rating"][data-value="1"] ~ .feedback-rating-cont > i[data-value="1"],
select[name="feedback_rating"][data-value="2"] ~ .feedback-rating-cont > i[data-value="1"],
select[name="feedback_rating"][data-value="2"] ~ .feedback-rating-cont > i[data-value="2"],
select[name="feedback_rating"][data-value="3"] ~ .feedback-rating-cont > i[data-value="1"],
select[name="feedback_rating"][data-value="3"] ~ .feedback-rating-cont > i[data-value="2"],
select[name="feedback_rating"][data-value="3"] ~ .feedback-rating-cont > i[data-value="3"],
select[name="feedback_rating"][data-value="4"] ~ .feedback-rating-cont > i[data-value="1"],
select[name="feedback_rating"][data-value="4"] ~ .feedback-rating-cont > i[data-value="2"],
select[name="feedback_rating"][data-value="4"] ~ .feedback-rating-cont > i[data-value="3"],
select[name="feedback_rating"][data-value="4"] ~ .feedback-rating-cont > i[data-value="4"],
select[name="feedback_rating"][data-value="5"] ~ .feedback-rating-cont > i[data-value="1"],
select[name="feedback_rating"][data-value="5"] ~ .feedback-rating-cont > i[data-value="2"],
select[name="feedback_rating"][data-value="5"] ~ .feedback-rating-cont > i[data-value="3"],
select[name="feedback_rating"][data-value="5"] ~ .feedback-rating-cont > i[data-value="4"],
select[name="feedback_rating"][data-value="5"] ~ .feedback-rating-cont > i[data-value="5"] {
	font-family:'Phosphor-Fill';
}

/* front page faq section */
section.faq-section {
	background-color:var(--clr-section-faq-bg);
}
section.faq-section .intro-content {
	padding-bottom:var(--glbl-padding);
}
section.faq-section .faq-q {
	display:flex;
	align-items:center;
	justify-content:flex-start;
}
section.faq-section .faq-q .faq-icon {
	font-size:1.5rem;
	margin-right:calc(var(--glbl-padding) / 2);
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
section.faq-section .faq-cell .faq .faq-q {
	padding-bottom:var(--glbl-padding);
}
section.faq-section .faq-cell .faq .faq-a > p {
	margin-top:0rem;
}
section.faq-section .faq-cell .faq:not(:first-child) .faq-q {
	padding-top:var(--glbl-padding);
}
section.faq-section .faq-cell .faq:not(:last-child) {
	border-bottom:2px solid var(--clr-body-font);
}
section.faq-section .faq-cell .faq.faq-toggle-cont > input[type=checkbox]:checked ~ .faq-toggle .faq-q {
	padding-bottom:calc(var(--glbl-padding) / 2);
}

.faq-toggle-cont > input[type=checkbox] {
	/*
	NOTE: for accessibility reasons we need this to be focus-able
	so we can't use display:none and must instead fake it
	*/
/*	display:none; */
	opacity:0;
	height:0px;
	width:0px;
	position:absolute;
	z-index:-1;
}
.faq-toggle-cont > .faq-toggle .faq-q {
	position:relative;
	padding-right:2rem;
}
.faq-toggle-cont > .faq-toggle .faq-q::after {
	content:"\e136"; /* caret down icon */
	font-family:"Phosphor-Fill";
	position:absolute;
	top:50%;
	right:0rem;
	transform:translateY(-50%);
	transition:all var(--glbl-transition-time) ease;
}
.faq-toggle-cont > .faq-content {
	overflow:hidden;
	height:0rem;
}
.faq-toggle-cont > input[type=checkbox]:focus ~ .faq-toggle .faq-q::after,
.faq-toggle-cont > input[type=checkbox]:active ~ .faq-toggle .faq-q::after {
	color:var(--clr-section-faq-accordion-focus-font);
}
.faq-toggle-cont > input[type=checkbox]:checked ~ .faq-content {
	height:auto;
	overflow:auto;
}
.faq-toggle-cont > input[type=checkbox]:checked ~ .faq-toggle .faq-q::after {
	transform:translateY(-50%) rotateY(180deg);
}

/* footer section, mobile first */
footer {
	padding-top:var(--glbl-section-padding);
	padding-bottom:calc(var(--glbl-section-padding) / 2);
	margin-bottom:calc(0px - var(--glbl-padding));
	background:var(--clr-footer-bg);
	color:var(--clr-footer-font);
	font-family:var(--navbar-font-family);
}
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
	color:var(--clr-footer-font);
}
footer h2:has(a.hdr-icon-link) {
	font-size:unset;
	font-family:var(--body-font-family);
}
footer a {
	color:var(--clr-footer-font);
}
footer a:hover,
footer a:focus,
footer a:active {
	color:var(--clr-btn-hover-font);
	text-shadow:0px 0px 2px var(--clr-btn-hover-bg);
}
footer a:hover .svg-icon,
footer a:focus .svg-icon,
footer a:active .svg-icon {
	background-color:var(--clr-btn-hover-font);
	filter:brightness(70%);
}
footer address {
	font-style:normal;
	line-height:1.6;
}
footer .hdr-icon-link {
	margin-top:-1rem;
}
footer .hdr-icon-link .hdr-icon {
	margin-right:calc(var(--glbl-padding) / 2);
}
footer .menu-title {
	font-size:1.25rem;
}
footer .menu-footer-nav-container > ul {
	list-style-type:none;
	padding-left:0rem;
	padding-right:0rem;
}
footer .menu-footer-nav-container > ul.menu > li:not(:last-child) {
	margin-bottom:calc(var(--glbl-padding) / 4);
}
footer .footer-content-cell > *:not(:first-child) {
	padding-top:calc(var(--glbl-padding) / 2);
}
footer .footer-content-cell > *:last-child {
	padding-bottom:calc(var(--glbl-padding) / 2);
}
footer .attribution-cell {
	text-align:center;
}
footer .svg-icon {
	background-color:var(--clr-footer-font);
}
.third-party-logo {
	max-width:64px;
	max-height:32px;
}

/* error sections */
section.error.http-error,
section.error.search-error {
	min-height:calc(100vh - var(--hdr-height-blended) - 16rem);
}

/* breadcrumb nav section */
section.breadcrumb-nav {
	padding-top:calc(var(--glbl-section-padding) / 2);
	padding-bottom:calc(var(--glbl-section-padding) / 2);
	font-family:var(--btn-font-family);
}
section.breadcrumb-nav + section:not(.archive) {
	padding-top:0rem;
}

/* search sections */
section.search-result-hdg.first-search {
	min-height:calc(100vh - var(--hdr-height-blended) - 16rem);
}

/* archive page post archive section */
section.archive {
	background-color:var(--clr-section-archive-bg);
}
section.archive.has-img-bg {
	background-color:var(--clr-section-archive-with-img-bg);
}
section.archive.has-img-bg > img.section-bg {
	object-position:center;
}
section.archive .archive-post-link {
	text-decoration:none;
	padding:calc(var(--glbl-padding) / 2);
	transition:all var(--glbl-transition-time) ease;
	border-radius:calc(var(--btn-border-radius) / 4);
	backdrop-filter:blur(4px);
	background-color:var(--clr-section-archive-post-bg);
	height:100%;
	width:100%;
}
section.archive .archive-post-link > .post-thumbnail-cont {
	display:block;
	position:relative;
	margin:calc(0rem - (var(--glbl-padding) / 2)) calc(0rem - (var(--glbl-padding) / 2)) var(--glbl-padding) calc(0rem - (var(--glbl-padding) / 2));
	width:calc(100% + var(--glbl-padding));
	border-radius:calc(var(--btn-border-radius) / 4) calc(var(--btn-border-radius) / 4) 0rem 0rem;
	overflow:hidden;
}
section.archive .archive-post-link > .post-thumbnail-cont > img {
	display:block;
	transition:all var(--glbl-transition-time) ease;
}
section.archive .archive-post-link:hover,
section.archive .archive-post-link:focus,
section.archive .archive-post-link:active {
	background-color:var(--clr-section-archive-post-hover-bg);
	box-shadow:-0.25rem 0.25rem 0.25rem var(--clr-dropdown-shadow);
}
section.archive .archive-post-link:hover > .post-thumbnail-cont > img,
section.archive .archive-post-link:focus > .post-thumbnail-cont > img,
section.archive .archive-post-link:active > .post-thumbnail-cont > img {
	transform:scale(1.2);
}
section.archive .archive-post-link h2 {
	font-size:1.5rem;
}

/* archive and search result pagination links */
section.pagination {
	padding:calc(var(--glbl-section-padding) / 2) 0rem;
	text-align:center;
}

/* wp-admin adjustments */
body.admin-bar .topbar.blended {
	top:var(--wp-admin-bar-height);
}
body.admin-bar section.error.http-error {
	min-height:calc(100vh - var(--hdr-height-blended) - 16rem - var(--wp-admin-bar-height));
}
body.admin-bar section.error.search-error {
	min-height:calc(100vh - var(--hdr-height-blended) - 18rem);
}

/* iframe adjustments */
body.iframe,
body.iframe main {
	padding:0rem;
}
html:has(body.iframe) {
	margin-top:0rem !important;
}

/* language switcher for multilingual support */
.lang-switcher-cont {
	position:relative;
	transition:all var(--glbl-transition-time) ease;
}
.lang-switcher-cont .lang-switcher {
	height:100%;
	width:100%;
}
.lang-switcher-cont .lang-switcher > label {
	height:100%;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding-left:calc(var(--glbl-padding) / 2);
	padding-right:calc(var(--glbl-padding) / 2);
}
.lang-switcher-cont.lang-switcher-cont-mobile {
	position:absolute;
	top:calc(var(--glbl-padding) + 3px);
	right:calc((var(--light-dark-toggle-slider-height) * 2) + (var(--glbl-padding) * 1.5));
}
.lang-switcher > input[type=checkbox] {
	/*
	NOTE: for accessibility reasons we need this to be focus-able
	so we can't use display:none and must instead fake it
	*/
/*	display:none; */
	opacity:0;
	height:0px;
	width:0px;
	position:absolute;
	z-index:-1;
}
.lang-switcher-cont-desktop .lang-switcher:hover,
.lang-switcher-cont-desktop .lang-switcher:has(input[type=checkbox]:focus),
.lang-switcher-cont-desktop .lang-switcher:has(input[type=checkbox]:active) {
	background-color:var(--clr-btn-bg);
	color:var(--clr-btn-font);
}
.lang-switcher-cont-mobile .lang-switcher:hover,
.lang-switcher-cont-mobile .lang-switcher:has(input[type=checkbox]:focus),
.lang-switcher-cont-mobile .lang-switcher:has(input[type=checkbox]:active) {
	color:var(--clr-link-font-hover);
}
.lang-switcher .lang-options {
	position:absolute;
	flex-direction:column;
	left:0px;
	background-color:var(--clr-body-bg);
	color:var(--clr-link-font);
	padding:calc(var(--glbl-padding) / 2);
	border-radius:0rem 0rem calc(var(--btn-border-radius) / 4) calc(var(--btn-border-radius) / 4);
	
	display:none;
}
.lang-switcher > input[type=checkbox]:checked ~ .lang-options,
.lang-switcher:hover .lang-options,
.lang-switcher-cont:hover .lang-options {
	display:flex;
}
.lang-switcher .lang-options .lang-option a:hover,
.lang-switcher .lang-options .lang-option a:focus,
.lang-switcher .lang-options .lang-option a:active, {
	color:var(--clr-link-font-hover);
}
.lang-switcher-cont.lang-switcher-cont-mobile .lang-switcher .lang-options {
	left:unset;
	right:0px;
}
.lang-switcher-cont.lang-switcher-cont-desktop {
	height:100%;
	align-items:center;
	justify-content:center;
	margin-right:calc(var(--glbl-padding) / 2);
}
.lang-switcher-cont.lang-switcher-cont-desktop .lang-switcher .lang-options {
	top:100%;
}
header.topbar:not(.blended) .lang-switcher-cont.lang-switcher-cont-desktop .lang-switcher .lang-options {
	box-shadow:0rem 0.5rem 0.5rem var(--clr-hdr-shadow);
}

.blog-post-metadata {
	margin-bottom:var(--glbl-padding);
}

.blog-post-tags {
	display:flex;
	align-items:center;
	justify-content:flex-start;
}
.blog-post-tags-label,
.blog-post-date-label {
	font-weight:bold;
	margin-right:calc(var(--glbl-padding) / 4);
}

ul.horizontal-list.blog-post-tag-list {
	padding-top:calc(var(--glbl-padding) / 4);
	padding-bottom:calc(var(--glbl-padding) / 4);
	flex-wrap:wrap;
	gap:calc(var(--glbl-padding) / 4);
}
ul.horizontal-list.blog-post-tag-list .blog-post-tag {
	padding:calc(var(--glbl-padding) / 8) calc(var(--glbl-padding) / 4);
	background-color:var(--clr-btn-bg);
	color:var(--clr-btn-font);
	border-radius:var(--tag-border-radius);
	display:inline;
	font-size:0.9rem;
}
ul.horizontal-list.blog-post-tag-list .blog-post-tag:hover,
ul.horizontal-list.blog-post-tag-list .blog-post-tag:focus
ul.horizontal-list.blog-post-tag-list .blog-post-tag:active {
	background-color:var(--clr-btn-hover-bg);
	color:var(--clr-btn-hover-font);
}
ul.horizontal-list.blog-post-tag-list .blog-post-tag.disabled,
ul.horizontal-list.blog-post-tag-list .blog-post-tag[disabled] {
	opacity:0.9;
	pointer-events:none;
	cursor:not-allowed;
}

.author-display-cont {
	display:inline-flex;
	align-items:center;
	justify-content:flex-start;
	gap:calc(var(--glbl-padding) / 2);
}
.author-profile-image-cont {
	position:relative;
	height:var(--author-profile-image-height);
	width:var(--author-profile-image-width);
	border-radius:50%;
	overflow:hidden;
}
a.author-display-cont .author-profile-image-cont .author-profile-image {
	transition:transform var(--glbl-transition-time) ease;
}
a.author-display-cont .author-profile-image-cont {
	border:1px solid transparent;
	transition:all var(--glbl-transition-time) ease;
}
a.author-display-cont:hover .author-profile-image-cont,
a.author-display-cont:focus .author-profile-image-cont,
a.author-display-cont:active .author-profile-image-cont {
	border-color:var(--clr-link-font-hover);
}
a.author-display-cont:hover .author-profile-image-cont .author-profile-image,
a.author-display-cont:focus .author-profile-image-cont .author-profile-image,
a.author-display-cont:active .author-profile-image-cont .author-profile-image {
	transform:scale(1.2);
}

/* adjustments for single posts */
body.wp-singular.single h2,
body.wp-singular.single h3,
body.wp-singular.single h4,
body.wp-singular.single h5,
body.wp-singular.single h6 {
	font-family:var(--single-post-subhdg-font-family);
	margin-top:calc(var(--glbl-padding) * 2);
}
body.wp-singular.single footer h2,
body.wp-singular.single footer h3,
body.wp-singular.single footer h4,
body.wp-singular.single footer h5,
body.wp-singular.single footer h6 {
	font-family:var(--hdg-font-family);
	margin:0rem auto;
}

/* feedback widget opener label */
body > .feedback-widget {
	right:unset;
	bottom:unset;
}
.feedback-widget .toggle-opener input[type="checkbox"]:not(:checked) ~ .toggle-label-unchecked.btn[for="is-feedback-widget-open"] {
	display:none;
}

.tooltip-cont {
	position:relative;
}
.tooltip {
	position:absolute;
	top:-6px;
	left:calc(0px - (var(--glbl-padding) / 2));
	padding:calc(var(--glbl-padding) / 2);
	transform:translateY(-100%);
	border-radius:var(--btn-border-radius);
	transition:all 0.5s ease;
	text-align:center;
	min-width:14rem;
	background-color:var(--clr-tooltip-bg);
	color:var(--clr-tooltip-font);
	border:1px solid var(--clr-tooltip-border);
}
.tooltip::before,
.tooltip::after {
	content:' ';
	position:absolute;
	bottom:-6px;
	left:calc(var(--btn-border-radius) / 2);
	border-top:5px solid var(--clr-tooltip-border);
	border-left:5px solid transparent;
	border-right:5px solid transparent;
}
.tooltip::after {
	bottom:-5px;
	border-top:5px solid var(--clr-tooltip-bg);
}

/* ---------------------------------------------------------------------------
END global component styles
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN page styles
----------------------------------------------------------------------------*/

/* front page */
body.is-front-page section.featured-image {
	position:relative;
}
body.is-front-page section.featured-image::after {
	content:' ';
	display:block;
	position:absolute;
	bottom:0rem;
	right:0rem;
	width:100%;
	height:5rem;
	pointer-events:none;
	background:linear-gradient(0deg,var(--clr-body-bg) 50%,transparent);
}
body.is-front-page .cell.hero-img-cell {
	position:relative;
	height:unset;
	overflow:visible;
	padding-bottom:0rem;
}
body.is-front-page .cell.hero-img-cell img.front-page-hero-bg {
	position:absolute;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	width:100%;
	height:100%;
	z-index:-1;
}
body.is-front-page .cell.hero-img-cell img.front-page-hero-bg.dark-mode {
	display:none;
}
body.is-front-page .cell.hero-img-cell img.attachment-post-thumbnail {
	height:100%;
	object-position:bottom;
	position:relative;
	display:block;
}
body.is-front-page .cell.hero-img-cell::before,
body.is-front-page .cell.hero-img-cell::after {
	content:' ';
	display:block;
	position:absolute;
	top:0rem;
	height:100%;
	width:5rem;
	pointer-events:none;
}
body.is-front-page .cell.hero-img-cell::before {
	background:linear-gradient(270deg,transparent,var(--clr-body-bg));
	left:0rem;
	z-index:1;
}
body.is-front-page .cell.hero-img-cell::after {
	background:linear-gradient(90deg,transparent,var(--clr-body-bg));
	right:var(--glbl-padding);
}

/* pages /other/ than the front page */
/* generic page hero (featured image) section */
body:not(.is-front-page) section.featured-image .cell.hero-img-cell img.attachment-post-thumbnail {
	border-radius:calc(var(--btn-border-radius) / 2);
	object-fit:cover;
}

/* single generic post adjustments */
body.wp-singular.single:not(.is-front-page) section.featured-image.image-bg {
	padding-bottom:0rem;
}
body.wp-singular.single:not(.is-front-page) section.featured-image > .grid-container > .grid {
	align-items:center;
}

/* ---------------------------------------------------------------------------
END page styles
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN animation definitions
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
END animation definitions
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN mobile-ONLY styles
although mobile is default and everything above applies to it,
sometimes we want to avoid over-riding mobile styles on larger screen sizes
----------------------------------------------------------------------------*/
@media all and (max-width:767px) { /* < $screen-size-medium */
	/*
	mobile only; make hcaptcha display in the area where it should
	this is necessary because the hcaptcha challenge is itself an iframe
	and we're using it within the context of another iframe
	and it doesn't know how to handle that nesting properly without this
	*/
/*
	div:has(div > iframe[src*="hcaptcha.com"]:not([tabindex])){
		top:unset !important;
		bottom:80px;
	}
*/
	
	/*
	mobile only: make archive grid placeholders invisible
	(we're stacking at this size)
	*/
	section.archive > .grid-container > .grid > .cell.small-12.placeholder {
		display:none;
	}
}
/* ---------------------------------------------------------------------------
END mobile-ONLY styles
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN medium, large, and xlarge display adjustments (mobile is default)
----------------------------------------------------------------------------*/
@media all and (min-width:768px) { /* $screen-size-medium */

	/* ---------------------------------------------------------------------------
	BEGIN global component styles
	----------------------------------------------------------------------------*/
	
	/* set font sizes */
	h1 {
		font-size:3rem;
	}
	h2 {
		font-size:2.5rem;
	}
	h3 {
		font-size:2rem;
	}
	h4 {
		font-size:1.75rem;
	}
	h5 {
		font-size:1.5rem;
	}
	h6 {
		font-size:1.25rem;
	}
	
	/* update variables */
	body {
		--wp-admin-bar-height: 32px;
	}
	
	/* header and navbar styling, mobile-first */
	header.topbar .grid > .hdr-desktop-nav-cell.cell.shown-on-medium {
		display:flex;
	}
	.grid > .cell.hdr-flyout-trigger-cell > *:not(:last-child):not(.hdr-flyout-trigger):not(.lang-switcher-cont-desktop) {
		margin-right:var(--glbl-padding);
	}
	
	/* adjustments for when the topbar is blended into the page (scrolled to top) */
	header.topbar.blended {
		background-color:transparent;
		box-shadow:none;
	}
	header.topbar .fixed-bar-height {
		height:var(--hdr-height);
	}
	header.topbar.blended .fixed-bar-height {
		height:var(--hdr-height-blended);
	}
	
	button.cta-btn,
	.btn.cta-btn {
		width:auto;
	}
	
	.dotlink-cont,
	.grid > .cell.dotlink-cont {
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
	}
	.dotlink-cont.hidden-on-medium,
	.grid > .cell.dotlink-cont.hidden-on-medium {
		display:none;
	}
	.grid > .cell.dotlink-cont.hidden.shown-on-medium {
		display:flex;
	}
	.dotlink-cont .dotlink,
	.dotlink-cont .dotlink:not(:last-child),
	.dotlink-cont li:not(:last-child) .dotlink {
		margin-right:0rem;
	}
	.dotlink-cont .dotlink:not(:last-child),
	.dotlink-cont li:not(:last-child) .dotlink {
		margin-bottom:calc(var(--glbl-padding) / 4);
	}
	.outro-links-cont {
		flex-direction:row;
	}
	
	/* featured image section */
	body.is-front-page section.featured-image::after {
		z-index:-1;
	}
	section.featured-image.image-bg {
		padding-top:var(--glbl-section-padding);
	}
	
	/* our process section */
	section.our-process > .grid-container > .grid {
		/*
		NOTE: for accessibility reasons we can't just duplicate the heading for medium up
		so in order to preserve the heading level order, we apply row-reverse instead
		*/
		flex-direction:row-reverse;
	}
	section.our-process .our-process-intro h2 {
		text-align:left;
	}
	section.our-process .our-process-intro {
		position:sticky;
		top:var(--hdr-height);
	}
	section.our-process .our-process-intro .dotlink .step-icon {
		display:inline-block;
		width:var(--glbl-padding);
		text-align:center;
	}
	
	section.our-process {
		background:var(--clr-section-our-process-desktop-bg);
	}
	section.our-process .our-process-intro {
		padding-top:calc(var(--glbl-section-padding) / 2);
		padding-bottom:calc(var(--glbl-section-padding) / 2);
		padding-left:var(--glbl-padding);
		padding-right:var(--glbl-padding);
		top:var(--hdr-height);
	}
	section.our-process .scrollable-process-step .step-icon {
		margin-right:var(--glbl-padding);
		margin-bottom:var(--glbl-padding);
	}
	section.our-process .scrollable-process-step:not(:empty) {
		padding-right:var(--glbl-padding);
	}
	section.our-process .scrollable-process-step:not(:empty)::before {
		transform:none;
		left:calc(0px - 50vw);
		width:50vw;
	}
	
	/* our services section */
	section.our-services .service-icon {
		font-size:2rem;
	}
	
	/* front page contact form container section */
	.contact-form-iframe {
		/* initial height; replaced with content height using javascript post-load */
		height:50rem;
	}
	
	/* front page faq section */
	section.faq-section .faq-q .faq-icon {
		background-color:var(--clr-faq-icon-bg);
		height:40px;
		width:40px;
		min-width:40px;
		border-radius:calc(var(--btn-border-radius) / 4);
		margin-right:var(--glbl-padding);
	}
	
	/* global footer */
	footer .menu-title {
		font-size:1.5rem;
	}
	footer .hdr-icon-link {
		display:inline-flex;
	}
	
	/* wp-admin adjustments */
	body.admin-bar .topbar {
		top:var(--wp-admin-bar-height);
	}
	body.admin-bar section.our-process .our-process-intro {
		top:calc(var(--hdr-height) + var(--wp-admin-bar-height));
	}
	
	body > .feedback-widget {
		right:calc(min(50%,var(--feedback-widget-desktop-page-border)));
		bottom:0px;
	}
	/* feedback widget opener label */
	.feedback-widget .toggle-opener input[type="checkbox"]:not(:checked) ~ .toggle-label-unchecked.btn[for="is-feedback-widget-open"] {
		display:inline-block;
	}
	nav .flyout-content .btn.hidden-on-medium {
		display:none;
	}
	.tooltip {
		left:50%;
		transform:translateX(-50%) translateY(-100%);
	}
	.tooltip::before,
	.tooltip::after {
		left:50%;
	}
	
	/* ---------------------------------------------------------------------------
	END global component styles
	----------------------------------------------------------------------------*/

	/* ---------------------------------------------------------------------------
	BEGIN page styles
	----------------------------------------------------------------------------*/

	/* front page */
	body.is-front-page section.featured-image {
		padding-bottom:8rem;
	}
	body.is-front-page section.featured-image::after {
		height:10rem;
		background:linear-gradient(0deg,var(--clr-body-bg) 20%,transparent);
	}
	body.is-front-page .cell.hero-img-cell {
		/* display fades and images UNDER text when there is overlap */
		z-index:-1;
	}
	body.is-front-page .cell.hero-img-cell img.front-page-hero-bg {
		top:calc(50% + 5rem);
		left:calc(50% - 3rem);
	}
	body.is-front-page .cell.hero-img-cell img.attachment-post-thumbnail {
		bottom:-5rem;
		right:6rem;
		width:calc(100% + 5rem);
	}
	body.is-front-page .cell.hero-img-cell::before {
		top:5rem;
		left:-6rem;
	}
	body.is-front-page .cell.hero-img-cell::after {
		top:5rem;
		right:2.5rem;
	}
	
	/* ---------------------------------------------------------------------------
	END page styles
	----------------------------------------------------------------------------*/

}
@media all and (min-width:1024px) { /* $screen-size-large */

	/* ---------------------------------------------------------------------------
	BEGIN global component styles
	----------------------------------------------------------------------------*/
	
	/* set font sizes */
	h1 {
		font-size:3.5rem;
	}
	h2 {
		font-size:2.75rem;
	}
	h3 {
		font-size:2rem;
	}
	h4 {
		font-size:1.75rem;
	}
	h5 {
		font-size:1.5rem;
	}
	h6 {
		font-size:1.25rem;
	}
	
	.hdr-trigger.hidden-on-large {
		display:none;
	}
	
	.grid > .cell.hdr-flyout-trigger-cell > .btn.cta-btn {
		margin-right:0rem;
	}
	
	/* front page contact form section within iframe */
	.toggle-slider.feedback-rating-toggle-slider:has(> input[type="checkbox"]:checked) label.expanding-label {
		flex-basis:unset;
	}
	
	/* language switcher for multilingual support */
	.lang-switcher-cont.lang-switcher-cont-desktop {
		display:flex;
	}
	
	/* primary nav menu adjustments to prevent overflow */
	html[lang=fr] .hdr-desktop-nav-cell ul.menu {
		/* fr version only; left-align to make more space */
		justify-content:flex-start;
	}
	.hdr-desktop-nav-cell ul.menu > li {
		max-width:100px; /* needed to prevent wrap in fr translation at width=1024px */
	}
	
	/* ---------------------------------------------------------------------------
	END global component styles
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	BEGIN page styles
	----------------------------------------------------------------------------*/

	/* front page */
	body.is-front-page section.featured-image::after {
		bottom:calc((var(--glbl-section-padding) / 2) + 4.5rem);
		height:5rem;
	}
	body.is-front-page .cell.hero-img-cell img.front-page-hero-bg {
		top:calc(50% - 1rem);
	}
	body.is-front-page .cell.hero-img-cell img.attachment-post-thumbnail {
		bottom:0rem;
	}
	body.is-front-page .cell.hero-img-cell::before {
		top:0rem;
	}
	body.is-front-page .cell.hero-img-cell::after {
		top:0rem;
	}

	/* ---------------------------------------------------------------------------
	END page styles
	----------------------------------------------------------------------------*/

}

@media all and (min-width:1200px) { /* $screen-size-xlarge */

	/* ---------------------------------------------------------------------------
	BEGIN global component styles
	----------------------------------------------------------------------------*/
	
	/* primary nav menu adjustments from large -> xlarge */
	html[lang=fr] .hdr-desktop-nav-cell ul.menu {
		justify-content:center;
	}
	.hdr-desktop-nav-cell ul.menu > li {
		max-width:30%;
	}
	html[lang=fr] .hdr-desktop-nav-cell ul.menu > li {
		max-width:23%;
	}
	
	/* ---------------------------------------------------------------------------
	END global component styles
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	BEGIN page styles
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	END page styles
	----------------------------------------------------------------------------*/
}


/* ---------------------------------------------------------------------------
END medium, large, and xlarge display adjustments (mobile is default)
----------------------------------------------------------------------------*/