/*
 * Sportinn — global base layer.
 * Component styles live with their blocks; this file carries only the
 * cross-cutting bits theme.json cannot express. All values reference WP
 * preset CSS custom properties so the Site Editor stays the source of truth.
 */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Muted helper text used across blocks. */
.sportinn-muted {
	color: var(--wp--preset--color--muted);
}

/* Editor-only: click-to-edit image affordance. */
.sportinn-img-edit {
	position: relative;
}
.sportinn-img-edit:hover img {
	outline: 2px solid var(--wp--preset--color--primary, #0c768a);
	outline-offset: 2px;
	border-radius: 8px;
}
.sportinn-img-edit::after {
	content: "✎";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #0c768a);
	color: #fff;
	font-size: 13px;
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}
.sportinn-img-edit:hover::after {
	opacity: 1;
}

/* Section eyebrow / subtitle. */
.sportinn-subtitle {
	color: var(--wp--preset--color--muted);
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
}

/* ----------------------------------------------------------------------
 * Decorative background blobs.
 * A single fixed-behind layer scattered down both edges. Density and colour
 * mirror the approved mockup; sections render above via stacking context.
 * Toggle globally with the body class `has-blobs` (set from theme options).
 * ---------------------------------------------------------------------- */
.sportinn-blobs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.sportinn-blobs .blob {
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
}

.sportinn-blobs .blob--sm {
	width: 190px;
	height: 190px;
}

.sportinn-blobs .blob--teal {
	background: radial-gradient(circle, rgba(12, 118, 138, 0.18) 60%, transparent 78%);
}

.sportinn-blobs .blob--orange {
	background: radial-gradient(circle, rgba(255, 128, 59, 0.16) 60%, transparent 78%);
}

/* Keep real content above the decorative layer. */
.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* ----------------------------------------------------------------------
 * Reduced-motion: disable marquee / counters / smooth scroll animations.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.sportinn-marquee__track,
	.sportinn-scroller {
		animation: none !important;
		scroll-behavior: auto;
	}
}