/* ================================================
   Key Strategic Widget — frontend.css
   ================================================ */

.ksw-wrapper {
	position: relative;
	box-sizing: border-box;
}

.ksw-inner {
	margin: 0 auto;
}

/* ---- Two-column layout ---- */
.ksw-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ksw-column-gap, 48px);
	align-items: start;
	min-width: 0;
}

/* ---- Left column ---- */
.ksw-content-left {
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: sticky;
	top: var(--ksw-sticky-offset, 260px);
	align-self: start;
}

.ksw-heading {
	margin: 0 0 16px;
	color: var(--ksw-heading-color, #003B46);
}

.ksw-body {
	margin: 0;
	color: var(--ksw-body-color, #4a5568);
	line-height: 1.7;
}

.ksw-body p:last-child {
	margin-bottom: 0;
}

/* ---- Right column / Items ---- */
.ksw-content-right {
	display: flex;
	flex-direction: column;
	gap: var(--ksw-item-gap, 16px);
	min-width: 0;
}

/* ---- Item ---- */
.ksw-item {
	border-left: var(--ksw-border-width, 3px) solid var(--ksw-border-color, #003B46);
	padding: 16px 16px 16px 20px;
	background: transparent;
	border-top: none;
	border-right: none;
	border-bottom: none;
}

.ksw-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-width: 0;
	cursor: pointer;
}

.ksw-item-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--ksw-title-color, #003B46);
	text-transform: none;
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 0;
}

/* ---- +/- Toggle ---- */
.ksw-item-toggle {
	position: relative;
	width: var(--ksw-icon-size, 20px);
	height: var(--ksw-icon-size, 20px);
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.ksw-icon-h,
.ksw-icon-v {
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--ksw-icon-color, #003B46);
	border-radius: 1px;
}

/* Horizontal bar (always visible — the minus) */
.ksw-icon-h {
	width: var(--ksw-icon-size, 20px);
	height: 2px;
	transform: translate(-50%, -50%);
}

/* Vertical bar (makes the plus, hidden when open) */
.ksw-icon-v {
	width: 2px;
	height: var(--ksw-icon-size, 20px);
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.ksw-item.ksw-open .ksw-icon-v {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

/* ---- Item body ---- */
.ksw-item-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ksw-item-body-inner {
	padding-top: 12px;
	color: var(--ksw-content-color, #4a5568);
	line-height: 1.7;
}

.ksw-item-body-inner p:last-child {
	margin-bottom: 0;
}

/* ---- Non-expandable items ---- */
.ksw-item.ksw-no-content .ksw-item-header {
	cursor: default;
}

/* ---- Overflow / Reveal All ---- */
.ksw-overflow-items {
	display: none;
	flex-direction: column;
	gap: var(--ksw-item-gap, 16px);
}

.ksw-overflow-items.ksw-overflow-visible {
	display: flex;
}

.ksw-reveal-btn {
	align-self: flex-start;
	cursor: pointer;
	border-style: solid;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
	line-height: 1;
	position: relative;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
	touch-action: manipulation;
	min-height: 44px;
}

/* ---- Cascade animation ---- */
@keyframes kswFadeUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ksw-item {
	opacity: 0;
	animation: kswFadeUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.ksw-item:nth-child(1) { animation-delay: 0.05s; }
.ksw-item:nth-child(2) { animation-delay: 0.12s; }
.ksw-item:nth-child(3) { animation-delay: 0.19s; }
.ksw-item:nth-child(4) { animation-delay: 0.26s; }
.ksw-item:nth-child(5) { animation-delay: 0.33s; }
.ksw-item:nth-child(6) { animation-delay: 0.40s; }
.ksw-item:nth-child(7) { animation-delay: 0.47s; }
.ksw-item:nth-child(8) { animation-delay: 0.54s; }

/* Overflow items — animate in when revealed */
.ksw-overflow-items .ksw-item {
	opacity: 0;
	animation: none;
}
.ksw-overflow-items.ksw-overflow-visible .ksw-item {
	animation: kswFadeUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.ksw-overflow-items.ksw-overflow-visible .ksw-item:nth-child(1) { animation-delay: 0.05s; }
.ksw-overflow-items.ksw-overflow-visible .ksw-item:nth-child(2) { animation-delay: 0.12s; }
.ksw-overflow-items.ksw-overflow-visible .ksw-item:nth-child(3) { animation-delay: 0.19s; }
.ksw-overflow-items.ksw-overflow-visible .ksw-item:nth-child(4) { animation-delay: 0.26s; }
.ksw-overflow-items.ksw-overflow-visible .ksw-item:nth-child(5) { animation-delay: 0.33s; }
.ksw-overflow-items.ksw-overflow-visible .ksw-item:nth-child(6) { animation-delay: 0.40s; }
.ksw-overflow-items.ksw-overflow-visible .ksw-item:nth-child(7) { animation-delay: 0.47s; }
.ksw-overflow-items.ksw-overflow-visible .ksw-item:nth-child(8) { animation-delay: 0.54s; }

/* ---- Tablet ---- */
@media (max-width: 1024px) {
	.ksw-content {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.ksw-content-left {
		position: static;
	}
}

/* ---- Touch devices: neutralise :hover so iOS fires click on first tap ---- */
@media (hover: none) and (pointer: coarse) {
	.ksw-reveal-btn:hover {
		color: var(--ksw-reveal-color, #003B46) !important;
		background-color: var(--ksw-reveal-bg, transparent) !important;
		border-color: var(--ksw-reveal-border, #003B46) !important;
	}

	.ksw-reveal-btn:active {
		opacity: 0.7;
	}
}