/* Accordion module - frontend styling
 * Scoped under .wb-accordion so it never leaks into the rest of the site.
 * Uses native <details>/<summary>, so it works without any JavaScript.
 */

.wb-accordion {
	margin: 1em 0;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
}

.wb-accordion-item {
	border-bottom: 1px solid #ddd;
	background: #fff;
}

.wb-accordion-item:last-child {
	border-bottom: none;
}

.wb-accordion-title {
	cursor: pointer;
	padding: 0.9em 1.2em;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	background: #f7f7f7;
	transition: background 0.2s ease;
	-webkit-user-select: none;
	user-select: none;
	list-style: none;
}

.wb-accordion-title::-webkit-details-marker {
	display: none;
}

.wb-accordion-title::marker {
	content: '';
}

.wb-accordion-title::after {
	content: '+';
	font-size: 1.3em;
	line-height: 1;
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.wb-accordion-item[open] > .wb-accordion-title::after {
	transform: rotate(45deg);
}

.wb-accordion-item:hover > .wb-accordion-title {
	background: #eee;
}

.wb-accordion-title:focus-visible {
	outline: 2px solid #3085d6;
	outline-offset: -2px;
}

.wb-accordion-content {
	padding: 0 1.2em 1.2em;
	line-height: 1.6;
}

.wb-accordion-content p:first-child {
	margin-top: 0;
}

.wb-accordion-content p:last-child {
	margin-bottom: 0;
}

.wb-accordion-content img {
	max-width: 100%;
	height: auto;
}

/* The icon span is only used by the "pills" style below; keep it invisible
   and out of the flow for the default style so nothing changes visually
   for accordions that don't opt in. */
.wb-accordion-icon {
	display: none;
}

/* ==========================================================================
   Optional alternate style: rounded "pills" with a blue circular +/- icon
   on the left of the title (open item gets a blue border).
   Enable it per accordion by adding "wb-accordion--pills" in the
   "Additional CSS class" field of the accordion settings - it does not
   affect accordions that don't use that class.
   ========================================================================== */

.wb-accordion.wb-accordion--pills {
	border: 0;
	border-radius: 0;
	overflow: visible;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.wb-accordion--pills .wb-accordion-item {
	border: 1.5px solid transparent;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(15, 42, 74, 0.08);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wb-accordion--pills .wb-accordion-item:last-child {
	border-bottom: 1.5px solid transparent;
}

.wb-accordion--pills .wb-accordion-item[open] {
	border-color: #2f86eb;
	box-shadow: 0 4px 14px rgba(47, 134, 235, 0.15);
}

.wb-accordion--pills .wb-accordion-item:hover > .wb-accordion-title {
	background: transparent;
}

.wb-accordion--pills .wb-accordion-title {
	background: transparent;
	padding: 18px 22px;
	gap: 14px;
	justify-content: flex-start;
	color: #0f2a4a;
	font-weight: 700;
	font-size: 1.05em;
}

.wb-accordion--pills .wb-accordion-title::after {
	content: none;
}

.wb-accordion--pills .wb-accordion-icon {
	display: inline-block;
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid #2f86eb;
}

.wb-accordion--pills .wb-accordion-icon::before,
.wb-accordion--pills .wb-accordion-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: #2f86eb;
	transform: translate(-50%, -50%);
}

.wb-accordion--pills .wb-accordion-icon::before {
	width: 12px;
	height: 2px;
}

.wb-accordion--pills .wb-accordion-icon::after {
	width: 2px;
	height: 12px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.wb-accordion--pills .wb-accordion-item[open] .wb-accordion-icon::after {
	transform: translate(-50%, -50%) scaleY(0);
	opacity: 0;
}

.wb-accordion--pills .wb-accordion-content {
	padding: 0 22px 22px 62px;
	color: #3d4b5c;
}