/**
 * Webto TOC Collapse - frontend styles.
 *
 * Neutral, theme-agnostic styling. No hard-coded theme colours; fonts and
 * colours are inherited from the theme. Everything is easily overridable by
 * the active theme because selectors are kept at a low specificity.
 *
 * @package Webto\TocCollapse
 */

/*
 * Pre-JS state.
 *
 * As soon as the script marks a container as "initialising" (before the
 * content wrapper is built) we hide overflow so nothing jumps while the
 * collapsible wrapper is being created. This helps minimise layout shift.
 */
.toc-collapse-initialising {
	overflow: hidden;
}

/*
 * The toggle.
 *
 * The existing title element (a heading or a Kadence Advanced Heading) is
 * reused in place. We deliberately do NOT touch its font, colour, margins or
 * padding, so the theme's original styling and spacing are preserved. Only
 * the bare minimum is added: a pointer cursor, positioning context and a
 * chevron drawn with a pseudo-element (so no extra DOM node is inserted).
 */
.toc-collapse-toggle {
	position: relative;
	cursor: pointer;
}

.toc-collapse-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Chevron drawn with borders so it inherits the theme's current text colour. */
.toc-collapse-toggle::after {
	content: "";
	position: absolute;
	right: 0.1em;
	top: 50%;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.3s ease;
	pointer-events: none;
}

/* Rotate the chevron when the panel is open. */
.toc-collapse-enabled.is-open .toc-collapse-toggle::after {
	transform: translateY(-30%) rotate(-135deg);
}

/*
 * Fallback button, used only when the TOC has no existing title element and
 * the plugin therefore creates its own "Indhold" button. Styled to sit like a
 * plain heading and inherit the theme's typography.
 */
.toc-collapse-default {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
}

/*
 * Collapsible content.
 *
 * The height is animated with the height property, which the JavaScript sets
 * to the measured content height on open and to 0 on close. This works
 * reliably regardless of the surrounding layout (flex, grid, block) used by
 * the theme or page builder, and supports dynamically changing content.
 * (max-height is intentionally avoided because some themes force it via
 * !important rules.)
 */
.toc-collapse-content {
	overflow: hidden;
	transition: height 0.3s ease;
}

/*
 * Collapsed fallback for the brief moment before the script assigns an inline
 * height, so the content never flashes fully expanded on an active device.
 */
.toc-collapse-enabled:not(.is-open) .toc-collapse-content {
	height: 0;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.toc-collapse-toggle::after,
	.toc-collapse-content {
		transition: none;
	}
}

/* Remove excess title margin when collapsed */
.toc-collapse-enabled:not(.is-open) .toc-collapse-toggle{
	margin-bottom: 0px;
}