/*
Theme Name: Brightwell Dental
Template: neve
Description: Child theme of Neve for the Brightwell Dental demo build (CVG Web Factory). Tokens sourced from theme.json; this stylesheet only bridges cvg-blocks custom properties and adds the site-chrome (utility-bar header, contact-heavy footer, card-stack/FAQ approximations) that Neve free and cvg-blocks don't provide out of the box.
Author: CeeVee Global
Version: 1.0.0
Text Domain: brightwell-dental
*/

/* ---------------------------------------------------------------
   1. Bridge theme.json tokens -> cvg-blocks custom properties
   cvg-blocks CSS reads --cvg-color-*/--cvg-font-* directly, so this
   is the single place those values are wired up (per modern-wp-build).
------------------------------------------------------------------ */
:root {
	--cvg-color-primary:   var(--wp--preset--color--cvg-primary);
	--cvg-color-secondary: var(--wp--preset--color--cvg-secondary);
	--cvg-color-bg:        var(--wp--preset--color--cvg-bg);
	--cvg-color-text:      var(--wp--preset--color--cvg-text);
	--cvg-font-display:    var(--wp--preset--font-family--cvg-display);
	--cvg-font-body:       var(--wp--preset--font-family--cvg-body);
	--cvg-font-data:       var(--wp--preset--font-family--cvg-data);
}

body {
	font-family: var(--cvg-font-body);
	color: var(--cvg-color-text);
}

/* Hide Neve's default page-title heading on the front page only —
   the cvg-blocks/hero block already renders the page's single <h1>,
   so a second entry-title h1 above it would break the one-h1 rule.
   Scoped with the .home body class Neve/WP add to the static front page. */
.home .entry-header,
.home .page-header {
	display: none;
}

/* Visible, high-contrast focus states everywhere (modern-wp-build a11y rule) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--cvg-color-primary);
	outline-offset: 2px;
}

/* Skip link (Neve includes one; reinforce visible focus styling) */
.skip-link:focus {
	background: var(--cvg-color-secondary);
	color: #fff;
}

/* ---------------------------------------------------------------
   2. Utility-bar header (pattern: header/utility-bar)
   Rendered via functions.php on neve_before_header_hook / wp_body_open.
------------------------------------------------------------------ */
.cvg-utility-bar {
	background: var(--cvg-color-secondary);
	color: #fff;
	font-family: var(--cvg-font-data);
	font-size: 0.85rem;
}
.cvg-utility-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.cvg-utility-bar__phone {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	line-height: 1;
}
.cvg-utility-bar__phone:hover,
.cvg-utility-bar__phone:focus-visible { text-decoration: underline; }
.cvg-utility-bar__hours {
	opacity: .9;
}
.cvg-utility-bar__cta {
	background: var(--cvg-color-primary);
	color: #fff;
	font-family: var(--cvg-font-display);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	padding: 9px 18px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}
.cvg-utility-bar__cta:hover,
.cvg-utility-bar__cta:focus-visible { background: var(--cvg-color-secondary); outline: 2px solid #fff; }
@media (max-width: 768px) {
	.cvg-utility-bar__hours { display: none; }
	.cvg-utility-bar__inner { padding: 6px 16px; }
}

/* Main header row: reinforce nav contrast + focus per token set */
.header-menu-item a,
#neve-mobile-menu-icon svg {
	color: var(--cvg-color-text);
}
.nav-header .site-title,
.nav-header .site-title a {
	font-family: var(--cvg-font-display);
	color: var(--cvg-color-secondary);
	font-weight: 800;
}

/* ---------------------------------------------------------------
   3. card-stack approximation (About/Team) — core Columns/Group,
   see BUILD-LOG for the cvg-blocks/services LIBRARY GAP this covers.
------------------------------------------------------------------ */
.cvg-card-stack {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1080px;
	margin: 0 auto;
}
@media (max-width: 900px) { .cvg-card-stack { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cvg-card-stack { grid-template-columns: 1fr; } }
.cvg-card-stack__card {
	background: var(--cvg-color-bg);
	border: 1.5px solid color-mix(in srgb, var(--cvg-color-text) 12%, transparent);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .2s ease;
}
.cvg-card-stack__card:hover,
.cvg-card-stack__card:focus-within { transform: translateY(-3px); }
.cvg-card-stack__card .cvg-card-stack__img-wrap {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: color-mix(in srgb, var(--cvg-color-primary) 10%, transparent);
}
.cvg-card-stack__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .2s ease;
}
.cvg-card-stack__card:hover img { transform: scale(1.03); }
.cvg-card-stack__body { padding: 20px; }
.cvg-card-stack__role {
	font-family: var(--cvg-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--cvg-color-secondary);
}
.cvg-card-stack__line { margin: 0; font-size: .9rem; opacity: .8; line-height: 1.5; }

/* ---------------------------------------------------------------
   4. FAQ accordion (New Patients) — core/details blocks styled to spec
------------------------------------------------------------------ */
.cvg-faq { max-width: 760px; margin: 0 auto; }
.cvg-faq details {
	border-bottom: 1.5px solid color-mix(in srgb, var(--cvg-color-text) 14%, transparent);
	padding: 16px 0;
}
.cvg-faq summary {
	font-family: var(--cvg-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
	color: var(--cvg-color-secondary);
}
.cvg-faq summary::-webkit-details-marker { display: none; }
.cvg-faq summary::after {
	content: "+";
	font-family: var(--cvg-font-body);
	font-size: 1.4rem;
	font-weight: 400;
	flex-shrink: 0;
	transition: transform .2s ease-out;
	color: var(--cvg-color-primary);
}
.cvg-faq details[open] summary::after { transform: rotate(45deg); }
.cvg-faq p { margin: 12px 0 0; line-height: 1.65; }
.cvg-faq .cvg-faq__confirm {
	background: color-mix(in srgb, var(--cvg-color-primary) 10%, transparent);
	border-left: 3px solid var(--cvg-color-primary);
	padding: 8px 12px;
	font-style: italic;
}

/* ---------------------------------------------------------------
   5. Fees / full-width-colour text block (New Patients)
------------------------------------------------------------------ */
.cvg-fees-band {
	background: var(--cvg-color-secondary);
	color: #fff;
	padding: 56px 24px;
	text-align: center;
}
.cvg-fees-band__inner { max-width: 640px; margin: 0 auto; }
.cvg-fees-band h2 {
	font-family: var(--cvg-font-display);
	color: #fff;
	margin: 0 0 14px;
}
.cvg-fees-band p { margin: 0; line-height: 1.65; opacity: .95; }
.cvg-fees-band mark {
	background: transparent;
	color: color-mix(in srgb, var(--cvg-color-primary) 55%, #fff);
	font-weight: 700;
	text-decoration: underline dotted;
}

/* ---------------------------------------------------------------
   6. Emergency strip (Book Appointment)
------------------------------------------------------------------ */
.cvg-emergency-strip {
	background: var(--cvg-color-primary);
	color: #fff;
	padding: 40px 24px;
	text-align: center;
	max-width: 1080px;
	margin: 48px auto 0;
	border-radius: 16px;
}
.cvg-emergency-strip h2 { font-family: var(--cvg-font-display); margin: 0 0 10px; color: #fff; }
.cvg-emergency-strip p { margin: 0 0 18px; opacity: .95; }
.cvg-emergency-strip a.cvg-emergency-strip__btn {
	display: inline-block;
	background: #fff;
	color: var(--cvg-color-primary);
	font-family: var(--cvg-font-display);
	font-weight: 800;
	text-decoration: none;
	padding: 14px 28px;
	border-radius: 11px;
	min-height: 44px;
}
.cvg-emergency-strip a.cvg-emergency-strip__btn:hover,
.cvg-emergency-strip a.cvg-emergency-strip__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Contact form field labels — the form book-appointment page wants
   (Full Name / Phone Number / Email / Reason for Visit / Preferred Day /
   New or Returning Patient) exceed cvg-blocks/contact's fixed Name/Email/
   Message fields (LIBRARY GAP — see BUILD-LOG). We ship the block as-is
   and add a note directing the extra detail into the Message field. */
.cvg-contact-note {
	max-width: 1080px;
	margin: 0 auto 8px;
	padding: 12px 16px;
	font-size: .85rem;
	background: color-mix(in srgb, var(--cvg-color-primary) 8%, transparent);
	border-radius: 10px;
}

/* ---------------------------------------------------------------
   7. 2-col-alternating intro rows (core Columns) — spacing/typography
------------------------------------------------------------------ */
.cvg-intro-row { max-width: 1080px; margin: 0 auto; padding: 48px 20px; }
.cvg-intro-row img { border-radius: 20px; display: block; width: 100%; height: auto; }
.cvg-intro-row h2 { font-family: var(--cvg-font-display); }

/* ---------------------------------------------------------------
   8. contact-heavy footer
------------------------------------------------------------------ */
.cvg-footer-contact {
	background: var(--cvg-color-secondary);
	color: #fff;
	padding: 64px 20px 40px;
}
.cvg-footer-contact__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}
@media (max-width: 760px) {
	.cvg-footer-contact__inner { grid-template-columns: 1fr; }
	.cvg-footer-contact__details { order: -1; }
}
.cvg-footer-contact__map-alt {
	background: color-mix(in srgb, #fff 8%, transparent);
	border: 1.5px dashed color-mix(in srgb, #fff 30%, transparent);
	border-radius: 16px;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	font-size: .85rem;
	opacity: .85;
	line-height: 1.6;
}
.cvg-footer-contact__details h2 {
	font-family: var(--cvg-font-display);
	color: #fff;
	margin: 0 0 12px;
	font-size: 1.3rem;
}
.cvg-footer-contact__details address { font-style: normal; margin: 0 0 6px; line-height: 1.6; }
.cvg-footer-contact__details a { color: #fff; }
.cvg-footer-contact__details a.cvg-tel {
	font-family: var(--cvg-font-data);
	font-weight: 700;
	display: inline-flex;
	min-height: 44px;
	align-items: center;
}
.cvg-footer-hours { margin: 18px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-family: var(--cvg-font-data); font-size: .9rem; font-variant-numeric: tabular-nums; }
.cvg-footer-hours dt { opacity: .85; }
.cvg-footer-hours dd { margin: 0; }
.cvg-footer-legal {
	max-width: 1080px;
	margin: 24px auto 0;
	padding-top: 24px;
	border-top: 1px solid color-mix(in srgb, #fff 15%, transparent);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: .8rem;
	opacity: .8;
}
.cvg-footer-legal a { color: #fff; }
.cvg-footer-confirm-note {
	font-size: .78rem;
	opacity: .75;
	margin-top: 10px;
	font-style: italic;
}