/*
 * Joker base styles: only what theme.json cannot express.
 * Values come exclusively from theme.json presets and custom properties.
 */

/* Sections handle their own spacing; no gap between header, main and footer. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Sticky, translucent header */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.joker-logo a {
	color: inherit;
	text-decoration: none;
}

/*
 * Mini-cart count badge. Woo computes its colors in JS from the surrounding
 * background and sets them inline, which fails on the translucent header.
 */
.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--accent-2) !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--base) !important;
	font-weight: 700;
}

.wp-element-button,
.wp-block-button__link,
.wp-block-navigation-item__content {
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

/* Section spacing in the classic PHP page templates */
.joker-page-section {
	padding-block: var(--wp--preset--spacing--70);
}

/* Skip link for the classic PHP templates (block templates get their own). */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999rem;
	top: 0.5rem;
	z-index: 100;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
}

.skip-link.screen-reader-text:focus {
	left: 0.5rem;
}