/* Say Happy Birthday Worldwide: global styles.
   Colours come from Elementor Site Settings (--e-global-color-*), with the prototype's values as fallbacks. */

html {
	background-color: var(--e-global-color-shbnight, #100b24);
}

/* Midnight to plum night sky, as in the original design. Fixed so it never scrolls or repeats. */
body {
	min-height: 100vh;
	background:
		radial-gradient(ellipse 90% 70% at 50% 110%, rgba(90, 22, 84, 0.55), transparent 60%),
		linear-gradient(165deg,
			var(--e-global-color-shbnight, #100b24) 0%,
			var(--e-global-color-shbmidnight, #1b1038) 45%,
			var(--e-global-color-secondary, #381243) 100%) fixed;
	color: var(--e-global-color-text, #f7f2e9);
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

::selection {
	background: var(--e-global-color-primary, #f6c46e);
	color: var(--e-global-color-shbnight, #100b24);
}

/* A clear gold focus ring on everything you can tab to. */
html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--e-global-color-primary, #f6c46e);
	outline-offset: 3px;
}

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

/* Hello's simple header and footer (until the Elementor header and footer are built). */
html body .site-header .site-title,
html body .site-header .site-title a {
	color: var(--e-global-color-primary, #f6c46e);
	font-family: var(--e-global-typography-primary-font-family, "Playfair Display"), Georgia, serif;
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
}
html body .site-header .site-description,
html body .site-footer {
	color: var(--e-global-color-shbdim, rgba(255, 255, 255, 0.72));
}