/* ============================================================
   ALL ISLAND RESTORATION — DARK THEME  (consolidated v3)
   ------------------------------------------------------------
   COMPLETE FILE — overwrite:
   /wp-content/themes/betheme-child/redesign/dark-theme.css

   Contents, in order:
     1. Phase 1 site-wide dark theme (original, verbatim)
     2. Nav dropdown widening (long service names fit)
     3. Right-gap overflow fix (box-sizing + overflow-x clip)
     4. Wrapper un-cap (1700px) + desktop header flex centering
     5. Header overlap fix (reserve space for the 24/7 button)\n     6. Mobile CTA centering + hero phone sizing

   Depends on foundation.css for tokens (--air-black, etc.)
   Applied via body.redesign class from functions.php.
   To disable: comment out the air_redesign_body_class filter
   in functions.php — site reverts to original light theme.
============================================================ */


/* ============================================================
   1. PHASE 1 — SITE-WIDE DARK THEME
============================================================ */

/* ---- Page chrome: dark backgrounds ---- */
html:has(body.redesign) {
  background-color: var(--air-black);
}

body.redesign,
body.redesign #Wrapper,
body.redesign #Content {
  background-color: var(--air-black) !important;
  color: var(--air-gray-lt);
}


/* ---- Default text color throughout the body ---- */
body.redesign,
body.redesign p,
body.redesign li,
body.redesign .column_attr,
body.redesign .column_column {
  color: var(--air-gray-lt);
}


/* ---- Headings: white on dark ---- */
body.redesign h1,
body.redesign h2,
body.redesign h3,
body.redesign h4,
body.redesign h5,
body.redesign h6,
body.redesign h1 a,
body.redesign h2 a,
body.redesign h3 a,
body.redesign h4 a,
body.redesign h5 a,
body.redesign h6 a,
body.redesign h1 a:hover,
body.redesign h2 a:hover,
body.redesign h3 a:hover,
body.redesign h4 a:hover,
body.redesign h5 a:hover,
body.redesign h6 a:hover {
  color: var(--air-white) !important;
}


/* ---- Body links use the brighter accent blue ---- */
body.redesign a {
  color: var(--air-blue);
  transition: color 0.2s ease;
}

body.redesign a:hover {
  color: var(--air-blue-lt);
}


/* ---- Override inline dark text (intro paragraph has style="color:#000000") ---- */
body.redesign p[style*="color: #000000"],
body.redesign p[style*="color:#000000"],
body.redesign .column_attr p[style*="color: #000000"],
body.redesign .column_attr p[style*="color:#000000"],
body.redesign [style*="color: #000000"]:not(.button_label),
body.redesign [style*="color:#000000"]:not(.button_label),
body.redesign [style*="color: #363430"],
body.redesign [style*="color:#363430"] {
  color: var(--air-gray-lt) !important;
}


/* ---- Sections with no background-color set — apply dark ---- */
body.redesign .section.mcb-section[style*="background-color:"] {
  /* respects inline bg (already-set dark sections stay) */
}

body.redesign .section.mcb-section:not([style*="background-color:#"]) {
  background-color: var(--air-black) !important;
}


/* ---- Rounded boxes already inline-set to #000000 — bump to lighter dark
   so they stand out against the new dark page background ---- */
body.redesign .rounded-box .column_attr[style*="background-color:#000000"],
body.redesign .rounded-box .column_attr[style*="background-color: #000000"],
body.redesign .column_attr[style*="background-color:#000000"],
body.redesign .column_attr[style*="background-color: #000000"] {
  background-color: var(--air-black-3) !important;
  border: 1px solid var(--air-black-4);
}


/* ---- Theme accent (the blue "ABOUT US", "SERVICES" labels) ---- */
body.redesign .themecolor,
body.redesign h6.themecolor,
body.redesign h5.themecolor,
body.redesign .themecolor b {
  color: var(--air-blue) !important;
}


/* ---- Buttons: brighten and add subtle glow on hover ---- */
body.redesign a.button.button_theme,
body.redesign a.action_button,
body.redesign button,
body.redesign input[type="submit"] {
  background-color: var(--air-blue) !important;
  color: var(--air-white) !important;
  border-radius: 8px;
  transition: all 0.25s ease;
  border: none;
}

body.redesign a.button.button_theme:hover,
body.redesign a.action_button:hover,
body.redesign button:hover,
body.redesign input[type="submit"]:hover {
  background-color: var(--air-blue-lt) !important;
  box-shadow: 0 0 24px var(--air-blue-glow);
  transform: translateY(-1px);
}

body.redesign a.button.button_theme .button_label {
  color: var(--air-white) !important;
}


/* ---- Header: keep it black (already is), brighten menu hover ---- */
body.redesign #Top_bar {
  background-color: var(--air-black) !important;
}

body.redesign #Top_bar .menu > li.hover > a,
body.redesign #Top_bar .menu > li.current-menu-item > a {
  color: var(--air-blue) !important;
}


/* ---- Footer: slightly lifted dark so it separates from content ---- */
body.redesign #Footer {
  background-color: var(--air-black-2) !important;
  border-top: 1px solid var(--air-black-4);
}

body.redesign #Footer h4 {
  color: var(--air-white) !important;
}

body.redesign #Footer a {
  color: var(--air-blue);
}

body.redesign #Footer a:hover {
  color: var(--air-blue-lt);
}


/* ---- Footer contact-info blue box: keep blue but use the brighter token ---- */
body.redesign .custom-html-widget .contact-info {
  background: var(--air-blue);
}

body.redesign .get-help-box {
  background: var(--air-blue);
}


/* ---- Testimonials: were styled for light bg, flip to dark ---- */
body.redesign .testimonials_slider .author span,
body.redesign .testimonials_slider .author h5,
body.redesign .testimonials_slider blockquote,
body.redesign .testimonials_list blockquote {
  color: var(--air-gray-lt) !important;
}


/* ---- Form inputs ---- */
body.redesign input[type="text"],
body.redesign input[type="email"],
body.redesign input[type="tel"],
body.redesign input[type="password"],
body.redesign textarea,
body.redesign select {
  background-color: var(--air-black-3) !important;
  border: 1px solid var(--air-black-4) !important;
  color: var(--air-white) !important;
}

body.redesign input[type="text"]:focus,
body.redesign input[type="email"]:focus,
body.redesign input[type="tel"]:focus,
body.redesign textarea:focus,
body.redesign select:focus {
  border-color: var(--air-blue) !important;
  color: var(--air-white) !important;
  background-color: var(--air-black-3) !important;
  outline: none;
}


/* ---- Horizontal rules ---- */
body.redesign hr.no_line {
  border-color: var(--air-black-4);
}


/* ---- Subheader (already hidden via theme CSS, but ensure dark) ---- */
body.redesign #Subheader {
  background-color: var(--air-black) !important;
}


/* ---- Selection highlight ---- */
body.redesign ::selection {
  background-color: var(--air-blue);
  color: var(--air-white);
}


/* ============================================================
   2. NAV DROPDOWN — WIDEN SO LONG SERVICE NAMES FIT
============================================================ */

#Top_bar .menu li ul {
  width: auto !important;
  min-width: 260px !important;
}

#Top_bar .menu li ul li {
  width: 100% !important;
}

#Top_bar .menu li ul li a {
  white-space: nowrap !important;
  padding-right: 28px !important;
}

/* keep any third-level flyouts opening beside, not on top */
#Top_bar .menu li ul li ul {
  left: 100% !important;
  top: 0 !important;
}


/* ============================================================
   3. RIGHT-GAP OVERFLOW FIX
============================================================ */

/* padding counts inside the width on our full-width blocks */
body.redesign .air-hero .section_wrapper,
body.redesign .air-trust-band,
body.redesign .air-cta,
body.redesign .air-badges,
body.redesign .air-footer,
#air-emerg-wrap,
#air-header-stack {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* safety net: nothing can stretch the page sideways */
html, body {
  overflow-x: clip !important;
}


/* ============================================================
   4. WRAPPER UN-CAP + DESKTOP HEADER FLEX
   (#Wrapper was capped at 1700px and left-pinned — black gap
   on wide screens; header rebuilt as logo | menu | CTA)
============================================================ */

/* ---- site wrapper spans the full screen ---- */
body.redesign #Wrapper {
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* ---- header layout: logo | centered menu | CTA right ---- */
@media only screen and (min-width: 1240px) {

  /* header inner container: full width, comfortable side padding */
  body.redesign #Top_bar .container {
    width: 100% !important;
    max-width: 1780px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    box-sizing: border-box !important;
  }
  body.redesign #Top_bar .container .column {
    width: 100% !important;
    margin: 0 !important;
  }

  /* flex row: logo fixed, menu takes the middle and centers */
  body.redesign #Top_bar .top_bar_left {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    float: none !important;
    background: none;
  }
  body.redesign #Top_bar .logo {
    flex: 0 0 auto;
    float: none !important;
  }
  body.redesign #Top_bar .menu_wrapper {
    flex: 1 1 auto !important;
    float: none !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* the 24/7 button hugs the right edge, no dead zone */
  body.redesign #Top_bar .top_bar_right,
  body.redesign #Top_bar a.action_button {
    flex: 0 0 auto;
    margin-left: auto !important;
    float: none !important;
  }
}


/* ============================================================
   5. HEADER OVERLAP FIX
   (24/7 button is absolutely positioned by Betheme, outside the
   flex row — reserve its width so GET QUOTE can't slide under)
============================================================ */

@media only screen and (min-width: 1240px) {

  body.redesign #Top_bar .top_bar_left {
    padding-right: 320px !important;
    box-sizing: border-box !important;
  }

  body.redesign #Top_bar .top_bar_right {
    right: 32px !important;
    left: auto !important;
  }
}


/* ============================================================
   6. MOBILE CTA CENTERING + HERO PHONE SIZING
   ("html body" prefix beats the hero snippet's footer <style>
   on specificity — do not remove it)
============================================================ */

@media only screen and (max-width: 767px){

  /* ---- all content CTA buttons: centered block, centered label ---- */
  html body.redesign #Content .column_button,
  html body.redesign #Content .button_align{
    text-align:center !important;
  }
  html body.redesign #Content a.button,
  html body.redesign #Content a.action_button{
    float:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }
  html body.redesign #Content a.button .button_label{
    float:none !important;
    display:inline-block !important;
    text-align:center !important;
    width:100% !important;
  }

  /* ---- hero: center the copy, badge, and buttons ---- */
  html body.redesign .air-hero .column_attr,
  html body.redesign .air-hero .air-hero-copy,
  html body.redesign #Content .air-hero .air-hero-copy h1,
  html body.redesign #Content .air-hero .air-hero-copy p.air-sub,
  html body.redesign #Content .air-hero .air-hero-copy p.air-phone,
  html body.redesign .air-hero .air-hero-cta{
    text-align:center !important;
  }
  html body.redesign #Content .air-hero .air-hero-copy p.air-sub{
    margin-left:auto !important;
    margin-right:auto !important;
  }
  html body.redesign .air-hero .air-hero-cta .air-btns a.button{
    display:block !important;
    width:100% !important;
    max-width:320px !important;
    margin:0 auto 12px !important;
  }
  html body.redesign .air-trust{
    justify-content:center !important;
  }

  /* ---- hero phone pill: smaller, one line, fits the screen ---- */
  html body.redesign #Content .air-hero .air-hero-copy p.air-phone a{
    font-size:20px !important;
    padding:12px 26px !important;
    white-space:nowrap !important;
    gap:8px !important;
  }
}


/* ---- End of dark-theme.css (consolidated v3) ---- */