/**
 * Tabs (includes/tabs.php, assets/tabs.js). Colours are the theme's palette.
 */

/* Section heading, for screen readers only (the tabs are the visible heading). */
.pcib-tabs-heading {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Tab row ---------- */
.pcib-tabs .pcib-tabs__list {
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}

.pcib-tabs .pcib-tabs__tab {
	position: relative;
	padding: 1rem 1.1rem 1.1rem;
	border-radius: 14px;
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--secondary);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pcib-tabs .pcib-tabs__tab > * {
	margin: 0;
}

.pcib-tabs .pcib-tabs__tab > * + * {
	margin-top: 0.35rem;
}

.pcib-tabs .pcib-tabs__tab .wp-block-image {
	margin-bottom: 0.6rem;
}

.pcib-tabs .pcib-tabs__tab .wp-block-image img {
	display: block;
}

.pcib-tabs .pcib-tabs__title {
	color: var(--wp--preset--color--main-accent);
}

.pcib-tabs .pcib-tabs__preview {
	color: var(--wp--preset--color--secondary);
}

.pcib-tabs.is-ready .pcib-tabs__tab:not(.is-active):hover {
	background: #EAEAEA;
}

.pcib-tabs .pcib-tabs__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: 2px;
}

/* Selected tab: white, brand top border, title in the brand colour. */
.pcib-tabs.is-ready .pcib-tabs__tab.is-active {
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 3px 0 var(--wp--preset--color--primary), 0 0 0 1px var(--wp--preset--color--border-light);
	cursor: default;
}

.pcib-tabs.is-ready .pcib-tabs__tab.is-active .pcib-tabs__title {
	color: var(--wp--preset--color--primary-text);
}

/* Pointer from the panel up to the selected tab: a notch in the panel's
   colour and border, sitting on the panel's top edge. */
.pcib-tabs.is-ready .pcib-tabs__tab.is-active::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: calc(-0.9rem - 8px);
	width: 16px;
	height: 16px;
	margin-left: -8px;
	background: var(--pcib-tabs-tint);
	border-top: 1px solid var(--wp--preset--color--primary-alt-accent);
	border-left: 1px solid var(--wp--preset--color--primary-alt-accent);
	transform: rotate(45deg);
}

/* ---------- Panels ---------- */
.pcib-tabs {
	--pcib-tabs-tint: var(--wp--preset--color--primary-alt);
}

.pcib-tabs .pcib-tabs__panels {
	background: var(--pcib-tabs-tint);
	border: 1px solid var(--wp--preset--color--primary-alt-accent);
	border-radius: 24px;
	padding: clamp(1.5rem, 3vw, 2.75rem);
	margin-top: 0 !important;
}

.pcib-tabs .pcib-tabs__panel {
	margin: 0 !important;
}

.pcib-tabs .pcib-tabs__panel + .pcib-tabs__panel {
	margin-top: var(--wp--preset--spacing--large) !important;
}

/* With the script: all panels in one grid cell, so the box keeps the height of
   the tallest panel; the selected one cross-fades in. */
.pcib-tabs.is-ready .pcib-tabs__panels {
	display: grid;
}

.pcib-tabs.is-ready .pcib-tabs__panel {
	grid-area: 1 / 1;
	margin: 0 !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.pcib-tabs.is-ready .pcib-tabs__panel.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.pcib-tabs.is-ready .pcib-tabs__panel,
	.pcib-tabs.is-ready .pcib-tabs__panel.is-active {
		transition: none;
	}
}

/* Points with a small check. */
.pcib-tabs .pcib-list-check {
	list-style: none;
	padding-left: 0 !important;
	/* V25: a step below body text, so the points do not compete with the panel headline. */
	font-size: 0.9375rem;
	line-height: 1.6;
}

.pcib-tabs .pcib-list-check li {
	position: relative;
	padding-left: 1.75rem;
}

.pcib-tabs .pcib-list-check li + li {
	margin-top: 0.55rem;
}

.pcib-tabs .pcib-list-check li::before {
	content: "";
	position: absolute;
	left: 0;
	/* Centred on the first line of the point. */
	top: calc((1lh - 1.1rem) / 2);
	width: 1.1rem;
	height: 1.1rem;
	background: var(--wp--preset--color--primary-text);
	-webkit-mask: url("../../../themes/pcib-ollie/assets/icons/check.svg?v=2") center / contain no-repeat;
	mask: url("../../../themes/pcib-ollie/assets/icons/check.svg?v=2") center / contain no-repeat;
}

/* ---------- Phones: 2 x 2 compact tabs, text above the visual ---------- */
@media (max-width: 781px) {
	.pcib-tabs .pcib-tabs__list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.5rem;
	}

	.pcib-tabs .pcib-tabs__tab {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.8rem 0.85rem;
		border-radius: 12px;
	}

	.pcib-tabs .pcib-tabs__tab > * + * {
		margin-top: 0;
	}

	.pcib-tabs .pcib-tabs__tab .wp-block-image {
		flex: none;
		margin: 0;
	}

	.pcib-tabs .pcib-tabs__tab .wp-block-image img {
		width: 20px !important;
	}

	.pcib-tabs .pcib-tabs__preview {
		display: none;
	}

	.pcib-tabs.is-ready .pcib-tabs__tab.is-active::before {
		display: none;
	}

	.pcib-tabs .pcib-tabs__panels {
		border-radius: 18px;
		padding: 1.25rem 1rem;
	}

	/* Only the selected panel, at its own height (no fixed height on phones). */
	.pcib-tabs.is-ready .pcib-tabs__panel:not(.is-active) {
		display: none;
	}
}