/*
Theme Name: Evergreen Design Build Child
Theme URI: https://evergreendesignbuildvt.com
Description: Divi 5 child theme for Evergreen Design Build — custom homes & design-build services in Southern Vermont. Built by Got2Web (got2web.com).
Author: Got2Web
Author URI: https://www.got2web.com
Template: Divi
Version: 1.0.0
Text Domain: edb-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Reference only — the source of truth for colors & fonts should be the
   Divi 5 Variable Manager (see BUILD-GUIDE.md, Step 2). These custom
   properties are duplicated here so utility classes below render correctly
   even before/without matching Design Variables set up in the Builder.
   ========================================================================== */
:root {
  --edb-black: #1a1a1a;
  --edb-green: #2c4a35;
  --edb-green-light: #3d6b4a;
  --edb-off-white: #f8f7f4;
  --edb-light-gray: #eeede9;
  --edb-mid-gray: #999999;
  --edb-white: #ffffff;

  --edb-font-heading: 'Cormorant Garamond', serif;
  --edb-font-body: 'Montserrat', sans-serif;

  --edb-section-pad-desktop: 100px 60px;
  --edb-section-pad-tablet: 70px 28px;
  --edb-section-pad-mobile: 60px 20px;
}

/* ==========================================================================
   2. BASE TYPE
   Divi 5's Design Variables (Variable Manager) should drive module-level
   font choices. This sets sane fallbacks at the document level.
   ========================================================================== */
body {
  font-family: var(--edb-font-body);
  color: var(--edb-black);
  font-size: 19.5px;
  line-height: 1.75;
}

h1, h2, h3, .edb-heading-font {
  font-family: var(--edb-font-heading);
  font-weight: 300;
  line-height: 1.18;
}

/* ==========================================================================
   3. SECTION LABEL / TITLE / DIVIDER
   Apply as CSS Classes on Divi Text modules for eyebrow labels, section
   titles, and the small horizontal divider rule used throughout the design.
   ========================================================================== */
.edb-section-label {
  font-family: var(--edb-font-body);
  font-size: 10.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--edb-green);
  margin-bottom: 14px;
}
.edb-section-label--light { color: rgba(255,255,255,0.55); }

.edb-section-title {
  font-family: var(--edb-font-heading);
  font-size: clamp(2.3rem, 4.2vw, 3.5rem);
  font-weight: 300;
  line-height: 1.18;
  color: var(--edb-black);
}
.edb-section-title--light { color: var(--edb-white); }

.edb-divider {
  width: 38px;
  height: 1px;
  background: var(--edb-green);
  margin: 22px 0 38px;
}
.edb-divider--light { background: rgba(255,255,255,0.25); }
.edb-divider--center { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   4. BUTTONS
   Apply to Divi Button module's CSS Class field. Divi's own button color/
   hover options can be left default when these classes are used.
   ========================================================================== */
.edb-btn {
  display: inline-block;
  padding: 14px 36px !important;
  font-family: var(--edb-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition: all 0.25s;
}
.edb-btn-white { background: var(--edb-white) !important; color: var(--edb-black) !important; border: 1px solid var(--edb-white) !important; }
.edb-btn-white:hover { background: transparent !important; color: var(--edb-white) !important; }

.edb-btn-dark { background: var(--edb-black) !important; color: var(--edb-white) !important; border: 1px solid var(--edb-black) !important; }
.edb-btn-dark:hover { background: var(--edb-green) !important; border-color: var(--edb-green) !important; }

.edb-btn-outline-white { background: transparent !important; color: var(--edb-white) !important; border: 1px solid rgba(255,255,255,0.7) !important; }
.edb-btn-outline-white:hover { background: var(--edb-white) !important; color: var(--edb-black) !important; }

/* ==========================================================================
   5. STATS BAND (3 stat items under the hero)
   ========================================================================== */
.edb-stats-band {
  background: var(--edb-green);
  color: var(--edb-white);
}
.edb-stat-item {
  border-right: 1px solid rgba(255,255,255,0.15);
}
.edb-stat-num {
  font-family: var(--edb-font-heading);
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 1;
  color: var(--edb-white);
}
.edb-stat-label {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* ==========================================================================
   6. ABOUT / TEAM BADGE (photo caption overlay on Kevin Gecha photo)
   ========================================================================== */
.edb-about-badge {
  background: var(--edb-green);
  color: var(--edb-white);
  padding: 18px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.edb-about-badge .edb-name {
  font-family: var(--edb-font-heading);
  font-size: 1.55rem;
  font-weight: 400;
}
.edb-about-badge .edb-cred {
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}

.edb-credentials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 38px;
  padding-top: 38px;
  border-top: 1px solid var(--edb-light-gray);
}
.edb-cred-item { display: flex; flex-direction: column; gap: 5px; }
.edb-cred-item .edb-label {
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--edb-mid-gray);
}
.edb-cred-item .edb-value {
  font-family: var(--edb-font-heading);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--edb-black);
}

/* ==========================================================================
   7. SERVICE AREA BAND (green band listing towns served)
   ========================================================================== */
.edb-service-area { background: var(--edb-green); color: var(--edb-white); text-align: center; }
.edb-towns {
  font-size: 14.5px;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.05em;
  line-height: 2.4;
}
.edb-towns span {
  display: inline-block;
  padding: 0 18px;
  border-right: 1px solid rgba(255,255,255,0.22);
}
.edb-towns span:last-child { border-right: none; }

/* ==========================================================================
   8. TESTIMONIALS
   ========================================================================== */
.edb-quote-mark {
  font-family: var(--edb-font-heading);
  font-size: 5.5rem;
  line-height: 0.45;
  color: var(--edb-green);
  opacity: 0.25;
  margin-bottom: 24px;
  display: block;
}
.edb-t-quote {
  font-family: var(--edb-font-heading);
  font-size: 1.28rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.78;
  color: #333;
}
.edb-t-author { display: flex; align-items: center; gap: 14px; }
.edb-t-line { width: 30px; height: 1px; background: var(--edb-green); }
.edb-t-name {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--edb-black);
}

/* ==========================================================================
   9. PHILOSOPHY / "OUR APPROACH" — dark panel with 3 mini services
   ========================================================================== */
.edb-phil-service h4 {
  font-family: var(--edb-font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}
.edb-phil-service p {
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.edb-footer { background: var(--edb-black); }
.edb-footer-col h4 {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--edb-white);
  margin-bottom: 22px;
}
.edb-footer-col a, .edb-footer-col p {
  display: block;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.48);
  text-decoration: none;
  margin-bottom: 11px;
  line-height: 1.7;
  transition: color 0.2s;
}
.edb-footer-col a:hover { color: var(--edb-white); }
.edb-footer-bottom {
  background: var(--edb-green);
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  font-weight: 300;
}
.edb-footer-bottom a { color: rgba(255,255,255,0.75); text-decoration: none; }
.edb-footer-bottom a:hover { color: var(--edb-white); }

/* ==========================================================================
   11. GLOBAL HEADER — nav link + CTA treatment
   Apply .edb-nav-cta to the header's CTA menu item / button for the
   black-pill "Get in Touch" treatment.
   ========================================================================== */
.edb-nav-cta {
  background: var(--edb-black) !important;
  color: var(--edb-white) !important;
  padding: 11px 26px !important;
  letter-spacing: 0.14em !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  transition: background 0.2s !important;
}
.edb-nav-cta:hover { background: var(--edb-green) !important; }

/* ==========================================================================
   12. RESPONSIVE
   Divi's row/column responsive settings should handle most layout changes.
   These rules only cover the custom classes above.
   ========================================================================== */
@media (max-width: 980px) {
  .edb-stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
}

@media (max-width: 767px) {
  .edb-credentials-row { flex-direction: column; gap: 20px; }
  .edb-towns span { padding: 0 10px; font-size: 11.5px; }
}