/**
 * Menu Accordions
 *
 * Deliberately unstyled beyond the mechanics. The widget title keeps
 * whatever the theme gives it — the button inherits font, colour and size
 * from the heading it now sits inside, so a collapsed footer menu looks
 * exactly like the expanded one did, with a chevron added.
 *
 * The breakpoint rules live in an inline block written by the feature's
 * PHP, since the width is a setting.
 */

/* The button carries no appearance of its own: it is the heading's text,
   and it should still look like the heading's text. */
.cl-menuacc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: inherit;
	cursor: pointer;
}

/* Above the breakpoint the inline block from PHP sets pointer-events: none
   on the button, which also stops the pointer cursor — nothing more is
   needed here. */

.cl-menuacc__chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	opacity: 0.65;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.22s ease;
}

.cl-menuacc__toggle[aria-expanded="true"] .cl-menuacc__chevron {
	transform: rotate(225deg) translate(-2px, -2px);
}

/**
 * The panel animates on height, which JS sets in pixels — a measured value
 * is the only way to transition to "as tall as the content is", since auto
 * cannot be interpolated.
 *
 * overflow: hidden is what makes the collapse read as a collapse rather
 * than the links simply vanishing.
 */
.cl-menuacc__panel {
	height: 0;
	overflow: hidden;
	transition: height 280ms ease;
}

.cl-menuacc__panel.is-open { height: auto; }

/* A focus ring on the whole heading row, so keyboard users can see what
   they are on — the button fills the row, so its own outline would sit
   flush against the text. */
.cl-menuacc__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cl-menuacc__panel,
	.cl-menuacc__chevron { transition: none !important; }
}