/**
 * Family Care Center — Global Styles
 *
 * Token values match the Figma "Brand Rollout" file.
 * Font: Apercu Pro (loaded site-wide via Divi).
 *
 * This file loads on all FCC pages via conditional enqueue.
 * Individual block styles are loaded via block.json.
 */

/* ── CSS Custom Properties (design tokens) ── */
.family-care-center {
	/* Backgrounds */
	--fcc-color-page-bg: #f7f5f2;
	--fcc-color-warm-gray: #ece7e0;
	--fcc-color-dark: #0e1f22;
	--fcc-color-hero-navy: #071b3b;
	--fcc-color-footer-sub: #2d3b3e;

	/* Text */
	--fcc-color-text: #0e1f22;
	--fcc-color-text-secondary: #2d3b3e;
	--fcc-color-text-placeholder: #969da0;
	--fcc-color-text-light: #f7f5f2;
	--fcc-color-text-white: #ffffff;
	--fcc-color-text-muted: #ece7e0;

	/* Accent / UI */
	--fcc-color-accent: #ffd600;
	--fcc-color-error: #fa7269;
	--fcc-color-link: #2331d0;

	/* Borders */
	--fcc-color-border: #4b575a;

	/* Spacing */
	--fcc-spacing-xs: 8px;
	--fcc-spacing-sm: 16px;
	--fcc-spacing-md: 24px;
	--fcc-spacing-lg: 32px;
	--fcc-spacing-xl: 48px;
	--fcc-spacing-2xl: 64px;
	--fcc-spacing-3xl: 88px;
	--fcc-spacing-4xl: 120px;

	/* Layout */
	--fcc-max-width: 1120px;

	/* Components */
	--fcc-border-radius-card: 4px;
	--fcc-nav-height: 97px;
	--fcc-button-height: 49px;

	/* Base styles */
	box-sizing: border-box;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: var(--fcc-color-text);
	background-color: var(--fcc-color-page-bg);
}

.family-care-center *,
.family-care-center *::before,
.family-care-center *::after {
	box-sizing: inherit;
}

/* ── Divi Override Layer ──
 * Divi sets aggressive global styles on common elements.
 * These resets prevent Divi from leaking into FCC blocks. */
.family-care-center h1,
.family-care-center h2,
.family-care-center h3,
.family-care-center h4,
.family-care-center h5,
.family-care-center h6 {
	letter-spacing: normal;
	text-transform: none;
	color: var(--fcc-color-text);
	padding-bottom: 0;
}

.family-care-center p,
.family-care-center li,
.family-care-center span,
.family-care-center a {
	letter-spacing: normal;
	text-transform: none;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.family-care-center ul,
.family-care-center ol {
	padding: 0;
	list-style-position: outside;
}

.family-care-center img {
	max-width: 100%;
	height: auto;
}

/* ── Skip Link ── */
.fcc-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 100000;
	padding: var(--fcc-spacing-xs) var(--fcc-spacing-sm);
	background: var(--fcc-color-dark, #0e1f22);
	color: var(--fcc-color-text-white, #ffffff);
	text-decoration: none;
	font-weight: 500;
}

.fcc-skip-link:focus {
	position: fixed;
	top: var(--fcc-spacing-xs);
	left: var(--fcc-spacing-xs);
	width: auto;
	height: auto;
	outline: 2px solid var(--fcc-color-accent, #ffd600);
	outline-offset: 2px;
}

/* ── Scroll padding — accounts for sticky headers ── */
.family-care-center {
	scroll-padding-top: calc(var(--fcc-nav-height, 97px) + 16px);
}

/* ── Smooth scroll (respects motion preferences) ── */
@media (prefers-reduced-motion: no-preference) {
	.family-care-center {
		scroll-behavior: smooth;
	}
}

/* ── Layout ── */
.fcc-layout {
	max-width: var(--fcc-max-width);
	margin: 0 auto;
	padding: 0 var(--fcc-spacing-md);
}

.fcc-layout--with-sidebar {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--fcc-spacing-xl);
}

@media (max-width: 1024px) {
	.fcc-layout--with-sidebar {
		grid-template-columns: 1fr;
	}
}