/* ===========================================================
   N4 Accordion Widget — styles
   Scoped under .n4-accordion-widget so nothing here leaks into
   the rest of the theme. Rebuilt from the original Webflow
   export CSS, keeping only what the accordion component needs.
   =========================================================== */

@font-face {
	font-family: "Montserrat Notion4";
	src: url(https://cdn.prod.website-files.com/6901e209159cae2b506a6ae2/6901e209159cae2b506a6b35_Montserrat-VariableFont_wght.woff2) format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

.n4-accordion-widget {
	--base-color-brand--n4-teal: #1e3139;
	--base-color-brand--n4-mint: #51a796;
	--base-color-neutrals--neutral-lighter: #cccccc;
	--base-color-neutrals--neutral-light: #aaaaaa;
	--n4-white: #ffffff;
	--n4-black: #000000;

	font-family: "Montserrat Notion4", Arial, sans-serif;
	color: var(--base-color-brand--n4-teal);
	box-sizing: border-box;
	overflow-anchor: none;
}

.n4-accordion-widget *,
.n4-accordion-widget *:before,
.n4-accordion-widget *:after {
	box-sizing: border-box;
}

.n4-accordion-widget img {
	max-width: 100%;
	vertical-align: middle;
	display: inline-block;
}

.n4-accordion-widget strong {
	font-weight: 700;
}

.n4-accordion-widget .overflow-hidden {
	overflow: hidden;
}

/* --- Layout helpers -------------------------------------- */

.n4-accordion-widget .padding-global {
	position: relative;
	z-index: 1;
	padding-left: 0;
	padding-right: 0;
}

.n4-accordion-widget .container-large {
	position: relative;
	width: 100%;
	max-width: 90rem;
	margin-left: auto;
	margin-right: auto;
}

.n4-accordion-widget .padding-top {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.n4-accordion-widget .padding-xhuge {
	padding: 0;
}

/* --- Heading ---------------------------------------------- */

.n4-accordion-widget .heading-style-h2 {
	margin: 0 0 0.5rem;
	text-transform: uppercase;
	text-wrap: balance;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 100%;
}

/* --- Rich text (description inside each panel) ------------ */

.n4-accordion-widget .text-rich-text h1,
.n4-accordion-widget .text-rich-text h2 {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}
.n4-accordion-widget .text-rich-text h3,
.n4-accordion-widget .text-rich-text h4 {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}
.n4-accordion-widget .text-rich-text h5,
.n4-accordion-widget .text-rich-text h6 {
	margin-top: 1.25rem;
	margin-bottom: 1rem;
}
.n4-accordion-widget .text-rich-text p {
	margin-bottom: 1rem;
}
.n4-accordion-widget .text-rich-text ul {
	margin-bottom: 1.5rem;
	padding-left: 1rem;
}
.n4-accordion-widget .text-rich-text ol {
	margin-bottom: 1.5rem;
	padding-left: 1.25rem;
}
.n4-accordion-widget .text-rich-text blockquote {
	margin-top: 2rem;
	margin-bottom: 2rem;
	border-left: 0.25rem solid #e2e2e2;
	padding: 0 1.25rem;
	font-size: 1.25rem;
	line-height: 1.5;
}
.n4-accordion-widget .text-rich-text li {
	margin-bottom: 1rem;
}

/* --- Accordion structure ------------------------------------ */

.n4-accordion-widget .accordion-component {
	margin-top: 4rem;
}

.n4-accordion-widget .accordion-flex {
	display: flex;
	border-left: 1px solid var(--base-color-neutrals--neutral-lighter);
}

.n4-accordion-widget .accordion-item {
	position: relative;
	display: flex;
	overflow: hidden;
	flex: 0 auto;
	width: 5rem;
	border-style: solid solid solid none;
	border-width: 1px;
	border-color: var(--base-color-neutrals--neutral-lighter);
	transition: flex 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.n4-accordion-widget .accordion-item.is-active {
	flex: 1 1 auto;
}

.n4-accordion-widget .accordion-tab {
	position: relative;
	display: flex;
	flex-flow: column;
	flex: none;
	justify-content: space-between;
	width: 5rem;
	margin-bottom: 0;
	padding: 2rem 1.5rem;
	color: var(--base-color-neutrals--neutral-light);
	cursor: pointer;
}

.n4-accordion-widget .accordion-number {
	width: 1.75rem;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 100%;
}

.n4-accordion-widget .accordion-tab-title {
	margin-top: auto;
	margin-bottom: 0;
	text-transform: uppercase;
	text-wrap: balance;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 140%;
	transition: color 0.3s ease;
}

.n4-accordion-widget .accordion-item.is-active .accordion-number,
.n4-accordion-widget .accordion-item.is-active .accordion-tab-title {
	color: var(--base-color-brand--n4-mint);
}

/* Radio input + custom dot (kept for accessible native control) */

.n4-accordion-widget .accordion-tab-radio {
	position: absolute;
	inset: 0%;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

/* Panel / content ------------------------------------------- */

.n4-accordion-widget .accordion-content {
	min-width: 40rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.n4-accordion-widget .accordion-padding {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	padding: 3rem;
	min-height: 0;
	overflow: hidden;
}

.n4-accordion-widget .accordion-wrapper {
	display: flex;
	flex-flow: column;
	grid-template-rows: auto;
	grid-template-columns: 1fr 1fr;
	grid-auto-columns: 1fr;
	grid-column-gap: 2rem;
	grid-row-gap: 2rem;
	place-items: center;
	width: 45vw;
	opacity: 0;
	transform: scale(0.95);
	transition: transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
		opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.n4-accordion-widget .accordion-item.is-active .accordion-wrapper {
	opacity: 1;
	transform: scale(1);
}

.n4-accordion-widget .accordion-image {
	position: relative;
	z-index: 0;
	width: 100%;
	padding-top: 60%;
}

.n4-accordion-widget .image-cover {
	position: absolute;
	inset: 0%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.n4-accordion-widget .image-cover.is-loaded {
	opacity: 1;
}

.n4-accordion-widget .z-index-1 {
	position: relative;
	z-index: 1;
}

/* ===========================================================
   Responsive breakpoints (matching the original design)
   =========================================================== */

@media screen and (max-width: 991px) {
	.n4-accordion-widget .heading-style-h2 {
		font-size: 2rem;
	}
	.n4-accordion-widget .accordion-item {
		width: 4.5rem;
	}
	.n4-accordion-widget .accordion-tab {
		width: 4.5rem;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.n4-accordion-widget .accordion-content {
		font-size: 0.875rem;
	}
	.n4-accordion-widget .accordion-padding {
		padding-left: 1rem;
	}
	.n4-accordion-widget .accordion-wrapper {
		grid-template-columns: 1fr;
		grid-column-gap: 2rem;
		grid-row-gap: 2rem;
		width: 55vw;
	}
}

@media screen and (max-width: 767px) {
	.n4-accordion-widget .heading-style-h2 {
		font-size: 1.75rem;
	}
	.n4-accordion-widget .accordion-component {
		margin-top: 3rem;
	}
	.n4-accordion-widget .accordion-flex {
		flex-flow: column;
	}
	.n4-accordion-widget .accordion-item {
		flex-flow: column;
		width: 100%;
		height: 4rem;
		transition: height 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
			flex 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}
	.n4-accordion-widget .accordion-item.is-active {
		height: auto;
	}
	.n4-accordion-widget .accordion-tab {
		flex-flow: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 4rem;
		padding: 1.2rem 5%;
	}
	.n4-accordion-widget .accordion-content {
		flex: 0 auto;
		width: 100%;
		min-width: 0;
		height: auto;
	}
	.n4-accordion-widget .accordion-padding {
		padding-top: 0;
		padding-left: 5%;
		padding-right: 5%;
	}
	.n4-accordion-widget .accordion-image {
		margin-top: 0;
		padding-top: 55%;
	}
	.n4-accordion-widget .accordion-number {
		flex: 1;
		width: 2rem;
	}
	.n4-accordion-widget .accordion-tab-title {
		margin: 0;
		writing-mode: horizontal-tb;
		transform: rotate(0);
		font-size: 1.25rem;
		line-height: 100%;
	}
	.n4-accordion-widget .accordion-wrapper {
		display: flex;
		flex-flow: column-reverse;
		width: 100%;
		opacity: 1;
		grid-column-gap: 2rem;
		grid-row-gap: 2rem;
	}
}

@media screen and (max-width: 479px) {
	.n4-accordion-widget .accordion-item,
	.n4-accordion-widget .accordion-tab {
		height: 3rem;
	}
	.n4-accordion-widget .accordion-number,
	.n4-accordion-widget .accordion-tab-title {
		font-size: 1rem;
	}
	.n4-accordion-widget .accordion-wrapper {
		grid-column-gap: 1.5rem;
		grid-row-gap: 1.5rem;
	}
}

/* ===========================================================
   Elementor editor niceties
   =========================================================== */

.elementor-editor-active .n4-accordion-widget .accordion-content {
	transition: none;
}