/**
 * Driver Safety Practice System (SiKAP) page.
 *
 * Yellow-pill labels, bordered panels, and yellow accordion summaries —
 * matching driving-licence / technical-inspection section language.
 *
 * @package jpd-theme
 */

.jpd-page--sikap {
	padding: 0 0 72px;
	color: #333333;
	background: var(--jpd-white);
}

.jpd-sikap {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.jpd-sikap__section {
	margin: 0;
}

.jpd-sikap__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	margin: 0 0 1.25rem;
	padding: 0.45rem 1.5rem;
	border-radius: 999px;
	background: linear-gradient(90deg, #fde08d 0%, #f5c842 100%);
	color: #1a1a1a;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jpd-sikap__lead {
	margin: 0 0 1.15rem;
	color: #333333;
	font-size: clamp(0.95rem, 0.35vw + 0.85rem, 1.05rem);
	line-height: 1.7;
}

.jpd-sikap__subhead {
	margin: 0 0 0.85rem;
	color: #333333;
	font-size: clamp(0.95rem, 0.35vw + 0.85rem, 1.05rem);
	font-weight: 400;
	line-height: 1.7;
}

.jpd-sikap__list {
	margin: 0;
	padding-left: 1.35rem;
	color: #333333;
	font-size: clamp(0.95rem, 0.35vw + 0.85rem, 1.05rem);
	line-height: 1.7;
}

.jpd-sikap__list li {
	margin: 0 0 0.65rem;
}

.jpd-sikap__list li:last-child {
	margin-bottom: 0;
}

.jpd-sikap__list--flush {
	margin: 0;
}

.jpd-sikap__numbered {
	margin: 0;
	padding-left: 1.35rem;
	color: #333333;
	font-size: clamp(0.95rem, 0.35vw + 0.85rem, 1.05rem);
	line-height: 1.7;
}

.jpd-sikap__numbered li {
	margin: 0 0 0.65rem;
}

.jpd-sikap__numbered li:last-child {
	margin-bottom: 0;
}

.jpd-sikap__numbered--flush {
	margin: 0;
}

/* ── How SiKAP works panel ────────────────────────────────────── */

.jpd-sikap__panel {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.75rem 1.65rem;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	background: #f7f8fa;
}

.jpd-sikap__block {
	padding: 1.15rem 1.25rem;
	border-left: 4px solid #f5c842;
	border-radius: 0 8px 8px 0;
	background: var(--jpd-white);
}

/* ── Demerit point accordions ─────────────────────────────────── */

.jpd-sikap__accordions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.jpd-sikap__accordion {
	min-width: 0;
	border: 0;
	background: transparent;
}

.jpd-sikap__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	min-height: 3.5rem;
	padding: 1rem 1.35rem;
	border: 1.5px solid #e8d48a;
	border-radius: 8px;
	background: #f3d249;
	color: #1a1a1a;
	font-family: var(--jpd-font-heading);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jpd-sikap__summary::-webkit-details-marker,
.jpd-sikap__summary::marker {
	display: none;
	content: '';
}

.jpd-sikap__accordion[open] .jpd-sikap__summary {
	border-radius: 8px 8px 0 0;
}

.jpd-sikap__summary:hover,
.jpd-sikap__summary:focus-visible {
	border-color: #df9f0c;
	box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.2);
	outline: 0;
}

.jpd-sikap__summary-text {
	min-width: 0;
	margin: 0;
	font: inherit;
	color: inherit;
}

.jpd-sikap__icon {
	display: block;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-right: 2px solid #1a1a1a;
	border-bottom: 2px solid #1a1a1a;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.jpd-sikap__accordion[open] > .jpd-sikap__summary .jpd-sikap__icon {
	transform: rotate(225deg);
}

.jpd-sikap__body {
	padding: 1.5rem 1.35rem 1.75rem;
	border: 1.5px solid #e8d48a;
	border-top: 0;
	border-radius: 0 0 8px 8px;
	background: var(--jpd-white);
}

@media (max-width: 768px) {
	.jpd-sikap__panel {
		padding: 1.25rem 1rem;
	}

	.jpd-sikap__block {
		padding: 0.95rem 1rem;
	}

	.jpd-sikap__summary {
		gap: 1rem;
		padding: 0.9rem 1rem;
	}

	.jpd-sikap__body {
		padding: 1.15rem 1rem 1.35rem;
	}
}