/* ===================================================================
 * VPH BASE — typography, global font cascade, link colors, button
 * hover patterns, icon-box SVG fills, heading underlines.
 * ================================================================ */

/* Hide Avanam color palette switcher (dark-mode toggle) —
   VPH is a light-only brand; the floating switch confused users. */
.base-color-palette-fixed-switcher,
.base-color-palette-header-switcher,
.base-color-palette-mobile-switcher,
.base-color-palette-footer-switcher {
	display: none !important;
}

/* Link color + hover/active state — logo blue accent. Default link
   color is now the accent so blue appears in body copy, not just
   on hover. Hover darkens. */
.entry-content a,
.vph-section a:not(.vph-btn):not(.elementor-button),
.site-footer a:not(.elementor-button) {
	color: var(--vph-color-accent);
}
a:hover, a:focus,
.entry-content a:hover,
.vph-section a:not(.vph-btn):hover,
.site-footer a:hover,
.current-menu-item > a,
.current_page_item > a,
li.menu-cta-button.current-menu-item > a {
	color: var(--vph-color-accent-dark) !important;
}

/* Elementor button hover — force blue hover background for black primary buttons */
.elementor-button:hover,
.vph-btn-primary:hover,
.vph-btn:hover {
	background-color: var(--vph-color-accent) !important;
	color: #ffffff !important;
}

/* Post-content CTA buttons baked into post_content with hardcoded
   inline black bg + white text. Add a subtle white outline so the
   button shape reads on dark sections, plus the universal blue hover. */
.entry-content a[href^="tel:"][style*="#000000"],
.entry-content a[href^="/contact"][style*="#000000"],
.entry-content a[href^="tel:"][style*="background:#000"],
.entry-content a[href^="/contact"][style*="background:#000"] {
	box-shadow: 0 0 0 1px rgba(255,255,255,0.55) !important;
	transition: background-color 0.2s, box-shadow 0.2s !important;
}
.entry-content a[href^="tel:"][style*="#000000"]:hover,
.entry-content a[href^="/contact"][style*="#000000"]:hover,
.entry-content a[href^="tel:"][style*="background:#000"]:hover,
.entry-content a[href^="/contact"][style*="background:#000"]:hover {
	background-color: var(--vph-color-accent) !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.8) !important;
}

/* Outline-style post-content buttons — lighten text to white on
   dark section contexts. */
.entry-content a[style*="background:transparent"][style*="border:2px solid #000000"] {
	color: #ffffff !important;
	border-color: rgba(255,255,255,0.7) !important;
}
.entry-content a[style*="background:transparent"][style*="border:2px solid #000000"]:hover {
	background-color: var(--vph-color-accent) !important;
	border-color: var(--vph-color-accent) !important;
}

/* Icon-box SVG icon colors — force fill on nested SVG elements for
   all icon-box widgets since bare <path> elements don't inherit the
   CSS fill set on the HTML anchor. */
.elementor-widget-icon-box .elementor-icon svg,
.elementor-widget-icon-box .elementor-icon svg g,
.elementor-widget-icon-box .elementor-icon svg path,
.elementor-widget-icon-box .elementor-icon svg circle,
.elementor-widget-icon-box .elementor-icon svg rect,
.elementor-widget-icon-box .elementor-icon svg polygon {
	fill: var(--vph-color-accent) !important;
}
/* Hover state: icon flips to white on black circle */
.elementor-widget-icon-box .elementor-icon:hover svg,
.elementor-widget-icon-box .elementor-icon:hover svg *,
.elementor-widget-icon-box:hover .elementor-icon svg,
.elementor-widget-icon-box:hover .elementor-icon svg * {
	fill: #ffffff !important;
}

/* Section H2 headings via the Elementor Heading widget — add a short
   accent underline. Scoped to h2 only so h3/h4 card titles stay clean. */
.elementor-widget-heading h2.elementor-heading-title {
	display: inline-block;
	position: relative;
	padding-bottom: 14px;
}
.elementor-widget-heading h2.elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 52px;
	height: 3px;
	background: var(--vph-color-accent);
	border-radius: 2px;
}
/* Centered heading alignment — anchor underline to the text center. */
.elementor-widget-heading.elementor-widget__align-center h2.elementor-heading-title::after,
.elementor-widget-heading .elementor-heading-title[style*="center"]::after {
	left: 50%;
	transform: translateX(-50%);
}

/* Bullet checkmarks in .vph-quick-quote-bullets — flip to accent blue. */
.vph-quick-quote-bullets li::before {
	color: var(--vph-color-accent) !important;
}
.vph-quick-quote-bullets li {
	position: relative;
	padding-left: 4px;
}

/* SITEWIDE FONT CASCADE — every text element on the page gets Inter.
   Complements the --global-*-font-family overrides in :root by
   forcing the family at the element level too, in case any rule has
   higher specificity than :root custom properties. */
html, body,
body *,
h1, h2, h3, h4, h5, h6,
p, a, button, input, textarea, select,
.elementor *,
.entry-content *,
.site-header *,
.site-footer * {
	font-family: var(--vph-font-family) !important;
}