/* ==========================================================================
   NRGPAL — Brand Kit v2 global styles
   Section B of the Week 1 build. Single source of truth for brand tokens.

   Source: NRGPAL-Brand-Kit-v2.pdf
     §2.1 Colour  §3 Typography  §4.3 Components

   OVERRIDE ON RECORD: Brand Kit §4.2 corner radius (pills 100px, cards 12px,
   inputs 8px, sections 16px, badges 100px) is DEPRECATED by Zak.
   Everything is square — radius 0 throughout. Do not reintroduce radius
   without a written decision.

   Loaded after divi-style and the child style.css so plain element and
   Divi-default rules are beaten on load order. Where Divi's customizer
   emits high-specificity rules we match its selector shape rather than
   reaching for !important, so per-module builder settings still win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS  (§2.1)
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --nrg-blue:            #1676BA;  /* links, secondary UI, inverter */
  --nrg-green:           #009341;  /* success, eco/rebate, battery */
  --nrg-orange:          #F7921A;  /* primary CTA only */

  /* Brand — interaction states (derived, not in the Brand Kit) */
  --nrg-blue-hover:      #12629A;
  --nrg-green-hover:     #007A36;
  --nrg-orange-hover:    #D97C0C;

  /* Accent — product families */
  --nrg-gold:            #F3BD36;  /* solar */
  --nrg-sky:             #23ACE6;  /* EV */
  --nrg-teal:            #00A79D;  /* air conditioning */
  --nrg-leaf:            #2AB762;
  --nrg-lime:            #8CC63C;  /* never a background */

  /* Ink */
  --nrg-ink:             #101613;
  --nrg-ink-2:           #5B6B78;
  --nrg-ink-muted:       #8A938E;

  /* Surface */
  --nrg-surface-page:    #F1F3F1;
  --nrg-surface-card:    #FFFFFF;
  --nrg-surface-subtle:  #EAF3DE;
  --nrg-border:          #E5E9EA;
  --nrg-rule:            #DCE3E2;

  /* Dark */
  --nrg-dark-1:          #0F1A20;
  --nrg-dark-2:          #101613;
  --nrg-dark-3:          #0A1712;  /* footer */
  --nrg-dark-text:       #8A97A0;
  --nrg-dark-rule:       #26332C;

  /* Rebate callout text (§4.3) */
  --nrg-rebate-text:     #3A6B1E;

  /* Secondary button border (§4.3) */
  --nrg-btn-secondary-border: #C7CDC9;

  /* Type */
  --nrg-font-display:    'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --nrg-font-body:       'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Geometry — Zak's override */
  --nrg-radius:          0;

  /* Rhythm (§4.3) */
  --nrg-section-y:       80px;
  --nrg-section-y-mob:   48px;
}

/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY  (§3)
   `html` prefix lifts specificity just above Divi's customizer output
   (`body { ... }`, `h1 { ... }`) without resorting to !important.
   -------------------------------------------------------------------------- */
html body,
html input,
html textarea,
html select,
html button {
  font-family: var(--nrg-font-body);
}

html body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--nrg-ink);
  background-color: var(--nrg-surface-card);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html h1, html h2, html h3, html h4, html h5, html h6,
html .et_pb_module h1, html .et_pb_module h2,
html .et_pb_module h3, html .et_pb_module h4 {
  font-family: var(--nrg-font-display);
  color: var(--nrg-ink);
}

html h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

html h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.25;
}

html h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

html h4 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

html h5 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

html h6 {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

html p {
  font-size: 16px;
  line-height: 1.7;
}

html a {
  color: var(--nrg-blue);
  text-decoration: none;
  transition: color .15s ease;
}

html a:hover {
  color: var(--nrg-blue-hover);
}

html strong,
html b {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. TYPE UTILITIES  (§3)
   Apply via the Divi module "CSS Class" field.
   -------------------------------------------------------------------------- */
.nrg-body-lg,
.nrg-body-lg p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--nrg-ink-2);
}

.nrg-eyebrow,
.nrg-eyebrow p {
  font-family: var(--nrg-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--nrg-ink-2);
}

.nrg-caption,
.nrg-caption p {
  font-family: var(--nrg-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--nrg-ink-muted);
}

.nrg-stat,
.nrg-stat p {
  font-family: var(--nrg-font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--nrg-ink);
}

.nrg-muted,
.nrg-muted p { color: var(--nrg-ink-muted); }

.nrg-secondary-text,
.nrg-secondary-text p { color: var(--nrg-ink-2); }

/* --------------------------------------------------------------------------
   4. BUTTONS  (§4.3)
   Divi's customizer emits `body #page-container .et_pb_section .et_pb_button`,
   so that selector shape is matched here. Radius 0 per Zak's override.
   -------------------------------------------------------------------------- */
.et_pb_button,
body #page-container .et_pb_section .et_pb_button,
body #page-container .et_pb_section .et_pb_button:hover {
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.2;
  padding: 14px 26px;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--nrg-radius);
  text-transform: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Divi appends an arrow glyph on hover and shifts the padding to make room.
   The Brand Kit has no arrow, so the glyph and the padding shift are removed. */
.et_pb_button:after,
body #page-container .et_pb_section .et_pb_button:after {
  display: none;
  content: none;
}

/* Primary — orange, white text. Orange is CTA-only (§2.1). */
.et_pb_button,
body #page-container .et_pb_section .et_pb_button {
  background-color: var(--nrg-orange);
  border-color: var(--nrg-orange);
  color: #FFFFFF;
}

.et_pb_button:hover,
body #page-container .et_pb_section .et_pb_button:hover {
  background-color: var(--nrg-orange-hover);
  border-color: var(--nrg-orange-hover);
  color: #FFFFFF;
}

/* Secondary — transparent, 1px #C7CDC9, ink text. */
.et_pb_button.nrg-btn-secondary,
body #page-container .et_pb_section .et_pb_button.nrg-btn-secondary {
  background-color: transparent;
  border-color: var(--nrg-btn-secondary-border);
  color: var(--nrg-ink);
}

.et_pb_button.nrg-btn-secondary:hover,
body #page-container .et_pb_section .et_pb_button.nrg-btn-secondary:hover {
  background-color: transparent;
  border-color: var(--nrg-ink);
  color: var(--nrg-ink);
}

/* Tertiary — white on dark sections. */
.et_pb_button.nrg-btn-tertiary,
body #page-container .et_pb_section .et_pb_button.nrg-btn-tertiary {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--nrg-ink);
}

.et_pb_button.nrg-btn-tertiary:hover,
body #page-container .et_pb_section .et_pb_button.nrg-btn-tertiary:hover {
  background-color: var(--nrg-surface-page);
  border-color: var(--nrg-surface-page);
  color: var(--nrg-ink);
}

/* --------------------------------------------------------------------------
   5. CARDS AND CALLOUTS  (§4.3)
   Cards carry NO shadow. Selected state is a 1.5px orange border.
   -------------------------------------------------------------------------- */
.nrg-card {
  background-color: var(--nrg-surface-card);
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
  box-shadow: none;
  padding: 24px;
}

.nrg-card.is-selected,
.nrg-card--selected {
  border: 1.5px solid var(--nrg-orange);
}

.nrg-rebate-callout {
  background-color: var(--nrg-surface-subtle);
  color: var(--nrg-rebate-text);
  border-radius: var(--nrg-radius);
  padding: 16px 20px;
}

.nrg-rebate-callout p,
.nrg-rebate-callout li {
  color: var(--nrg-rebate-text);
}

.nrg-rebate-callout strong {
  color: var(--nrg-ink);
}

/* Divi blurbs used as cards pick this up via the CSS Class field. */
.nrg-card .et_pb_blurb_content,
.nrg-card .et_pb_module { box-shadow: none; }

/* --------------------------------------------------------------------------
   6. SURFACES AND RULES
   -------------------------------------------------------------------------- */
.nrg-surface-page   { background-color: var(--nrg-surface-page); }
.nrg-surface-subtle { background-color: var(--nrg-surface-subtle); }
.nrg-surface-card   { background-color: var(--nrg-surface-card); }

.nrg-dark,
.nrg-dark-1 { background-color: var(--nrg-dark-1); color: var(--nrg-dark-text); }
.nrg-dark-2 { background-color: var(--nrg-dark-2); color: var(--nrg-dark-text); }
.nrg-dark-3 { background-color: var(--nrg-dark-3); color: var(--nrg-dark-text); }

.nrg-dark h1, .nrg-dark h2, .nrg-dark h3, .nrg-dark h4,
.nrg-dark-1 h1, .nrg-dark-1 h2, .nrg-dark-1 h3, .nrg-dark-1 h4,
.nrg-dark-2 h1, .nrg-dark-2 h2, .nrg-dark-2 h3, .nrg-dark-2 h4,
.nrg-dark-3 h1, .nrg-dark-3 h2, .nrg-dark-3 h3, .nrg-dark-3 h4 {
  color: #FFFFFF;
}

.nrg-dark hr, .nrg-dark-1 hr, .nrg-dark-2 hr, .nrg-dark-3 hr,
.nrg-dark .et_pb_space, .nrg-dark-3 .et_pb_divider_internal {
  border-color: var(--nrg-dark-rule);
}

html hr,
.et_pb_divider:before {
  border-top-color: var(--nrg-rule);
}

/* --------------------------------------------------------------------------
   7. PRODUCT ACCENTS  (§2.1)
   Accents are for iconography, keylines and chips — not body text.
   Lime is never used as a background.
   -------------------------------------------------------------------------- */
.nrg-accent-solar  { color: var(--nrg-gold); }
.nrg-accent-ev     { color: var(--nrg-sky); }
.nrg-accent-hvac   { color: var(--nrg-teal); }
.nrg-accent-batt   { color: var(--nrg-green); }
.nrg-accent-inv    { color: var(--nrg-blue); }
.nrg-accent-leaf   { color: var(--nrg-leaf); }
.nrg-accent-lime   { color: var(--nrg-lime); }

.nrg-keyline-solar { border-left: 3px solid var(--nrg-gold); }
.nrg-keyline-ev    { border-left: 3px solid var(--nrg-sky); }
.nrg-keyline-hvac  { border-left: 3px solid var(--nrg-teal); }
.nrg-keyline-batt  { border-left: 3px solid var(--nrg-green); }
.nrg-keyline-inv   { border-left: 3px solid var(--nrg-blue); }

/* --------------------------------------------------------------------------
   8. SECTION RHYTHM  (§4.3)
   Divi's default is a percentage (4% 0). Fixed 80/48 per the Brand Kit.
   Modules with their own padding set in the builder still win.
   -------------------------------------------------------------------------- */
.et_pb_section {
  padding-top: var(--nrg-section-y);
  padding-bottom: var(--nrg-section-y);
}

.et_pb_row {
  padding-top: 0;
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. FORM CONTROLS — Divi + Fluent Forms  (§4.3, radius 0)
   -------------------------------------------------------------------------- */
html input[type="text"],
html input[type="email"],
html input[type="tel"],
html input[type="url"],
html input[type="number"],
html input[type="password"],
html input[type="search"],
html textarea,
html select,
.fluentform .ff-el-form-control,
.et_pb_contact_field .input {
  font-family: var(--nrg-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--nrg-ink);
  background-color: var(--nrg-surface-card);
  border: 1px solid var(--nrg-border);
  border-radius: var(--nrg-radius);
  padding: 12px 14px;
  box-shadow: none;
  transition: border-color .15s ease;
}

html input[type="text"]:focus,
html input[type="email"]:focus,
html input[type="tel"]:focus,
html textarea:focus,
html select:focus,
.fluentform .ff-el-form-control:focus {
  border-color: var(--nrg-blue);
  outline: none;
}

html ::placeholder { color: var(--nrg-ink-muted); opacity: 1; }

.fluentform .ff-el-input--label label {
  font-family: var(--nrg-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--nrg-ink);
}

.fluentform .ff-el-form-check-label,
.fluentform .ff-el-form-check label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--nrg-ink-2);
}

.fluentform .ff-el-is-error .ff-el-form-control { border-color: #C62828; }
.fluentform .text-danger { color: #C62828; font-size: 13px; }

.fluentform .ff-btn-submit,
.fluentform .ff_btn_style {
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background-color: var(--nrg-orange);
  border: 1px solid var(--nrg-orange);
  border-radius: var(--nrg-radius);
  color: #FFFFFF;
  padding: 14px 26px;
  transition: background-color .18s ease, border-color .18s ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff_btn_style:hover {
  background-color: var(--nrg-orange-hover);
  border-color: var(--nrg-orange-hover);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   10. NAVIGATION  (§3 — nav is the button scale)
   -------------------------------------------------------------------------- */
html #top-menu li a,
html .et-menu li a,
html .et_mobile_menu li a {
  font-family: var(--nrg-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--nrg-ink);
}

html #top-menu li a:hover,
html .et-menu li a:hover {
  color: var(--nrg-blue);
  opacity: 1;
}

html #top-menu li.current-menu-item > a,
html .et-menu li.current-menu-item > a {
  color: var(--nrg-blue);
}

/* Header CTA.
   CURRENTLY UNUSED. "Book a Consultation" was removed from the Main Menu on
   16 Sep 2026 and rebuilt as a Divi Button module inside both Theme Builder
   header templates, where it is styled in the builder. These rules are kept
   only so a menu-item CTA still lands correctly if one is ever reinstated —
   add the class `nav-cta` to the menu item to use them. */
html #top-menu li.nav-cta > a,
html .et-menu li.nav-cta > a {
  background-color: var(--nrg-orange);
  border-radius: var(--nrg-radius);
  color: #FFFFFF;
  padding: 11px 20px !important;
  display: inline-block;
  line-height: 1.2;
}

html #top-menu li.nav-cta > a:hover,
html .et-menu li.nav-cta > a:hover {
  background-color: var(--nrg-orange-hover);
  color: #FFFFFF;
  opacity: 1;
}

html .et_mobile_menu li.nav-cta > a {
  color: var(--nrg-orange);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   11. SQUARE-CORNER SWEEP  (Zak's override of §4.2)
   Scoped to the elements that actually ship with a radius rather than a
   blanket reset, so nothing unrelated is flattened.

   Divi writes per-module design settings into a deferred stylesheet that
   loads AFTER this file (et-core-unified-*-deferred). Buttons configured
   with a radius in the builder — the Theme Builder header's "Book a call"
   pill at 50px, for one — therefore need !important to be squared off.
   It is confined to the radius property on buttons and form controls, so
   every other builder setting still wins as normal.
   -------------------------------------------------------------------------- */
.et_pb_button,
.et_pb_promo_button,
.et_pb_more_button,
.et_pb_contact_submit,
.et_pb_newsletter_button,
.et_pb_blurb_content img,
.et_pb_image_wrap,
.et_pb_tabs,
.et_pb_toggle,
.et_pb_pricing_table,
.et_pb_testimonial_portrait,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.fluentform .ff-btn,
.fluentform .ff-el-form-control,
html input[type="text"],
html input[type="email"],
html input[type="tel"],
html textarea,
html select {
  border-radius: var(--nrg-radius) !important;
}

/* --------------------------------------------------------------------------
   12. WOOCOMMERCE BUTTONS — keep the brand CTA consistent
   -------------------------------------------------------------------------- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  font-family: var(--nrg-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  background-color: var(--nrg-orange);
  border-radius: var(--nrg-radius);
  color: #FFFFFF;
  padding: 14px 26px;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--nrg-orange-hover);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   13. FOOTER  (Dark/3)

   This site uses a Divi Theme Builder footer template (et_footer_layout 160),
   so Divi's own #main-footer markup is not output on most pages. Its section
   background is already set to Dark/3 (#0A1712) inside that template, which
   is correct. The .et-l--footer rules below carry the type and link colours
   across so the footer matches without having to reopen the builder; the
   #main-footer rules stay as a fallback for any page the template misses.
   -------------------------------------------------------------------------- */
html .et-l--footer,
html .et-l--footer p,
html .et-l--footer li {
  color: var(--nrg-dark-text);
  font-size: 15px;
}

html .et-l--footer h1,
html .et-l--footer h2,
html .et-l--footer h3,
html .et-l--footer h4 {
  font-family: var(--nrg-font-display);
  color: #FFFFFF;
}

html .et-l--footer h4 { font-size: 17px; font-weight: 700; }

html .et-l--footer a,
html .et-l--footer .et-menu li a {
  color: var(--nrg-dark-text);
}

html .et-l--footer a:hover,
html .et-l--footer .et-menu li a:hover {
  color: #FFFFFF;
  opacity: 1;
}

html .et-l--footer hr,
html .et-l--footer .et_pb_divider:before {
  border-top-color: var(--nrg-dark-rule);
}

html .et-l--footer .nrg-caption,
html .et-l--footer .nrg-caption p {
  color: var(--nrg-dark-text);
  font-size: 13px;
}

html #main-footer {
  background-color: var(--nrg-dark-3);
  color: var(--nrg-dark-text);
}

html #main-footer .footer-widget h4,
html #main-footer h4.title {
  font-family: var(--nrg-font-display);
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
}

html #main-footer a,
html #main-footer li a {
  color: var(--nrg-dark-text);
  font-size: 15px;
}

html #main-footer a:hover,
html #main-footer li a:hover {
  color: #FFFFFF;
}

html #footer-bottom {
  background-color: var(--nrg-dark-3);
  border-top: 1px solid var(--nrg-dark-rule);
}

html #footer-info,
html #footer-bottom .et-social-icon a {
  color: var(--nrg-dark-text);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   14. COMPLIANCE NOTICE BLOCK
   Used by the VEU / rebate disclosure copy so the legally required text has
   one consistent, deliberately plain treatment across pages and forms.
   -------------------------------------------------------------------------- */
.nrg-notice {
  background-color: var(--nrg-surface-page);
  border-left: 3px solid var(--nrg-blue);
  border-radius: var(--nrg-radius);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--nrg-ink-2);
}

.nrg-notice--veu {
  background-color: var(--nrg-surface-subtle);
  border-left-color: var(--nrg-green);
  color: var(--nrg-rebate-text);
}

.nrg-notice strong { color: var(--nrg-ink); }

/* Fluent Forms custom-HTML blocks carry the privacy and VEU disclosure copy.
   They were written as plain HTML with no inline styles (WP-CLI rejects the
   semicolons inline styles need), so the notice treatment is attached here by
   element instead. This keeps the legally required text visually distinct
   without another structural write to the form. */
.fluentform .ff-custom_html {
  background-color: var(--nrg-surface-page);
  border-left: 3px solid var(--nrg-blue);
  border-radius: var(--nrg-radius);
  padding: 16px 20px;
  margin: 6px 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--nrg-ink-2);
}

.fluentform .ff-custom_html p { font-size: 14px; margin: 0 0 8px; }
.fluentform .ff-custom_html p:last-child { margin-bottom: 0; }
.fluentform .ff-custom_html strong { color: var(--nrg-ink); }
.fluentform .ff-custom_html a { color: var(--nrg-blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. RESPONSIVE  (§3 mobile scale)
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  html h1 { font-size: 36px; }
  html h2 { font-size: 28px; }
  html h3 { font-size: 20px; }

  .et_pb_section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media (max-width: 767px) {
  html h1 { font-size: 30px; line-height: 1.22; }
  html h2 { font-size: 24px; }
  html h3 { font-size: 19px; }
  html h4 { font-size: 16px; }
  html body, html p { font-size: 16px; }

  .nrg-stat, .nrg-stat p { font-size: 32px; }

  .et_pb_section {
    padding-top: var(--nrg-section-y-mob);
    padding-bottom: var(--nrg-section-y-mob);
  }

  .et_pb_button,
  body #page-container .et_pb_section .et_pb_button {
    padding: 13px 22px;
  }

  .nrg-card { padding: 20px; }
}

/* --------------------------------------------------------------------------
   16. ACCESSIBILITY
   -------------------------------------------------------------------------- */
html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible,
.et_pb_button:focus-visible {
  outline: 2px solid var(--nrg-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html *,
  html *:before,
  html *:after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}