/**
 * Section Nav block styles.
 *
 * Logical properties only (no physical left/right) so the block is RTL-correct
 * without a separate rtl build. Container colour and typography come from the
 * theme via the block's colour/typography supports; link, hover and active
 * colours plus the per-viewport list gap arrive as wrapper custom properties
 * from render.php (editor: useBlockProps), each consumed here with a fallback
 * so unset controls keep the default single-colour look.
 */

.wpminty-section-nav {
	--wpminty-section-nav-gap: 0.25rem;
	/* The scroll-spy highlight doubles as the focus ring and progress fill. */
	--wpminty-section-nav-indicator: var(--wpminty-section-nav-active-color, var(--wp--preset--color--primary));

	position: relative;
	max-width: 100%;
}

.wpminty-section-nav--sticky {
	position: sticky;
	/* Live chrome stack: admin bar + current header box height (the header
	   module republishes this token every frame while its shrink interpolation
	   runs) + the per-instance sticky offset from render.php - so the rail
	   hugs a collapsed header instead of reserving its natural height. */
	top: calc(
		var(--wpminty-header-top, 0px) +
		var(--wpminty-header-height, 0px) +
		var(--wpminty-section-nav-sticky-offset, 0px)
	);
	z-index: 20;
}

.wpminty-section-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wpminty-section-nav-gap-desktop, var(--wpminty-section-nav-gap));
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

/* Block spacing (blockGap) per-viewport overrides; breakpoints mirror the
   theme.json viewport settings (tablet 960px, mobile 600px). */
@media (max-width: 960px) {
	.wpminty-section-nav__list {
		gap: var(--wpminty-section-nav-gap-tablet, var(--wpminty-section-nav-gap-desktop, var(--wpminty-section-nav-gap)));
	}
}

@media (max-width: 600px) {
	.wpminty-section-nav__list {
		gap: var(--wpminty-section-nav-gap-mobile, var(--wpminty-section-nav-gap-tablet, var(--wpminty-section-nav-gap-desktop, var(--wpminty-section-nav-gap))));
	}
}

/* Text alignment support: the toolbar control writes has-text-align-* on the
   wrapper; for a flex list that maps onto the main-axis justification. */
.wpminty-section-nav.has-text-align-center .wpminty-section-nav__list {
	justify-content: center;
}

.wpminty-section-nav.has-text-align-right .wpminty-section-nav__list {
	justify-content: flex-end;
}

.wpminty-section-nav__item {
	flex: 0 0 auto;
	margin: 0;
}

.wpminty-section-nav__link {
	display: inline-flex;
	align-items: center;
	position: relative;
	padding-block: 0.5em;
	padding-inline: 0.85em;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 0.375rem;
	color: var(--wpminty-section-nav-link-color, currentColor);
	background-color: var(--wpminty-section-nav-link-bg, transparent);
	transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.wpminty-section-nav__link:hover {
	color: var(--wpminty-section-nav-link-hover-color, var(--wpminty-section-nav-link-color, currentColor));
	background-color: var(--wpminty-section-nav-link-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
}

.wpminty-section-nav__link:focus-visible {
	outline: 2px solid var(--wpminty-section-nav-indicator);
	outline-offset: 2px;
}

.wpminty-section-nav__text {
	display: inline-block;
}

/* Underline (default): a bottom rule that lights up on the active entry. */
.is-style-underline .wpminty-section-nav__list {
	border-block-end: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.is-style-underline .wpminty-section-nav__link {
	border-radius: 0;
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
}

.is-style-underline .wpminty-section-nav__link.is-active {
	border-block-end-color: var(--wpminty-section-nav-indicator);
	font-weight: 600;
}

/* Pill: a filled, rounded chip on the active entry. */
.is-style-pill .wpminty-section-nav__link.is-active {
	background-color: var(--wpminty-section-nav-active-bg, color-mix(in srgb, var(--wpminty-section-nav-indicator) 14%, transparent));
	font-weight: 600;
}

/* Bordered: a boxed rail with dividers between entries. */
.is-style-bordered .wpminty-section-nav__list {
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 0.5rem;
	padding-inline: 0.25rem;
}

.is-style-bordered .wpminty-section-nav__item + .wpminty-section-nav__item {
	border-inline-start: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.is-style-bordered .wpminty-section-nav__link.is-active {
	background-color: var(--wpminty-section-nav-active-bg, color-mix(in srgb, var(--wpminty-section-nav-indicator) 12%, transparent));
	font-weight: 600;
}

/* Minimal: no chrome; the active entry is only emphasised. */
.is-style-minimal .wpminty-section-nav__link {
	padding-inline: 0.5em;
	opacity: 0.72;
}

.is-style-minimal .wpminty-section-nav__link.is-active {
	opacity: 1;
	font-weight: 600;
}

.wpminty-section-nav__link.is-active {
	color: var(--wpminty-section-nav-indicator);
	background-color: var(--wpminty-section-nav-active-bg, transparent);
}

/* Progress bar: a thin rail under the list; the view sets the fill width. */
.wpminty-section-nav__progress {
	position: relative;
	block-size: 2px;
	inline-size: 100%;
	background-color: color-mix(in srgb, currentColor 16%, transparent);
	overflow: hidden;
}

.wpminty-section-nav__progress-bar {
	block-size: 100%;
	inline-size: 0;
	background-color: var(--wpminty-section-nav-indicator);
	transition: width 0.1s linear;
}

/* Editor preview: sample anchors point at headings that are not really there. */
.wpminty-section-nav.is-preview .wpminty-section-nav__link {
	pointer-events: none;
	opacity: 0.7;
}

@media print {
	.wpminty-section-nav--sticky {
		position: static;
	}

	.wpminty-section-nav__progress {
		display: none;
	}

	.wpminty-section-nav__list {
		overflow: visible;
		flex-wrap: wrap;
	}
}