/* ============================================================
   Accordion CPT  –  accordion-cpt.css
   Polished, theme-agnostic styling with smooth animations.
   All colours use CSS custom properties so themes can override.
   ============================================================ */

/* ── Design tokens ── */
:root {
	--acpt-font:            inherit;
	--acpt-radius:          8px;
	--acpt-border:          1px solid #e2e2e2;
	--acpt-bg:              #ffffff;
	--acpt-bg-hover:        #f8f8f8;
	--acpt-bg-open:         #f4f9ff;
	--acpt-text:            #1a1a1a;
	--acpt-text-muted:      #555555;
	--acpt-accent:          #0057d8;          /* icon & focus ring colour  */
	--acpt-accent-open:     #003fa3;
	--acpt-icon-size:       22px;
	--acpt-icon-stroke:     2px;
	--acpt-gap:             10px;
	--acpt-padding-x:       22px;
	--acpt-padding-y:       18px;
	--acpt-body-padding:    20px 22px 22px;
	--acpt-shadow:          0 2px 10px rgba(0,0,0,.06);
	--acpt-shadow-open:     0 4px 18px rgba(0,87,216,.10);
	--acpt-transition:      0.28s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ── */
.acpt-wrapper {
	font-family:    var(--acpt-font);
	display:        flex;
	flex-direction: column;
	gap:            var(--acpt-gap);
	list-style:     none;
	margin:         0;
	padding:        0;
}

/* ── Individual item ── */
.acpt-item {
	background:    var(--acpt-bg);
	border:        var(--acpt-border);
	border-radius: var(--acpt-radius);
	box-shadow:    var(--acpt-shadow);
	overflow:      hidden;
	transition:    box-shadow var(--acpt-transition),
	               background var(--acpt-transition);
}

.acpt-item.is-open {
	background: var(--acpt-bg-open);
	box-shadow: var(--acpt-shadow-open);
}

/* ── Trigger button ── */
.acpt-trigger {
	all:            unset;           /* reset browser button styles        */
	box-sizing:     border-box;
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	gap:            16px;
	width:          100%;
	padding:        var(--acpt-padding-y) var(--acpt-padding-x);
	cursor:         pointer;
	color:          var(--acpt-text);
	transition:     background var(--acpt-transition),
	                color var(--acpt-transition);
}

.acpt-trigger:hover {
	background: var(--acpt-bg-hover);
}

.acpt-trigger:focus-visible {
	outline:        3px solid var(--acpt-accent);
	outline-offset: -3px;
	border-radius:  var(--acpt-radius);
}

.acpt-item.is-open .acpt-trigger {
	color: var(--acpt-accent-open);
}

/* ── Question text ── */
.acpt-question {
	flex:        1;
	font-size:   1.0625rem;     /* ~17px */
	font-weight: 600;
	line-height: 1.4;
	text-align:  left;
}

/* ── Icon container ── */
.acpt-icon {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
	justify-content: center;
	width:       var(--acpt-icon-size);
	height:      var(--acpt-icon-size);
}

/* ── Icon SVG ── */
.acpt-icon-svg {
	width:    var(--acpt-icon-size);
	height:   var(--acpt-icon-size);
	overflow: visible;
}

.acpt-line {
	stroke:           var(--acpt-accent);
	stroke-width:     var(--acpt-icon-stroke);
	stroke-linecap:   round;
	transform-origin: center;
	transition:       transform var(--acpt-transition),
	                  opacity  var(--acpt-transition);
}

/* Vertical bar rotates away (becomes hidden) when open → minus sign */
.acpt-line-v {
	transform: rotate(0deg) scaleY(1);
	transform-box: fill-box;
}

.acpt-item.is-open .acpt-line-v {
	transform: rotate(90deg) scaleY(0);
	opacity:   0;
}

/* Horizontal bar stays; slight scale pulse on open */
.acpt-line-h {
	transform: scaleX(1);
	transform-box: fill-box;
}

.acpt-item.is-open .acpt-line-h {
	stroke: var(--acpt-accent-open);
}

/* ── Body (collapsed by default via JS, hidden attr) ── */
.acpt-body {
	/* JS will toggle hidden; we animate max-height for smooth expand */
	overflow:   hidden;
	max-height: 0;
	transition: max-height var(--acpt-transition);
}

/* When JS removes [hidden] and sets a height */
.acpt-body:not([hidden]) {
	/* max-height is set inline by JS */
}

/* ── Body inner padding ── */
.acpt-body-inner {
	padding:   var(--acpt-body-padding);
	color:     var(--acpt-text-muted);
	font-size: 0.9375rem;     /* ~15px */
	line-height: 1.65;
	/* Fade in */
	opacity:    0;
	transform:  translateY(-6px);
	transition: opacity  var(--acpt-transition),
	            transform var(--acpt-transition);
}

.acpt-item.is-open .acpt-body-inner {
	opacity:   1;
	transform: translateY(0);
}

/* Divider between trigger and body */
.acpt-item.is-open .acpt-trigger {
	border-bottom: var(--acpt-border);
}

/* ── Responsive ── */
@media (max-width: 600px) {
	:root {
		--acpt-padding-x:   16px;
		--acpt-padding-y:   15px;
		--acpt-body-padding: 16px 16px 18px;
	}
	.acpt-question {
		font-size: 1rem;
	}
}