/**
 * Versa Content Blocks — the bits Tailwind utilities can't express.
 * Layout/spacing/color live as theme Tailwind classes in the PHP markup.
 */

/* ---- Tab panels -------------------------------------------------------- */
/* No-JS / pre-JS default: only the first panel is visible. Once the view
   script runs, .vcb-tabs-ready hands control to .vcb-panel--active. SEO-tab
   panels all stay in the DOM (display:none is still crawled); hidden flavour
   tabs are empty [data-vcb-lazy] panels until the script fetches them. */
[data-vcb-panels] > .vcb-panel:not(:first-child) {
	display: none;
}
.vcb-tabs-ready [data-vcb-panels] > .vcb-panel {
	display: none;
}
.vcb-tabs-ready [data-vcb-panels] > .vcb-panel--active {
	display: block;
}
.vcb-seo-tabs.vcb-tabs-ready [data-vcb-panels] > .vcb-panel--active {
	display: grid;
}

/* Horizontal tab strips scroll on mobile without a visible scrollbar. */
.vcb-scrollbar-none {
	scrollbar-width: none;
}
.vcb-scrollbar-none::-webkit-scrollbar {
	display: none;
}

/* Flavour pills: tint/bg arrive as CSS custom props per button. */
.vcb-pill[aria-selected='true'] {
	background: var(--vcb-bg, #fff);
	border-color: var(--vcb-tint, currentColor);
	color: var(--vcb-tint, currentColor);
	/* Editor tints on their own pale bg land just under 4.5:1 (e.g. #C9362C
	   on #F8E8E8 = 4.37:1); a 25 % darker text shade clears WCAG 1.4.3. */
	color: color-mix(in srgb, var(--vcb-tint, currentColor) 75%, #000);
	font-weight: 700;
}

/* ---- SEO prose --------------------------------------------------------- */
/* Numbered chip lists (the design's "Tank/pod — …" list) without asking
   editors for special markup: any list inside a SEO tab gets chip counters. */
.vcb-seo-prose ul,
.vcb-seo-prose ol {
	list-style: none;
	padding-left: 0;
	counter-reset: vcb-item;
}
.vcb-seo-prose ul > li,
.vcb-seo-prose ol > li {
	position: relative;
	padding-left: 2.4rem;
	counter-increment: vcb-item;
}
.vcb-seo-prose ul > li::before,
.vcb-seo-prose ol > li::before {
	content: counter(vcb-item);
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 0.45rem;
	background: var(--versa-100, #e0f2fe);
	color: var(--versa-800, #075985);
	font-size: 0.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---- Device explanations (native disclosure, also editable in WP) ----- */
.vcb-device-types {
	counter-reset: vcb-device;
}
.vcb-device-type {
	position: relative;
	padding: 1rem 0 1rem 2.4rem;
	border-bottom: 1px solid #e5e7eb;
	counter-increment: vcb-device;
}
.vcb-device-type::before {
	content: counter(vcb-device);
	position: absolute;
	left: 0;
	top: 1rem;
	display: grid;
	place-items: center;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 0.45rem;
	background: var(--versa-100, #e0f2fe);
	color: var(--versa-800, #075985);
	font-size: 0.75rem;
	font-weight: 800;
}
.vcb-seo-prose .vcb-device-type h4 {
	margin: 0 0 0.35rem;
	font-size: 1rem;
}
.vcb-seo-prose .vcb-device-type p {
	margin: 0;
}
.vcb-seo-prose .vcb-type-details {
	margin-top: 0.35rem;
}
.vcb-type-details > summary {
	min-height: 44px;
	padding: 0.65rem 0;
	cursor: pointer;
	color: var(--versa-800, #075985);
	font-weight: 600;
}
.vcb-type-details > summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 0.2rem;
}
.vcb-seo-prose .vcb-type-details > p {
	margin: 0 0 0.75rem;
}

/* ---- FAQ (<details>) --------------------------------------------------- */
.vcb-faq-item > summary::-webkit-details-marker {
	display: none;
}
.vcb-faq-item[open] > summary {
	font-weight: 800;
}
.vcb-faq-item[open] .vcb-faq-chev {
	background: var(--versa-800, #075985);
	color: #fff;
	transform: rotate(180deg);
}
.vcb-faq-chev {
	transition: transform 0.18s ease, background 0.18s ease;
}

/* ---- Store strip ------------------------------------------------------- */
/* The second photo sits on top of the featured one, invisible until the card
   is hovered or focused. It still loads with the page, so the swap is instant. */
.vcb-store-strip__second {
	opacity: 0;
	transition: opacity 0.3s ease;
}
.vcb-store-strip__card:hover .vcb-store-strip__second,
.vcb-store-strip__card:focus-visible .vcb-store-strip__second {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.vcb-store-strip__second {
		transition: none;
	}
}

/* On-demand flavour tab still loading: keep the previous grid's height
   (set inline by the script) and show a small spinner. */
.vcb-flavour-tabs .vcb-panel[aria-busy='true'] {
	position: relative;
}
.vcb-flavour-tabs .vcb-panel[aria-busy='true']::after {
	content: '';
	position: absolute;
	top: 3rem;
	left: 50%;
	width: 1.75rem;
	height: 1.75rem;
	margin-left: -0.875rem;
	border: 3px solid #e5e7eb;
	border-top-color: #6b7280;
	border-radius: 9999px;
	animation: vcb-spin 0.8s linear infinite;
}
@keyframes vcb-spin {
	to {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.vcb-flavour-tabs .vcb-panel[aria-busy='true']::after {
		animation: none;
	}
}

/* ---- Product carousel -------------------------------------------------- */
/* Arrows render hidden on mobile (Tailwind hidden/md:flex); JS additionally
   turns each off at its end of the track. */
.vcb-product-carousel .vcb-arrow--off {
	display: none;
}

/* ---- Small polyfills (Tailwind 3.3 lacks text-wrap utilities) ---------- */
.vcb-seo-tabs .text-balance,
.vcb-faq .text-balance,
.vcb-flavour-tabs .text-balance,
.vcb-promo-pair .text-balance,
.vcb-store-strip .text-balance,
.vcb-guide-strip .text-balance {
	text-wrap: balance;
}