/**
 * Zezuru Elements — section snapping and section dots.
 *
 * Loaded only on pages that snap or show section dots (Zezel_Scroll).
 * Snapping is CSS Scroll Snap on the page itself: the browser does the
 * smooth movement, so keyboard, trackpad, touch and assistive technology
 * keep working exactly as visitors expect.
 *
 * @package Zezuru_Elements
 * @since   2.8.0
 */

html:has(> body.zezel-snap--proximity),
html.zezel-snap-y--proximity { scroll-snap-type: y proximity; }
html:has(> body.zezel-snap--mandatory),
html.zezel-snap-y--mandatory { scroll-snap-type: y mandatory; }

@media (max-width: 781.98px) {
	html:has(> body.zezel-snap--no-mobile),
	html.zezel-snap-y--no-mobile { scroll-snap-type: none; }
}

/* Snap points: blocks marked in their Motion panel, or (auto) every
 * full-width block, cover and hero at the top level of the content. */
body.zezel-snap [data-zezel-snap],
body.zezel-snap--auto :is(.wp-block-post-content, .entry-content) > :is(.alignfull, .wp-block-cover, .zezel-hero) {
	scroll-snap-align: start;
}

/* Keep the very top (site header) and the footer reachable: both are
 * snap points too, so snapping never traps visitors between sections. */
body.zezel-snap :is(.wp-site-blocks > :first-child, #masthead, .site-header) {
	scroll-snap-align: start;
}

body.zezel-snap :is(.wp-site-blocks > footer, .wp-site-blocks > .wp-block-template-part:last-child, .site-footer, #colophon) {
	scroll-snap-align: end;
}

/* ---------------------------------------------------------------------
 * Section dots
 * ------------------------------------------------------------------ */
.zezel-scroll-dots {
	position: fixed;
	top: 50%;
	right: clamp(.5rem, 1.6vw, 1.5rem);
	z-index: 9990;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin: 0;
	padding: .45rem;
	list-style: none;
	border-radius: 999px;
	background: rgba(15, 16, 32, .28);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transform: translateY(-50%);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45);
}
.zezel-scroll-dots li { margin: 0; padding: 0; }
.zezel-scroll-dots button {
	position: relative;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.zezel-scroll-dots button::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	transition: height .4s var(--zezel-ease), background-color .2s ease;
}
.zezel-scroll-dots button:hover::before { background: #fff; }
.zezel-scroll-dots button[aria-current="true"]::before { height: 20px; background: #fff; }
.zezel-scroll-dots button:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; }
.zezel-scroll-dots__label {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	padding: .3rem .65rem;
	border-radius: 999px;
	background: rgba(15, 16, 32, .88);
	color: #fff;
	font: 600 12px/1.2 system-ui, sans-serif;
	white-space: nowrap;
	opacity: 0;
	transform: translate3d(6px, -50%, 0);
	pointer-events: none;
	transition: opacity .2s ease, transform .3s var(--zezel-ease);
}
.zezel-scroll-dots button:hover .zezel-scroll-dots__label,
.zezel-scroll-dots button:focus-visible .zezel-scroll-dots__label { opacity: 1; transform: translate3d(0, -50%, 0); }

@media (max-width: 781.98px) {
	.zezel-scroll-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.zezel-scroll-dots * { transition-duration: 0s !important; }
}