/**
 * Base typography, body, and global element styling.
 * Everything here reads from CSS variables — no hardcoded brand colors.
 */

body {
	position: relative;
	background-color: var(--sh-background);
	color: var(--sh-text);
	font-family: var(--sh-font-body);
	font-weight: 400;
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/**
 * Soft blurred glow spots layered above the body's own background-image
 * (e.g. the Elementor-set tiled pattern on body.elementor-page-*) and
 * below all page content. body has position: relative above, which
 * makes this ::after a child stacking box positioned relative to the
 * viewport-filling body element; #page is given a higher z-index so
 * real content always paints on top.
 */
body.sh-glow-body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 12% 8%, var(--sh-secondary) 0%, transparent 32%),
		radial-gradient(circle at 88% 18%, var(--sh-accent) 0%, transparent 28%),
		radial-gradient(circle at 20% 82%, var(--sh-primary) 0%, transparent 34%),
		radial-gradient(circle at 85% 88%, var(--sh-secondary) 0%, transparent 30%);
	opacity: 0.45;
	filter: blur(70px);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sh-font-heading);
	color: var(--sh-heading);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem); }
h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); }
h4 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); }

p {
	color: var(--sh-text-muted);
}

a {
	color: var(--sh-link);
	transition: color var(--sh-transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--sh-link-hover);
}

::selection {
	background: var(--sh-accent);
	color: var(--sh-primary);
}

:focus-visible {
	outline: 2px solid var(--sh-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Skip link */
.sh-skip-link {
	position: fixed;
	top: -100px;
	left: var(--sh-space-4);
	z-index: 9999;
	background: var(--sh-accent);
	color: var(--sh-primary);
	padding: var(--sh-space-3) var(--sh-space-5);
	border-radius: var(--sh-radius-sm);
	font-weight: 600;
	transition: top var(--sh-transition-base);
}

.sh-skip-link:focus {
	top: var(--sh-space-4);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.sh-site {
	position: relative;
	z-index: 1;
	/* overflow-x: hidden here would disable position: sticky on the
	   header inside it; clip prevents horizontal scroll without that
	   side effect. */
	overflow-x: clip;
}

.site-main {
	width: 100%;
	display: block;
}

.site-content {
	width: 100%;
}

/* Boxed content wrapper used by non-Elementor templates only
   (single posts, archives, 404). Elementor body content never
   receives this class, so full-width sections remain unaffected. */
.sh-content-boxed {
	padding-block: var(--sh-space-9) var(--sh-space-9);
}

.sh-page-title {
	margin-bottom: var(--sh-space-6);
}