/*
 * Vitamin D Digital: component styles.
 * Colors, fonts and spacing come from theme.json (--wp--preset--*).
 * Contrast rules (WCAG AA): gold only as a fill or on navy, never as text on white;
 * red text only on white, mist or cream; never red on navy.
 */

:root {
	--vd-radius: var(--wp--custom--radius, 0.625rem);
	--vd-line: #d6dbea;
	--vd-shadow: 0 1px 2px rgba(24, 39, 86, 0.06), 0 10px 28px rgba(24, 39, 86, 0.08);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Base ---------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block: 0; }

/* Visible keyboard focus: gold ring + navy outline works on light and dark backgrounds. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--gold);
}

.vd-main { padding-block: var(--wp--preset--spacing--70); }

.vd-eyebrow {
	color: var(--wp--preset--color--red);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-block-end: 0.5rem;
	text-transform: uppercase;
}

.vd-lead {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

.vd-accent { color: var(--wp--preset--color--gold); }

/* ---------- Header ---------- */

.vd-header {
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--vd-line);
	padding-block: 0.75rem;
}

.vd-header .wp-block-site-logo { flex: none; }
.vd-header .wp-block-site-logo img { height: auto; }
.vd-header__right { gap: 1.5rem; }

.vd-header .wp-block-navigation__container { gap: 1.75rem; }

.vd-header .wp-block-navigation-item a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

.vd-header__cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.7rem 1.2rem;
}

@media (max-width: 600px) {
	.vd-header .vd-header__cta { display: none; }
	.vd-header .wp-block-site-logo img { width: 11rem; }
	.vd-header .alignwide { flex-wrap: nowrap; }
}

/* ---------- Sections ---------- */

.vd-section {
	padding-block: var(--wp--preset--spacing--70);
}

.vd-section > .alignwide + .alignwide { margin-block-start: var(--wp--preset--spacing--60); }

.is-style-vd-navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
.is-style-vd-navy :is(h1, h2, h3, h4, h5, h6, p, li) { color: inherit; }
.is-style-vd-navy .vd-eyebrow { color: var(--wp--preset--color--gold); }
.is-style-vd-navy a:not(.wp-element-button) { color: var(--wp--preset--color--white); }
.is-style-vd-navy a:not(.wp-element-button):hover { color: var(--wp--preset--color--gold); }

.is-style-vd-mist { background: var(--wp--preset--color--mist); }
.is-style-vd-cream { background: var(--wp--preset--color--cream); }

.is-style-vd-gold {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
.is-style-vd-gold :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--navy); }
.is-style-vd-gold a:not(.wp-element-button) { color: var(--wp--preset--color--navy); }

/* ---------- Buttons ---------- */

.wp-block-button__link { transition: background-color 0.15s ease, color 0.15s ease; }

.wp-block-button.is-style-vd-gold .wp-block-button__link {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-vd-gold .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-vd-outline-light .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	padding-block: calc(0.9rem - 2px);
}
.wp-block-button.is-style-vd-outline-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* ---------- Hero ---------- */

.vd-hero {
	background-image: url("../images/sun.svg");
	background-position: right -12rem center;
	background-repeat: no-repeat;
	background-size: min(46rem, 90vw) auto;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--80);
}
.vd-hero--page { padding-block: var(--wp--preset--spacing--70); }
.vd-hero h1 { font-size: var(--wp--preset--font-size--huge); }
.vd-hero--page h1 { font-size: var(--wp--preset--font-size--xx-large); }
.vd-hero .vd-lead { max-width: 36rem; }
.vd-hero .wp-block-buttons { margin-block-start: 1.75rem; }
.vd-hero__note {
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: 1.75rem;
	opacity: 0.9;
}

@media (max-width: 639px) {
	.vd-hero { background-position: right -40vw bottom -12vw; background-size: 95vw auto; }
}

@media (min-width: 1000px) {
	.vd-hero { background-position: right -8rem center; }
}

/* ---------- Grids and cards ---------- */

.vd-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.vd-grid > * { margin: 0; }

@media (min-width: 640px) {
	.vd-grid--2, .vd-grid--3, .vd-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.vd-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
	.vd-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.vd-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--vd-line);
	border-radius: var(--vd-radius);
	border-top: 4px solid var(--wp--preset--color--gold);
	box-shadow: var(--vd-shadow);
	padding: 1.75rem;
}
.vd-grid > .vd-card { display: flex; flex-direction: column; }
.vd-card > :first-child { margin-block-start: 0; }
.vd-card h3 { font-size: 1.25rem; }
.vd-card p:last-child { margin-block-end: 0; }

.vd-link { font-weight: 700; margin-block-start: auto; }
.vd-link a::after { content: " \2192"; content: " \2192" / ""; }

.vd-checks { padding-inline-start: 1.25rem; }
.vd-checks li { margin-block: 0.4rem; padding-inline-start: 0.25rem; }
.vd-checks li::marker { color: var(--wp--preset--color--red); }

.vd-difference { gap: var(--wp--preset--spacing--60); }

.vd-pullquote {
	background: var(--wp--preset--color--cream);
	border-inline-start: 6px solid var(--wp--preset--color--gold);
	border-radius: var(--vd-radius);
	padding: var(--wp--preset--spacing--60);
}
.vd-pullquote p {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
}

.vd-quote {
	border: 0;
	padding: 0;
}
.vd-quote p {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.3;
}
.vd-quote cite { font-style: normal; font-weight: 700; }

/* ---------- Steps ---------- */

.vd-steps { counter-reset: vd-step; }
.vd-step {
	counter-increment: vd-step;
	padding-block-start: 3.5rem;
	position: relative;
}
.vd-step::before {
	background: var(--wp--preset--color--gold);
	border-radius: 50%;
	color: var(--wp--preset--color--ink);
	content: counter(vd-step);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 800;
	height: 2.5rem;
	left: 0;
	line-height: 2.5rem;
	position: absolute;
	text-align: center;
	top: 0;
	width: 2.5rem;
}
.vd-step h3 { font-size: 1.2rem; margin-block-start: 0; }
.vd-step p { margin-block-start: 0.35rem; }

.vd-steps--stack { display: grid; gap: 1.25rem; }
.vd-steps--stack > * { margin: 0; }
.vd-steps--stack .vd-step { padding-block-start: 0; padding-inline-start: 3.5rem; }

/* ---------- Service sections ---------- */

.vd-service .vd-card { border-top-color: var(--wp--preset--color--navy); }

/* ---------- FAQ ---------- */

.vd-faq {
	border-bottom: 1px solid var(--vd-line);
	margin-block: 0;
	padding-block: 1rem;
}
.vd-faq summary {
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}
.vd-faq[open] summary { margin-block-end: 0.5rem; }

/* ---------- Contact ---------- */

.vd-contact { gap: var(--wp--preset--spacing--60); }
.vd-form-note { font-size: var(--wp--preset--font-size--small); margin-block: 0.5rem 0; }
.vd-formcard { padding: clamp(1.25rem, 3vw, 2.25rem); }
.vd-formcard__title { font-size: var(--wp--preset--font-size--x-large); margin-block-start: 0; }
.vd-side-title { font-size: var(--wp--preset--font-size--x-large); margin-block-start: 0; }
.vd-side-sub { font-size: 1.15rem; margin-block-start: 2rem; }

/* Fluent Forms (the form plugin) restyled to the brand, with accessible contrast. */
.fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}
.fluentform .ff-el-is-required.asterisk-right label::after { color: var(--wp--preset--color--red); }
.fluentform .ff-el-form-control {
	background: var(--wp--preset--color--white);
	border: 2px solid #69739a;
	border-radius: 0.5rem;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	padding: 0.75rem 0.9rem;
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--navy);
	box-shadow: 0 0 0 3px var(--wp--preset--color--gold);
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 0;
}
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--red); }
.fluentform .text-danger,
.fluentform .error { color: var(--wp--preset--color--red); font-weight: 600; }
.fluentform .ff-btn-submit {
	background: var(--wp--preset--color--navy);
	border: 0;
	border-radius: 0.5rem;
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	padding: 0.9rem 1.8rem;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus { background: var(--wp--preset--color--red); color: var(--wp--preset--color--white); }
.fluentform .ff-message-success {
	background: var(--wp--preset--color--cream);
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 0.5rem;
	color: var(--wp--preset--color--ink);
}

/* ---------- Footer ---------- */

.vd-footer {
	background: var(--wp--preset--color--mist);
	border-top: 4px solid var(--wp--preset--color--gold);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}
.vd-footer__cols { gap: var(--wp--preset--spacing--60); }
.vd-footer__heading {
	color: var(--wp--preset--color--navy);
	font-size: 1.1rem;
	margin-block-start: 0;
}
.vd-footer__blurb { margin-block-start: 1rem; max-width: 24rem; }
.vd-footer__nav a { text-decoration: none; }
.vd-footer__nav a:hover { text-decoration: underline; }
.vd-footer__legal {
	border-top: 1px solid var(--vd-line);
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: 1.25rem;
}