/*
 * AloraIris News - the disclosure control only.
 *
 * Everything that gives a card its look (border, background, spacing, type)
 * comes from the site's existing Elementor global classes, which the markup
 * reuses. The only thing with no equivalent there is the collapse control, so
 * that is all this file styles. Colours and fonts are taken from the site's
 * own custom properties rather than restating any values.
 */

.alora-news__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* The native disclosure needs its default marker removed before it can be
   styled; the two rules cover Safari and everything else. */
.alora-news__disclosure > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body, 'Nunito', sans-serif);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--brand-violet, #4B45B8);
	padding: 2px 0;
	width: fit-content;
	transition: color 140ms ease;
}

.alora-news__disclosure > summary::-webkit-details-marker { display: none; }
.alora-news__disclosure > summary::marker { content: ''; }

.alora-news__disclosure > summary:hover,
.alora-news__disclosure > summary:focus-visible {
	color: var(--brand-indigo, #38329E);
}

.alora-news__disclosure > summary:focus-visible {
	outline: 2px solid var(--brand-violet, #4B45B8);
	outline-offset: 3px;
	border-radius: 2px;
}

/* One label for each state, so the control always says what it will do. */
.alora-news__label--less { display: none; }
.alora-news__disclosure[open] .alora-news__label--more { display: none; }
.alora-news__disclosure[open] .alora-news__label--less { display: inline; }

.alora-news__chevron {
	width: 8px;
	height: 8px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	transition: transform 160ms ease;
}

.alora-news__disclosure[open] .alora-news__chevron {
	transform: rotate(-135deg);
	margin-top: 2px;
}

.alora-news__disclosure[open] > summary { margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
	.alora-news__disclosure > summary,
	.alora-news__chevron { transition: none; }
}