/*
 Theme Name:   EGS Electric Grid Systems — Child Theme
 Theme URI:    https://electricgridsolutions.com
 Description:  Hello Elementor child theme for Electric Grid Systems. Built by 2 Heads Marketing.
 Author:       2 Heads Marketing
 Author URI:   https://2headsmarketing.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  egs-child
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — EGS Brand System
   ============================================================ */

:root {

  /* — Colors — */
  --egs-navy:          #0D1F3C;
  --egs-navy-mid:      #162D52;
  --egs-navy-light:    #1E3A66;
  --egs-gold:          #F5B800;
  --egs-gold-dark:     #D9A100;
  --egs-gold-pale:     #FFF9E0;
  --egs-white:         #FFFFFF;
  --egs-off-white:     #F4F5F7;
  --egs-light-gray:    #E8EAF0;
  --egs-mid-gray:      #8A95A8;
  --egs-text-body:     #2C3E55;

  /* — Typography — */
  --egs-font-display:  'Barlow Condensed', sans-serif;
  --egs-font-body:     'Barlow', sans-serif;

  /* — Spacing — */
  --egs-section-pad:   96px;
  --egs-section-pad-md: 64px;
  --egs-container:     1200px;

  /* — Borders & Radius — */
  --egs-border:        1px solid var(--egs-light-gray);
  --egs-gold-border:   2px solid var(--egs-gold);

  /* — Shadows — */
  --egs-shadow-sm:     0 4px 16px rgba(13, 31, 60, 0.08);
  --egs-shadow-md:     0 12px 40px rgba(13, 31, 60, 0.14);
  --egs-shadow-lg:     0 24px 64px rgba(13, 31, 60, 0.20);

  /* — Transitions — */
  --egs-transition:    0.2s ease;
  --egs-transition-md: 0.3s ease;

}


/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--egs-font-body);
  color: var(--egs-text-body);
  background-color: var(--egs-off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove Hello Elementor's default body padding if any */
.elementor-page .elementor {
  width: 100%;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--egs-font-display);
  font-weight: 800;
  line-height: 1;
  color: var(--egs-navy);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(48px, 6vw, 80px); }
h2 { font-size: clamp(34px, 4vw, 52px); }
h3 { font-size: clamp(22px, 2.5vw, 32px); }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
}

p {
  font-family: var(--egs-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--egs-text-body);
  font-weight: 400;
}

a {
  color: var(--egs-gold);
  text-decoration: none;
  transition: color var(--egs-transition);
}

a:hover {
  color: var(--egs-gold-dark);
}

strong {
  font-weight: 600;
  color: var(--egs-navy);
}


/* ============================================================
   ELEMENTOR CONTAINER OVERRIDES
   ============================================================ */

.elementor-section .elementor-container,
.e-con-inner {
  max-width: var(--egs-container);
}

/* Full-width sections still honor content width */
.elementor-section.elementor-section-full_width .elementor-container {
  max-width: 100%;
}


/* ============================================================
   SECTION BACKGROUNDS — UTILITY CLASSES
   Apply via Elementor > Advanced > CSS Classes
   ============================================================ */

/* Dark navy section */
.egs-bg-navy {
  background-color: var(--egs-navy) !important;
}

/* Mid navy (slightly lighter) */
.egs-bg-navy-mid {
  background-color: var(--egs-navy-mid) !important;
}

/* Off-white / light section */
.egs-bg-light {
  background-color: var(--egs-off-white) !important;
}

/* Pure white */
.egs-bg-white {
  background-color: var(--egs-white) !important;
}

/* Gold accent section */
.egs-bg-gold {
  background-color: var(--egs-gold) !important;
}

/* On dark sections — flip text colors */
.egs-bg-navy h1,
.egs-bg-navy h2,
.egs-bg-navy h3,
.egs-bg-navy h4,
.egs-bg-navy h5,
.egs-bg-navy h6,
.egs-bg-navy-mid h1,
.egs-bg-navy-mid h2,
.egs-bg-navy-mid h3,
.egs-bg-navy-mid h4,
.egs-bg-navy-mid h5,
.egs-bg-navy-mid h6 {
  color: var(--egs-white);
}

.egs-bg-navy p,
.egs-bg-navy-mid p {
  color: rgba(255, 255, 255, 0.68);
}

.egs-bg-navy strong,
.egs-bg-navy-mid strong {
  color: var(--egs-white);
}

/* Gold section — navy text */
.egs-bg-gold h1,
.egs-bg-gold h2,
.egs-bg-gold h3,
.egs-bg-gold p {
  color: var(--egs-navy);
}


/* ============================================================
   SECTION EYEBROW LABELS
   Apply .egs-eyebrow to a Heading widget (set to H6)
   ============================================================ */

.egs-eyebrow .elementor-heading-title,
h6.egs-eyebrow {
  font-family: var(--egs-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--egs-gold);
  display: flex;
  align-items: center;
  gap: 10px;
}

.egs-eyebrow .elementor-heading-title::before,
h6.egs-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--egs-gold);
  flex-shrink: 0;
}

/* Eyebrow with trailing line instead */
.egs-eyebrow-after .elementor-heading-title::before {
  display: none;
}

.egs-eyebrow-after .elementor-heading-title::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--egs-gold);
  flex-shrink: 0;
  margin-left: 10px;
}


/* ============================================================
   GOLD VERTICAL ACCENT BAR (Hero left edge)
   Apply .egs-gold-bar-left to the hero section
   ============================================================ */

.egs-gold-bar-left {
  position: relative;
}

.egs-gold-bar-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--egs-gold);
  z-index: 10;
  pointer-events: none;
}


/* ============================================================
   GRID TEXTURE OVERLAY (dark sections)
   Apply .egs-grid-overlay to any navy section
   ============================================================ */

.egs-grid-overlay {
  position: relative;
}

.egs-grid-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245, 184, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 184, 0, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* Make sure Elementor content sits above the grid overlay */
.egs-grid-overlay > .elementor-container,
.egs-grid-overlay > .e-con-inner {
  position: relative;
  z-index: 1;
}


/* ============================================================
   BUTTONS
   ============================================================ */

/* — Primary Gold Button — */
.elementor-button.egs-btn-primary,
.egs-btn-primary .elementor-button {
  background-color: var(--egs-gold) !important;
  color: var(--egs-navy) !important;
  font-family: var(--egs-font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 16px 36px !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0% 50%);
  transition: background-color var(--egs-transition), transform var(--egs-transition) !important;
}

.elementor-button.egs-btn-primary:hover,
.egs-btn-primary .elementor-button:hover {
  background-color: var(--egs-gold-dark) !important;
  transform: translateY(-2px);
}

/* — Outline Ghost Button — */
.elementor-button.egs-btn-outline,
.egs-btn-outline .elementor-button {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: var(--egs-font-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0 !important;
  transition: border-color var(--egs-transition), color var(--egs-transition) !important;
}

.elementor-button.egs-btn-outline:hover,
.egs-btn-outline .elementor-button:hover {
  border-color: var(--egs-gold) !important;
  color: var(--egs-gold) !important;
}

/* — Gold Text Link Button — */
.elementor-button.egs-btn-text,
.egs-btn-text .elementor-button {
  background-color: transparent !important;
  color: var(--egs-gold) !important;
  font-family: var(--egs-font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.elementor-button.egs-btn-text:hover,
.egs-btn-text .elementor-button:hover {
  color: var(--egs-gold-dark) !important;
  background: transparent !important;
}

/* — Nav CTA Button — */
.egs-nav-cta .elementor-button {
  background-color: var(--egs-gold) !important;
  color: var(--egs-navy) !important;
  font-family: var(--egs-font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 10px 22px !important;
  border-radius: 0 !important;
  border: none !important;
  transition: background-color var(--egs-transition) !important;
}

.egs-nav-cta .elementor-button:hover {
  background-color: var(--egs-gold-dark) !important;
}


/* ============================================================
   STAT / NUMBER DISPLAY
   Apply .egs-stat to an inner section containing a number + label
   ============================================================ */

.egs-stat-num .elementor-heading-title {
  font-family: var(--egs-font-display) !important;
  font-weight: 800 !important;
  font-size: 38px !important;
  color: var(--egs-gold) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.egs-stat-label .elementor-heading-title {
  font-family: var(--egs-font-display) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--egs-mid-gray) !important;
}

/* Vertical left border for stat items (except first) */
.egs-stat-item {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 32px;
}

.egs-stat-item:first-child {
  border-left: none;
  padding-left: 0;
}


/* ============================================================
   PROCESS STEPS
   ============================================================ */

/* Step label (01, 02 etc.) displayed via heading */
.egs-step-num .elementor-heading-title {
  font-family: var(--egs-font-display) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: var(--egs-gold) !important;
  line-height: 1 !important;
}

/* Step name */
.egs-step-name .elementor-heading-title {
  font-family: var(--egs-font-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--egs-white) !important;
}

/* Step description */
.egs-step-desc p {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--egs-mid-gray) !important;
}

/* Step column — center aligned */
.egs-process-step .elementor-widget-wrap {
  align-items: center;
  text-align: center;
}


/* ============================================================
   PROPERTY / FEATURE CARDS
   Apply .egs-card to an inner section or column
   ============================================================ */

.egs-card {
  background-color: var(--egs-navy) !important;
  transition: transform var(--egs-transition-md) !important;
  position: relative;
  overflow: hidden;
}

.egs-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--egs-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--egs-transition-md);
}

.egs-card:hover {
  transform: translateY(-6px);
}

.egs-card:hover::after {
  transform: scaleX(1);
}

.egs-card .elementor-heading-title {
  font-family: var(--egs-font-display) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--egs-white) !important;
}

.egs-card p {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--egs-mid-gray) !important;
}


/* ============================================================
   MODEL / SURFACE LEASE POINTS
   Apply .egs-model-point to each row
   ============================================================ */

.egs-model-point {
  border-bottom: 1px solid var(--egs-light-gray);
  padding-bottom: 28px;
  margin-bottom: 28px;
}

.egs-model-point:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.egs-model-num .elementor-heading-title {
  font-family: var(--egs-font-display) !important;
  font-weight: 800 !important;
  font-size: 52px !important;
  color: var(--egs-light-gray) !important;
  line-height: 1 !important;
}

.egs-model-point-title .elementor-heading-title {
  font-family: var(--egs-font-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--egs-navy) !important;
}


/* ============================================================
   CONTACT SECTION
   ============================================================ */

/* Contact detail row */
.egs-contact-detail {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.egs-contact-detail:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.egs-contact-label .elementor-heading-title {
  font-family: var(--egs-font-display) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--egs-mid-gray) !important;
  margin-bottom: 4px !important;
}

.egs-contact-value .elementor-heading-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--egs-white) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Contact icon box */
.egs-contact-icon {
  width: 40px;
  height: 40px;
  background-color: var(--egs-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}


/* ============================================================
   FORMS (Elementor Form widget)
   ============================================================ */

/* Form field labels */
.egs-form .elementor-field-label {
  font-family: var(--egs-font-display) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--egs-navy) !important;
  margin-bottom: 8px !important;
}

/* On dark background form */
.egs-form-dark .elementor-field-label {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Form inputs */
.egs-form .elementor-field-textual,
.egs-form select.elementor-field {
  font-family: var(--egs-font-body) !important;
  font-size: 14px !important;
  color: var(--egs-navy) !important;
  background-color: var(--egs-off-white) !important;
  border: 1.5px solid var(--egs-light-gray) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  transition: border-color var(--egs-transition) !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

.egs-form .elementor-field-textual:focus,
.egs-form select.elementor-field:focus {
  border-color: var(--egs-gold) !important;
  background-color: var(--egs-white) !important;
}

/* Dark form inputs */
.egs-form-dark .elementor-field-textual,
.egs-form-dark select.elementor-field {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--egs-white) !important;
}

.egs-form-dark .elementor-field-textual::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

.egs-form-dark .elementor-field-textual:focus,
.egs-form-dark select.elementor-field:focus {
  border-color: var(--egs-gold) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Form submit button */
.egs-form .elementor-button[type="submit"],
.egs-form .e-form__buttons .elementor-button {
  background-color: var(--egs-gold) !important;
  color: var(--egs-navy) !important;
  font-family: var(--egs-font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 16px 36px !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  cursor: pointer !important;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0% 50%);
  transition: background-color var(--egs-transition) !important;
}

.egs-form .elementor-button[type="submit"]:hover,
.egs-form .e-form__buttons .elementor-button:hover {
  background-color: var(--egs-gold-dark) !important;
}


/* ============================================================
   OVERVIEW IMAGE — Gold frame via CSS
   Apply .egs-image-framed to the Image widget
   ============================================================ */

.egs-image-framed {
  position: relative;
}

.egs-image-framed::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  right: 16px;
  bottom: 16px;
  border: 2px solid var(--egs-gold);
  z-index: 0;
  pointer-events: none;
}

.egs-image-framed img {
  position: relative;
  z-index: 1;
}


/* ============================================================
   DIVIDERS — Elementor Divider widget overrides
   ============================================================ */

.egs-divider-gold .elementor-divider-separator {
  border-color: var(--egs-gold) !important;
  border-width: 2px !important;
}

.egs-divider-light .elementor-divider-separator {
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-width: 1px !important;
}


/* ============================================================
   NAVIGATION (Hello Elementor header)
   ============================================================ */

/* Sticky nav base */
.site-header,
#site-header {
  background-color: var(--egs-navy) !important;
  border-bottom: 3px solid var(--egs-gold) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
}

/* Nav links */
.site-navigation a,
.main-navigation a {
  font-family: var(--egs-font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--egs-mid-gray) !important;
  transition: color var(--egs-transition) !important;
}

.site-navigation a:hover,
.main-navigation a:hover {
  color: var(--egs-white) !important;
}

/* Offset page content so it doesn't hide under fixed nav */
.site-main,
#primary {
  padding-top: 72px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer,
#colophon {
  background-color: #070F1E !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 32px 80px !important;
}

.site-footer p,
#colophon p {
  color: var(--egs-mid-gray) !important;
  font-size: 12px !important;
}

.site-footer a,
#colophon a {
  color: var(--egs-mid-gray) !important;
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--egs-gold) !important;
}


/* ============================================================
   UTILITY CLASSES
   Use in Elementor > Advanced > CSS Classes
   ============================================================ */

/* Text colors */
.egs-text-gold  { color: var(--egs-gold) !important; }
.egs-text-navy  { color: var(--egs-navy) !important; }
.egs-text-white { color: var(--egs-white) !important; }
.egs-text-gray  { color: var(--egs-mid-gray) !important; }

/* Gold bottom border accent on a widget */
.egs-border-bottom-gold {
  border-bottom: 3px solid var(--egs-gold) !important;
  padding-bottom: 12px !important;
}

/* Gold left border accent */
.egs-border-left-gold {
  border-left: 4px solid var(--egs-gold) !important;
  padding-left: 20px !important;
}

/* Center content within column */
.egs-center {
  text-align: center !important;
}

.egs-center .elementor-widget-wrap {
  align-items: center !important;
}

/* No top padding on first section (if nav is fixed) */
.egs-hero-section {
  margin-top: 0 !important;
  padding-top: 72px !important;
}

/* Hidden on mobile */
@media (max-width: 767px) {
  .egs-hide-mobile { display: none !important; }
}

/* Hidden on desktop */
@media (min-width: 768px) {
  .egs-hide-desktop { display: none !important; }
}


/* ============================================================
   RESPONSIVE — TABLET (768px–1024px)
   ============================================================ */

@media (max-width: 1024px) {

  :root {
    --egs-section-pad: 72px;
  }

  h1 { font-size: clamp(40px, 5.5vw, 64px); }
  h2 { font-size: clamp(28px, 3.5vw, 44px); }

  .site-footer,
  #colophon {
    padding: 32px 40px !important;
  }

}


/* ============================================================
   RESPONSIVE — MOBILE (max 767px)
   ============================================================ */

@media (max-width: 767px) {

  :root {
    --egs-section-pad: 56px;
  }

  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }

  .egs-stat-item {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
  }

  .egs-gold-bar-left::before {
    display: none;
  }

  .egs-image-framed::before {
    display: none;
  }

  .site-footer,
  #colophon {
    padding: 28px 24px !important;
    text-align: center !important;
  }

  .egs-btn-primary .elementor-button,
  .egs-form .elementor-button[type="submit"] {
    clip-path: none !important;
    border-radius: 2px !important;
  }

}