/*
 * Global base + layout scaffolding: container, section rhythm, accessibility.
 */

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

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

body {
	margin: 0;
	background: var(--fd-white);
	color: var(--fd-ink-700);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* Content width helpers used by patterns/parts (WP's own layout classes handle blocks). */
.fd-container {
	width: 100%;
	max-width: var(--fd-container);
	margin-inline: auto;
	padding-inline: var(--fd-gutter);
}
.fd-container--wide { max-width: var(--fd-container-wide); }

/* Vertical rhythm — big, alternating bands (research: "strong vertical rhythm").
   Marketing sections breathe (--fd-section-y); inventory-adjacent sections tighten
   (--fd-section--tight). No two adjacent bands should share a background. */
.fd-section { padding-block: var(--fd-section-y); }
.fd-section--tight { padding-block: var(--fd-section-y-tight); }
.fd-section--navy {
	background: var(--fd-navy-800);
	color: var(--fd-mist);
}
.fd-section--navy :is(h1, h2, h3, h4, h5, h6) { color: var(--fd-white); }
.fd-section--soft  { background: var(--fd-paper-soft); }
.fd-section--paper { background: var(--fd-paper); }
/* Subtle boat/RV duality surfaces — rationed to shop-by-type + boat/RV intros. */
.fd-section--water { background: var(--fd-tint-water); }
.fd-section--road  { background: var(--fd-tint-road); }

/* Section header + eyebrow mark (orange rule + label). */
.fd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fd-orange-700);
}
.fd-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 3px;
	background: var(--fd-orange-500);
	border-radius: 2px;
}
.fd-section--navy .fd-eyebrow { color: var(--fd-orange-400); }

/* Accessibility. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--fd-focus-ring);
	border-radius: var(--fd-r-sm);
}
.fd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-modal);
	padding: 0.75rem 1.25rem;
	background: var(--fd-orange-500);
	color: var(--fd-white);
	font-weight: 700;
}
.fd-skip-link:focus { left: 0; }

.fd-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;
}