/**
 * vc-footer.css — sitewide footer (child theme).
 *
 * SELF-CONTAINED BY REQUIREMENT. vc-home.css only enqueues on the page-home.php
 * template, so none of its --vc-* custom properties exist on the other ~35 pages.
 * The tokens below are therefore redeclared locally and SCOPED TO .vc-footer so
 * they cannot leak into, or be shadowed by, the home page's :root block.
 * Values are copied deliberately, not imported — keep them in sync by hand.
 *
 * Everything is namespaced .vc-footer / .vc-footer__* except .vc-btn and
 * .vc-eyebrow, which are shared visual primitives the footer reuses; both are
 * only ever selected here through a .vc-footer ancestor so they cannot alter the
 * home page's own copies of those classes.
 *
 * Specificity note: the parent theme + Elementor global CSS both style
 * `.site-footer-custom a`, so link rules here are written as
 * `.vc-footer a` (0,2,0 with the element) or tighter. This sheet is enqueued at
 * priority 999 (functions.php) so it lands last among enqueued styles; the
 * Customizer's Additional CSS still prints after it, which is why a couple of
 * colour rules below carry !important.
 */

.vc-footer {
	--vcf-teal:        #6C9F9A; /* footer band background                     */
	/* #4A7874 is the Solid button fill on LIGHT backgrounds. The footer band is
	   dark, so Solid inverts here to cream-on-olive and the token is recorded
	   for reference rather than used. */
	--vcf-olive:       #282E20; /* legal bar + Solid button ink on dark       */
	--vcf-cream:       #F2F1EE; /* text on dark                               */
	--vcf-cream-dim:   rgba(242, 241, 238, 0.78);
	--vcf-rule:        rgba(242, 241, 238, 0.22);
	--vcf-maxw:        1340px;
	--vcf-gutter:      clamp(16px, 3.47vw, 50px);
	--vcf-radius:      0; /* the site uses square buttons everywhere */

	background: var(--vcf-teal);
	color: var(--vcf-cream);
	/* No font-family: the footer inherits the theme face so it stays identical
	   on the home template (where Afacad is loaded) and everywhere else (where
	   it is not). Declaring Afacad here would render the footer in a different
	   typeface on one page only. */
	font-size: 16px;
	line-height: 1.6;
	/* Belt and braces against horizontal overflow at 402px: nothing inside the
	   footer is allowed to establish a wider scroll box than the viewport. */
	overflow-x: hidden;
}

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

.vc-footer__inner {
	max-width: var(--vcf-maxw);
	margin: 0 auto;
	padding-inline: var(--vcf-gutter);
	width: 100%;
}

/* ---------------------------------------------------------------- contact -- */

.vc-footer__contact {
	background: var(--vcf-teal);
	padding-block: clamp(48px, 7vw, 96px);
	text-align: center;
	/* Containing block for the photo layer below. overflow:clip (not hidden)
	   because clip does not create a scroll container, so it cannot introduce a
	   stray scroll box at 402px. */
	position: relative;
	overflow: clip;
}

/* Decorative clinic-interior photo behind the contact band.
 *
 * ⚠️ SELECTED BY CLASS, NEVER WITH A `>` CHILD COMBINATOR. A child combinator
 * has silently broken three times on this project: WordPress injects a
 * `.wp-block-group__inner-container` between a group and its children, so
 * `.parent > img` matches nothing and the layer falls back into normal flow —
 * which renders as a full-height photo above the text instead of behind it, and
 * looks like a layout bug rather than a selector bug. The footer is PHP, not a
 * block, today; the class-only selector keeps it correct if it ever isn't.
 */
.vc-footer__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.22;
	pointer-events: none;
}

/* Lifts the text above the photo layer. Scoped to the contact band so the nav
   and legal wrappers keep their default stacking. */
.vc-footer__contact .vc-footer__inner {
	position: relative;
	z-index: 1;
}

.vc-footer .vc-eyebrow {
	margin: 0 0 12px;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase; /* source text is sentence case — never uppercase in markup */
	color: var(--vcf-cream-dim);
}

.vc-footer__title {
	margin: 0 0 16px;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.15;
	font-weight: 400;
	color: var(--vcf-cream) !important;
}

/* Support line under the band's <h2>.
 *
 * ⚠️ The element is an <h3>, not an <h4> — an h4 straight after the h2 would skip
 * a heading level and fail the "heading levels never skip" test. This rule is
 * what gives it the h4 *tier* visually. Size lives here; the tag stays h3.
 * (.vc-footer__intro, the old paragraph that sat here, is deleted along with its
 * copy — do not reintroduce.) */
.vc-footer .vc-support {
	font-size: clamp(18px, 1.56vw, 24px);
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, .85);
	margin: 0 0 1em;
}

/* Three labelled CTA columns (was .vc-footer__actions, a compact button row —
   that rule set is deleted, not commented out). Mirrors the home page block. */
.vc-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
	margin-bottom: 28px;
	text-align: center;
}

.vc-footer__cta-col {
	min-width: 0; /* long labels wrap instead of widening the track */
}

.vc-footer__cta-label {
	margin: 0 0 4px;
	font-weight: 600;
	color: var(--vcf-cream);
}

.vc-footer__cta-desc {
	margin: 0 0 16px;
	color: var(--vcf-cream-dim);
	font-size: 15px;
}

/* Buttons fill their column so the three read as one row of equal blocks. */
.vc-footer__cta-col .vc-btn {
	width: 100%;
	min-width: 0; /* beats the 220px floor on the shared .vc-btn geometry */
}

/* BUTTON SYSTEM — exactly two styles sitewide, one geometry.
 *
 * Solid  : filled. #4A7874 on light backgrounds, inverted to #F2F1EE/#282E20
 *          on a dark band. The footer sits on the teal band, so every button
 *          here is the inverted Solid.
 * Outline: transparent + 1px border in the current ink.
 *
 * Geometry is fixed for both: radius 0, 15px text, 52px tall, 13px/28px
 * padding, 220px minimum width.
 *
 * NO BRAND GREEN ANYWHERE. The WhatsApp button was briefly given the WhatsApp
 * brand colour; the client had it dropped because it made a third button style,
 * and white on that colour measured 1.98:1 — a WCAG AA failure and the worst
 * contrast on the page. Cream on olive, used below, measures ~14.8:1.
 */
.vc-footer .vc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 220px;
	min-height: 52px;
	padding: 13px 28px;
	border: 1px solid transparent;
	border-radius: var(--vcf-radius); /* 0 */
	background: var(--vcf-cream);
	color: var(--vcf-olive) !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.vc-footer .vc-btn:hover,
.vc-footer .vc-btn:focus-visible {
	background: #ffffff;
	color: var(--vcf-olive) !important;
	text-decoration: none;
}

/*
 * Inert hook. .vc-btn--whatsapp stays in the markup so nothing has to be
 * rewritten if the treatment ever changes again, but it deliberately carries no
 * declarations of its own — the WhatsApp button must render identically to
 * every other Solid button. Do not reintroduce a brand colour here.
 */

/* Second and only other style. Not used in the footer today; defined so the
   two-style system is complete wherever the footer grows a secondary action. */
.vc-footer .vc-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--vcf-cream) !important;
}

.vc-footer .vc-btn--outline:hover,
.vc-footer .vc-btn--outline:focus-visible {
	background: var(--vcf-cream);
	color: var(--vcf-olive) !important;
}

/* .vc-footer__tel is gone with the old button row: the voice number is now the
   "Call the clinic" column's own description line, not a span inside the button. */

.vc-footer__meta {
	margin: 0;
	color: var(--vcf-cream-dim);
	font-size: 15px;
}

.vc-footer__meta-line {
	display: block;
}

/* ------------------------------------------------------------------- nav -- */

.vc-footer__nav {
	border-top: 1px solid var(--vcf-rule);
	padding-block: clamp(40px, 5vw, 72px);
}

.vc-footer__grid {
	display: grid;
	/* 4 content columns + the brand column = 5 tracks at desktop is too tight,
	   so the brand column spans the full row above the four menu columns on
	   large screens via its own grid-column rule below. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}

.vc-footer__col {
	min-width: 0; /* lets long menu labels wrap instead of widening the track */
}

.vc-footer__col--brand {
	grid-column: 1 / -1;
	max-width: 620px;
}

.vc-footer__logo-link {
	display: inline-block;
	margin-bottom: 14px;
}

.vc-footer__logo {
	display: block;
	width: auto;
	max-width: 180px;
	height: auto;
}

/* .vc-footer__blurb deleted 2026-07-26 — the brand column is logo-only now. */

.vc-footer__heading {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase; /* styling only — markup keeps title case */
	color: var(--vcf-cream) !important;
}

.vc-footer .vc-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vc-footer .vc-footer__menu li {
	margin: 0 0 8px;
	list-style: none;
}

.vc-footer a {
	color: var(--vcf-cream);
	text-decoration: none;
}

.vc-footer .vc-footer__menu a {
	display: inline-block;
	font-size: 14px;
	letter-spacing: 0.02em;
	/* Menu labels are stored uppercase in the DB; normalising here keeps the
	   footer readable and means a future sentence-case rename still renders
	   consistently. */
	text-transform: uppercase;
	color: var(--vcf-cream-dim);
	transition: color 0.18s ease;
	overflow-wrap: anywhere; /* no 402px overflow from long single words */
}

.vc-footer .vc-footer__menu a:hover,
.vc-footer .vc-footer__menu a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

.vc-footer__contact-list a {
	text-transform: none !important;
}

.vc-footer__hours {
	color: var(--vcf-cream-dim);
	font-size: 14px;
}

.vc-footer .vc-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.vc-footer .vc-footer__social li {
	list-style: none;
}

.vc-footer .vc-footer__social a {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vcf-cream);
}

.vc-footer .vc-footer__social a:hover,
.vc-footer .vc-footer__social a:focus-visible {
	text-decoration: underline;
}

/* ----------------------------------------------------------------- legal -- */

.vc-footer__legal {
	background: var(--vcf-olive);
	padding-block: 20px;
	font-size: 14px;
}

.vc-footer__legal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}

.vc-footer__legal p {
	margin: 0;
	color: var(--vcf-cream-dim);
}

.vc-footer__legal a {
	color: var(--vcf-cream);
	text-decoration: underline;
}

.vc-footer__legal a:hover,
.vc-footer__legal a:focus-visible {
	color: #ffffff;
}

/* Visible keyboard focus — the parent theme suppresses outlines globally. */
.vc-footer a:focus-visible {
	outline: 2px solid var(--vcf-cream);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ responsive -- */

/* Tablet: 2 columns. */
@media (max-width: 1024px) {
	.vc-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The three CTA columns collapse EARLIER than the menu grid (820px, not 640px):
   at 820 each column is ~250px wide and "Message us on WhatsApp" plus a 220px
   button no longer fit side by side. */
@media (max-width: 820px) {
	.vc-footer__cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mobile: single column, stacked buttons. */
@media (max-width: 640px) {
	.vc-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vc-footer__col--brand {
		grid-column: auto;
	}

	.vc-footer .vc-btn {
		width: 100%;
	}

	.vc-footer__legal-row {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vc-footer * {
		transition: none !important;
	}
}

/* ===========================================================================
 * MATCH THE APPROVED CONTACT-BAND STYLE (client sign-off 2026-07-26)
 *
 * The band was rendering centred, in the theme's bold Poppins, with the theme
 * force-uppercasing the buttons — none of which is the design that was
 * approved. The approved look is LEFT-aligned, light-weight Afacad, sentence
 * case. See memory: vistaclinic-contact-band-pattern.
 *
 * This reverses the earlier "no font-family in the footer" decision, and the
 * reason it is now safe to reverse: that rule existed because Afacad was only
 * loaded by vc-home.css (home template only), so declaring it here would have
 * rendered a fallback face on the other 39 pages. Declaring @font-face HERE —
 * in a sheet enqueued unconditionally — makes Afacad available sitewide, so
 * the footer is both consistent everywhere AND matches the approved design.
 * The woff2 files are the same self-hosted ones (never fonts.googleapis.com:
 * that leaks visitor IPs pre-consent for an EU audience).
 * ======================================================================== */
@font-face {
	font-family: 'Afacad';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/afacad-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Afacad';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/afacad-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
		U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.vc-footer,
.vc-footer p,
.vc-footer a,
.vc-footer li,
.vc-footer span,
.vc-footer h2,
.vc-footer h3 {
	/* !important is REQUIRED, not laziness: Customizer -> Additional CSS
	 * (post 13817) declares `font-family:'Poppins' !important` on
	 * body/h1-h6/a/li/span/button, and that sheet prints after every enqueued
	 * stylesheet. An !important declaration cannot be beaten by specificity
	 * alone. vc-home.css carries the same note for the same reason. */
	font-family: 'Afacad', 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
}

/* Left-aligned, not centred. */
.vc-footer__contact,
.vc-footer__contact p,
.vc-footer__contact h2,
.vc-footer__contact h3,
.vc-footer__cta-col,
.vc-footer__meta { text-align: left; }

/* Light display weight, matching the approved band. */
.vc-footer__contact h2 {
	font-weight: 400;
	font-size: clamp(28px, 3.05vw, 58.5px);
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
}
.vc-footer__contact > *,
.vc-footer__inner > * { margin-inline: 0; }

/* The parent theme uppercases button text sitewide; the approved design is
 * sentence case. Scoped to the footer so nothing else changes. */
.vc-footer .vc-btn { text-transform: none; letter-spacing: normal; font-weight: 400; }

/* Column labels: bold label + light description, left aligned. */
.vc-footer__cta-label { font-weight: 400; }
.vc-footer__cta-label strong { font-weight: 600; }