html,
body {
	overflow-x: clip;
}
/* ==========================================================================
   VANE Shared Components
   Site-wide patterns only. Page/feature-specific CSS stays in its own file
   (portfolio.css, directory-page-styles.css, post-template.css).

   EDITING: append within the relevant numbered section. Do not replace
   whole blocks — diff against git before any large edit.

   ENQUEUE (functions.php):
   add_action( 'wp_enqueue_scripts', function () {
       wp_enqueue_style(
           'vane-components',
           get_stylesheet_directory_uri() . '/vane-components.css',
           array( 'elementor-frontend' ),
           filemtime( get_stylesheet_directory() . '/vane-components.css' )
       );
   }, 20 );
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Buttons — primary (mint)
   Apply class: vane-btn-primary  (Advanced → CSS Classes)
   -------------------------------------------------------------------------- */

.vane-btn-primary .elementor-button:hover,
.vane-btn-primary .elementor-button:focus-visible {
	background-color: var(--vane-navy, #00385E) !important;
	color: #fff !important;
	box-shadow: 0 3px 0 0 var(--vane-mint, #ABE2C7) !important;
}

.vane-btn-primary .elementor-button:active {
	box-shadow: 0 1px 0 0 var(--vane-mint, #ABE2C7);
	transform: translateY(2px);
}


/* --------------------------------------------------------------------------
   1b. Text link buttons — icon + label + underline
   Apply class: vane-btn-text  plus one of:
       vane-btn-text--navy   (light backgrounds — header)
       vane-btn-text--mint   (navy backgrounds — footer)

   Set the Elementor button to Background: none, Border: none — this file
   owns the underline. Colors key off `color` so label, icon, and underline
   change together.
   -------------------------------------------------------------------------- */

.vane-btn-text .elementor-button {
	background-color: transparent;
	border: none;
	border-bottom: 2px solid currentColor;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	box-shadow: none;
	transition: color .18s ease, border-color .18s ease;
}

.vane-btn-text .elementor-button-icon svg,
.vane-btn-text .elementor-button-icon svg * {
	fill: currentColor !important;
}

/* Navy on light — header */
.vane-btn-text--navy .elementor-button {
	color: var(--vane-navy, #00385E);
}

.vane-btn-text--navy .elementor-button:hover,
.vane-btn-text--navy .elementor-button:focus-visible {
	color: var(--vane-mint, #ABE2C7) !important;
	border-bottom-color: var(--vane-mint, #ABE2C7) !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.vane-btn-text--navy .elementor-button:hover .elementor-button-icon svg,
.vane-btn-text--navy .elementor-button:hover .elementor-button-icon svg *,
.vane-btn-text--navy .elementor-button:focus-visible .elementor-button-icon svg,
.vane-btn-text--navy .elementor-button:focus-visible .elementor-button-icon svg * {
	fill: var(--vane-mint, #ABE2C7) !important;
}

.vane-btn-text--navy .elementor-button:focus-visible {
	outline: 2px solid var(--vane-navy, #00385E);
	outline-offset: 4px;
}

/* Mint on navy — footer */
.vane-btn-text--mint .elementor-button {
	color: var(--vane-mint, #ABE2C7);
}

.vane-btn-text--mint .elementor-button:hover,
.vane-btn-text--mint .elementor-button:focus-visible {
	color: #fff !important;
	border-bottom-color: #fff !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.vane-btn-text--mint .elementor-button:hover .elementor-button-icon svg,
.vane-btn-text--mint .elementor-button:hover .elementor-button-icon svg *,
.vane-btn-text--mint .elementor-button:focus-visible .elementor-button-icon svg,
.vane-btn-text--mint .elementor-button:focus-visible .elementor-button-icon svg * {
	fill: #fff !important;
}

.vane-btn-text--mint .elementor-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}


/* --------------------------------------------------------------------------
   2. Icons — arrow inherits button text color
   -------------------------------------------------------------------------- */

/* Rendered inline by Elementor's icon control.
   Universal selector, not `path` — Figma exports circle/rect/polygon too. */
.vane-btn-primary .elementor-button-icon svg,
.vane-btn-primary .elementor-button-icon svg * {
	fill: currentColor !important;
}


/* --------------------------------------------------------------------------
   3. Navigation — link underlines
   Apply class: vane-nav  (Nav Menu widget)
   Member sub-nav also takes: vane-nav vane-nav--member
   Requires Nav Menu widget → Style → Pointer: None

   Underline is a background gradient rather than border-bottom so
   content-box origin keeps it tight to the text, independent of the
   widget's horizontal padding.
   -------------------------------------------------------------------------- */

.vane-nav .elementor-nav-menu a.elementor-item,
.vane-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
	background-image: linear-gradient(transparent, transparent);
	background-size: 100% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-origin: content-box;
	transition: background-image .16s ease;
}

.vane-nav .elementor-nav-menu a.elementor-item:hover,
.vane-nav .elementor-nav-menu a.elementor-item:focus-visible,
.vane-nav .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.vane-nav .elementor-nav-menu--dropdown a.elementor-sub-item:focus-visible {
	background-image: linear-gradient(
		var(--vane-mint, #ABE2C7),
		var(--vane-mint, #ABE2C7)
	);
}

/* Dropdown — anchor shrinks to its text so the underline hugs the label */
.vane-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
	display: inline-block;
	width: auto;
	background-color: transparent !important;
}

.vane-nav ul.elementor-nav-menu--dropdown {
	box-shadow: 0 6px 20px rgba(0, 56, 94, .16);
	border-radius: 2px;
}

.vane-nav .elementor-nav-menu--dropdown a.elementor-sub-item:active,
.vane-nav .elementor-nav-menu--dropdown a.elementor-sub-item-active {
	background-image: linear-gradient(
		var(--vane-navy, #00385E),
		var(--vane-navy, #00385E)
	);
}

/* Member sub-nav — navy underline on the greige bar */
.vane-nav--member .elementor-nav-menu a.elementor-item:hover,
.vane-nav--member .elementor-nav-menu a.elementor-item:focus-visible {
	background-image: linear-gradient(
		var(--vane-navy, #00385E),
		var(--vane-navy, #00385E)
	);
}

/* Footer nav — expose the About submenu inline at tablet and below.
   A hover-triggered dropdown has no equivalent on touch, so the child
   items get shown as an indented list instead.
   Apply class: vane-footer-nav */

@media (max-width: 1024px) {

	.vane-footer-nav .elementor-nav-menu ul.sub-menu {
		display: block !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		box-shadow: none;
		background: transparent;
		min-width: 0;
		padding: 0;
		margin: 0 auto;		
		text-align: center;
		font-size: 14px !important;
	}
	

	.vane-footer-nav .elementor-nav-menu ul.sub-menu a.elementor-sub-item {
		padding-left: 0;
		padding-right: 0;
	}

	/* The caret no longer opens anything. */
	.vane-footer-nav .elementor-nav-menu .sub-arrow,
	.vane-footer-nav .elementor-nav-menu .fa-caret-down,
	.vane-footer-nav .elementor-nav-menu .e-font-icon-svg-e-eicon-caret-down {
		display: none !important;
	}
	
	
	.vane-footer-nav .elementor-nav-menu ul.sub-menu li {
		text-align: center;
	}

	.vane-footer-nav .elementor-nav-menu ul.sub-menu a.elementor-sub-item {
		padding-left: 0;
		padding-right: 0;
		color: var(--vane-mint, #ABE2C7) !important;
		justify-content: center;
		text-align: center;
	}
}


/* Header nav — one line down to laptop widths.
   nowrap prevents the break; the clamps make sure it fits rather than
   overflowing. Above 1440px this settles at the original values. */
@media (min-width: 1025px) {
	.vane-nav .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
		flex-wrap: nowrap;
	}
	.vane-nav .elementor-nav-menu--main .elementor-item {
		padding-left: clamp(10px, 1.4vw, 24px) !important;
		padding-right: clamp(10px, 1.4vw, 24px) !important;
		white-space: nowrap;
	}
	.vane-nav .elementor-nav-menu .elementor-item {
		font-size: clamp(0.9375rem, 1.05vw, 1.125rem) !important;
	}
}
/* --------------------------------------------------------------------------
   4. Section headers — eyebrow, headline, subhead
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   5. Cards & panels — greige surfaces, hairline barriers
   -------------------------------------------------------------------------- */


/* Wave dividers — in flow, flush to the section edge. */
.vane-wave img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: -1px;
	vertical-align: bottom;
}


/* --------------------------------------------------------------------------
   6. Carousels — mobile swipe affordance
   Apply classes:
       vane-swipe-carousel   (carousel's outer wrapper)
       vane-swipe            (label element, placed above the track)
       vane-swipe-arrows     (optional — wrapper around custom arrow markup)

   Arrows are a desktop affordance; on touch the gesture is the interaction.
   Below 768px the arrows hide and a "Swipe" label takes their place.

   Color keys off --vane-swipe-color so a single override on the wrapper
   changes label, arrow, and underline together. Mint by default —
   see the contrast note before using it on a light background.

   Ported from .vane-news__swipe (vane-news.css), which keeps its own copy —
   consolidate post-launch, not before.
   -------------------------------------------------------------------------- */

.vane-swipe {
	display: none;
	align-items: center;
	gap: 6px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--vane-swipe-color, var(--vane-mint, #ABE2C7));
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vane-swipe-color, var(--vane-mint, #ABE2C7));
}

/* Accepts an <img> (matches news) or an inline <svg>. currentColor only
   applies to inline SVG — an <img> keeps whatever color it was exported. */
.vane-swipe img,
.vane-swipe svg {
	width: 8px;
	height: auto;
	display: block;
	flex: 0 0 auto;
}

.vane-swipe svg,
.vane-swipe svg * {
	fill: currentColor;
}

/* Heading + arrows row. Harmless if the carousel has no __head child. */
.vane-swipe-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

@media (max-width: 767px) {

.vane-swipe {
		display: flex;
		width: fit-content;
		margin-left: auto;
	margin-top: 15px;
		font-size: 15px;
		letter-spacing: .08em;
		gap: 8px;
	}

	.vane-swipe img,
	.vane-swipe svg {
		width: 10px;
	}

	/* Covers custom markup, bare Swiper, and Elementor's own button
	   wrappers, so this holds whichever the carousel turns out to be. */
	.vane-swipe-carousel .vane-swipe-arrows,
	.vane-swipe-carousel .swiper-button-next,
	.vane-swipe-carousel .swiper-button-prev,
	.vane-swipe-carousel .elementor-swiper-button,
	.vane-swipe-carousel .elementor-swiper-button-prev,
	.vane-swipe-carousel .elementor-swiper-button-next {
		display: none !important;
	}

	.vane-swipe-carousel__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 16px;
	}
}

/* Attention nudge — mobile only, and it stops.
   Three cycles then rest: enough to catch the eye on arrival, not a
   permanently moving element competing with the content. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	.vane-swipe img,
	.vane-swipe svg {
		animation: vane-swipe-nudge 1.5s ease-in-out .8s 3 both;
	}
}

@keyframes vane-swipe-nudge {
	0%   { transform: translateX(0); }
	18%  { transform: translateX(6px); }
	36%  { transform: translateX(-3px); }
	54%  { transform: translateX(6px); }
	72%  { transform: translateX(-2px); }
	100% { transform: translateX(0); }
}