/**
 * "Tabs" block (arpl/tabs + arpl/tab) — front-end + shared styles.
 *
 * Each tab carries its own brand color via the inline custom property
 * `--arpl-tab-color` (set on the panel in save, and on the nav button by the
 * viewScript). The active tab connects visually to its panel; the panel is
 * filled edge to edge with that color.
 *
 * @package arpl-fse
 */

.arpl-tabs {
	--arpl-tab-radius: 0.5rem;
}

/* Nav (built by the viewScript on the front end). */
.arpl-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0;
}

.arpl-tabs__tab {
	appearance: none;
	border: 0;
	cursor: pointer;
	margin: 0;
	flex: 0 0 auto;
	/* Cap the width so a long label wraps onto multiple lines instead of
	   stretching the tab into one very long strip. */
	max-width: 450px;
	padding: clamp( 0.85rem, 2vw, 1.15rem ) clamp( 1.25rem, 3vw, 1.75rem );
	color: #fff;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small, 1.125rem );
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	background-color: var( --wp--preset--color--primary, #3376bd );
	border-radius: var( --arpl-tab-radius ) var( --arpl-tab-radius ) 0 0;
	opacity: 0.82;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.arpl-tabs__tab:hover {
	opacity: 0.95;
}

.arpl-tabs__tab.is-active {
	opacity: 1;
}

.arpl-tabs__tab:focus-visible {
	outline: 2px solid var( --wp--preset--color--light-blue, #70bae6 );
	outline-offset: 2px;
}

/* Larger tab labels on desktop (mobile keeps the smaller size for the scroll row). */
@media ( min-width: 601px ) {
	.arpl-tabs__tab {
		font-size: 1.5rem;
	}
}

/* Panels. `--arpl-tab-inset` is the panel's inline padding, exposed as a custom
   property so a "Tab breakout" child can cancel it and reach the panel edges. */
.arpl-tab {
	--arpl-tab-inset: clamp( 1.5rem, 4vw, 2.75rem );
	color: #fff;
	padding-block: clamp( 1.5rem, 4vw, 2.75rem );
	padding-inline: var( --arpl-tab-inset );
	background-color: var( --arpl-tab-color, var( --wp--preset--color--primary, #3376bd ) );
	border-radius: 0 var( --arpl-tab-radius ) var( --arpl-tab-radius ) var( --arpl-tab-radius );
}

.arpl-tab[hidden] {
	display: none;
}

/* Full-bleed white "breakout" band inside a colored panel (core/group with the
   "Tab breakout" style). Negative inline margins equal to the panel inset push
   it to the panel edges; it re-pads its own content and flips to dark text. */
.arpl-tab .is-style-tab-breakout {
	margin-inline: calc( -1 * var( --arpl-tab-inset, 0px ) );
	padding: clamp( 1.5rem, 4vw, 2.5rem ) var( --arpl-tab-inset, 0px );
	color: var( --wp--preset--color--ink, #2b2b2b );
	background-color: #f5f5f5;
	border-radius: 0;
}

/* Dark text + brand links inside the breakout, overriding the panel's white. */
.arpl-tab .is-style-tab-breakout :where( h1, h2, h3, h4, h5, h6, p, li ) {
	color: inherit;
}

.arpl-tab .is-style-tab-breakout a {
	color: var( --wp--preset--color--primary, #3376bd );
}

/* Inherit white on common inner content so panels read correctly. */
.arpl-tab :where( h1, h2, h3, h4, h5, h6, p, li ) {
	color: inherit;
}

.arpl-tab a {
	color: inherit;
	text-underline-offset: 0.15em;
}

/* Replace default bullets on unordered lists inside a tab panel with the brand
   hand-drawn arrow (assets/svg/arpl-bullet-arrow.svg). Ordered lists keep their
   numbers. */
.arpl-tab ul {
	list-style: none;
	padding-left: 0;
}

.arpl-tab ul li {
	position: relative;
	padding-left: 2em;
}

.arpl-tab ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.3em;
	height: 0.96em;
	background: url( ../svg/arpl-bullet-arrow.svg ) no-repeat center / contain;
}

/* No-JS fallback heading; the viewScript hides it once the nav exists. */
.arpl-tab__title {
	margin-top: 0;
}

/* On narrow screens the tabs scroll horizontally as one row instead of wrapping
   (and pushing a stray full-width tab out the side). The row keeps its rounded
   tops flush with the panel and hides the scrollbar chrome. */
@media ( max-width: 600px ) {
	.arpl-tabs__nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Let tabs bleed to the panel edges so a half-cut tab hints "scroll". */
		scroll-snap-type: x proximity;
	}

	.arpl-tabs__nav::-webkit-scrollbar {
		display: none;
	}

	.arpl-tabs__tab {
		scroll-snap-align: start;
		white-space: nowrap;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.arpl-tabs__tab {
		transition: none;
	}
}