/**
 * Sitewide design-system layer — loads after main.css + header/nav partials.
 * Uses tokens from delco-tokens.css. Does not change HTML.
 */

/* ----- Base typography ----- */
body {
	font-family: var(--delco-font-body);
	color: var(--delco-color-text-primary);
	background-color: var(--delco-color-bg-page);
}

/* ----- Headings ----- */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.content .title,
.content h1,
.content .h1,
.content h2,
.content .h2,
.content h3,
.content .h3,
.welcome h1,
.welcome .h1,
.welcome h2,
.welcome .h2 {
	font-family: var(--delco-font-heading);
	color: var(--delco-color-heading);
}

h1,
.h1,
.content .title,
.content h1,
.content .h1 {
	font-weight: 800;
	color: var(--delco-color-brand-blue);
}

h2,
.h2,
.content h2,
.content .h2 {
	font-weight: 800;
	color: var(--delco-color-brand-blue);
}

.sub_title,
.content .sub_title {
	font-family: var(--delco-font-heading);
	color: var(--delco-color-text-primary);
	font-weight: 600;
}

/* ----- Links (exclude footer / inverse surfaces) ----- */
body a {
	color: var(--delco-color-brand-blue);
	transition: color 0.2s ease, opacity 0.2s ease;
}

body a:hover,
body a:focus {
	color: var(--delco-color-link-hover);
}

.modal_ajax .contact_form p a {
	color: var(--delco-color-accent-bright);
}

.second_banner a,
.inner_banner a,
.cta_bg a,
.steel_banner a,
.modern_banner a {
	color: inherit;
}

/* ----- Buttons ----- */
.button,
button.button,
input.button {
	font-family: var(--delco-font-heading);
	font-weight: 700;
	background-color: var(--delco-color-brand-blue);
	border-color: var(--delco-color-brand-blue-deep);
	color: var(--delco-color-text-inverse);
	border-radius: var(--delco-radius-button);
}

.button:hover,
.button:focus,
button.button:hover {
	background-color: var(--delco-color-brand-blue-deep);
	border-color: var(--delco-color-brand-blue-deep);
	color: var(--delco-color-text-inverse);
}

.button.light {
	background: var(--delco-color-bg-surface);
	color: var(--delco-color-brand-blue);
	border: 2px solid var(--delco-color-brand-blue);
}

.button.light:hover,
.button.light:focus {
	background: var(--delco-color-bg-subtle);
	color: var(--delco-color-brand-blue-deep);
	border-color: var(--delco-color-brand-blue-deep);
}

.button.light_2 {
	background: var(--delco-color-bg-surface);
	color: var(--delco-color-brand-blue);
	border: 2px solid var(--delco-color-bg-surface);
}

.button.black,
.button.btn_dark {
	background: var(--delco-color-bg-cta-dark);
	border-color: var(--delco-color-bg-cta-dark);
	color: var(--delco-color-text-inverse);
}

.button.black:hover,
.button.btn_dark:hover {
	background: #323c48;
	border-color: #323c48;
}

.button svg {
	fill: currentColor;
}

/* ----- Form controls ----- */
.input,
input.input,
textarea.input,
select.input {
	font-family: var(--delco-font-body);
	border-color: var(--delco-color-border-input);
	color: var(--delco-color-text-body);
	border-radius: var(--delco-radius-input);
}

.input:focus,
input.input:focus,
textarea:focus {
	border-color: var(--delco-color-brand-blue);
	box-shadow: 0 0 0 1px var(--delco-color-brand-blue-bright);
}

textarea,
select {
	font-family: var(--delco-font-body);
	color: var(--delco-color-text-body);
}

/* ----- Footer (legacy layout only; .site_footer uses footer-figma.css) ----- */
footer:not(.site_footer) {
	background: var(--delco-color-brand-blue);
	font-family: var(--delco-font-body);
}

footer:not(.site_footer) a,
footer:not(.site_footer) p,
footer:not(.site_footer) address {
	font-family: var(--delco-font-body);
	color: var(--delco-color-text-inverse);
}

footer:not(.site_footer) address p svg,
footer:not(.site_footer) address a svg {
	color: var(--delco-color-accent-bright);
}

footer:not(.site_footer) .footer_col_left::after {
	background: rgba(255, 255, 255, 0.35);
}

/* ----- Pagination ----- */
.pagination li a {
	background: var(--delco-color-brand-blue);
	font-family: var(--delco-font-heading);
	font-weight: 700;
}

.pagination li a:hover {
	background: var(--delco-color-brand-blue-deep);
}

.pagination li span {
	color: var(--delco-color-text-primary);
	font-family: var(--delco-font-body);
}

/* ----- Gallery / sidebar accents ----- */
.gallery_section .gall_category .sub_title.active,
.gallery_section .gall_category li.active {
	color: var(--delco-color-brand-blue);
}

/* ----- Modals ----- */
.modal_ajax .modal_title {
	color: var(--delco-color-brand-blue);
	font-family: var(--delco-font-heading);
}

.modal_ajax form label span {
	color: var(--delco-color-text-body);
}

.modal_ajax .contact_form p {
	font-family: var(--delco-font-heading);
}

.modal_ajax .contact_form p span {
	color: var(--delco-color-accent-bright);
}

.gallery_modal .modal_desc .name {
	color: var(--delco-color-brand-blue);
	font-family: var(--delco-font-heading);
}

.gallery_modal .modal_desc .dialog_close {
	color: var(--delco-color-accent-bright);
}

.dialog .icon_close:focus {
	color: var(--delco-color-accent-bright);
}

/* ----- Tables / loan / rebates headings that used legacy blue ----- */
.loan .content h1,
.loan .content .h1,
.loan .content h2,
.loan .content .h2 {
	color: var(--delco-color-brand-blue);
	font-family: var(--delco-font-heading);
}

.rebates_bottom_content .table_images h3,
.rebates_bottom_content .table_images .h3,
.rebates_bottom_content .table_images_reverse h3,
.rebates_bottom_content .table_images_reverse .h3 {
	font-family: var(--delco-font-heading);
	background-color: var(--delco-color-accent-teal);
	color: var(--delco-color-text-inverse);
}

/* ----- Content blocks ----- */
.content p,
.content li,
.normal_fletter,
.short_desc,
.blog_content,
.article_content {
	font-family: var(--delco-font-body);
	color: var(--delco-color-text-body);
}

.content strong,
.content b {
	color: var(--delco-color-text-primary);
}

/* ----- Breadcrumb / meta text on banners (keep legible on photos) ----- */
.inner_banner h1,
.inner_banner h2,
.inner_banner h3,
.inner_banner p,
.inner_banner span,
.inner_banner strong,
.inner_banner .title,
.inner_banner .sub_title {
	font-family: var(--delco-font-heading);
}

.second_banner .text h1,
.second_banner .text p.h1 {
	font-family: var(--delco-font-heading);
	font-weight: 600;
}

/* ----- Block quotes / aside ----- */
aside,
.aside_block,
.aside_title {
	font-family: var(--delco-font-heading);
	color: var(--delco-color-text-primary);
}

/* ----- SVG icon defaults in main content ----- */
.header .phones .icon_wrap svg,
.icon_wrap svg {
	color: var(--delco-color-brand-blue);
}

/* ----- Mobile nav drawer typography (≤992px) ----- */
@media (max-width: 992px) {
	.header .navigation .header_nav li a {
		font-family: var(--delco-font-heading);
	}
}

/* ----- CTA / consult / reviews sections ----- */
.call_to_action,
.request_consult_wrap,
.reviews_block,
.section_blog {
	font-family: var(--delco-font-body);
}

.call_to_action .h2,
.request_consult_wrap .h2,
.reviews_block .h2 {
	font-family: var(--delco-font-heading);
	color: var(--delco-color-brand-blue);
}

/* ----- FAQs ----- */
.section_faqs .faqs_question {
	font-family: var(--delco-font-heading);
	color: var(--delco-color-text-primary);
}

.section_faqs .faqs_question:hover {
	color: var(--delco-color-brand-blue);
}

.section_faqs .faqs_item:not(:last-child) {
	border-bottom-color: rgba(71, 121, 185, 0.35);
}

.section_faqs .faqs_content {
	font-family: var(--delco-font-body);
	color: var(--delco-color-text-body);
}

/* ----- Blog ----- */
.blog_content .blog_article h2 a,
.blog_content .blog_article h2 {
	font-family: var(--delco-font-heading);
	color: var(--delco-color-brand-blue);
}

/* ----- Mobile call bar ----- */
.mobile_phone {
	font-family: var(--delco-font-heading);
	background: var(--delco-color-brand-blue);
	border-radius: 1.2rem;
	z-index: 1080; /* above Leaflet (1000), below header (1100) and nav overlay (1090+) */
}

/* ----- Grant / promos ----- */
.grant .content,
.grant_inner .content {
	font-family: var(--delco-font-body);
}