/* =========================================================
   Renergy — jweb.css
   Child theme (renergy) custom CSS. Edit via Appearance →
   Theme File Editor only. Grouped and commented by component.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Theme Options colors (Flatsome → Style → Colors).
     Keep these in sync with Theme Options. */
  --primary-color: #F47721;    /* brand orange: buttons, bars, icons */
  --secondary-color: #121212;  /* ink: headings, button text */
  --success-color: #1F7A3A;    /* form confirmation */
  --text-color: #2B2E33;       /* body text */
  --link-color: #C3550A;       /* lightest AA-safe orange text on white (4.54:1) */
  --link-hover-color: #121212;

  /* Colors not available as Theme Options variables */
  --orange-hover: #D9631A;     /* primary button hover, large orange text on light */
  --text-muted: #3A3D42;       /* content paragraphs */
  --gray-bg: #EEF0F2;          /* alternate sections, Talk block */
  --dark-band: #222222;        /* image bands, footer */
  --line: #C9CED4;             /* dividers, input borders (matches Theme Options divider) */
  --white: #FFFFFF;

  /* Type, shape, effects */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --radius: 3px;               /* buttons, inputs */
  --bar-w: 66px;
  --bar-h: 5px;
  --header-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  --focus-ring: 3px solid var(--secondary-color);
}

/* ---------- Base ---------- */
html {
  font-size: 17px;             /* site base size; everything else inherits */
  text-wrap: pretty;           /* avoid single-word last lines (inherited) */
}

/* Even line lengths in headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* Visible keyboard focus on every link, button and field */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
/* Primary: orange fill, ink text, Barlow Condensed (site-wide) */
.button.primary,
.button.primary:visited {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--secondary-color);
  border-radius: var(--radius);
}

.button.primary:hover,
.button.primary:focus-visible {
  background-color: var(--orange-hover);
  color: var(--secondary-color);
  box-shadow: none;            /* drop Flatsome's dark hover overlay */
}

/* Flatsome sets a taller line-height on the label span; match the button */
.button.primary > span {
  line-height: inherit;
}

/* ---------- Header ---------- */
.header-wrapper {
  box-shadow: var(--header-shadow);
}

/* Header CTA: Barlow Condensed 700 20px, 12px 22px padding */
.header-button-1 .button.primary {
  font-size: 20px;
  line-height: 1.2;
  min-height: 0;
  padding: 12px 22px;
}

/* Main nav: Roboto 15px 500, ink, 32px gap, 6px vertical padding */
.header-nav-main > li {
  margin: 0 16px;
}

.header-nav-main > li > a {
  font-size: 15px;
  font-weight: 500;
  color: var(--secondary-color);
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Hover and current page: AA-safe orange text; underline bar stays brand orange */
.header-nav-main > li > a:hover,
.header-nav-main > li.active > a,
.header-nav-main > li.current-menu-item > a {
  color: var(--link-color);
}

/* .header-nav-main > li.active > a,
.header-nav-main > li.current-menu-item > a {
  font-weight: 600;
} */

.header-nav-main.nav-line-bottom > li > a::before {
  height: 3px;
  background-color: var(--primary-color);
}

/* ---------- Header breakpoint ---------- */
/* Flatsome switches to the mobile header at 849px, but the desktop nav and
   CTA button need about 985px before the button wraps. Show the mobile
   header (hamburger, centered logo) up to 1023px, using Flatsome's own
   show/hide classes and its medium-logo-center layout. */
@media (min-width: 850px) and (max-width: 1023px) {
  .header-main .hide-for-medium {
    display: none !important;
  }

  .header-main .show-for-medium {
    display: block !important;
  }

  .header-inner .nav {
    flex-wrap: nowrap;
  }

  .medium-logo-center .flex-left {
    flex: 1 1 0px;
    order: 1;
  }

  .medium-logo-center .logo {
    margin: 0 15px;
    order: 2;
    text-align: center;
  }

  .medium-logo-center .logo img {
    margin: 0 auto;
  }

  .medium-logo-center .flex-right {
    flex: 1 1 0px;
    order: 3;
  }
}

/* ---------- Typography defaults (no class needed) ---------- */
/* H1 is used once per page, in the hero; same size on every page */
h1 {
  font-size: clamp(46px, 6vw, 74px);
  line-height: 1;
  margin: 0 0 22px;
}

h2 {
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.02;
  margin: 0 0 16px;
}

h3 {
  font-size: 24px;
  line-height: 1.1;
  margin: 0 0 8px;
}

p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* No trailing space after the last paragraph or list in a Text element
   (headings keep theirs, so a heading in its own Text element still has
   space before the next element; eyebrows and subtitles keep their margins) */
.text:not(.eyebrow, .subtitle) > :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

/* Space between a Text element and a button right after it */
.text + .button {
  margin-top: 28px;
}

/* Dark sections: white text at regular weight */
.dark p {
  color: inherit;
  font-weight: 400;
}

/* ---------- Heading size utilities (Text element Class field) ---------- */
/* Apply to a Text element; sizes any H1–H3 inside it */
.heading-xl :is(h1, h2, h3) {
  font-size: clamp(46px, 5.4vw, 68px);
  line-height: 1;
}

.heading-lg :is(h1, h2, h3) {
  font-size: clamp(40px, 4.6vw, 56px);
  line-height: 1;
}

.heading-md :is(h1, h2, h3) {
  font-size: clamp(32px, 3.6vw, 42px);
  line-height: 1.05;
}

.heading-sm :is(h1, h2, h3) {
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.05;
  margin-bottom: 14px;
}

/* ---------- Text utilities (Text element Class field) ---------- */
/* Larger intro copy */
.lead p {
  font-size: 19px;
  line-height: 1.5;
}

/* Small print (footer). Also on the element itself: UX Block text
   isn't always wrapped in <p>. */
.text-small,
.text-small p {
  font-size: 14px;
}

/* Eyebrow: orange display label above a heading (a <p>, not a heading) */
.eyebrow p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--orange-hover);
  margin: 0 0 4px;
}

.eyebrow.accent-bar::before {
  margin-bottom: 14px;
}

/* Subtitle: orange display line under a heading (a <p>, not a heading).
   24px bold is large text, so --orange-hover passes 3:1 on white and gray. */
.subtitle p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--orange-hover);
  margin: 0 0 16px;
}

/* Brand orange on dark sections */
.dark .eyebrow p,
.dark .subtitle p {
  color: var(--primary-color);
}

/* Tighter gap when a subtitle follows the heading: heading and subtitle
   in one Text element (preferred), or in separate elements (a Text element
   with no class outputs its heading unwrapped) */
.subtitle :is(h1, h2, h3),
.text:has(+ .subtitle) :is(h1, h2, h3),
:is(h1, h2, h3):has(+ .subtitle) {
  margin-bottom: 6px;
}

/* Square orange bullets */
.list-square ul {
  list-style: none;
  margin: 0;
}

.list-square ul li {
  position: relative;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-muted);
  padding-left: 20px;
  margin: 0 0 8px;
}

.list-square li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 8px;
  height: 8px;
  background-color: var(--primary-color);
}

/* Icon lines: Flatsome icon + text, one per paragraph */
.icon-lines p:has(> i) {
  display: flex;
  align-items: center;
  gap: .75em;
}

.icon-lines p > i {
  flex: none;
  width: 1.25em;
  font-size: 1.45em;
  text-align: center;
  color: var(--primary-color);
}

.icon-lines p > i.icon-map-pin-fill {
  width: 1.04em;               /* same box width as the other icons */
  font-size: 1.75em;
}

/* Extra space between intro copy and the first icon line */
.icon-lines p:not(:has(> i)) + p:has(> i) {
  margin-top: 14px;
}

/* Icon lines split across Text elements */
.icon-lines + .icon-lines {
  margin-top: 12px;
}

.dark .icon-lines a {
  color: var(--white);
}

.dark .icon-lines a:hover {
  color: var(--primary-color);
}

/* Icon aside: a Flatsome icon to the left of a heading + text
   (first item holds the icon) */
.icon-aside {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  align-items: start;
}

* + .icon-aside {
  margin-top: 24px;
}

.icon-aside > :first-child {
  grid-row: span 2;
  margin: 0;
}

.icon-aside i {
  font-size: 36px;
  line-height: 1;
  color: var(--primary-color);
}

.icon-aside :is(h2, h3) {
  margin: 0;
}

.icon-aside > p:not(:first-child) {
  margin: 2px 0 0;
}

/* ---------- Accent bar (orange rule above a heading) ---------- */
.accent-bar::before {
  content: "";
  display: block;
  width: var(--bar-w);
  height: var(--bar-h);
  background-color: var(--primary-color);
  margin-bottom: 18px;
}

.accent-bar--wide {
  --bar-w: 120px;
}

.accent-bar--wide::before {
  margin-bottom: 22px;
}

/* Second bar under the heading */
.accent-bar-below :is(h1, h2)::after {
  content: "";
  display: block;
  width: var(--bar-w);
  height: var(--bar-h);
  background-color: var(--primary-color);
  margin: 20px 0 10px;
}

/* ---------- Text link CTA (orange, underlined) ---------- */
.button.is-link.link-cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: var(--link-color);
  text-transform: none;
  letter-spacing: 0;
  min-height: 0;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
}

.button.is-link.link-cta:hover {
  color: var(--link-hover-color);
}

.button.is-link.link-cta > span {
  line-height: inherit;
}

/* ---------- Column dividers (1px line on a column's edge) ---------- */
.divider-right > .col-inner {
  border-right: 1px solid var(--line);
}

/* Left edge, 78px tall, content centered (dark sections) */
.divider-left > .col-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 78px;
  border-left: 1px solid rgba(255, 255, 255, .35);
}

/* ---------- Hero (section with photo) ---------- */
/* Dark gradient from the left so text stays readable */
.hero-fade .section-bg-overlay {
  background: linear-gradient(90deg,
    rgba(18, 18, 18, .96) 0%,
    rgba(18, 18, 18, .86) 65%,
    rgba(18, 18, 18, .3) 80%,
    rgba(18, 18, 18, 0) 90%);
}

/* Large primary button (hero CTAs) */
.button.primary.is-large {
  font-size: 22px;
  line-height: 1.2;
  min-height: 0;
  padding: 14px 38px;
}

/* ---------- Dark image band ---------- */
/* Photo fills the right 58%; the section's dark color shows on the left
   and fades into the photo (stops are relative to the photo area) */
.band-fade .section-bg {
  left: var(--band-photo-left, 42%);
}

/* Photo width modifiers: photo fills the right 52% / 56% */
.band-fade--52 {
  --band-photo-left: 48%;
}

.band-fade--56 {
  --band-photo-left: 44%;
}

.band-fade .section-bg-overlay {
  background: linear-gradient(90deg,
    var(--dark-band) 0%,
    rgba(34, 34, 34, .6) 24%,
    rgba(34, 34, 34, 0) 55%);
}

/* ---------- Mobile (≤849px: Flatsome mobile header) ---------- */
@media (max-width: 849px) {
  /* Near-solid wash so text over photos keeps 4.5:1 */
  .hero-fade .section-bg-overlay {
    background: rgba(18, 18, 18, .82);
  }

  .band-fade .section-bg {
    left: 0;
  }

  .band-fade .section-bg-overlay {
    left: 0;
    background: rgba(34, 34, 34, .85);
  }

  .divider-left > .col-inner {
    display: block;
    min-height: 0;
    border-left: 0;
  }
}

/* ---------- Small screens (≤549px: single column) ---------- */
@media (max-width: 549px) {
  .divider-right > .col-inner {
    border-right: 0;
  }
}

/* ---------- Form card (white card behind the inquiry form) ---------- */
.card-form > .col-inner {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

/* ---------- Inquiry form (Gravity Forms, Orbital theme) ---------- */
/* Gravity Forms writes its theme colors as an inline style on #gform_wrapper_N,
   which outranks classes, so these overrides need !important. */
.inquiry-embed .gform_wrapper.gform-theme--orbital {
  --gf-font-family-base: var(--font-body) !important;
  --gf-form-gap-x: 22px !important;
  --gf-form-gap-y: 18px !important;
  --gf-ctrl-size: 38px !important;
  --gf-ctrl-font-size: 15px !important;
  --gf-ctrl-padding-x: 12px !important;
  --gf-ctrl-radius: var(--radius) !important;
  --gf-ctrl-border-color: var(--line) !important;
  --gf-ctrl-border-color-focus: var(--primary-color) !important;
  --gf-ctrl-outline-color-focus: var(--secondary-color) !important;
  --gf-ctrl-label-font-size-primary: 14px !important;
  --gf-ctrl-label-font-weight-primary: 400 !important;
  --gf-ctrl-label-color-primary: var(--text-color) !important;
  --gf-ctrl-label-color-req: var(--primary-color) !important;
  --gf-ctrl-desc-font-size: 13px !important;
  --gf-ctrl-desc-color: var(--text-muted) !important;
  --gf-color-primary: var(--primary-color) !important;
  --gf-color-in-ctrl-primary: var(--primary-color) !important;
  /* Submit = site primary button */
  --gf-ctrl-btn-bg-color-primary: var(--primary-color) !important;
  --gf-ctrl-btn-bg-color-hover-primary: var(--orange-hover) !important;
  --gf-ctrl-btn-bg-color-focus-primary: var(--orange-hover) !important;
  --gf-ctrl-btn-border-color-focus-primary: var(--secondary-color) !important;
  --gf-ctrl-btn-color-primary: var(--secondary-color) !important;
  --gf-ctrl-btn-color-hover-primary: var(--secondary-color) !important;
  --gf-ctrl-btn-color-focus-primary: var(--secondary-color) !important;
  --gf-ctrl-btn-font-family: var(--font-display) !important;
  --gf-ctrl-btn-font-weight: 700 !important;
  --gf-ctrl-btn-font-size: 22px !important;
  --gf-ctrl-btn-padding-x: 38px !important;
  --gf-ctrl-btn-size: 54px !important;
}


.inquiry-embed .gform_required_legend {
  font-size: 13px;
  color: var(--text-muted);
}

.inquiry-embed .gform_confirmation_message {
  font-size: 15px;
  font-weight: 500;
  color: var(--success-color);
}

/* The editor wraps the form shortcode in <p>; hide the empty leftovers */
.inquiry-embed > p:empty {
  display: none;
}

/* Privacy line under the form */
.form-privacy {
  font-size: 13px;
  color: var(--text-muted);
  margin: 12px 0 0;
}

.form-privacy a {
  text-decoration: underline;
}

/* ---------- Footer (UX Block "Footer") ---------- */
/* Logo on a white box, 275 x 86 */
.footer-logo {
  max-width: 275px;
}

.footer-logo .img-inner {
  background-color: var(--white);
  padding: 6px 10px;
}

.footer-logo img {
  width: 100%;
  height: 74px;
  object-fit: contain;
  object-position: left center;
}

/* Footer links: white, orange "|" between, orange on hover */
.footer-links a {
  color: var(--white);
}

.footer-links a:hover {
  color: var(--primary-color);
}

.footer-links a + a::before {
  content: "|";
  display: inline-block;
  margin: 0 12px;
  font-weight: 500;
  color: var(--primary-color);
}

/* Flatsome copyright bar: not in the design (footer is the UX Block) */
.absolute-footer {
  display: none;
}