/* =====================================================================
 * VGS Base — base.css
 *
 * Layout & layer:
 *   1. Token defaults   (everything via CSS custom properties)
 *   2. Reset / typography
 *   3. Primitives (container, grid, eyebrow, display, prose)
 *   4. Components (header, nav, button, card, section grounds, FAQ, footer)
 *   5. Utilities (sr-only, skiplink, reveal)
 *
 * Child themes override token values by enqueuing a tokens.css that sets
 * `:root { --... }` — no need to override component rules.
 * ===================================================================== */

/* ----- 1. TOKEN DEFAULTS ------------------------------------------------ */
:root {
	/* Colors — neutral, brand-agnostic defaults. Child overrides these. */
	--color-bg-page: #FAFAF8;
	--color-bg-surface: #FFFFFF;
	--color-bg-subtle: #F2EFEA;
	--color-bg-inverse: #1B1B1B;
	--color-brand-primary: #1B1B1B;
	--color-brand-primary-hover: #000000;
	--color-brand-accent: #B89B6F;
	--color-text-primary: #171514;
	--color-text-secondary: #5E554C;
	--color-text-inverse: #FFFFFF;
	--color-text-inverse-secondary: #D8CFC0;
	--color-border-default: #E8E2D8;
	--color-border-strong: #BFB7AB;

	/* Type — defaults. Child overrides font families. */
	--font-display: Georgia, "Times New Roman", serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, monospace;

	--fs-display-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);
	--fs-display-section: clamp(1.875rem, 2.5vw + 1rem, 2.5rem);
	--fs-h3: 1.375rem;
	--fs-h4: 1.125rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-eyebrow: 0.6875rem;

	--lh-display: 1.1;
	--lh-body: 1.625;

	--ls-eyebrow: 0.22em;
	--ls-display: -0.01em;

	/* Spacing scale (px-equivalents named, value in rem) */
	--space-2xs: 0.25rem;   /* 4 */
	--space-xs:  0.5rem;    /* 8 */
	--space-sm:  0.75rem;   /* 12 */
	--space-md:  1rem;      /* 16 */
	--space-lg:  1.5rem;    /* 24 */
	--space-xl:  2rem;      /* 32 */
	--space-2xl: 3rem;      /* 48 */
	--space-3xl: 4rem;      /* 64 */
	--space-4xl: 6rem;      /* 96 */
	--space-5xl: 8rem;      /* 128 */

	--container-max: 1264px;
	--container-narrow: 760px;
	--container-pad: clamp(1rem, 3vw, 2rem);

	--radius-none: 0;
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-pill: 999px;

	--shadow-card: 0 8px 24px -8px rgba(23,21,20,.08);
	--shadow-lift: 0 16px 40px -16px rgba(23,21,20,.12);

	--ease: cubic-bezier(.2,.7,.2,1);
	--dur-1: 180ms;
	--dur-2: 320ms;
	--dur-3: 600ms;
}

/* ----- 2. RESET / TYPOGRAPHY ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-primary);
	background: var(--color-bg-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible {
	outline: 2px solid var(--color-brand-primary);
	outline-offset: 3px;
	border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--ls-display);
	line-height: var(--lh-display);
	margin: 0 0 var(--space-md);
	color: var(--color-text-primary);
}

p { margin: 0 0 var(--space-md); }
ul, ol { margin: 0 0 var(--space-md); padding-left: 1.25em; }
li { margin-bottom: var(--space-xs); }
hr { border: 0; border-top: 1px solid var(--color-border-default); margin: var(--space-xl) 0; }
::selection { background: color-mix(in srgb, var(--color-brand-primary) 18%, transparent); color: var(--color-text-primary); }

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

/* ----- 3. PRIMITIVES --------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }

.vgs-eyebrow {
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-brand-primary);
	margin: 0 0 var(--space-md);
}
.vgs-eyebrow--on-inverse { color: var(--color-brand-accent); }

.vgs-display {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--ls-display);
	margin: 0 0 var(--space-lg);
}
.vgs-display--hero    { font-size: var(--fs-display-hero); line-height: var(--lh-display); }
.vgs-display--section { font-size: var(--fs-display-section); line-height: var(--lh-display); }

.vgs-h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; margin: 0 0 var(--space-sm); }

.vgs-tagline { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0 0 var(--space-xl); }
.vgs-section-intro { font-size: 1.0625rem; color: var(--color-text-secondary); max-width: 60ch; margin: 0 0 var(--space-2xl); }
.vgs-meta { font-size: var(--fs-small); color: var(--color-text-secondary); }

.vgs-prose { max-width: 65ch; }
.vgs-prose p { line-height: var(--lh-body); }
.vgs-prose h2, .vgs-prose h3 { margin-top: var(--space-2xl); }
.vgs-prose a { color: var(--color-brand-primary); }

.vgs-grid { display: grid; gap: var(--space-xl); }
.vgs-grid--cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ----- 4. COMPONENTS --------------------------------------------------- */

/* Sections + grounds */
.vgs-section { display: block; }
.vgs-ground-page    { background: var(--color-bg-page); color: var(--color-text-primary); }
.vgs-ground-surface { background: var(--color-bg-surface); color: var(--color-text-primary); }
.vgs-ground-subtle  { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.vgs-ground-inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.vgs-ground-inverse :is(h1,h2,h3,h4,h5,h6,p,a) { color: inherit; }
.vgs-ground-inverse .vgs-tagline { color: var(--color-text-inverse-secondary); }

.vgs-pad-xs  { padding-block: var(--space-lg); }
.vgs-pad-sm  { padding-block: var(--space-xl); }
.vgs-pad-md  { padding-block: var(--space-2xl); }
.vgs-pad-lg  { padding-block: var(--space-3xl); }
.vgs-pad-xl  { padding-block: var(--space-4xl); }
.vgs-pad-2xl { padding-block: var(--space-5xl); }

/* Buttons */
.vgs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: 0.875rem 1.5rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: var(--radius-xs);
	border: 1px solid transparent;
	transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
	cursor: pointer;
	min-height: 44px;
}
.vgs-btn--primary {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}
.vgs-btn--primary:hover, .vgs-btn--primary:focus-visible {
	background: var(--color-brand-primary-hover);
}
.vgs-btn--secondary {
	background: transparent;
	border-color: var(--color-brand-primary);
	color: var(--color-brand-primary);
}
.vgs-btn--secondary:hover, .vgs-btn--secondary:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}
.vgs-btn--ghost {
	background: transparent;
	border-color: var(--color-border-default);
	color: var(--color-text-primary);
}
.vgs-btn--ghost:hover, .vgs-btn--ghost:focus-visible {
	border-color: var(--color-brand-primary);
	color: var(--color-brand-primary);
}
.vgs-ground-inverse .vgs-btn--ghost { border-color: var(--color-text-inverse); color: var(--color-text-inverse); }
.vgs-ground-inverse .vgs-btn--ghost:hover { background: var(--color-text-inverse); color: var(--color-bg-inverse); }

.vgs-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

/* Header + nav */
.vgs-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--color-bg-page) 92%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--color-border-default);
}
.vgs-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-md);
	gap: var(--space-lg);
}
.vgs-header__brand { text-decoration: none; display: inline-flex; align-items: center; }
.vgs-wordmark { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.04em; color: var(--color-text-primary); }

.vgs-nav__list {
	display: flex;
	gap: var(--space-xl);
	list-style: none;
	margin: 0;
	padding: 0;
}
.vgs-nav__list a {
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text-primary);
	padding: 0.5rem 0;
}
.vgs-nav__list a:hover { color: var(--color-brand-primary); }

.vgs-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
}
.vgs-nav-toggle__bars,
.vgs-nav-toggle__bars::before,
.vgs-nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.vgs-nav-toggle__bars { position: relative; }
.vgs-nav-toggle__bars::before { content: ''; position: absolute; top: -7px; }
.vgs-nav-toggle__bars::after  { content: ''; position: absolute; top:  7px; }
.vgs-nav-toggle[aria-expanded="true"] .vgs-nav-toggle__bars { background: transparent; }
.vgs-nav-toggle[aria-expanded="true"] .vgs-nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.vgs-nav-toggle[aria-expanded="true"] .vgs-nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 800px) {
	.vgs-nav-toggle { display: inline-flex; }
	.vgs-nav {
		position: absolute;
		inset: 100% 0 auto 0;
		background: var(--color-bg-page);
		border-bottom: 1px solid var(--color-border-default);
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--dur-2) var(--ease);
	}
	.vgs-nav.is-open { max-height: 80vh; }
	.vgs-nav__list { flex-direction: column; padding: var(--space-lg) var(--container-pad); gap: var(--space-sm); }
}

/* Hero */
.vgs-hero__inner { display: grid; gap: var(--space-2xl); align-items: center; }
.vgs-hero--split .vgs-hero__inner { grid-template-columns: 1fr; }
@media (min-width: 880px) {
	.vgs-hero--split .vgs-hero__inner { grid-template-columns: 1.05fr 1fr; }
}
.vgs-hero__media img { width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); }

/* Service / pathway cards */
.vgs-card {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	padding: var(--space-xl);
	transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.vgs-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--color-border-strong); }
.vgs-card__icon { margin-bottom: var(--space-md); color: var(--color-brand-primary); }
.vgs-card__title { font-family: var(--font-display); font-size: 1.375rem; margin: 0 0 var(--space-sm); }
.vgs-card__summary { color: var(--color-text-secondary); margin: 0 0 var(--space-md); }
.vgs-card__link {
	display: inline-flex; gap: var(--space-xs); text-decoration: none;
	color: var(--color-brand-primary); font-weight: 600; font-size: 0.9375rem;
}
.vgs-card__link:hover { gap: var(--space-sm); }

/* Doctor card */
.vgs-doctor__inner { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 800px) { .vgs-doctor__inner { grid-template-columns: 1fr 1.4fr; } }
.vgs-doctor__portrait img { width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.vgs-doctor__cred { font-style: italic; color: var(--color-text-secondary); font-size: 0.7em; }

/* Location */
.vgs-location__inner { display: grid; gap: var(--space-2xl); }
@media (min-width: 720px) { .vgs-location__inner { grid-template-columns: 1.2fr 1fr; } }
.vgs-hours__row { display: flex; justify-content: space-between; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border-default); }
.vgs-hours__row dt { font-weight: 600; }
.vgs-hours__row dd { margin: 0; color: var(--color-text-secondary); }

/* FAQ + Answer */
.vgs-faq__list > * + * { border-top: 1px solid var(--color-border-default); }
.vgs-faq__item > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	gap: var(--space-md);
	justify-content: space-between;
	align-items: baseline;
	padding: var(--space-lg) 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
}
.vgs-faq__item > summary::-webkit-details-marker { display: none; }
.vgs-faq__item[open] > summary .vgs-faq__toggle { transform: rotate(45deg); }
.vgs-faq__toggle {
	display: inline-block; width: 24px; text-align: center;
	transition: transform var(--dur-1) var(--ease); color: var(--color-brand-primary);
}
.vgs-faq__a { padding: 0 0 var(--space-lg); color: var(--color-text-secondary); max-width: 60ch; }

.vgs-answer__q { font-size: 1.5rem; margin: 0 0 var(--space-md); }
.vgs-answer__lead { font-size: 1.125rem; color: var(--color-text-primary); margin: 0 0 var(--space-md); }
.vgs-answer__bullets { color: var(--color-text-secondary); }

/* Trust band */
.vgs-trust__title { text-align: center; color: var(--color-text-secondary); margin-bottom: var(--space-lg); }
.vgs-trust__row { display: flex; flex-wrap: wrap; gap: var(--space-2xl); justify-content: center; align-items: center; }
.vgs-trust__item img { max-height: 40px; opacity: 0.7; transition: opacity var(--dur-1) var(--ease); }
.vgs-trust__item:hover img { opacity: 1; }
.vgs-trust__item--text p { font-size: 0.9375rem; color: var(--color-text-secondary); margin: 0; max-width: 28ch; }

/* Footer */
.vgs-footer {
	background: var(--color-bg-subtle);
	color: var(--color-text-primary);
	padding-block: var(--space-3xl);
	border-top: 1px solid var(--color-border-default);
	margin-top: var(--space-3xl);
}
.vgs-footer__inner { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 720px) { .vgs-footer__inner { grid-template-columns: 1fr 1fr auto; } }
.vgs-footer__address { font-style: normal; color: var(--color-text-secondary); }
.vgs-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.vgs-footer__list a { text-decoration: none; }
.vgs-footer__list a:hover { color: var(--color-brand-primary); }
.vgs-footer__meta { font-size: var(--fs-small); color: var(--color-text-secondary); margin: 0; grid-column: 1/-1; padding-top: var(--space-xl); border-top: 1px solid var(--color-border-default); }

/* Empty/unknown placeholders */
.vgs-empty, .vgs-unknown { padding-block: var(--space-3xl); text-align: center; color: var(--color-text-secondary); }

/* ----- 5. UTILITIES ---------------------------------------------------- */
.vgs-sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.vgs-skiplink {
	position: absolute; left: -9999px;
	background: var(--color-brand-primary); color: var(--color-text-inverse);
	padding: 0.75rem 1rem; border-radius: var(--radius-sm);
	z-index: 100; text-decoration: none;
}
.vgs-skiplink:focus { left: var(--space-md); top: var(--space-md); }

/* Reveal: starts hidden, GSAP swaps to visible. Reduced motion shows immediately. */
.is-reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
.is-reveal.is-in-view { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
@media (prefers-reduced-motion: reduce) {
	.is-reveal { opacity: 1; transform: none; }
}