/* Accordion — native <details>/<summary>.

   Was written entirely inline from PHP: no colour was reachable and site CSS
   could not override it. The rules read custom properties whose fallbacks are
   the old hardcoded values, so an untouched accordion is unchanged.

   One deliberate change: the old summary set list-style:none, which removes
   the disclosure triangle in Chrome and Firefox but NOT in Safari, and put
   nothing in its place. So the widget had either no open/close affordance or
   a stray triangle depending on the browser. A marker is drawn in CSS now,
   consistently, and ::-webkit-details-marker is hidden. marker=none restores
   the old bare look.
*/
.anvil-accordion{ display:block }

.anvil-accordion details{
	background:var(--anvil-acc-bg, var(--anvil-surface));
	color:var(--anvil-acc-text, inherit);
	border:1px solid var(--anvil-acc-border, rgba(0,0,0,.10));
	border-radius:var(--anvil-acc-radius, 12px);
	margin-bottom:var(--anvil-acc-gap, 12px);
}
.anvil-accordion details:last-child{ margin-bottom:0 }

.anvil-accordion summary{
	cursor:pointer;
	padding:var(--anvil-acc-pad, 18px 22px);
	font-weight:600;
	font-size:var(--anvil-acc-title-size, inherit);
	list-style:none;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}
.anvil-accordion summary::-webkit-details-marker{ display:none }
.anvil-accordion summary:focus-visible{
	outline:2px solid var(--anvil-acc-marker, var(--anvil-primary));
	outline-offset:-2px;
	border-radius:var(--anvil-acc-radius, 12px);
}

/* Marker. Drawn with a pseudo-element so the markup stays clean and the
   heading text is never duplicated for a screen reader. */
.anvil-accordion-plus summary::after,
.anvil-accordion-chevron summary::after{
	flex:0 0 auto;
	color:var(--anvil-acc-marker, var(--anvil-primary));
	transition:transform .2s ease;
}
.anvil-accordion-plus summary::after{
	content:"+";
	font-size:22px;
	line-height:1;
	font-weight:400;
}
.anvil-accordion-plus details[open] summary::after{ content:"\2212" }

.anvil-accordion-chevron summary::after{
	content:"";
	width:9px; height:9px;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:rotate(45deg) translate(-2px,-2px);
}
.anvil-accordion-chevron details[open] summary::after{
	transform:rotate(-135deg) translate(-3px,-3px);
}

.anvil-accordion-body{
	padding:var(--anvil-acc-body-pad, 0 22px 18px);
	opacity:.85;
}
.anvil-accordion-body > :first-child{ margin-top:0 }
.anvil-accordion-body > :last-child{ margin-bottom:0 }

@media (prefers-reduced-motion: reduce){
	.anvil-accordion summary::after{ transition:none }
}