/*
Theme Name: Medcity Child
Template: medcity
Description: Child theme of Medcity for Vista Clinic — permanent home for header customisations (tel:/wa.me/hours) and the Gutenberg landing-page + home templates. Created 2026-07-19.
Version: 1.8.13
*/
/* VERSION IS THE CACHE-BUSTER. functions.php passes wp_get_theme()->get('Version')
   as the $ver argument for style.css, vc-blocks.css AND vc-home.css. Bump this
   line on every CSS change or browsers serve the stale sheet — there is no page
   cache and no CDN on prod, so this is the ONLY busting mechanism in play.
   1.1.0 — added page-home.php + vc-home.css + self-hosted Afacad/Cinzel. */
/* Parent stylesheet is 'medcity-theme' (assets/css/theme.css), enqueued by the parent.
   Child style.css is enqueued in functions.php with a dependency on it. No @import. */

/* ===========================================================================
 * SITEWIDE HEADER TOP BAR — retoned to the footer teal family.
 *
 * Old: #425163 (slate blue-grey). New: #4A7874 = hsl(174, 24%, 38%).
 * Lightened 2026-07-26 to sit closer to the footer teal while staying legible:
 *     #6C9F9A (footer) on white = 2.97:1  -> fails AA
 *     #4A7874 (this)   on white = 4.96:1  -> passes AA with a small margin
 *     #315450 (previous)        = 8.35:1  -> passed AAA but read much darker
 * 4.96 is deliberately near the 4.5 floor, per the brief. Do not lighten past
 * #4E7E7A (4.58:1) without re-checking every text colour on the bar.
 * Chosen to sit on the SAME 174deg hue as the footer teal #6C9F9A while being
 * dark enough for white text:
 *     #6C9F9A on white text = 2.97:1  -> FAILS WCAG AA
 *     #315450 on white text = 8.35:1  -> passes AAA
 * It is also a near-exact luminance match for the old #425163 (8.11:1), so the
 * bar keeps its previous visual weight and the change reads as a hue shift
 * only, not as a heavier header.
 *
 * COLOUR-VISION NOTE: WCAG contrast is luminance-based and colour-vision
 * deficiency affects hue, not luminance — so 8.35:1 holds for deuteranopia,
 * protanopia and tritanopia alike. The bar never uses colour alone to convey
 * information, so the teal/grey confusion common to deuteranopes is cosmetic.
 *
 * WHY THE UGLY SELECTOR AND !important:
 * Customizer -> Additional CSS (post 13817, line 68) declares
 *   #masthead #site-header-wrap .site-header-top { background-color:#425163 !important }
 * That sheet prints AFTER every enqueued stylesheet, and an !important
 * declaration cannot be beaten by specificity alone. So we need !important too,
 * plus one extra element (html) to out-specify (2,1,0) -> (2,1,1).
 * The cleaner long-term fix is to change the value in Additional CSS itself and
 * drop this block; kept here because the child theme is the agreed home for
 * overrides.
 *
 * SCOPE: sitewide (all ~40 pages), not just the home template — this file is
 * enqueued on every request.
 * ======================================================================== */
html #masthead #site-header-wrap .site-header-top {
	background-color: #4A7874 !important;
}
/* The bar's container colour computes to #848E9F, which was 2.45:1 on the old
 * background — an AA failure for any text that inherited it rather than being
 * overridden to white. Set it explicitly so nothing can inherit the grey. */
html #masthead #site-header-wrap .site-header-top,
html #masthead #site-header-wrap .site-header-top a,
html #masthead #site-header-wrap .site-header-top i,
html #masthead #site-header-wrap .site-header-top span {
	color: #ffffff !important;
}

/* Header top bar: WhatsApp as an icon, separated from the voice number.
 * The two channels are deliberately distinct (see CLAUDE.md phone policy), so
 * a pipe plus a brand glyph reads as "call OR message", not one long string.
 * fab fa-whatsapp comes from the parent's already-enqueued font-awesome5. */
html #masthead #site-header-wrap .site-header-top .vc-topbar-sep {
	margin: 0 .55em;
	opacity: .45;
	font-weight: 300;
}
html #masthead #site-header-wrap .site-header-top .vc-wa i {
	font-size: 1.15em;
	vertical-align: -1px;
}
/* Visible label removed, so keep an accessible name for screen readers. */
html #masthead #site-header-wrap .site-header-top .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}