/* ==========================================================================
   Safari Premium — Base
   Resets / typography / Enfold overrides at the global layer.
   ========================================================================== */

/* Box-sizing */
.sp-html *, .sp-html *::before, .sp-html *::after { box-sizing: border-box; }

/* Body */
body {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	line-height: var(--sp-leading-base);
	color: var(--sp-color-brown);
	background: var(--sp-color-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Typography defaults */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sp-font-serif);
	font-weight: 500;
	color: var(--sp-color-brown);
	letter-spacing: var(--sp-tracking-tight);
	line-height: var(--sp-leading-snug);
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--sp-color-burnt-orange);
	text-decoration: none;
	transition: color var(--sp-dur-2) var(--sp-ease);
}
a:hover, a:focus-visible { color: var(--sp-color-brown); }

/* Enfold's parent base.css sets `a:hover, a:focus, a:visited { text-decoration: underline }`,
   which leaks a stray underline onto our themed chrome links on hover/focus (e.g. a second
   line under an active nav item). Our design uses color/border indicators, never text
   underline, on shell + component links. These selectors (2 classes) out-rank Enfold's
   single-class `a:hover` so no !important is needed. Long-form prose links are untouched. */
.sp-header a:hover, .sp-header a:focus, .sp-header a:visited,
.sp-footer a:hover, .sp-footer a:focus, .sp-footer a:visited,
.sp-btn:hover, .sp-btn:focus, .sp-btn:visited,
.sp-card a:hover, .sp-card a:focus, .sp-card a:visited,
.sp-section-head__link:hover, .sp-section-head__link:focus,
.sp-breadcrumbs a:hover, .sp-breadcrumbs a:focus {
	text-decoration: none;
}

/* Skip link */
.skip-link.screen-reader-text {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
}
.skip-link.screen-reader-text:focus {
	left: 12px;
	top: 12px;
	width: auto; height: auto;
	padding: 10px 18px;
	background: var(--sp-color-charcoal);
	color: var(--sp-color-cream);
	font-family: var(--sp-font-sans);
	font-weight: 600;
	border-radius: var(--sp-radius-md);
	z-index: 10000;
}

/* Globally visible focus state for keyboard users */
:focus-visible {
	outline: 2px solid var(--sp-color-burnt-orange);
	outline-offset: 2px;
	border-radius: var(--sp-radius-xs);
}

/* Site-level container */
.sp-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Container helper */
.sp-container {
	width: 100%;
	max-width: var(--sp-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sp-page-gutter);
	padding-right: var(--sp-page-gutter);
}
@media (max-width: 767px) {
	.sp-container {
		padding-left: var(--sp-page-gutter-mobile);
		padding-right: var(--sp-page-gutter-mobile);
	}
}

/* Section frame */
.sp-section {
	padding: var(--sp-section-pad-y) 0;
	background: var(--sp-color-cream);
}
.sp-section--ivory   { background: var(--sp-color-ivory); }
.sp-section--off     { background: var(--sp-color-off-white); }
.sp-section--charcoal { background: var(--sp-color-charcoal); color: var(--sp-color-cream); }
.sp-section--sm { padding: var(--sp-section-pad-y-sm) 0; }
@media (max-width: 767px) {
	.sp-section { padding: var(--sp-section-pad-y-mobile) 0; }
}

/* Headings — token-driven scale */
.sp-h1 {
	font-size: var(--sp-text-5xl);
	line-height: var(--sp-leading-tight);
}
.sp-h2 {
	font-size: var(--sp-text-4xl);
	line-height: 1.15;
}
.sp-h3 {
	font-size: var(--sp-text-2xl);
	line-height: var(--sp-leading-snug);
	letter-spacing: -0.005em;
}
.sp-h-display {
	font-size: var(--sp-text-6xl);
	line-height: 1.02;
	letter-spacing: -0.02em;
}
@media (max-width: 767px) {
	.sp-h1 { font-size: 34px; }
	.sp-h2 { font-size: 28px; }
	.sp-h3 { font-size: 19px; }
	.sp-h-display { font-size: 44px; line-height: 1.05; }
}

.sp-prose p {
	font-size: var(--sp-text-lg);
	line-height: var(--sp-leading-prose);
	margin: 0 0 1em;
}

.sp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-space-3);
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	font-weight: 600;
	letter-spacing: var(--sp-tracking-widest);
	text-transform: uppercase;
}
.sp-eyebrow--orange { color: var(--sp-color-burnt-orange); }
.sp-eyebrow--amber  { color: var(--sp-color-amber); }
.sp-eyebrow__rule {
	width: 24px;
	height: 1px;
	background: currentColor;
	display: inline-block;
}

/* Italic accent (in-line, used in display headings) */
.sp-italic { font-style: italic; }

/* Tabular nums for prices etc. */
.sp-tabular { font-variant-numeric: tabular-nums; }

/* Visually hidden text */
.sp-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Logo lockup */
.sp-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}
.sp-logo__mark {
	height: var(--sp-logo-size, 52px);
	width: var(--sp-logo-size, 52px);
	border-radius: 50%;
	object-fit: cover;
	background: var(--sp-color-cream);
	display: block;
}
.sp-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	font-family: var(--sp-font-serif);
}
.sp-logo__primary {
	font-size: calc(var(--sp-logo-size, 52px) * 0.32);
	font-weight: 600;
	letter-spacing: var(--sp-tracking-normal);
	color: var(--sp-color-brown);
}
.sp-logo__secondary {
	font-family: var(--sp-font-sans);
	font-size: calc(var(--sp-logo-size, 52px) * 0.22);
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--sp-color-burnt-orange);
	margin-top: 2px;
}
.sp-logo--dark .sp-logo__primary { color: var(--sp-color-cream); }
.sp-logo--dark .sp-logo__secondary { color: var(--sp-color-amber); }