/* ═══════════════════════════════════════════════════════════════
   VALLEY HEATING — Component CSS for Elementor
   Add to: Elementor > Custom CSS (site-wide) or child theme style.css

   USAGE: Add class names in Elementor's Advanced > CSS Classes field.

   COMPONENTS:
   1. valley-border      — Ornate Inset Frame (gold on light bg)
   2. valley-border-w    — Ornate Inset Frame (white on dark bg)
   3. valley-corners     — Stepped Double Corners (gold)
   4. valley-corners-w   — Stepped Double Corners (white on dark bg)
   5. valley-divider     — Diamond section divider (use on a spacer/div)
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   BRAND TOKENS (reference — match to kit vars)
   ───────────────────────────────────────────── */
:root {
  --valley-gold: #C49B2F;
  --valley-gold-50: rgba(196, 155, 47, 0.5);
  --valley-white-25: rgba(255, 255, 255, 0.25);
  --valley-white-50: rgba(255, 255, 255, 0.5);
}


/* ═══════════════════════════════════════════════
   1. ORNATE INSET FRAME — GOLD
   Class: valley-border

   Double border with perpendicular tick marks
   at each corner. Pure CSS, no extra markup.
   Works on any container, section, or image.
   ═══════════════════════════════════════════════ */

.valley-border {
  position: relative !important;
  overflow: hidden;
  border: 1.5px solid var(--valley-gold) !important;
}

/* Inner border */
.valley-border::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px solid var(--valley-gold);
  pointer-events: none;
  z-index: 0;
}

/* Corner tick marks */
.valley-border::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Top-left horizontal */
    linear-gradient(var(--valley-gold), var(--valley-gold)) 7px 7px / 12px 1.5px no-repeat,
    /* Top-left vertical */
    linear-gradient(var(--valley-gold), var(--valley-gold)) 7px 7px / 1.5px 12px no-repeat,
    /* Top-right horizontal */
    linear-gradient(var(--valley-gold), var(--valley-gold)) calc(100% - 7px) 7px / 12px 1.5px no-repeat,
    /* Top-right vertical */
    linear-gradient(var(--valley-gold), var(--valley-gold)) calc(100% - 7px) 7px / 1.5px 12px no-repeat,
    /* Bottom-left horizontal */
    linear-gradient(var(--valley-gold), var(--valley-gold)) 7px calc(100% - 7px) / 12px 1.5px no-repeat,
    /* Bottom-left vertical */
    linear-gradient(var(--valley-gold), var(--valley-gold)) 7px calc(100% - 7px) / 1.5px 12px no-repeat,
    /* Bottom-right horizontal */
    linear-gradient(var(--valley-gold), var(--valley-gold)) calc(100% - 7px) calc(100% - 7px) / 12px 1.5px no-repeat,
    /* Bottom-right vertical */
    linear-gradient(var(--valley-gold), var(--valley-gold)) calc(100% - 7px) calc(100% - 7px) / 1.5px 12px no-repeat;
}


/* ═══════════════════════════════════════════════
   2. ORNATE INSET FRAME — WHITE
   Class: valley-border-w

   Same frame but white/translucent for use
   on navy or dark backgrounds.
   ═══════════════════════════════════════════════ */

.valley-border-w {
  position: relative;
  border: 1.5px solid var(--valley-white-25) !important;
}

.valley-border-w::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px solid var(--valley-white-25);
  pointer-events: none;
  z-index: 0;
}

.valley-border-w::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) 7px 7px / 12px 1.5px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) 7px 7px / 1.5px 12px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) calc(100% - 7px) 7px / 12px 1.5px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) calc(100% - 7px) 7px / 1.5px 12px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) 7px calc(100% - 7px) / 12px 1.5px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) 7px calc(100% - 7px) / 1.5px 12px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) calc(100% - 7px) calc(100% - 7px) / 12px 1.5px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) calc(100% - 7px) calc(100% - 7px) / 1.5px 12px no-repeat;
}


/* ═══════════════════════════════════════════════
   3. STEPPED DOUBLE CORNERS — GOLD
   Class: valley-corners

   Two nested L-shapes at each corner. Outer
   thick, inner thin. No full border — just
   floating corner brackets. Vintage + airy.

   Uses CSS gradients on ::before (outer L) and
   ::after (inner L) — no extra HTML needed.
   ═══════════════════════════════════════════════ */

.valley-corners {
  position: relative !important;
  overflow: hidden;
}

/* Outer corners — 2px, 40px arms */
.valley-corners::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* TL — horizontal */
    linear-gradient(var(--valley-gold), var(--valley-gold)) 0 0 / 40px 2px no-repeat,
    /* TL — vertical */
    linear-gradient(var(--valley-gold), var(--valley-gold)) 0 0 / 2px 40px no-repeat,
    /* TR — horizontal */
    linear-gradient(var(--valley-gold), var(--valley-gold)) calc(100%) 0 / 40px 2px no-repeat,
    /* TR — vertical */
    linear-gradient(var(--valley-gold), var(--valley-gold)) calc(100%) 0 / 2px 40px no-repeat,
    /* BL — horizontal */
    linear-gradient(var(--valley-gold), var(--valley-gold)) 0 calc(100%) / 40px 2px no-repeat,
    /* BL — vertical */
    linear-gradient(var(--valley-gold), var(--valley-gold)) 0 calc(100%) / 2px 40px no-repeat,
    /* BR — horizontal */
    linear-gradient(var(--valley-gold), var(--valley-gold)) calc(100%) calc(100%) / 40px 2px no-repeat,
    /* BR — vertical */
    linear-gradient(var(--valley-gold), var(--valley-gold)) calc(100%) calc(100%) / 2px 40px no-repeat;
}

/* Inner corners — 1px, 22px arms, offset 6px in */
.valley-corners::after {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 0;
  background:
    /* TL — horizontal */
    linear-gradient(var(--valley-gold-50), var(--valley-gold-50)) 0 0 / 22px 1px no-repeat,
    /* TL — vertical */
    linear-gradient(var(--valley-gold-50), var(--valley-gold-50)) 0 0 / 1px 22px no-repeat,
    /* TR — horizontal */
    linear-gradient(var(--valley-gold-50), var(--valley-gold-50)) calc(100%) 0 / 22px 1px no-repeat,
    /* TR — vertical */
    linear-gradient(var(--valley-gold-50), var(--valley-gold-50)) calc(100%) 0 / 1px 22px no-repeat,
    /* BL — horizontal */
    linear-gradient(var(--valley-gold-50), var(--valley-gold-50)) 0 calc(100%) / 22px 1px no-repeat,
    /* BL — vertical */
    linear-gradient(var(--valley-gold-50), var(--valley-gold-50)) 0 calc(100%) / 1px 22px no-repeat,
    /* BR — horizontal */
    linear-gradient(var(--valley-gold-50), var(--valley-gold-50)) calc(100%) calc(100%) / 22px 1px no-repeat,
    /* BR — vertical */
    linear-gradient(var(--valley-gold-50), var(--valley-gold-50)) calc(100%) calc(100%) / 1px 22px no-repeat;
}


/* ═══════════════════════════════════════════════
   4. STEPPED DOUBLE CORNERS — WHITE
   Class: valley-corners-w

   White variant for dark backgrounds.
   ═══════════════════════════════════════════════ */

.valley-corners-w {
  position: relative;
}

.valley-corners-w::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(var(--valley-white-50), var(--valley-white-50)) 0 0 / 40px 2px no-repeat,
    linear-gradient(var(--valley-white-50), var(--valley-white-50)) 0 0 / 2px 40px no-repeat,
    linear-gradient(var(--valley-white-50), var(--valley-white-50)) calc(100%) 0 / 40px 2px no-repeat,
    linear-gradient(var(--valley-white-50), var(--valley-white-50)) calc(100%) 0 / 2px 40px no-repeat,
    linear-gradient(var(--valley-white-50), var(--valley-white-50)) 0 calc(100%) / 40px 2px no-repeat,
    linear-gradient(var(--valley-white-50), var(--valley-white-50)) 0 calc(100%) / 2px 40px no-repeat,
    linear-gradient(var(--valley-white-50), var(--valley-white-50)) calc(100%) calc(100%) / 40px 2px no-repeat,
    linear-gradient(var(--valley-white-50), var(--valley-white-50)) calc(100%) calc(100%) / 2px 40px no-repeat;
}

.valley-corners-w::after {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) 0 0 / 22px 1px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) 0 0 / 1px 22px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) calc(100%) 0 / 22px 1px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) calc(100%) 0 / 1px 22px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) 0 calc(100%) / 22px 1px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) 0 calc(100%) / 1px 22px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) calc(100%) calc(100%) / 22px 1px no-repeat,
    linear-gradient(var(--valley-white-25), var(--valley-white-25)) calc(100%) calc(100%) / 1px 22px no-repeat;
}


/* ═══════════════════════════════════════════════
   5. DIAMOND SECTION DIVIDER
   Class: valley-divider

   Gold lines + centered diamond. Use on an
   empty div or Elementor spacer widget.
   ═══════════════════════════════════════════════ */

.valley-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
}

.valley-divider::before,
.valley-divider::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--valley-gold);
  opacity: 0.3;
}


/* ═══════════════════════════════════════════════
   6. CTA ACCENT BAR
   Class: valley-cta-bar

   Adds the brand tri-color gradient accent line
   at the very bottom of a container.
   Used on the Schedule and Estimate CTA blocks
   to tie them to the Valley Heating color palette.

   Apply in Elementor: Advanced > CSS Classes
   ═══════════════════════════════════════════════ */

.valley-cta-bar {
  position: relative;
  overflow: hidden;
}

.valley-cta-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #C62828, #F5C518, #C49B2F);
  pointer-events: none;
  z-index: 1;
}


/* ─────────────────────────────────────────────
   6. City Chips — Service Area homepage section
   White bg, navy text, hover to navy bg
   Overrides kit global button styles.
   ───────────────────────────────────────────── */
[class*="elementor-element-v_sa_ch"] .elementor-button {
  background-color: #FFFFFF !important;
  color: #1B3A5C !important;
  border: 1px solid #D0D5DD !important;
  border-radius: 0 !important;
}
[class*="elementor-element-v_sa_ch"] .elementor-button:hover,
[class*="elementor-element-v_sa_ch"] .elementor-button:focus {
  background-color: #1B3A5C !important;
  color: #FFFFFF !important;
  border-color: #1B3A5C !important;
}


/* ─────────────────────────────────────────────
   7. Nested Tabs — clip inner buttons/panels
   to the wrapper's rounded corners so tab
   buttons and content inherit the radius.
   Border-radius from Advanced > Border lives
   on .elementor-widget-container, so clip there.
   ───────────────────────────────────────────── */
.elementor-widget-n-tabs > .elementor-widget-container {
  overflow: hidden;
}
.elementor-widget-n-tabs .e-n-tabs {
  overflow: hidden;
}


/* ─────────────────────────────────────────────
   8. Header stacking — keep the Elementor header
   (and its dropdown panels) above all page
   content. Page widgets (icon boxes, hero text,
   hero map) were rendering on top of dropdowns
   and punching through the panel, making the
   nav appear translucent and unclickable.

   Uses very high z-index because hero sections
   often create their own stacking context that
   competes with the header. We don't override
   position because the header may be using a
   transparent/overlay pattern (position: absolute).
   ───────────────────────────────────────────── */
body .elementor-location-header,
body header.elementor-location-header,
body div[data-elementor-type="header"] {
  position: relative !important;
  z-index: 9999 !important;
}

body .elementor-location-header .elementor-section,
body .elementor-location-header .e-con,
body .elementor-location-header .elementor-container {
  position: relative;
  z-index: 9999;
}

body .elementor-nav-menu .sub-menu,
body .elementor-nav-menu--dropdown,
body .e-n-menu-content,
body .e-n-menu-dropdown-content,
body .menu-item .sub-menu {
  z-index: 9999 !important;
}