/**
 * Edwards Aquifer Conservancy – mobile responsiveness fixes
 */

/* ------------------------------------------------------------------
 * Icon fonts – ensure glyphs render on mobile (iOS Safari)
 * ------------------------------------------------------------------ */
[class^="icon-"]:before,
[class*=" icon-"]:before,
i[class^="icon-"],
i[class*=" icon-"] {
  font-family: "mfn-icons" !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa,
.fas,
.far,
.fab {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

.fab {
  font-family: "Font Awesome 5 Brands" !important;
}

/* Icon box – prevent clipping on small screens */
.mfn-icon-box .icon-wrapper {
  overflow: visible !important;
}

.mfn-builder-content .mfn-icon-box .icon-wrapper i,
.mfn-icon-box .icon-wrapper i {
  font-size: 3rem !important;
  line-height: 1 !important;
}

/* ------------------------------------------------------------------
 * Mobile navigation
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 1239px) {
  #Top_bar a.responsive-menu-toggle,
  #Top_bar a.responsive-menu-toggle i {
    color: #fff !important;
  }

  #Top_bar a.responsive-menu-toggle {
    opacity: 1;
  }

  #Side_slide .close-wrapper a.close i {
    font-family: "mfn-icons" !important;
    color: #fff;
  }
}

/* ------------------------------------------------------------------
 * Page hero / banner titles (inline pill-style headings)
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
  /* Remove white gap between header and hero/banner image */
  #Content {
    padding-top: 0 !important;
  }

  /* Hero banners – unified rules for all internal page title layouts */
  .content_wrapper .mcb-section:first-child .mcb-column-inner {
    position: relative !important;
    background-size: cover !important;
    background-position: center center !important;
    padding-top: 180px !important;
    padding-bottom: 180px !important;
  }

  .content_wrapper .mcb-section:first-child .mcb-column-inner .column_attr {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Centered wrapper block (What We Do with tagline) */
  .content_wrapper .mcb-section:first-child .column_attr > div[style*="translate(-50%"],
  .content_wrapper .mcb-section:first-child .column_attr > div[style*="translate(-50%,-50%)"],
  .content_wrapper .mcb-section:first-child .column_attr > div[style*="translate(-50%, -50%)"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Pill title – override all inline style variants (with or without spaces) */
  .content_wrapper .mcb-section:first-child .column_attr h1 {
    font-size: clamp(20px, 5.5vw, 34px) !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: calc(100vw - 48px) !important;
    padding: 12px 20px !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: inline-block !important;
  }

  /* Direct h1 on column_attr (Support Our Work, Past Projects, Who We Are, etc.) */
  .content_wrapper .mcb-section:first-child .column_attr > h1 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  /* h1 inside centered wrapper (What We Do) – must not be absolutely positioned */
  .content_wrapper .mcb-section:first-child .column_attr > div[style*="translate"] h1 {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 auto !important;
  }

  /* Tagline below title (What We Do) */
  .content_wrapper .mcb-section:first-child .column_attr > div[style*="translate"] > p {
    font-size: clamp(11px, 3.2vw, 15px) !important;
    letter-spacing: 0.8px !important;
    white-space: nowrap !important;
    margin: 10px 0 0 !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Full-bleed hero banner on internal pages */
  .content_wrapper .mcb-section:first-child > .section_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  .content_wrapper .mcb-section:first-child .mcb-wrap,
  .content_wrapper .mcb-section:first-child .mcb-column,
  .content_wrapper .mcb-section:first-child .mcb-column-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mcb-section.bg-cover-ultrawide,
  .mcb-section.bg-cover-ultrawide .mcb-column-inner,
  .mcb-wrap.bg-cover-ultrawide .mcb-wrap-inner {
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Mission / hero text blocks on homepage */
  .mcb-section .column_attr .button .button_icon i {
    font-family: "mfn-icons" !important;
    font-size: 1em !important;
  }

  /* Homepage mission text inset (not pill banner titles) */
  .mcb-section.bg-cover-ultrawide .column_attr:has(.mission-heading) {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}

/* ------------------------------------------------------------------
 * Newsletter / Mailchimp sign-up
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
  #mc_embed_signup,
  #mc_embed_signup_scroll,
  .call_to_action .call_to_action_wrapper,
  .call_to_action .call_right,
  .call_to_action .call_left,
  .call_to_action .call_center {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #mc_embed_signup {
    clear: both !important;
  }

  .call_to_action .call_to_action_wrapper {
    overflow: hidden;
  }

  .call_to_action .call_center {
    margin-bottom: 20px;
    text-align: center;
  }

  .call_to_action .call_center .icon_wrapper i {
    font-size: 2.5rem !important;
  }

  .mcb-section .call_to_action,
  .mcb-section .call_to_action .call_to_action_wrapper {
    overflow-x: hidden;
  }
}

/* ------------------------------------------------------------------
 * Image carousel (Past Projects and similar)
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
  .content_slider {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 70px !important;
  }

  .content_slider a.button.the-icon,
  .content_slider a.slider_prev,
  .content_slider a.slider_next {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    top: auto !important;
    bottom: -58px !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .content_slider a.slider_prev {
    left: calc(50% - 52px) !important;
    right: auto !important;
  }

  .content_slider a.slider_next {
    right: calc(50% - 52px) !important;
    left: auto !important;
  }

  .content_slider a.button.the-icon i,
  .content_slider a.slider_prev i,
  .content_slider a.slider_next i {
    font-size: 22px !important;
    line-height: 1 !important;
    font-family: "mfn-icons" !important;
  }

  .content_slider .slider_pagination {
    padding: 0 !important;
    margin-top: 12px !important;
  }
}

/* ------------------------------------------------------------------
 * Contact page icon boxes
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
  .column_icon_box_2 .mfn-icon-box-top .icon-wrapper,
  .column_icon_box_2 .mfn-icon-box-bottom .icon-wrapper {
    width: auto !important;
    min-width: 60px;
    margin-bottom: 20px !important;
  }

  .column_icon_box_2 .mfn-icon-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .column_icon_box_2 .desc-wrapper {
    text-align: center !important;
  }
}

/* ------------------------------------------------------------------
 * Footer social icons & back-to-top
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
  #Footer .social-menu i,
  #Footer .footer_button i,
  .footer-copy-center i {
    font-family: "mfn-icons" !important;
    font-size: 18px !important;
  }
}