/*
Theme Name: Divi Tech Child
Theme URI: https://coolors.co/0a100d-b9baa3-d6d5c9-a22c29-902923
Description: A technology-focused Divi child theme using a custom color palette (background #D6D5C9, ink #0A100D, sage #B9BAA3, red #A22C29 / #902923).
Author: Your Name
Template: Divi
Version: 1.0.5
Text Domain: divi-tech-child
*/

/* =========================================================
   Color Palette (https://coolors.co/0a100d-b9baa3-d6d5c9-a22c29-902923)
   ========================================================= */
:root {
	--dtc-ink: #0a100d;       /* near-black - text, dark sections */
	--dtc-sage: #b9baa3;      /* muted sage - secondary accents, borders */
	--dtc-bg: #eff1f3;        /* main background */
	--dtc-red: #a22c29;       /* primary accent - links, buttons */
	--dtc-red-dark: #902923;  /* hover/active state for accent */
	--dtc-white: #ffffff;
}

/* =========================================================
   Base / Body
   ========================================================= */
body {
	background-color: var(--dtc-bg);
	color: var(--dtc-ink);
}

#main-content,
.et_pb_section {
	background-color: var(--dtc-bg);
}

/* Keep true dark/black Divi sections (rgba(0,0,0,...) or explicit black bg) untouched,
   only normalize sections that inherit the default white background. */
.et_pb_section:not(.et_pb_bg_layout_dark) {
	color: var(--dtc-ink);
}

/* =========================================================
   Typography
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
	color: var(--dtc-ink);
}

a {
	color: var(--dtc-red);
	transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
	color: var(--dtc-red-dark);
}

/* =========================================================
   Header
   ========================================================= */
#main-header {
	background-color: var(--dtc-bg);
	border-bottom: 1px solid var(--dtc-sage);
}

#main-header .nav li > a,
#main-header .et-social-icon a {
	color: var(--dtc-ink);
}

#main-header .nav li > a:hover,
#top-menu .active > a {
	color: var(--dtc-red);
}

/* Mobile menu dropdown: the site's header is a Divi 5 Theme Builder
   template (<header class="et-l et-l--header">), not the classic
   #main-header. Divi's themed color rule for the mobile dropdown is
   scoped to "#main-header .et_mobile_menu" so it never matches here,
   leaving the unscoped core default: white background + pale gray
   text. Set both explicitly instead of relying on Divi's scoping. */
.et_mobile_menu {
	background-color: var(--dtc-bg) !important;
}

.et_mobile_menu li a {
	color: var(--dtc-ink) !important;
}

.et_mobile_menu li a:hover {
	color: var(--dtc-red) !important;
}

/* =========================================================
   Hero background image (Home page)
   ========================================================= */
/* With the parallax effect turned off in the builder, Divi renders
   this as a plain CSS background on the section itself but doesn't
   set background-size/position - it defaults to native image size
   (1024x512) anchored top-left, so only a corner of the image shows
   inside the section's small default padding-driven height. Force
   cover+center so the full-width image scales in and stays centered
   on the logo regardless of section height. The section itself is
   only ~112px tall (default padding, no content in the column), so
   on wide desktop viewports "cover" only has room to show a very
   thin horizontal slice of the image, cropping into the logo top/
   bottom and hiding the "Smart Signs" subtitle entirely. Scale the
   min-height with viewport width so enough of the image is always
   visible around the logo, on any screen size. */
.page-id-20 .et_pb_section_0 {
	background-size: cover !important;
	background-position: center !important;
	min-height: clamp(200px, 22vw, 450px) !important;
}

/* =========================================================
   Buttons / CTAs
   ========================================================= */
.et_pb_button,
button,
input[type="submit"],
input[type="button"] {
	background-color: var(--dtc-red);
	border: 2px solid var(--dtc-red);
	color: var(--dtc-white) !important;
	transition: all 0.2s ease-in-out;
}

.et_pb_button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: var(--dtc-red-dark);
	border-color: var(--dtc-red-dark);
	color: var(--dtc-white) !important;
}

.et_pb_button::after {
	color: var(--dtc-white);
}

/* =========================================================
   Footer
   ========================================================= */
#main-footer,
.et_pb_row_bottom_footer {
	background-color: var(--dtc-ink);
	color: var(--dtc-bg);
}

#main-footer a {
	color: var(--dtc-sage);
}

#main-footer a:hover {
	color: var(--dtc-red);
}

/* =========================================================
   Accents / Tech touches
   ========================================================= */
::selection {
	background-color: var(--dtc-red);
	color: var(--dtc-white);
}

blockquote {
	border-left: 4px solid var(--dtc-red);
	color: var(--dtc-ink);
}

.et_pb_module.et_pb_blurb .et_pb_module_header,
.et_pb_promo_button {
	color: var(--dtc-red);
}

hr {
	border-color: var(--dtc-sage);
}

/* Code / tech-style blocks */
code, pre {
	background-color: var(--dtc-ink);
	color: var(--dtc-sage);
	border-radius: 4px;
}