/**
 * Editor content: accordions (core Accordion and Details blocks) and carousels
 * (the "Carousel" block style of Gallery and Group). Colors follow the surrounding
 * text (currentcolor), so it works on the dark section pages and on regular Astra pages.
 */

/* ───────── Accordions ───────── */
:is(.f80-prose, .entry-content) :is(.wp-block-details, .wp-block-accordion-item) {
	border-top: 2px solid color-mix(in srgb, currentcolor 25%, transparent);
}

:is(.f80-prose, .entry-content) :is(.wp-block-details, .wp-block-accordion):last-child {
	border-bottom: 2px solid color-mix(in srgb, currentcolor 25%, transparent);
}

:is(.f80-prose, .entry-content) .wp-block-details > summary,
:is(.f80-prose, .entry-content) .wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.125rem 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	list-style: none;
}

:is(.f80-prose, .entry-content) .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

:is(.f80-prose, .entry-content) .wp-block-details > summary::after {
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	content: "";
	transform: rotate(45deg);
	transition: transform 0.2s;
}

:is(.f80-prose, .entry-content) .wp-block-details[open] > summary::after {
	transform: rotate(-135deg);
}

:is(.f80-prose, .entry-content) .wp-block-accordion-heading {
	margin: 0;
}

:is(.f80-prose, .entry-content) .wp-block-accordion-heading__toggle-icon {
	flex: none;
}

:is(.f80-prose, .entry-content) .wp-block-details > summary:focus-visible,
:is(.f80-prose, .entry-content) .wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var(--f80-gold, #f2c14e);
	outline-offset: 2px;
}

:is(.f80-prose, .entry-content) .wp-block-details > :not(summary),
:is(.f80-prose, .entry-content) .wp-block-accordion-panel {
	padding-bottom: 1rem;
}

/* ───────── Carousel (block style "Carousel") ───────── */
:is(.f80-prose, .entry-content) .is-style-fce80-carousel {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 1rem;
	overflow-x: auto;
	padding-bottom: 0.75rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

:is(.f80-prose, .entry-content) .is-style-fce80-carousel > * {
	flex: 0 0 min(85%, 28rem) !important;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

:is(.f80-prose, .entry-content) .is-style-fce80-carousel img {
	display: block;
	width: 100%;
	height: auto;
}

:is(.f80-prose, .entry-content) .is-style-fce80-carousel:focus-visible {
	outline: 2px solid var(--f80-gold, #f2c14e);
	outline-offset: 2px;
}

.f80-carousel-controls {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin: 0 0 0.5rem;
}

.f80-carousel-controls button {
	width: 2.5rem;
	height: 2.5rem;
	border: 2px solid color-mix(in srgb, currentcolor 45%, transparent);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.125rem;
	cursor: pointer;
}

.f80-carousel-controls button:hover {
	border-color: var(--f80-gold, #f2c14e);
}

@media (prefers-reduced-motion: no-preference) {

	:is(.f80-prose, .entry-content) .is-style-fce80-carousel {
		scroll-behavior: smooth;
	}
}