/**
 * ICTD accordion shell.
 *
 * Styles the headings only. What sits inside a panel brings its own styling, so this deliberately
 * does not touch the contents beyond giving them room.
 *
 * SPECIFIED BY JADINE, 15/09/2026:
 *
 *   bar               #005056, 20px padding all round, no border, no radius
 *   bar hover/open    #002D30
 *   content           #005056, 15px padding
 *   title             21px / 600, #FFFFFF, white icon, sentence case
 *
 * These are NOT the stored settings of the widget this replaces (accordion 9ab9c61 on page 182).
 * Those read bar #002D30 with a mint #8CD3C9 hover and no content colour at all. Building to them
 * literally came out wrong twice - the panel rendered white wherever the surrounding section was
 * white, because the widget leans on the section behind it and /accordion-new/ has none, and the bar
 * and its hover were inverted against what /about/ actually looks like. Something on that page is
 * overriding the widget. Take the values above as the source of truth, not the widget.
 *
 * Every colour is a custom property at the top of the block, so each can be changed in one place.
 */

.ictd-accordion {
	--ictd-accordion-bar: var( --e-global-color-primary, #005056 );
	--ictd-accordion-bar-hover: #002d30;
	--ictd-accordion-text: #ffffff;
	--ictd-accordion-content: var( --e-global-color-primary, #005056 );
	--ictd-accordion-gap: 12px;

	display: flex;
	flex-direction: column;
	gap: var( --ictd-accordion-gap );
}

.ictd-accordion__heading {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* Two classes deliberately, not one.
 *
 * The Elementor kit styles every button on the site:
 *
 *   .elementor-kit-18 button { font-family:"Inter"; font-size:16px; font-weight:500;
 *                              text-transform:uppercase; padding:17px 20px 17px 20px; }
 *
 * That is specificity 0,1,1 and beats a single class, so a `.ictd-accordion__toggle` rule loses on
 * every property it touches - the size, the weight, the padding, the family, and an uppercase
 * transform nobody asked for. Scoping to the parent makes this 0,2,0, which wins without
 * !important. The three properties the kit sets but this control does not want are reset explicitly
 * rather than left to chance. */
.ictd-accordion .ictd-accordion__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 20px 20px 20px 20px;
	border: 0;
	border-radius: 0;
	background: var( --ictd-accordion-bar );
	color: var( --ictd-accordion-text );
	font-family: inherit;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

/* Hover and open are the same darker bar, so hovering an open section changes nothing and the only
   moving part is the icon. The icon is drawn in currentColor and needs no rule of its own. */
.ictd-accordion .ictd-accordion__toggle:hover,
.ictd-accordion .ictd-accordion__item.is-open .ictd-accordion__toggle {
	background: var( --ictd-accordion-bar-hover );
}

/* A visible focus ring matters more here than usual: the whole control is a large block of colour,
   so without one a keyboard user has nothing to follow. The widget has no equivalent, which is a
   gap in the original rather than a difference worth preserving. */
.ictd-accordion .ictd-accordion__toggle:focus-visible {
	outline: 3px solid var( --e-global-color-secondary, #eac33e );
	outline-offset: -3px;
}

.ictd-accordion__label {
	flex: 1 1 auto;
}

/* The + / - mark, drawn rather than set in a font so it cannot arrive late or fall back to a box. */
.ictd-accordion__icon {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.ictd-accordion__icon::before,
.ictd-accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	background: currentColor;
	transform: translate( -50%, -50% );
	transition: transform 200ms ease, opacity 200ms ease;
}

.ictd-accordion__icon::after {
	transform: translate( -50%, -50% ) rotate( 90deg );
}

/* Open: the upright stroke rotates away, leaving the minus. */
.ictd-accordion__item.is-open .ictd-accordion__icon::after {
	transform: translate( -50%, -50% ) rotate( 0deg );
	opacity: 0;
}

/* overflow:hidden is structural, not decorative: the script animates the panel's height and the
   contents must be clipped while it does. */
.ictd-accordion__panel {
	overflow: hidden;
	background: var( --ictd-accordion-content );
}

.ictd-accordion__inner {
	padding: 15px;
}

@media ( max-width: 767px ) {
	/* The toggle keeps its 20px/21px/600 at every width, as specified. Only the panel
	   padding tightens, because 15px of gutter around a card grid is already slim. */
	.ictd-accordion__inner {
		padding: 12px;
	}
}

/* The script animates height in pixels. Anyone who has asked for less movement gets the state
   change without the travel; the script skips the tween for them too. */
@media ( prefers-reduced-motion: reduce ) {
	.ictd-accordion__toggle,
	.ictd-accordion__icon::before,
	.ictd-accordion__icon::after {
		transition: none;
	}
}