/* ============================================================
   ALL ISLAND RESTORATION - PHASE 2: HERO REFINEMENT
   ------------------------------------------------------------
   - Hero headline typography (Barlow Condensed, fluid scale)
   - Phone number → prominent CTA button
   - "We Are Here To Help You" card tightening
   - Body text readability bump on desktop
   - Section label refinement (themecolor labels)

   Depends on: foundation.css (tokens), dark-theme.css (dark bg).
============================================================ */


/* ---- Base body text — bump readability on desktop ---- */
@media only screen and (min-width: 768px) {
  body.redesign {
    font-size: 16px;
    line-height: 1.65;
  }
  body.redesign .column_attr,
  body.redesign .column_attr p,
  body.redesign .textwidget {
    font-size: 16px;
    line-height: 1.7;
  }
}


/* ============================================================
   HERO SECTION (first section after the video)
   Targets the .black-bg-section that ALSO has .equal-height,
   which is unique to the hero text area on the home page.
============================================================ */

/* Tighten the gap between the video and the headline */
body.redesign .black-bg-section.equal-height {
  padding-top: 32px !important;
}


/* ---- Hero headline ---- */
body.redesign .black-bg-section.equal-height h1 {
  font-family: var(--air-font-display) !important;
  font-size: clamp(2.5rem, 5.2vw, 4.75rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.005em;
  line-height: 1.05 !important;
  text-transform: none;
  color: var(--air-white) !important;
  margin: 0 auto 0.4em !important;
  max-width: 18ch;
}

/* Accent bar under the headline */
body.redesign .black-bg-section.equal-height h1::after {
  content: '';
  display: block;
  width: 72px;
  height: 4px;
  background: var(--air-blue);
  margin: 0.55em auto 0;
  border-radius: 2px;
}


/* ---- Hero phone CTA — button styling ---- */
/* The phone link is the only h2 a[tel] in this section's first column */
body.redesign .black-bg-section.equal-height > .section_wrapper > .wrap:first-child h2 {
  text-align: center !important;
  margin-top: 0.8em !important;
  margin-bottom: 1.5em !important;
  font-size: inherit !important;
  line-height: 1.2 !important;
}

body.redesign .black-bg-section.equal-height > .section_wrapper > .wrap:first-child h2 a[href^="tel:"] {
  display: inline-block;
  background: var(--air-blue);
  color: var(--air-white) !important;
  padding: 16px 44px;
  border-radius: 10px;
  font-family: var(--air-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 24px var(--air-blue-glow);
  line-height: 1.2;
  border: 2px solid transparent;
}

body.redesign .black-bg-section.equal-height > .section_wrapper > .wrap:first-child h2 a[href^="tel:"]:hover {
  background: var(--air-blue-lt);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(74, 159, 212, 0.45);
  color: var(--air-white) !important;
}

/* Add a phone icon prefix via pseudo-element — Font Awesome 4 (already loaded site-wide) */
body.redesign .black-bg-section.equal-height > .section_wrapper > .wrap:first-child h2 a[href^="tel:"]::before {
  content: "\f095";  /* fa-phone */
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  margin-right: 12px;
  font-size: 0.95em;
  position: relative;
  top: -1px;
}


/* ---- Hero intro paragraph — readable body ---- */
body.redesign .black-bg-section.equal-height > .section_wrapper > .wrap:first-child .column_attr p {
  font-size: 1.0625rem !important;  /* ~17px */
  line-height: 1.8 !important;
  max-width: 75ch;
  margin: 0 auto !important;
  color: var(--air-gray-lt) !important;
  text-align: left;
}


/* ============================================================
   "WE ARE HERE TO HELP YOU" ROUNDED BOX
   (second row of the hero section)
============================================================ */

body.redesign .black-bg-section.equal-height .rounded-box .column_attr {
  padding: 32px !important;
}

/* Trust signal banner — attached to the LAST h3 inside the card (the one with the
   phone button). The .column_attr has a 'clearfix' class on it which conflicts
   with our ::after override, so we attach to a non-clearfix child instead.
   The h3:last-child correctly identifies the phone-button h3. */
body.redesign .black-bg-section.equal-height .rounded-box .column_attr > h3:last-child::after {
  content: "\2713  Free Estimates    \2713  Direct Insurance Billing    \2713  Family Owned Since 1990" !important;
  display: block !important;
  margin-top: 1.8em !important;
  padding-top: 1.2em !important;
  border-top: 1px solid #2a3038 !important;
  font-family: 'Barlow', Arial, sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: #6db4e0 !important;
  line-height: 1.85 !important;
  letter-spacing: 0.01em !important;
  word-spacing: 0.25em !important;
  text-align: left !important;
  text-transform: none !important;
  text-indent: 0 !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
}

/* Main heading inside the card */
body.redesign .black-bg-section.equal-height .rounded-box h2 {
  text-align: left !important;
  margin: 0 0 0.4em 0 !important;
  font-family: var(--air-font-display) !important;
  font-size: 1.85rem !important;
  font-weight: 800;
  line-height: 1.15 !important;
  color: var(--air-white) !important;
}

/* Subheading inside the card */
body.redesign .black-bg-section.equal-height .rounded-box h3 {
  font-family: var(--air-font-body) !important;
  font-size: 1.0625rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  margin-top: 0.9em !important;
  margin-bottom: 0 !important;
  color: var(--air-gray-lt) !important;
}

/* "24/7 Emergency Restoration Services" link */
body.redesign .black-bg-section.equal-height .rounded-box h3 a:not([href^="tel:"]) {
  color: var(--air-blue) !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

body.redesign .black-bg-section.equal-height .rounded-box h3 a:not([href^="tel:"]):hover {
  color: var(--air-blue-lt) !important;
  border-bottom-color: var(--air-blue-lt);
}

/* Phone number inside card — secondary CTA button */
body.redesign .black-bg-section.equal-height .rounded-box h3 a[href^="tel:"] {
  display: inline-block;
  background: var(--air-blue);
  color: var(--air-white) !important;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: var(--air-font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  margin-top: 0.5em;
  text-decoration: none;
  transition: all 0.2s ease;
}

body.redesign .black-bg-section.equal-height .rounded-box h3 a[href^="tel:"]:hover {
  background: var(--air-blue-lt);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--air-blue-glow);
  color: var(--air-white) !important;
}


/* ============================================================
   ABOUT US SECTION — refine the h5 body text & label
============================================================ */

/* Section labels (small uppercase blue text like "ABOUT US", "SERVICES") */
body.redesign .section.mcb-section h6.themecolor,
body.redesign .section.mcb-section h5.themecolor {
  font-family: var(--air-font-body) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: var(--air-blue) !important;
  margin-bottom: 0.6em !important;
}

/* H5 used as body text inside content columns — soften to paragraph */
body.redesign .section.mcb-section .column_attr h5:not(.themecolor) {
  font-family: var(--air-font-body) !important;
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  color: var(--air-gray-lt) !important;
  margin: 0 0 1em 0 !important;
}


/* ============================================================
   SECTION H2 HEADLINES — use display font site-wide for the redesign
   ("ALL ISLAND RESTORATION", "RELIABILITY & EXPERIENCE...", etc.)
============================================================ */

body.redesign .section.mcb-section h2 {
  font-family: var(--air-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.005em;
}


/* ============================================================
   MOBILE — keep things readable & sized appropriately
============================================================ */

@media only screen and (max-width: 767px) {
  /* Hero headline stays bold but scales down naturally via clamp */

  /* CTA button — full-width feel on mobile */
  body.redesign .black-bg-section.equal-height > .section_wrapper > .wrap:first-child h2 a[href^="tel:"] {
    padding: 14px 32px;
    font-size: 1.25rem;
  }

  /* Tighten rounded box padding on mobile */
  body.redesign .black-bg-section.equal-height .rounded-box .column_attr {
    padding: 24px !important;
  }

  body.redesign .black-bg-section.equal-height .rounded-box h2 {
    font-size: 1.5rem !important;
  }

  /* Trust signal banner: smaller text on mobile */
  body.redesign .black-bg-section.equal-height .rounded-box .column_attr > h3:last-child::after {
    font-size: 0.875rem !important;
    line-height: 1.9 !important;
    word-spacing: 0.15em !important;
    padding-top: 1em !important;
    margin-top: 1.4em !important;
  }

  /* Intro paragraph slightly smaller on mobile */
  body.redesign .black-bg-section.equal-height > .section_wrapper > .wrap:first-child .column_attr p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }
}


/* ---- End of Phase 2 ---- */