/**
 * Reset + base typography — carries over the source design's global rules
 * (docs/design-analysis.md §2, §6) as plain CSS instead of inline styles.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-padding-top: 92px; /* keeps anchor targets clear of the sticky header */
	overflow-x: hidden; /* safety net against the nav-drawer overflow issue — see nav-drawer.css; X-axis only, so position:sticky on the header (Y-axis) is unaffected */
}

body {
	overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/**
 * !important below on body/heading/link is a deliberate, narrow safety net — not
 * routine practice. Hello Elementor's reset.css sets these exact properties as
 * plain element selectors too (body{font-family:...}, h1..h6{font-family:inherit;
 * font-weight:500}, a{color:#c36}), which *tie* in specificity with these rules and
 * would win purely from loading after ours. inc/enqueue.php now correctly blocks
 * that stylesheet from printing at all (a handle-name bug meant it wasn't actually
 * being blocked before, despite looking like it should be — see that file's
 * comment), so these !important rules are now a second independent layer rather
 * than the only thing standing between us and the bug.
 */
body {
	margin: 0;
	background: var(--safi-bg) !important;
	color: var(--safi-text) !important;
	font-family: var(--safi-font-body) !important;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	font-family: var(--safi-font-heading) !important;
	font-weight: 700 !important;
	margin: 0;
}

p {
	margin: 0;
}

/* Not !important, deliberately: .nav a, .business-card__link, footer links etc. all
   set their own explicit (non-important) color, which a blanket !important here
   would incorrectly override too. Bare unclassed links are protected by the
   style_loader_tag filter in inc/enqueue.php blocking reset.css entirely instead. */
a {
	color: inherit;
}

img,
svg {
	max-width: 100%;
	display: block;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

/* Not !important, deliberately: .btn--primary, .chip, .nav-toggle etc. all set their
   own explicit (non-important) color/background/border — a blanket !important here
   would override those too (a plain button selector still beats a more-specific
   non-important class once !important is involved). Protected by the
   style_loader_tag filter instead; genuinely unstyled buttons are rare-to-nonexistent
   in this theme (every button has its own component class), so the risk this leaves
   open is small next to the risk of silently breaking our own button colors. */
button {
	font: inherit;
	color: inherit;
}

::selection {
	background: var(--safi-selection-bg);
}

/* Skip-to-content link: hidden until keyboard focus brings it into view */
.skip-link {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 200;
	background: var(--safi-petrol);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--safi-radius-sm);
	text-decoration: none;
	font-weight: 600;
	transition: top 0.15s ease;
}

.skip-link:focus-visible {
	top: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.skip-link {
		transition: none;
	}
}

/* Global focus-visible ring — every interactive element in the theme inherits this */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var(--safi-focus-ring);
	outline-offset: var(--safi-focus-offset);
	border-radius: var(--safi-radius-sm);
}

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