/* ============================================================
   ARIAL ENGINEERING SERVICES - SITE-WIDE COLOR & TYPOGRAPHY
   Scope: colors and fonts ONLY. No JS, no ticker, no repositioned
   elements. Pure CSS override of the legacy homestyles.css theme.
   ============================================================ */

:root {
	--aes-dark: #111827;
	--aes-dark-soft: #1E293B;
	--aes-teal: #0D9488;
	--aes-teal-light: #14B8A6;
}

/* ---------- Typography ---------- */
/* This site loads multiple Font Awesome versions simultaneously (4.7.0 x2,
   5.7.0, 5.8.2). Forcing Inter on icon-carrying elements breaks icon
   rendering, so those are explicitly excluded, then given correct icon
   fonts explicitly per FA generation below. */
body, h1, h2, h3, h4, h5, h6, p, input, textarea, select, button, label {
	font-family: 'Inter', Arial, Helvetica, sans-serif !important;
}
a:not([class*="fa"]), span:not([class*="fa"]), li:not([class*="fa"]), div:not([class*="fa"]) {
	font-family: 'Inter', Arial, Helvetica, sans-serif !important;
}
.fas, [class*="fa-"].fas {
	font-family: "Font Awesome 5 Free", "FontAwesome" !important;
	font-weight: 900 !important;
}
.far {
	font-family: "Font Awesome 5 Free", "FontAwesome" !important;
	font-weight: 400 !important;
}
.fab {
	font-family: "Font Awesome 5 Brands", "FontAwesome" !important;
	font-weight: 400 !important;
}
.fa:not(.fas):not(.far):not(.fab) {
	font-family: "FontAwesome" !important;
	font-weight: normal !important;
}

/* ---------- Nav bar accent colors ---------- */
.top-navbar .nav-link.active,
.top-navbar .nav-link:hover {
	color: var(--aes-teal) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
	background-color: rgba(13, 148, 136, 0.08) !important;
	color: var(--aes-teal) !important;
}

/* ---------- Get a Quote nav button: gold -> teal ---------- */
#navGetQuote {
	background: var(--aes-teal) !important;
	color: #ffffff !important;
}
#navGetQuote:hover {
	background: var(--aes-teal-light) !important;
}

/* ---------- Legacy accent colors (old blues/reds) -> teal ---------- */
.car-head, .brands-title-end, .welcome-title, .c-quote,
.f-hvac, .about-end {
	color: var(--aes-teal) !important;
}
/* Sitewide convention: hero accent spans use a [pagename]-end class
   (about-end, clients-end, contact-end, installations-end, etc.) -
   this catches all of them in one rule instead of listing each page. */
[class*="-end"] {
	color: var(--aes-teal) !important;
}

/* ---------- Circular icon badges (Address/Email/Phone, service icons) ---------- */
.fa-c1, .fa-c2, .fa-c3, .fa-c4, .fa-c5 {
	background-color: var(--aes-teal) !important;
}

/* ---------- Footer dark bands: unify to charcoal ---------- */
.footerContainer, .f-quote-head, .f-end {
	background-color: var(--aes-dark) !important;
}
.f-links a:hover, .f-products a:hover, .f-services a:hover {
	color: var(--aes-teal) !important;
}

/* ---------- Buttons: unify legacy gold/blue buttons ---------- */
.btn_fill, .btn.btn-apply, .c-btn .btn {
	background: var(--aes-dark) !important;
	color: #ffffff !important;
	border-color: var(--aes-dark) !important;
}
.btn_fill:hover, .btn.btn-apply:hover, .c-btn .btn:hover {
	background: var(--aes-teal) !important;
	border-color: var(--aes-teal) !important;
	color: #ffffff !important;
}

/* ---------- WhatsApp floating button: recolor only, no repositioning ---------- */
.whatsapp_right {
	background: var(--aes-teal) !important;
}