/*
 * Cataleya — supplementary CSS.
 *
 * House rule: if it can be expressed in theme.json, it goes in theme.json.
 * Only what JSON cannot cover yet lives here: block styles registered in
 * functions.php, accessibility and small interaction details.
 */

/* ---- Accessibility ------------------------------------------------------ */

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
}

/* ---- Interaction -------------------------------------------------------- */

.wp-block-button__link,
.wp-block-navigation a,
.wp-block-post-title a {
	transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

/* ---- Block styles (register_block_style in functions.php) --------------- */

/* Group → Card */
.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--l);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--40);
}

/* Image → Rounded corners */
.wp-block-image.is-style-rounded img {
	border-radius: var(--wp--custom--radius--l);
}

/* List → Checklist */
.wp-block-list.is-style-checklist {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-checklist li {
	padding-left: 1.75em;
	position: relative;
}

.wp-block-list.is-style-checklist li::before {
	color: var(--wp--preset--color--secondary);
	content: "✓";
	font-weight: 700;
	left: 0;
	position: absolute;
}

/* ---- Details ----------------------------------------------------------- */

/* Featured image in lists: fixed ratio so the grid does not jump. */
.wp-block-post-template .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--m);
}

/* Paragraph → Badge: a small pill for "New", "Pre-order", "-20%". Inside a
 * card it sits over the top-left corner of the image. :where keeps the
 * specificity low so colors chosen in the editor win. */
:where(.wp-block-group.is-style-card) {
	position: relative;
}

:where(p.is-style-badge) {
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary-contrast);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	padding: 0.3em 0.85em;
	width: max-content;
}

:where(.wp-block-group.is-style-card) > p.is-style-badge {
	left: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--20));
	position: absolute;
	top: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--20));
	z-index: 1;
}

/* Query Loop / Product Collection / Gallery → Carousel: native horizontal
 * scroll with snap points. assets/js/cataleya.js adds the arrows. */
.is-style-carousel {
	position: relative;
}

/* Gallery: the block itself is the track. Core sizes the images with an
 * id-level selector, so the same trick is needed to win. */
.wp-block-gallery.is-style-carousel {
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: var(--wp--preset--spacing--20);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.wp-block-gallery.is-style-carousel::-webkit-scrollbar {
	display: none;
}

.wp-block-gallery.has-nested-images.is-style-carousel figure.wp-block-image:not(#individual-image) {
	flex: 0 0 var(--cataleya-carousel-item, clamp(16rem, 60%, 28rem));
	scroll-snap-align: start;
	width: auto;
}

.wp-block-gallery.is-style-carousel + .cataleya-carousel__nav {
	margin-top: 0;
}

/* WooCommerce prints its grid rules after the theme CSS: outrank them. */
.wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template__responsive {
	display: flex;
	grid-template-columns: none;
}

.wp-block-woocommerce-product-collection.is-style-carousel .wc-block-product-template__responsive > li {
	flex: 0 0 var(--cataleya-carousel-item, clamp(15rem, 23%, 19rem));
	width: auto;
}

.is-style-carousel .wp-block-post-template,
.is-style-carousel .wc-block-product-template,
.is-style-carousel .wp-block-woocommerce-product-template {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: var(--wp--preset--spacing--20);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.is-style-carousel .wp-block-post-template::-webkit-scrollbar,
.is-style-carousel .wc-block-product-template::-webkit-scrollbar,
.is-style-carousel .wp-block-woocommerce-product-template::-webkit-scrollbar {
	display: none;
}

.is-style-carousel .wp-block-post-template > li,
.is-style-carousel .wc-block-product-template > li,
.is-style-carousel .wp-block-woocommerce-product-template > li {
	flex: 0 0 var(--cataleya-carousel-item, clamp(15rem, 23%, 19rem));
	margin: 0;
	scroll-snap-align: start;
	width: auto;
}

.is-style-carousel .wp-block-post-template:focus-visible,
.is-style-carousel .wc-block-product-template:focus-visible,
.is-style-carousel .wp-block-woocommerce-product-template:focus-visible {
	outline-offset: 6px;
}

.cataleya-carousel__nav {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--20);
}

.cataleya-carousel__btn {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	padding: 0;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
	width: 2.75rem;
}

.cataleya-carousel__btn:hover:not(:disabled) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.cataleya-carousel__btn:disabled {
	cursor: default;
	opacity: 0.35;
}

/* Group → Tabs: each child group is a panel, its first heading the label. */
.cataleya-tabs__list {
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
}

.cataleya-tabs__tab {
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	margin-bottom: -1px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10);
	transition: color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.cataleya-tabs__tab:hover,
.cataleya-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}