/* ==========================================================================
   Reborn Roofing -- Elementor Visual Overrides
   Loaded AFTER Elementor CSS (priority 20) so these rules win.
   Generated by Local Howl Website-in-a-Box.
   ========================================================================== */


/* ===================================================================
   BATTLE-TESTED ELEMENTOR OVERRIDES
   From Good Earth + JCAC conversions. DO NOT REMOVE.
   These rules fix known Elementor rendering issues.
   =================================================================== */

/* --- 1. Elementor Container Reset --- */
.elementor-page .e-con.e-parent {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.elementor-widget-text-editor {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-widget-text-editor p { margin-bottom: 0 !important; }
.elementor-element { margin-bottom: 0 !important; }
.e-con > .e-con-inner { padding: 0 !important; max-width: 100% !important; }
.e-con.e-parent > .e-con-inner > .elementor-widget { margin-bottom: 0 !important; }

/* --- 2. SVG Global Sizing (prevents SVGs from filling container) --- */
.elementor-widget-text-editor svg {
  width: 1em !important;
  height: 1em !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* --- 3. Skip-Nav Clip Pattern (position:absolute breaks in Elementor) --- */
.skip-nav, a.skip-nav, .elementor-widget-text-editor .skip-nav {
  position: fixed !important; top: -200px !important; left: 16px !important;
  z-index: 99999 !important; clip: rect(0,0,0,0) !important;
  overflow: hidden !important; width: 1px !important; height: 1px !important;
}
.skip-nav:focus, a.skip-nav:focus, .elementor-widget-text-editor .skip-nav:focus {
  top: 16px !important; clip: auto !important; overflow: visible !important;
  width: auto !important; height: auto !important;
}

/* --- 4. Scroll Reveal Reset --- */
.reveal, [class*="reveal"] { opacity: 1 !important; transform: translateY(0) !important; }

/* --- 5. Nav Dropdown Hover Bridge --- */
.nav-dropdown { position: relative !important; }
.nav-dropdown-menu {
  display: none !important; position: absolute !important;
  top: 100% !important; left: 50% !important; transform: translateX(-50%) !important;
  background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 0 0 10px 10px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
  padding: 8px 0 !important; min-width: 200px !important; z-index: 100 !important;
  margin-top: 0 !important;
}
.nav-dropdown::after {
  content: '' !important; position: absolute !important;
  top: 100% !important; left: 0 !important; right: 0 !important; height: 10px !important;
}
.nav-dropdown:hover .nav-dropdown-menu {
  display: flex !important; flex-direction: column !important;
}
.nav-dropdown-menu a {
  padding: 10px 24px !important; font-size: 0.85rem !important;
  font-weight: 500 !important; white-space: nowrap !important;
  transition: background 0.2s, color 0.2s !important;
}

/* --- 6. Content Grid (side-by-side text + image for interior pages) --- */
.content-section { padding: 100px 0 !important; }
.content-grid {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: 64px !important; align-items: center !important;
}
.content-grid.reverse { direction: rtl !important; }
.content-grid.reverse > * { direction: ltr !important; }
.content-image { border-radius: 16px !important; overflow: hidden !important; }
.content-image img {
  width: 100% !important; height: auto !important; object-fit: cover !important;
  border-radius: 16px !important; max-height: 500px !important;
}

/* --- 7. Service List (checkmark items) --- */
.service-list {
  list-style: none !important; padding: 0 !important;
  margin: 24px 0 32px !important; display: flex !important;
  flex-direction: column !important; gap: 16px !important;
}
.service-list li {
  display: flex !important; align-items: flex-start !important;
  gap: 14px !important; font-size: 0.92rem !important; line-height: 1.6 !important;
}
.service-list li svg { width: 22px !important; height: 22px !important; flex-shrink: 0 !important; margin-top: 2px !important; }
.service-list li strong { display: block !important; font-weight: 600 !important; margin-bottom: 2px !important; }
.service-list li span { display: block !important; font-size: 0.85rem !important; }

/* --- 8. Membership Grid (3-column comparison cards) --- */
.membership-grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important; margin-top: 48px !important;
}
.membership-card {
  background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 16px !important; padding: 36px 28px !important;
  position: relative !important; transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.membership-card:hover { transform: translateY(-4px) !important; }
.membership-card.popular { border-width: 2px !important; }
.membership-card ul {
  list-style: none !important; padding: 0 !important;
  margin: 0 0 28px !important; display: flex !important;
  flex-direction: column !important; gap: 12px !important;
}
.membership-card li {
  display: flex !important; align-items: center !important;
  gap: 10px !important; font-size: 0.88rem !important;
}
.membership-card li svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }

/* --- 9. Contact Form --- */
.contact-grid {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: 48px !important; align-items: start !important;
}

/* --- 10. Responsive Overrides --- */
@media (max-width: 768px) {
  .content-grid, .content-grid.reverse { grid-template-columns: 1fr !important; gap: 32px !important; direction: ltr !important; }
  .membership-grid { grid-template-columns: 1fr !important; max-width: 400px !important; margin-left: auto !important; margin-right: auto !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 1024px) {
  .membership-grid { grid-template-columns: 1fr 1fr !important; }
}


/* === GLOBAL TYPOGRAPHY === */
body.elementor-page,
body.elementor-default {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    color: var(--lb-text);
    -webkit-font-smoothing: antialiased;
}
.elementor-heading-title {
    font-family: 'DM Sans', sans-serif !important;
    letter-spacing: -0.02em;
}

/* === BUTTONS === */
.elementor-button-wrapper .elementor-button {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase !important;
    padding: 16px 36px !important;
}
.elementor-button-wrapper .elementor-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

/* === IMAGES === */
.elementor-widget-image img {
    border-radius: 8px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important;
}

/* === HEADER NAV === */
@media (min-width: 769px) {
    .lb-header-nav {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        list-style: none !important;
    }
}
@media (max-width: 768px) {
    .lb-header-nav { display: none !important; }
    .lb-header-nav.active { display: flex !important; flex-direction: column !important; }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .lb-top-bar { display: none !important; }
}

@media (pointer: coarse) {
    .elementor-widget:hover { transform: none !important; }
}

@media print {
    .lb-header, .lb-footer { display: none !important; }
}