/**
 * Product Accordion – Branded Stylesheet
 * Abel Building Solutions
 *
 * @package ProductAccordion
 * @version 1.2.0
 */

/* ── Design Tokens ───────────────────────────────────────────────────────── */

.pa-accordion {
	/* Brand colours */
	--pa-accent             : #cc3300;       /* ABS red — matches Add to Cart button */
	--pa-accent-light       : rgba(204,51,0,0.06);

	/* Backgrounds */
	--pa-bg                 : #ffffff;
	--pa-trigger-bg         : #ffffff;
	--pa-trigger-bg-hover   : #fdf2ef;
	--pa-trigger-bg-open    : #fdf2ef;
	--pa-panel-bg           : #ffffff;

	/* Borders */
	--pa-border-color       : #e5e5e5;
	--pa-border-open        : #cc3300;

	/* Text */
	--pa-title-color        : #1a1a1a;
	--pa-title-color-open   : #cc3300;
	--pa-icon-color         : #999999;
	--pa-icon-color-open    : #cc3300;
	--pa-panel-color        : #444444;

	/* Focus */
	--pa-focus-ring         : 0 0 0 3px rgba(204,51,0,0.2);

	/* Spacing */
	--pa-radius             : 4px;
	--pa-trigger-px         : 18px;
	--pa-trigger-py         : 14px;
	--pa-panel-px           : 18px;
	--pa-panel-py           : 16px;
	--pa-gap                : 6px;

	/* Typography */
	--pa-title-size         : 0.875rem;    /* 14px — compact & clean */
	--pa-title-weight       : 700;
	--pa-title-tracking     : 0.04em;      /* slight uppercase spacing */
	--pa-content-size       : 0.9375rem;   /* 15px */
	--pa-content-line       : 1.7;

	/* Animation */
	--pa-duration           : 240ms;
	--pa-easing             : cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.pa-accordion {
	width          : 100%;
	display        : flex;
	flex-direction : column;
	gap            : var( --pa-gap );
	margin         : 0;
	padding        : 0;
	list-style     : none;
	margin-bottom: 1.5rem;
}

/* ── Item ────────────────────────────────────────────────────────────────── */

.pa-accordion__item {
	background    : var( --pa-bg );
	border        : 1px solid var( --pa-border-color );
	border-radius : var( --pa-radius );
	overflow      : hidden;
	transition    : border-color var( --pa-duration ) var( --pa-easing );
}

.pa-accordion__item--open {
	border-color  : var( --pa-border-open );
}

/* ── Trigger ─────────────────────────────────────────────────────────────── */

.pa-accordion__trigger {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	gap             : 12px;
	width           : 100%;
	padding         : var( --pa-trigger-py ) var( --pa-trigger-px );
	background      : var( --pa-trigger-bg );
	border          : none;
	cursor          : pointer;
	text-align      : left;
	transition      : background var( --pa-duration ) var( --pa-easing );
	-webkit-appearance: none;
	appearance      : none;
}

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

.pa-accordion__item--open .pa-accordion__trigger {
	background: var( --pa-trigger-bg-open );
}

.pa-accordion__trigger:focus-visible {
	outline    : none;
	box-shadow : var( --pa-focus-ring );
	position   : relative;
	z-index    : 1;
}

.pa-accordion__trigger:focus:not( :focus-visible ) {
	outline: none;
}

/* ── Title ───────────────────────────────────────────────────────────────── */

.pa-accordion__title {
	font-size      : var( --pa-title-size );
	font-weight    : var( --pa-title-weight );
	color          : var( --pa-title-color );
	letter-spacing : var( --pa-title-tracking );
	text-transform : uppercase;
	line-height    : 1.3;
	transition     : color var( --pa-duration ) var( --pa-easing );
}

.pa-accordion__item--open .pa-accordion__title {
	color: var( --pa-title-color-open );
}

/* ── Icon ────────────────────────────────────────────────────────────────── */

.pa-accordion__icon {
	display    : flex;
	align-items: center;
	flex-shrink: 0;
	color      : var( --pa-icon-color );
	transition : transform var( --pa-duration ) var( --pa-easing ),
	             color    var( --pa-duration ) var( --pa-easing );
}

.pa-accordion__item--open .pa-accordion__icon {
	transform : rotate( -180deg );
	color     : var( --pa-icon-color-open );
}

/* ── Panel ───────────────────────────────────────────────────────────────── */

.pa-accordion__panel {
	max-height : 0;
	overflow   : hidden;
	transition : max-height var( --pa-duration ) var( --pa-easing );
	background : var( --pa-panel-bg );
	display    : block;
}

.pa-accordion__panel[hidden] {
	display    : block !important;
	max-height : 0 !important;
	overflow   : hidden !important;
}

/* ── Panel Inner ─────────────────────────────────────────────────────────── */

.pa-accordion__panel-inner {
	padding     : var( --pa-panel-py ) var( --pa-panel-px );
	border-top  : 1px solid var( --pa-border-color );
	color       : var( --pa-panel-color );
	font-size   : var( --pa-content-size );
	line-height : var( --pa-content-line );
}

/* ── Content prose ───────────────────────────────────────────────────────── */

.pa-accordion__panel-inner p:first-child  { margin-top: 0; }
.pa-accordion__panel-inner p:last-child   { margin-bottom: 0; }
.pa-accordion__panel-inner ul,
.pa-accordion__panel-inner ol             { padding-left: 1.4em; margin: 0.5em 0; }
.pa-accordion__panel-inner li             { margin-bottom: 0.35em; }
.pa-accordion__panel-inner a             { color: var( --pa-accent ); }
.pa-accordion__panel-inner a:hover       { text-decoration: underline; }
.pa-accordion__panel-inner img           { max-width: 100%; height: auto; }
.pa-accordion__panel-inner strong        { color: #1a1a1a; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
	.pa-accordion {
		--pa-trigger-px  : 14px;
		--pa-trigger-py  : 12px;
		--pa-panel-px    : 14px;
		--pa-panel-py    : 14px;
		--pa-title-size  : 0.8125rem;
	}
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.pa-accordion,
	.pa-accordion__item,
	.pa-accordion__trigger,
	.pa-accordion__title,
	.pa-accordion__icon,
	.pa-accordion__panel {
		transition-duration: 1ms !important;
	}
}