/* ==========================================================================
   Block: SL Vertical Tabs
   ========================================================================== */

.sl-vertical-tabs {
	background-color: var(--sl-color-green);
}

.sl-vertical-tabs__inner {
	display: flex;
	flex-direction: column;
	gap: 64px;
	max-width: var(--sl-content-width);
	margin: 0 auto;
	padding: 160px var(--sl-content-padding);
}

/* --------------------------------------------------------------------------
   Top: Text (Headline + Copy) full width
   -------------------------------------------------------------------------- */

.sl-vertical-tabs__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* --------------------------------------------------------------------------
   Body Row: Tabs left, Panels right
   -------------------------------------------------------------------------- */

.sl-vertical-tabs__body {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.sl-vertical-tabs__headline {
	color: var(--sl-color-white);
	margin: 0;
}

.sl-vertical-tabs__copy {
	color: var(--sl-color-white);
}

.sl-vertical-tabs__copy p {
	margin: 0;
}

.sl-vertical-tabs__copy p + p {
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Tab Navigation (Desktop)
   -------------------------------------------------------------------------- */

.sl-vertical-tabs__nav {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 320px;
	flex-shrink: 0;
}

.sl-vertical-tabs__tab {
	display: flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.sl-vertical-tabs__tab-indicator {
	display: block;
	width: 4px;
	align-self: stretch;
	border-radius: 4px;
	background-color: transparent;
	transition: background-color 0.3s ease;
}

.sl-vertical-tabs__tab.is-active .sl-vertical-tabs__tab-indicator {
	background-color: var(--sl-color-yellow);
}

.sl-vertical-tabs__tab-label {
	color: var(--sl-color-white);
	transition: color 0.3s ease;
}

.sl-vertical-tabs__tab.is-active .sl-vertical-tabs__tab-label {
	color: var(--sl-color-yellow);
}

.sl-vertical-tabs__tab:hover .sl-vertical-tabs__tab-label {
	color: var(--sl-color-yellow);
}

.sl-vertical-tabs__tab:focus-visible {
	outline: 2px solid var(--sl-color-yellow);
	outline-offset: 4px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Right Column: Content Panels (Desktop)
   -------------------------------------------------------------------------- */

.sl-vertical-tabs__right {
	flex: 1;
	min-width: 0;
}

.sl-vertical-tabs__panel {
	display: none;
}

.sl-vertical-tabs__panel.is-active {
	display: block;
}

.sl-vertical-tabs__panel-content {
	background-color: var(--sl-color-grey);
	border-radius: 4px;
	padding: 34px;
	color: var(--sl-color-black);
}

/* WYSIWYG Content Styles */
.sl-vertical-tabs__panel-content p {
	margin: 0 0 8px;
}

.sl-vertical-tabs__panel-content p:last-child {
	margin-bottom: 0;
}

.sl-vertical-tabs__panel-content strong {
	font-weight: 800;
}

.sl-vertical-tabs__panel-content ul,
.sl-vertical-tabs__panel-content ol {
	margin: 0 0 16px;
	padding-left: 24px;
}

.sl-vertical-tabs__panel-content ul:last-child,
.sl-vertical-tabs__panel-content ol:last-child {
	margin-bottom: 0;
}

.sl-vertical-tabs__panel-content li {
	margin-bottom: 4px;
	line-height: 1.6;
}

.sl-vertical-tabs__panel-content li:last-child {
	margin-bottom: 0;
}

.sl-vertical-tabs__panel-content h4,
.sl-vertical-tabs__panel-content h5 {
	font-family: var(--sl-font-secondary);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.1;
	margin: 0 0 16px;
	color: var(--sl-color-black);
}

.sl-vertical-tabs__panel-content h4:not(:first-child),
.sl-vertical-tabs__panel-content h5:not(:first-child) {
	margin-top: 24px;
}

/* Inline Links – Yellow underline style */
.sl-vertical-tabs__panel-content a {
	color: var(--sl-color-black);
	text-decoration: none;
	background-image: linear-gradient(var(--sl-color-yellow), var(--sl-color-yellow));
	background-size: 100% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.2s ease;
}

.sl-vertical-tabs__panel-content a:hover,
.sl-vertical-tabs__panel-content a:focus {
	background-size: 100% 100%;
}

/* --------------------------------------------------------------------------
   Mobile: Accordion
   -------------------------------------------------------------------------- */

.sl-vertical-tabs__accordion {
	display: none;
}

/* --------------------------------------------------------------------------
   Mobile Styles
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sl-vertical-tabs__inner {
		gap: 40px;
		padding: 80px var(--sl-content-padding-mobile);
	}

	/* Hide desktop body row (tabs + panels) on mobile — accordion takes over */
	.sl-vertical-tabs__body {
		display: none;
	}

	/* Show accordion on mobile */
	.sl-vertical-tabs__accordion {
		display: flex;
		flex-direction: column;
		gap: 24px;
		width: 100%;
	}

	/* Accordion Header */
	.sl-vertical-tabs__accordion-header {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		background: none;
		border: none;
		padding: 2px 0;
		cursor: pointer;
		text-align: left;
	}

	.sl-vertical-tabs__accordion-indicator {
		display: block;
		width: 4px;
		align-self: stretch;
		border-radius: 4px;
		background-color: transparent;
		transition: background-color 0.3s ease;
		flex-shrink: 0;
	}

	.sl-vertical-tabs__accordion-item.is-open .sl-vertical-tabs__accordion-indicator {
		background-color: var(--sl-color-yellow);
	}

	.sl-vertical-tabs__accordion-label {
		flex: 1;
		color: var(--sl-color-white);
		transition: color 0.3s ease;
	}

	.sl-vertical-tabs__accordion-item.is-open .sl-vertical-tabs__accordion-label {
		color: var(--sl-color-yellow);
	}

	.sl-vertical-tabs__accordion-icon {
		width: 24px;
		height: 24px;
		color: var(--sl-color-white);
		flex-shrink: 0;
		transition: transform 0.3s ease, color 0.3s ease;
	}

	.sl-vertical-tabs__accordion-item.is-open .sl-vertical-tabs__accordion-icon {
		transform: rotate(180deg);
		color: var(--sl-color-yellow);
	}

	.sl-vertical-tabs__accordion-header:focus-visible {
		outline: 2px solid var(--sl-color-yellow);
		outline-offset: 4px;
		border-radius: 2px;
	}

	/* Accordion Panel */
	.sl-vertical-tabs__accordion-panel[hidden] {
		display: none;
	}

	.sl-vertical-tabs__accordion-content {
		background-color: var(--sl-color-grey);
		border-radius: 4px;
		padding: 32px 24px;
		margin-top: 16px;
		color: var(--sl-color-black);
	}

	/* WYSIWYG Content Styles (Accordion) */
	.sl-vertical-tabs__accordion-content p {
		margin: 0 0 8px;
	}

	.sl-vertical-tabs__accordion-content p:last-child {
		margin-bottom: 0;
	}

	.sl-vertical-tabs__accordion-content strong {
		font-weight: 800;
	}

	.sl-vertical-tabs__accordion-content ul,
	.sl-vertical-tabs__accordion-content ol {
		margin: 0 0 16px;
		padding-left: 24px;
	}

	.sl-vertical-tabs__accordion-content ul:last-child,
	.sl-vertical-tabs__accordion-content ol:last-child {
		margin-bottom: 0;
	}

	.sl-vertical-tabs__accordion-content li {
		margin-bottom: 4px;
		line-height: 1.6;
	}

	.sl-vertical-tabs__accordion-content li:last-child {
		margin-bottom: 0;
	}

	.sl-vertical-tabs__accordion-content h4,
	.sl-vertical-tabs__accordion-content h5 {
		font-family: var(--sl-font-secondary);
		font-weight: 800;
		font-size: 18px;
		line-height: 1.1;
		margin: 0 0 16px;
		color: var(--sl-color-black);
	}

	.sl-vertical-tabs__accordion-content h4:not(:first-child),
	.sl-vertical-tabs__accordion-content h5:not(:first-child) {
		margin-top: 24px;
	}

	/* Inline Links (Accordion) */
	.sl-vertical-tabs__accordion-content a {
		color: var(--sl-color-black);
		text-decoration: none;
		background-image: linear-gradient(var(--sl-color-yellow), var(--sl-color-yellow));
		background-size: 100% 2px;
		background-position: 0 100%;
		background-repeat: no-repeat;
		transition: background-size 0.2s ease;
	}

	.sl-vertical-tabs__accordion-content a:hover,
	.sl-vertical-tabs__accordion-content a:focus {
		background-size: 100% 100%;
	}
}