/* ============================================================
   Principles Accordion — "The Principles Behind Our Practice"
   Scoped entirely under .ms-principles-accordion so it cannot
   leak into other WPBakery rows/sections.
   ============================================================ */

.ms-principles-accordion {
	--pa-text-dark: #333234;
	--pa-header-height: 100px;
	--pa-gap: 0;
	--pa-content-padding: 45px;
	--pa-content-maxwidth: 790px;

	display: flex;
	flex-direction: column;
	/* gap: var(--pa-gap); */
	width: 100%;
	font-family: var(--font-body), 'DM Sans', sans-serif;
	color: var(--pa-text-dark);
}

.ms-principles-accordion * {
	box-sizing: border-box;
}

/* ---------- Item ---------- */
.ms-principles-accordion .ms-pa-item {
	width: 100%;
}

/* ---------- Header ---------- */
.ms-principles-accordion .ms-pa-header {
	display: flex;
	align-items: center;
	width: 100%;
	/* min-height: var(--pa-header-height); */
	padding: 22px 40px;
	gap: 20px;
	background-color: var(--item-color, #f6e8b2);
	border: 0;
	cursor: pointer;
	text-align: left;
	appearance: none;
	transition: background-color 0.25s ease;
}

.ms-principles-accordion .ms-pa-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--icon-color, var(--pa-text-dark));
}

.ms-principles-accordion .ms-pa-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Icons ship with hard-coded fills; force currentColor so the
   client's per-item icon color (--icon-color) drives the tint. */
.ms-principles-accordion .ms-pa-icon svg [fill],
.ms-principles-accordion .ms-pa-icon svg path {
	fill: currentColor;
}

.ms-principles-accordion .ms-pa-heading {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--pa-gap);
	min-width: 0;
}

.ms-principles-accordion .ms-pa-eyebrow {
	margin: 0;
	font-family: var(--font-body), 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pa-text-dark);
	opacity: 0.75;
}

.ms-principles-accordion .ms-pa-title {
	margin: 0;
	font-family: var(--font-heading), 'Noyh R', serif;
	font-weight: 500;
	font-size: 35px;
	line-height: 0.9;
	text-transform: uppercase;
	color: var(--pa-text-dark);
}

.ms-principles-accordion .ms-pa-arrow {
	flex: 0 0 auto;
	width: 16px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pa-text-dark);
	transition: transform 0.3s ease;
}

.ms-principles-accordion .ms-pa-item.is-open .ms-pa-arrow {
	transform: rotate(90deg);
}

.ms-principles-accordion .ms-pa-arrow svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Panel ---------- */
.ms-principles-accordion .ms-pa-panel {
	overflow: hidden;
	max-height: 0;
	background-color: var(--panel-color, color-mix(in srgb, var(--item-color, #f6e8b2) 55%, white));
	transition: max-height 0.4s ease;
}

.ms-principles-accordion .ms-pa-item.is-open .ms-pa-panel {
	max-height: 2000px;
}

.ms-principles-accordion .ms-pa-panel-inner {
	padding: var(--pa-content-padding) 25px;
}

.ms-principles-accordion .ms-pa-panel-content-wrap {
	/* max-width: var(--pa-content-maxwidth); */
	padding-right: 80px;
	padding-left: 80px;
	margin: 0 auto;
}

.ms-principles-accordion .ms-pa-panel-content-wrap > :first-child {
	margin-top: 0;
}

.ms-principles-accordion .ms-pa-panel-content-wrap > :last-child {
	margin-bottom: 0;
}

.ms-principles-accordion .ms-pa-panel-content-wrap blockquote > :last-child {
	margin-bottom: 0;
}

.ms-principles-accordion .ms-pa-panel-inner p,
.ms-principles-accordion .ms-pa-panel-inner ul,
.ms-principles-accordion .ms-pa-panel-inner ol {
	margin: 0 0 12px;
	font-family: var(--font-body), 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--pa-text-dark);
}

.ms-principles-accordion .ms-pa-panel-inner ul,
.ms-principles-accordion .ms-pa-panel-inner ol {
	padding-left: 20px;
}

.ms-principles-accordion .ms-pa-panel-inner ul li,
.ms-principles-accordion .ms-pa-panel-inner ol li {
	margin-bottom: 8px;
}

.ms-principles-accordion .ms-pa-panel-inner strong {
	font-weight: 600;
}

.ms-principles-accordion .ms-pa-panel-inner blockquote {
	margin: 25px 0 0;
	padding: 0 0 0 30px;
	border-left: 2px solid var(--icon-color, var(--pa-text-dark));
}

.ms-principles-accordion .ms-pa-panel-inner blockquote p {
	margin: 0 0 8px;
}

.ms-principles-accordion .ms-pa-panel-inner blockquote cite {
	display: block;
	font-style: normal;
	font-weight: 700;
}

/* ---------- Focus / accessibility ---------- */
.ms-principles-accordion .ms-pa-header:focus-visible {
	outline: 2px solid var(--pa-text-dark);
	outline-offset: -4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.ms-principles-accordion {
		--pa-gap: 3px;
		--pa-header-height: 84px;
		--pa-content-padding: 28px;
	}

	.ms-principles-accordion .ms-pa-header {
		padding: 18px 20px;
		gap: 16px;
	}

	.ms-principles-accordion .ms-pa-icon {
		width: 32px;
		height: 32px;
	}

	.ms-principles-accordion .ms-pa-title {
		font-size: 24px!important;
	}

	.ms-principles-accordion .ms-pa-eyebrow {
		font-size: 14px;
	}

	.ms-principles-accordion .ms-pa-arrow {
		width: 12px;
		height: 18px;
	}

	.ms-principles-accordion .ms-pa-panel-inner p,
	.ms-principles-accordion .ms-pa-panel-inner ul,
	.ms-principles-accordion .ms-pa-panel-inner ol {
		font-size: 16px;
	}

	.ms-principles-accordion .ms-pa-panel-inner blockquote {
		padding-left: 20px;
	}

	.ms-principles-accordion .ms-pa-panel-inner {
		padding: var(--pa-content-padding) 20px;
	}

	.ms-principles-accordion .ms-pa-panel-content-wrap {
		padding-right: 48px;
		padding-left: 48px;
	}
}

@media (max-width: 480px) {
	.ms-principles-accordion .ms-pa-eyebrow {
        font-size: 12px;
    }

	.ms-principles-accordion .ms-pa-title {
		font-size: 20px!important;
	}

	.ms-principles-accordion .ms-pa-header {
		flex-wrap: nowrap;
	}

	.ms-principles-accordion .ms-pa-panel-content-wrap {
		padding-right: 0;
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ms-principles-accordion .ms-pa-header,
	.ms-principles-accordion .ms-pa-panel,
	.ms-principles-accordion .ms-pa-arrow {
		transition: none !important;
	}
}