/*
Theme Name:		Avnos child of Ollie
Description:	Developed by TJ Noel for Avnos
Author: 		TJ Noel
Template: 		ollie
Version: 		1.0.46
Text Domain: 	ollie-child
*/


/* hot fixes */

/* .grecaptcha-badge { display: none !important; }
 */


/* Extra stylesheets: functions.php → STYLES & FONTS → ollie_child_css_stylesheets() */

/* External post links */
a.is-external-link::after,
.external-source-button.is-external-link::after {
	content: "↗ EXTERNAL";
	display: inline-block;
	margin-left: 0.25em;
	padding: 0.5em 1em;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: .75rem;
	line-height: 1;
	text-transform: uppercase;
	vertical-align: middle;
}

.external-source-notice {
	margin-bottom: var(--wp--preset--spacing--medium);
}

/* Archive: back link to News/posts page */
.view-all-news-link {
	margin: 0 0 var(--wp--preset--spacing--medium) 0;
}
.view-all-news-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.35em 0.65em;
	/* border-radius: 99em; */
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	text-transform: capitalize;
}
.view-all-news-link a::before {
	content: "←";
	display: inline-block;
	line-height: 1;
}
.view-all-news-link a:hover {
	text-decoration: none;
	filter: brightness(0.95);
}

/*  ----------------------
	Root Variables - However, most are setup in the JSON file
---------------------  */
	:root {
	--breakpoint-sm: 480; /* pixels*/
	--breakpoint-md: 782;
	--breakpoint-lg: 960;
	--breakpoint-xl: 1200;
	--anchor-offset: 109px;

	--list-item-spacing: 0.65em;
	--pattern-bars-tile: 120px;

	--color-primary: var(--wp--preset--color--primary);

	--bleed-right-focal-point-x: 50%;
	--bleed-right-focal-point-y: 50%;
	--bleed-left-focal-point-x: 50%;
	--bleed-left-focal-point-y: 50%;

}

/* =========================
 	Avnos logo overlap over wave cover
========================= */

/* section break - logo right */
.wp-block-group.avnos-logo-overlap-right {
	position: relative;
	z-index: 20;
	margin-top: 0 !important;
	margin-bottom: -5.5rem !important;
	padding-bottom: 0 !important;
}

.wp-block-group.avnos-logo-overlap-right + .wp-block-cover {
	margin-top: 0 !important;
	position: relative;
	z-index: 1;
}

.wp-block-columns.avnos-logo-overlap-right {
	position: relative;
	z-index: 20;
	margin-top: 0 !important;
	margin-bottom: -5.5rem !important;
	padding-bottom: 0 !important;
}

.wp-block-columns.avnos-logo-overlap-right + .wp-block-cover {
	margin-top: 0 !important;
	position: relative;
	z-index: 1;
}

/* section break - logo left */
.wp-block-columns.avnos-logo-overlap-left {
	position: relative;
	z-index: 20;
	margin-top: 0 !important;
	margin-bottom: -3.5rem !important;
	padding-bottom: 0 !important;
}

.wp-block-columns.avnos-logo-overlap-left + .wp-block-cover {
	margin-top: 0 !important;
	position: relative;
	z-index: 1;
}

/* desktop/mobile swap utilities
 * TJ -- put this where it should be
 * Thanks!
 */

.show-tablet-mobile {
	display: none !important;
}

@media (max-width: 1024px) {
	.show-desktop-only {
  	display: none !important;
	}

	.show-tablet-mobile {
  	display: flex !important;
	}
}

/* another fix */
.logo * {
	transition:none !important;
	transform:none !important;
	/* transform: translateZ(0) !important; */
}

/* In-page anchor offsets for sticky header */
html {
	scroll-padding-top: var(--anchor-offset);
}

/* Remove the applied margin to the navigation block in the header */
header .wp-block-navigation {
	margin-top: 0 !important;
}

/* --------
	Posts
	post-meta
-----------*/

.post-meta,
.post-meta * {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
}


/* ===================
	Ollie Overwrites
=====================*/

/*  ----------------------
	Avnos Styles - Base
---------------------  */

.site-header {
	background-color: #fff;
	padding-block: 1rem;
}

/* ==========================================
 	AVNOS CONTAINER UTILITIES
 	Apply these as additional CSS classes
 	to Group blocks where needed.
========================================== */

.container-reading,
.section-inner,
.section-inner--wide,
.site-header__inner {
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

.container-reading { max-width: 850px; }
.section-inner { max-width: 1290px; }
.section-inner--wide { max-width: 1440px; }
.site-header__inner {
	max-width: 1290px;
}

/* News archive intro width
 	About 6 columns wide on desktop, full width on smaller screens */
.is-layout-constrained > .container-news-intro {
	width: 100%;
	max-width: 640px;
	margin-left: 0 !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* Half-width content block
 	Roughly 6 columns on desktop, fluid on smaller screens */
.is-layout-constrained > .container-half {
	width: 100%;
	max-width: 640px;
	margin-left: 0 !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

.container-half {
	width: 100%;
	max-width: 640px;
	margin-left: 0 !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* ==========================================
 	HERO FRAME
 	Apply to the Cover block
========================================== */

.hero-frame {
	min-height: clamp(520px, 62vw, 760px);
}

/* ==========================================
 	HERO GRID SYSTEM
 	Apply hero-grid to the inner Group inside the Cover
========================================== */

.hero-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2vw, 24px);
	width: 100%;
	max-width: 1290px;
	min-height: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	align-items: center;
}

/* Shared hero content block */
.hero-content--left,
.hero-content--mid,
.hero-content--right {
	width: 100%;
	max-width: 640px;
	box-sizing: border-box;
	text-align: left;
	align-self: center;
}

/* Horizontal placement options */
.hero-content--left {
	grid-column: 1 / span 6;
}

.hero-content--mid {
	grid-column: 7 / span 6;
}

.hero-content--right {
	grid-column: 8 / span 5;
}

/* Vertical alignment helpers for desktop if needed */
.hero-v-align--top {
	align-items: start;
}

.hero-v-align--middle {
	align-items: center;
}

.hero-v-align--bottom {
	align-items: end;
}

/* Hero typography */
.hero-content--left h1,
.hero-content--left h2,
.hero-content--mid h1,
.hero-content--mid h2,
.hero-content--right h1,
.hero-content--right h2 {
	font-size: clamp(2rem, 4vw, 2.5rem);
	line-height: 1.1;
}

/* ==========================================
 	MOBILE / TABLET
========================================== */
@media (max-width: 991px) {
	.hero-frame {
  	min-height: clamp(560px, 85vw, 820px);
	}

	.hero-grid {
  	grid-template-columns: 1fr;
  	row-gap: 1.5rem;
  	align-items: center;
	}

	.hero-content--left,
	.hero-content--mid,
	.hero-content--right {
  	grid-column: 1 / -1;
  	margin-inline: 0;
  	align-self: center;
	}
}

/* ==========================================
 	HERO ORNAMENTS
 	Apply to the Cover block with class: hero-frame
 	Draws all 4 corner marks on the hero image area
========================================== */
.hero-frame {
	position: relative;
	overflow: hidden;

	/* horizontal placement across the 1440 hero */
	--orn-left-x: 13%;
	--orn-right-x: 91%;

	/* block sizes */
	--orn-w: 10px;
	--orn-h: 22px;
	--orn-row-gap: 14px;
	--orn-col-gap: 24px;

	/* derived heights */
	--orn-stack-h: calc((2 * var(--orn-h)) + var(--orn-row-gap));

	/* correction for bottom ornaments */
	--orn-bottom-adjust: 22px;
}

.hero-frame::before,
.hero-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	background-repeat: no-repeat;
}

/* single-stack corners: top-left + bottom-right */
.hero-frame::before {
	background-image:
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff);

	background-size:
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h);

	background-position:
  	/* top-left */
  	var(--orn-left-x) 0,
  	var(--orn-left-x) calc(var(--orn-h) + var(--orn-row-gap)),

  	/* bottom-right */
  	var(--orn-right-x) calc(100% - var(--orn-stack-h) + var(--orn-bottom-adjust)),
  	var(--orn-right-x) calc(100% - var(--orn-h) + var(--orn-bottom-adjust));
}

/* double-stack corners: top-right + bottom-left */
.hero-frame::after {
	background-image:
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff);

	background-size:
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h);

	background-position:
  	/* top-right */
  	var(--orn-right-x) 0,
  	calc(var(--orn-right-x) + var(--orn-col-gap)) 0,
  	var(--orn-right-x) calc(var(--orn-h) + var(--orn-row-gap)),
  	calc(var(--orn-right-x) + var(--orn-col-gap)) calc(var(--orn-h) + var(--orn-row-gap)),

  	/* bottom-left */
  	var(--orn-left-x) calc(100% - var(--orn-stack-h) + var(--orn-bottom-adjust)),
  	calc(var(--orn-left-x) + var(--orn-col-gap)) calc(100% - var(--orn-stack-h) + var(--orn-bottom-adjust)),
  	var(--orn-left-x) calc(100% - var(--orn-h) + var(--orn-bottom-adjust)),
  	calc(var(--orn-left-x) + var(--orn-col-gap)) calc(100% - var(--orn-h) + var(--orn-bottom-adjust));
}

/* ==========================================
 	SECTION FRAME
 	Apply to 1440 Cover blocks
========================================== */

.section-frame {
	position: relative;
	overflow: hidden;

	/* shared ornament sizing */
	--orn-left-x: 13%;
	--orn-w: 10px;
	--orn-h: 22px;
	--orn-row-gap: 14px;
	--orn-col-gap: 26px;
	--orn-stack-h: calc((2 * var(--orn-h)) + var(--orn-row-gap));

	/* lower ornament nudge */
	--orn-bottom-adjust: 24px;
}

/* ==========================================
 	LEFT-ONLY ORNAMENT VARIATION
 	Apply with: section-frame--ornaments-left
 	Pattern:
 	- top-left single stack
 	- bottom-left double stack
========================================== */

.section-frame--ornaments-left::before,
.section-frame--ornaments-left::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	background-repeat: no-repeat;
}

/* top-left single stack */
.section-frame--ornaments-left::before {
	background-image:
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff);

	background-size:
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h);

	background-position:
  	var(--orn-left-x) 0,
  	var(--orn-left-x) calc(var(--orn-h) + var(--orn-row-gap));
}

/* bottom-left double stack */
.section-frame--ornaments-left::after {
	background-image:
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff),
  	linear-gradient(#fff, #fff);

	background-size:
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h),
  	var(--orn-w) var(--orn-h);

	background-position:
  	var(--orn-left-x) calc(100% - var(--orn-stack-h) + var(--orn-bottom-adjust)),
  	calc(var(--orn-left-x) + var(--orn-col-gap)) calc(100% - var(--orn-stack-h) + var(--orn-bottom-adjust)),
  	var(--orn-left-x) calc(100% - var(--orn-h) + var(--orn-bottom-adjust)),
  	calc(var(--orn-left-x) + var(--orn-col-gap)) calc(100% - var(--orn-h) + var(--orn-bottom-adjust));
}

/* ==========================================
 	Accordion Updates
 	++ / --
========================================== */

.wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
}

.wp-block-accordion-heading__toggle-icon {
/*   margin-right: 1rem; */
	font-size: 0;
	line-height: 1;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: left;
	width: var(--wp--preset--spacing--large);
/*   min-width: 2.5rem; */
	height: 1.5rem;
	transform: none !important;
	transition: none !important;
}

.wp-block-accordion-heading__toggle-icon::before {
	content: "++";
	font-size: 1rem;
	line-height: 1;
	font-weight: 400;
	display: block;
	transform: none !important;
	transition: none !important;
	color: var(--color-primary);
}

.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion-heading__toggle[aria-pressed="true"] .wp-block-accordion-heading__toggle-icon::before {
	content: "– –";
	color: inherit;
}


/* ==========================================
 	Infrastructure overlap image
 	Right image can break out of its column on desktop
========================================== */

.infrastructure-section,
.infrastructure-columns,
.infrastructure-columns .wp-block-column,
.infrastructure-media {
	overflow: visible;
}

.infrastructure-columns {
	align-items: center;
}

/* Keep text above if overlap gets close */
.infrastructure-columns > .wp-block-column:first-child {
	position: relative;
	z-index: 3;
}

.infrastructure-media {
	position: relative;
	z-index: 2;
}

/* Make the image figure wider than its column */
.infrastructure-media__image {
	position: relative;
	z-index: 2;
	width: clamp(700px, 58vw, 1000px);
	max-width: none;
	margin: 0;
	transform: translate(-20%, clamp(80px, 10vw, 100px));
}

/* Make sure the actual image fills that custom figure width */
.infrastructure-media__image img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* Tablet / mobile: reset back into normal flow */
@media (max-width: 991px) {
	.infrastructure-media__image {
  	width: 100%;
  	max-width: 100%;
  	transform: none;
	}

	.infrastructure-media__image img {
  	max-width: 100%;
	}
}

/* ==========================================
 	CTA CARD LINK
========================================== */

.cta-card {
	position: relative;
	overflow: hidden;
}

.cta-card__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.cta-card__link a {
	text-decoration: none;
	color: inherit;
}

/* SVG-masked arrow: longer shaft + chevron */
.cta-card__link::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 1.9em;
	height: 1.05em;
	margin-left: 1.25rem;
	background-color: currentColor;

	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2024%27%3E%3Cpath%20d%3D%27M2%2012H27%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27butt%27/%3E%3Cpath%20d%3D%27M20%204L28%2012L20%2020%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
			mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2024%27%3E%3Cpath%20d%3D%27M2%2012H27%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27butt%27/%3E%3Cpath%20d%3D%27M20%204L28%2012L20%2020%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat;

	transform: translateX(0);
	transition: transform 0.2s ease;
}

/* Hover/focus only when the Talk with Avnos link is hovered */
.cta-card__link:hover::after,
.cta-card__link:focus-visible::after {
	transform: translateX(6px);
}

/* NAVIGATION */

/* NAVIGATION - Desktop only
 	- Lime highlight box on hover-focus (no easing)
 	- Current page lime + underline
 	- Works on both: header.site-header AND header.wp-block-template-part
*/
@media (min-width: 700px) {

	header.site-header,
	header.wp-block-template-part{
  	/* --nav-highlight: var(--wp--preset--color--primary, var(--color-primary)); */
  	--nav-highlight: color-mix(
		in srgb,
		var(--wp--preset--color--primary, var(--color-primary)) 20%,
		transparent
  	);
  	--nav-highlight-lighter: color-mix(
		in srgb,
		var(--wp--preset--color--primary, var(--color-primary)) 10%,
		transparent
  	);
  	--nav-highlight-text: var(--wp--preset--color--secondary, #000);

  	--nav-pad-y: 0.45em;
  	--nav-pad-x: 1.2em;
  	--nav-current-pad-bottom: 10px;
  	--nav-underline-size: 1px;
	}

	/* Base link (desktop / non-overlay) */
	header.site-header .wp-block-navigation-item__content,
	header.wp-block-template-part .wp-block-navigation-item__content{
  	position: relative;
  	z-index: 0;

  	display: inline-flex;
  	align-items: center;

  	padding: var(--nav-pad-y) var(--nav-pad-x) var(--nav-current-pad-bottom);
  	text-decoration: none !important;

  	border-bottom: var(--nav-underline-size) solid transparent;
  	transition: none !important;
	}

	/* Hover box (default hidden) */
	header.site-header .wp-block-navigation-item__content::after,
	header.wp-block-template-part .wp-block-navigation-item__content::after{
  	content: "";
  	position: absolute;
  	inset: 0;
  	background: var(--nav-highlight);
  	opacity: 0;
  	z-index: -1;
  	transition: none !important;
  	transform: none !important;
	}

	/* Hover / focus */
	header.site-header .wp-block-navigation-item__content:hover,
	header.site-header .wp-block-navigation-item__content:focus-visible,
	header.wp-block-template-part .wp-block-navigation-item__content:hover,
	header.wp-block-template-part .wp-block-navigation-item__content:focus-visible{
  	color: var(--nav-highlight-text);
  	border-bottom-color: var(--nav-highlight);
  	outline: none;
	}

	header.site-header .wp-block-navigation-item__content:hover::after,
	header.site-header .wp-block-navigation-item__content:focus-visible::after,
	header.wp-block-template-part .wp-block-navigation-item__content:hover::after,
	header.wp-block-template-part .wp-block-navigation-item__content:focus-visible::after{
  	opacity: 1;
	}

	/* =========================
   	CURRENT PAGE
   	========================= */

	header.site-header .current-menu-item > a,
	header.site-header a[aria-current="page"],
	header.wp-block-template-part .current-menu-item > a,
	header.wp-block-template-part a[aria-current="page"]{
  	color: #000 !important;
  	border-bottom-color: var(--nav-highlight);
  	text-decoration: none !important;
	}

	/* Never show hover box on current page */
	header.site-header .current-menu-item > a::after,
	header.site-header a[aria-current="page"]::after,
	header.wp-block-template-part .current-menu-item > a::after,
	header.wp-block-template-part a[aria-current="page"]::after{
  	opacity: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	header.site-header .wp-block-navigation-item__content,
	header.site-header .wp-block-navigation-item__content::after,
	header.wp-block-template-part .wp-block-navigation-item__content,
	header.wp-block-template-part .wp-block-navigation-item__content::after{
  	transition: none !important;
  	transform: none !important;
	}
}


/* ======================================================================
 	MOBILE NAVIGATION — Full-bleed responsive menu overlay
 	Purpose:
 	- Remove inherited layout gutters from the WordPress core Navigation
   	responsive modal
 	- Force the mobile menu overlay to be true viewport width/height
 	- Keep the close (X) button visually aligned with the header gutter
   	so it lines up with the hamburger menu position

   	Scoped to:
 	- Mobile only (≤ 700px)
 	- Header navigation responsive menu
 	====================================================================== */
@media (max-width: 700px) {

	/* Use the same gutter value for top + right so the X aligns with header spacing */
	header {
  	--mobile-menu-gutter: var(--wp--style--root--padding-right, 24px);
	}

	/* Full-bleed overlay */
	header .wp-block-navigation__responsive-container.is-menu-open {
  	position: fixed !important;
  	inset: 0 !important;
  	width: 100vw !important;
  	height: 100vh !important;
  	margin: 0 !important;
  	padding: 0 !important;
  	max-width: none !important;
  	border-radius: 0 !important;
	}

	/* Remove constrained wrappers */
	header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog,
	header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
  	width: 100% !important;
  	height: 100% !important;
  	max-width: none !important;
  	margin: 0 !important;
  	padding: 0 !important;
	}

	/* Align CLOSE button to the header gutter */
	header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
  	/*position: absolute !important;*/
  	position: fixed !important;
  	top: var(--mobile-menu-gutter) !important;
  	right: var(--mobile-menu-gutter) !important;
  	margin: 0 !important;
	}

	header.site-header .current-menu-item > a,
	header.site-header a[aria-current="page"],
	header.wp-block-template-part .current-menu-item > a,
	header.wp-block-template-part a[aria-current="page"]
	{
  	color: #111 !important;
  	text-decoration: none;
  	background-color: var(--nav-highlight-lighter);
  	border-bottom: none;
  	text-decoration: none !important;
	}
}

/* =========================================================
 	Buttons — Outline style
 	Force 1.5px outline
========================================================= */

.wp-block-button.is-style-outline .wp-block-button__link{
	border: none !important;
	background-color: transparent !important;

	outline: 1.5px solid currentColor !important;
	outline-offset: -1.5px !important;
}

/* Hover / focus — some themes reset outline */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible{
	outline-width: 1.5px !important;
	outline-offset: -1.5px !important;
}


/* -----------------------------------------
 	Core List Items Block (Overrides)
------------------------------------------ */

.entry-content ul li, .entry-content ol li, .wp-block-post-content ul li, .wp-block-post-content ol li {
  	margin-bottom: var(--list-item-spacing) !important;
}


/* -----------------------------------------
 	Core Video Block
------------------------------------------ */

/* Video caption styling */
.wp-block-video figcaption,
.wp-block-video .wp-element-caption {
	text-align: left;
	text-transform: uppercase;
	font-size: 1.125rem;
	font-family: var(--wp--preset--font-family--primary);
}

/* -----------------------------------------
 	Core Accordion – remove gaps + clean panel spacing
------------------------------------------ */

/* 1) Remove "block spacing / gap" between accordion items */
.wp-block-accordion.is-layout-flow,
.wp-block-accordion.is-layout-constrained,
.wp-block-accordion.is-layout-flex {
	gap: 0 !important;
	row-gap: 0 !important;
	column-gap: 0 !important;

	/* Some themes use this variable to drive flow spacing */
	--wp--style--block-gap: 0px;
}

/* Flow layout adds margin between direct children */
.wp-block-accordion.is-layout-flow > * + * {
	margin-block-start: 0 !important;
}

/* Ensure items themselves aren't contributing margin */
.wp-block-accordion-item {
	margin: 0 !important;
}

/* If each item has a 1px border, this prevents double borders by pulling the next item up by 1px. */
.wp-block-accordion-item + .wp-block-accordion-item {
	margin-top: -1px !important;
}

/* Also remove default heading margins that can create internal gaps */
.wp-block-accordion-heading {
	margin: 0 !important;
}

/*  Remove extra gap when expanded (panel spacing) */
.wp-block-accordion-panel {
	margin: 0 !important;
}

/* Normalize spacing inside the panel so the first/last elements don't create a gap */
.wp-block-accordion-panel > *:first-child {
	margin-top: 0 !important;
}

.wp-block-accordion-panel > *:last-child {
	margin-bottom: 0 !important;
}

/* =========================
 	Section Break (Waves + Pluses + Logo)
 	========================= */

.wp-block-group.section-break{
	position: relative;
	overflow: hidden;
	background-color: #fff;
	min-height: clamp(220px, 22vw, 360px);
}

/* waves background */
.wp-block-group.section-break::before{
	content:"";
	position:absolute;
	inset:0;
	background: url("./assets/patterns/waves.svg") no-repeat;
	background-position: center 35%;
	background-size: 115% auto;
	pointer-events:none;
	z-index:0;
}

/* ensure content sits above */
.wp-block-group.section-break > *{
	position: relative;
	z-index: 1;
}

/* Base decorative plus block */
.plus-plus-horizontal,
.plus-plus-vertical{
	position: relative;
	margin: 0;
	line-height: 1;
	min-height: 1em;
	color: var(--wp--preset--color--primary, #2E94E5);
}

/* Use font-size to scale within columns */
.plus-plus-horizontal{
	font-size: clamp(18px, 2.2vw, 28px);
}

.plus-plus-vertical{
	font-size: clamp(18px, 2.2vw, 28px);
}

/* Horizontal arrangement: "++ 	+"  */
.plus-plus-horizontal::before{
	content: "++  					+";
	display: inline-block;
	letter-spacing: 0.18em;
	white-space: pre;
}

/* Vertical arrangement: two columns of pluses */
.plus-plus-vertical::before{
	content: "++\A+\A\A++\A+";
	display: inline-block;
	white-space: pre;
}


/* =========================================================
 	Repeating background pattern utilities
 	========================================================= */


/* =========================
 	Eyebrow (single block)
 	Add class: "eyebrow" to a Paragraph/Heading block
 	========================= */

:where(p, h1, h2, h3, h4, h5, h6).eyebrow {
	--eyebrow-color: var(--primary-color, var(--wp--preset--color--primary, #2E94E5));

	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;

	color: var(--eyebrow-color) !important;

	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;

	/* avoid theme margins affecting the rule alignment */
	margin: 0;
}

/* Slashes live AFTER the text */
:where(p, h1, h2, h3, h4, h5, h6).eyebrow::after {
	content: "\005C\005C\005C\005C\005C\005C\005C\005C";
	letter-spacing: 0.10em;
	opacity: 0.9;
}

/* Line is a separate flex item AFTER the slashes */
:where(p, h1, h2, h3, h4, h5, h6).eyebrow::before {
	content: "";
	flex: 1 1 auto;
	min-width: 2rem;
	height: 1px;
	background: var(--eyebrow-color);
	opacity: 0.9;

	/* put the line at the end */
	order: 3;
}

/* Ensure ordering: text (0), slashes (1), line (3) */
:where(p, h1, h2, h3, h4, h5, h6).eyebrow::after { order: 1; }


/* ==========================================
	Type Utilities
	========================================== */
.no-top-margin {
	margin-top: 0px !important;
}

.wp-block-heading.top-margin-half-rem {
	margin-top: 0.5rem !important;
}


/* ==========================================
	Hero Styles
	========================================== */


/* ----------------------------------------
	HERO SPLIT - Used on Subpages
------------------------------------------- */

/* ----------------------------------------
	HERO SPLIT
	Wrapper: .hero-split
	Add to IMAGE column/cover (preferred):
  	- .hero-split__bleed-right  OR  .hero-split__bleed-left
------------------------------------------- */

/* Page shell: sticky footer (short pages) + clip horizontal bleed */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: clip;
}

/* Push footer to bottom when content doesn’t fill the viewport */
.wp-site-blocks > footer {
	margin-top: auto;
}

/* Columns behave like one strip */
.hero-split .wp-block-columns{
	gap: 0 !important;
	align-items: stretch;
	margin-block: 0;
}

.hero-split .wp-block-column{
	padding: 0 !important;
	margin: 0 !important;
}

/* Cover fills its container */
.hero-split .wp-block-cover{
	margin: 0 !important;
	padding: 0 !important;
	height: 100%;
	min-height: 100%;
	position: relative;
	overflow: hidden;
	background: transparent;
}


/* Ensure cover media truly fills */
.hero-split .wp-block-cover > img.wp-block-cover__image-background,
.hero-split .wp-block-cover > video.wp-block-cover__video-background{
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	max-width: none !important;
}

/* Fallback only when NO inline focal point exists */
.hero-split .wp-block-cover > img.wp-block-cover__image-background:not([style*="object-position"]),
.hero-split .wp-block-cover > video.wp-block-cover__video-background:not([style*="object-position"]){
	object-position: 50% 50%;
}

/* ----------------------------------------
 	HERO SPLIT — right bleed focal override
------------------------------------------- */
.hero-split .hero-split__bleed-right.wp-block-cover > img.wp-block-cover__image-background:not([style*="object-position"]),
.hero-split .hero-split__bleed-right.wp-block-cover > video.wp-block-cover__video-background:not([style*="object-position"]),
.hero-split .hero-split__bleed-right > .wp-block-cover > img.wp-block-cover__image-background:not([style*="object-position"]),
.hero-split .hero-split__bleed-right > .wp-block-cover > video.wp-block-cover__video-background:not([style*="object-position"]){
	object-position:
  	var(--bleed-right-focal-point-x, 50%)
  	var(--bleed-right-focal-point-y, 50%);
}

/* ----------------------------------------
 	HERO SPLIT — left bleed focal override
------------------------------------------- */
/* Pattern default for bleed-left */
.hero-split .hero-split__bleed-left.wp-block-cover > img.wp-block-cover__image-background:not([style*="object-position"]),
.hero-split .hero-split__bleed-left.wp-block-cover > video.wp-block-cover__video-background:not([style*="object-position"]),
.hero-split .hero-split__bleed-left > .wp-block-cover > img.wp-block-cover__image-background:not([style*="object-position"]),
.hero-split .hero-split__bleed-left > .wp-block-cover > video.wp-block-cover__video-background:not([style*="object-position"]){
	object-position:
  	var(--bleed-left-focal-point-x, 50%)
  	var(--bleed-left-focal-point-y, 50%);
}

/* Remove overlay span */
.hero-split .wp-block-cover__background{
	position: absolute !important;
	inset: 0 !important;
	background: transparent !important;
}

/* ----------------------------------------
 	DESKTOP BLEED
------------------------------------------- */

/* Column should not clip negative margins */
.hero-split .hero-split__bleed-right,
.hero-split .hero-split__bleed-left{
	overflow: visible !important;
}

/* Unconstrain if Gutenberg tries to constrain width */
.hero-split .hero-split__bleed-right > .wp-block-cover,
.hero-split .hero-split__bleed-left  > .wp-block-cover,
.hero-split .wp-block-cover.hero-split__bleed-right,
.hero-split .wp-block-cover.hero-split__bleed-left{
	max-width: none !important;
	width: auto !important;
}

/* Bleed RIGHT (column-hook + cover-hook) */
.hero-split .hero-split__bleed-right > .wp-block-cover,
.hero-split .wp-block-cover.hero-split__bleed-right{
	width: calc(100% + (50vw - 50%) + 1px) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Bleed LEFT (column-hook + cover-hook) */
.hero-split .hero-split__bleed-left > .wp-block-cover,
.hero-split .wp-block-cover.hero-split__bleed-left{
	width: calc(100% + (50vw - 50%) + 1px) !important;
	margin-left: calc(50% - 50vw) !important;
}

/* If Gutenberg adds constrained layout classes, remove it*/
.hero-split .wp-block-cover.is-layout-constrained,
.hero-split .wp-block-cover.wp-block-cover-is-layout-constrained{
	max-width: none !important;
}

/* ----------------------------------------
	MOBILE (<= 960px)
	- stack
	- full-bleed image column
	- keep text column left-aligned (both patterns)
------------------------------------------- */
@media (max-width: 960px){

	/* Stack order */
	.hero-split:has(.hero-split__bleed-right) .wp-block-columns{
  	flex-direction: column-reverse;
	}
	.hero-split:has(.hero-split__bleed-left) .wp-block-columns{
  	flex-direction: column;
	}

	/* Remove wrapper constraints that can cause side gutters */
	.hero-split .wp-block-columns{
  	margin: 0 !important;
  	padding: 0 !important;
  	max-width: none !important;
	}

	/* ============================
   	TEXT COLUMN (both patterns)
   	============================ */

	.hero-split .hero-split__text{
  	margin: 0 !important;
  	padding: 0 !important;
  	max-width: none !important;
  	width: 100% !important;
	}

	/* important:
   	In FSE the Group has alignwide + has-global-padding + is-layout-constrained
   	AND inline margin/padding. Override all of it. */
	.hero-split .hero-split__text .wp-block-group{
  	margin: 0 !important;

  	/* set your mobile spacing intentionally */
  	margin-top: 2rem !important;
  	margin-bottom: 2rem !important;

  	/* force left alignment */
  	padding-left: 1rem !important;
  	padding-right: 1rem !important;
  	padding-top: 0 !important;
  	padding-bottom: 0 !important;

  	/* remove width constraints */
  	max-width: none !important;
  	width: 100% !important;
	}

	/* If alignwide adds auto side margins */
	.hero-split .hero-split__text .wp-block-group.alignwide{
  	margin-left: 0 !important;
  	margin-right: 0 !important;
	}

	/* If theme adds global padding to the group */
	.hero-split .hero-split__text .wp-block-group.has-global-padding{
  	padding-left: 1rem !important;
  	padding-right: 1rem !important;
	}

	/* prevent long text from pushing off-screen */
	.hero-split .hero-split__text{
  	overflow-wrap: anywhere;
  	word-break: break-word;
	}

	/* ============================
   	IMAGE COLUMN FULL BLEED
   	============================ */

	.hero-split .wp-block-columns > .wp-block-column.hero-split__bleed-right,
	.hero-split .wp-block-columns > .wp-block-column.hero-split__bleed-left{
  	width: 100vw !important;
  	position: relative !important;
  	left: 50% !important;
  	transform: translateX(-50%) !important;
  	margin-left: 0 !important;
  	margin-right: 0 !important;

  	padding: 0 !important;
	}


	.hero-split .wp-block-cover.hero-split__bleed-right,
	.hero-split .wp-block-cover.hero-split__bleed-left{
  	width: 100% !important;
  	margin: 0 !important;
  	left: auto !important;
  	transform: none !important;
	}

	.hero-split .hero-split__bleed-right > .wp-block-cover,
	.hero-split .hero-split__bleed-left  > .wp-block-cover{
  	width: 100% !important;
  	margin-left: 0 !important;
  	margin-right: 0 !important;
	}

	/* Reduce mobile cover height -- Maybe set this with a variable... */
	.hero-split .hero-split__bleed-right > .wp-block-cover,
	.hero-split .hero-split__bleed-left  > .wp-block-cover{
  	height: clamp(200px, 42vw, 300px) !important;
  	min-height: 0 !important;
	}

	.hero-split .hero-split__bleed-right > .wp-block-cover[style],
	.hero-split .hero-split__bleed-left  > .wp-block-cover[style]{
  	min-height: 0 !important;
	}
}

/* ----------------------------------------
	FIX: prevent vw drift at <= 782px
------------------------------------------- */
@media (max-width: 782px){

	/* translate centering with margin math centering */
	.hero-split .wp-block-columns > .wp-block-column.hero-split__bleed-right,
	.hero-split .wp-block-columns > .wp-block-column.hero-split__bleed-left{
  	left: auto !important;
  	transform: none !important;

  	width: 100vw !important;
  	margin-left: calc(50% - 50vw) !important;
  	margin-right: calc(50% - 50vw) !important;
	}

	/* make sure the text wrapper isn't inheriting odd inline gutters */
	.hero-split .hero-split__text,
	.hero-split .hero-split__text .wp-block-group{
  	margin-left: 0 !important;
  	margin-right: 0 !important;
	}
}

@supports (width: 100dvw){
	@media (max-width: 782px){
  	.hero-split .wp-block-columns > .wp-block-column.hero-split__bleed-right,
  	.hero-split .wp-block-columns > .wp-block-column.hero-split__bleed-left{
		width: 100dvw !important;
		margin-left: calc(50% - 50dvw) !important;
		margin-right: calc(50% - 50dvw) !important;
  	}
	}
}





/* ==========================================
	Button Styles
	========================================== */


/* Button with arrows */

.button-with-arrow a.wp-block-button__link{
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 400;

	display: inline-flex;
	align-items: center;
	justify-content: flex-start;

	gap: 0.5rem;

	position: relative;
	text-decoration: none;
}

.wp-block-button .button-with-arrow  .button-with-arrow a.wp-block-button__link{
	display: inline-flex;
	align-items: center;
}

.button-with-arrow a.wp-block-button__link::after {
	content: "";
	display: inline-block;

	width: 1.55em;
	height: 1.05em;

	background-color: currentColor;

 -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2024%27%3E%3Cpath%20d%3D%27M6%2012H27%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27butt%27/%3E%3Cpath%20d%3D%27M20%204L28%2012L20%2020%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center/contain no-repeat;
   		mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2032%2024%27%3E%3Cpath%20d%3D%27M6%2012H27%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27butt%27/%3E%3Cpath%20d%3D%27M20%204L28%2012L20%2020%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center/contain no-repeat;

	transform: translateX(0);
	transition: transform 0.2s ease;
}

.button-with-arrow a.wp-block-button__link:hover::after,
.button-with-arrow a.wp-block-button__link:focus-visible::after {
	transform: translateX(6px);
}

/* Buttons with icons */
.wp-block-button.button-with-icon-left .wp-block-button__link,
.wp-block-button__link.button-with-icon-left {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;

	position: relative;
	text-align: left;
	text-decoration: none;

	padding: 0.9rem 1.25rem;
	padding-left: calc(1.25rem + 1.25rem + 0.75rem); /* left + icon + gap */

	line-height: 1;
}

.wp-block-button.button-with-icon-left .wp-block-button__link::before,
.wp-block-button__link.button-with-icon-left::before {
	content: "";
	position: absolute;
	left: 1.25rem;
	top: 50%;
	transform: translateY(-50%);

	width: 1.25rem;
	height: 1.25rem;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	transition: transform 0.2s ease, opacity 0.2s ease;
}

.wp-block-button__link.button-with-icon-left:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wp-block-button.button-with-icon-left .wp-block-button__link:hover::before,
.wp-block-button__link.button-with-icon-left:hover::before {
	transform: translateY(-50%) translateX(6px);
	/* opacity: 0.9;*/
}



/* ========================
	Stats Grid
	=========================*/

/* Base: 4 columns */
.wp-block-group.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
}

/* <= 960: 2 columns */
@media (max-width: 960px) {
	.wp-block-group.stats-grid {
  	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* <= 782: 1 column */
@media (max-width: 782px) {
	.wp-block-group.stats-grid {
  	grid-template-columns: 1fr;
	}
}

/* ========================
	Stats Grid - 3 Column
	=========================*/

/* Base: 3 columns */
.wp-block-group.stats-grid-3-col {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
}

/* <= 960: 3 columns */
@media (max-width: 960px) {
	.wp-block-group.stats-grid-3-col {
  	grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* <= 782: 1 column */
@media (max-width: 782px) {
	.wp-block-group.stats-grid-3-col {
  	grid-template-columns: 1fr;
	}
}

/*  ----------------------
	Avnos Footer - styles
---------------------  */

/* Footer / dark section social icons */
.wp-block-social-links.is-style-default .wp-social-link {
	border-radius: 6px;
	overflow: hidden;
}

.wp-block-social-links.is-style-default .wp-social-link {
	background-color: #fff;
	border-radius: 6px;
	padding: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-social-links.is-style-default .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}

.wp-block-social-links.is-style-default .wp-social-link svg {
	width: 18px;
	height: 18px;
}

.wp-block-social-links.is-style-default .wp-social-link:hover {
	transform: translateY(-2px);
}

/* ----------------------------------------
 	Media Break points
------------------------------------------- */


/* ----------------------------------------
 	Utility: Reverse columns on mobile
------------------------------------------- */
@media (max-width: 782px) {
	.reverse-columns-mobile {
  	flex-direction: column-reverse !important;
	}
}

/* =========================================
 	News grid — equal-height cards
		- Query Loop – Card Grid Spacing
 	========================================= */

@media (min-width: 782px) {

	/* News grid — equal-height cards */
	.news-grid .wp-block-post-template.is-layout-grid {
  	align-items: stretch; /* grid-level cross-axis stretch */
	}

	.news-grid .wp-block-post-template.is-layout-grid > li {
  	height: 100%;
	}

	.news-grid .wp-block-post-template.is-layout-grid > li > .wp-block-group {
  	height: 100%;
  	display: flex;
  	flex-direction: column;
	}

	.news-grid .wp-block-post-template.is-layout-grid > li > .wp-block-group > .wp-block-group {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
	}

	/* News Page Query Loop – Card Grid Spacing */
	.news-grid .wp-block-post-template.is-layout-grid {
  	row-gap: clamp(4rem, 8vw, 6.875rem); /* ~64px → ~110px */
	}

	/* Homepage Query Loop – Card Grid Spacing */
	.home-news-grid .news-grid .wp-block-post-template.is-layout-grid {
  	row-gap: clamp(2rem, 4vw, 3.5rem); /* ~32px → ~56px */
	}
}

/* <= 500  */
@media (max-width: 500px) {

	.hero-text {
  	padding-left: 1.5rem !important;
  	padding-right: 1.5rem !important;
	}

	.hero-text h1 br,
	.hero-text h2 br{
  	display: none;
	}

}

@media (min-width: 782px) {
	.footer-text-66 {
  	max-width: 66.6667%;
	}

	.content-6 {
  	max-width: 50%;
	}
}