/* Hero: Slider Revolution's single slide rebuilt from its layer data.
   --u is one Slider Revolution grid pixel at the current viewport. */

/* Nav dropdown: theme's fixed 12em sub-menu width is narrower than longer
   item labels (e.g. "Commercial Water Damage Restoration"), so the white
   background cuts off before the text does. Size it to the content instead. */
.elementor-nav-menu--main .elementor-nav-menu .sub-menu { width: max-content; max-width: 320px; }

/* Contact form submit error/validation banner (app/components/ContactFormNotice.tsx). */
.contact-form-notice { margin: 0 0 20px; padding: 12px 16px; border: 1px solid #e3b4b4; border-radius: 4px; background: #fbeaea; color: #8a3b3b; font-size: 14px; }

/* Consent checkbox label: the theme's body font-size is 1px (every other
   visible text element carries its own explicit override), so this needs one too. */
.elementor-field-group-consent { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.elementor-field-group-consent .elementor-field-subgroup { align-items: center; }
.elementor-field-group-consent label { font-size: 14px; color: #4a4a4a; cursor: pointer; }
.elementor-field-group-consent input[type="checkbox"] { width: 16px; height: 16px; margin: 0 6px 0 0; cursor: pointer; }

/* Blog pagination: the theme's body font-size is 1px and the scraped CSS never
   sized this nav, so "Previous 1 2 3 Next" rendered invisibly at every width. */
.elementor-pagination { font-size: 16px; line-height: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 32px; }
.elementor-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; box-sizing: border-box; border-radius: 6px; color: #10243B; text-decoration: none; }
.elementor-pagination a.page-numbers { border: 1px solid #d5dee6; }
.elementor-pagination a.page-numbers:hover { background: #eef3f7; }
.elementor-pagination .page-numbers.current { background: #10243B; color: #fff; font-weight: 700; }
.elementor-pagination span.page-numbers.prev, .elementor-pagination span.page-numbers.next { color: #9aa7b2; }

/* ---------------------------------------------------------------------------
   Mobile layout fixes (phones, <=767px). Prefixed with #wrap so they win over
   the per-page Elementor CSS, which loads after this file.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Header tagline: 18px only just fits a phone width, so on some pages it
     wrapped to two lines; keep it on one line everywhere. */
  #wrap .elementor-622 .elementor-element-e807d6c p { font-size: 16px !important; line-height: 1.5 !important; margin: 0 !important; }

  /* Page title band: the 26px intro text filled a whole phone screen. */
  #wrap .page-header .page-subheading { font-size: 18px !important; line-height: 1.55 !important; }
  #wrap .page-header h1.page-header-title { margin-bottom: 12px !important; }

  /* Breadcrumbs were nowrap + overflow:hidden, cutting long titles off. */
  #wrap .site-breadcrumbs, #wrap .site-breadcrumbs * { white-space: normal !important; }
  #wrap .site-breadcrumbs { overflow: visible !important; height: auto !important; line-height: 1.6 !important; }

  /* Form fields under 16px make iPhone Safari zoom the page on focus. */
  #wrap input[type="text"], #wrap input[type="email"], #wrap input[type="tel"],
  #wrap input[type="search"], #wrap textarea, #wrap select { font-size: 16px !important; }
  #wrap .elementor-field-type-submit .elementor-button,
  #wrap .elementor-field-type-submit button { width: 100%; min-height: 48px; font-size: 15px !important; }
  #wrap .elementor-field-group-consent input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; }

  /* Bigger tap areas for small text links (padding with matching negative
     margin, so the visible layout doesn't move). */
  #wrap .elementor-icon-box-description a,
  #wrap .elementor-location-footer .elementor-text-editor a,
  #wrap .site-breadcrumbs a,
  #wrap .elementor-post__read-more,
  #wrap .blog-entry-readmore a { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
  #wrap .wp-block-latest-posts__post-title { display: inline-block; padding: 6px 0; }
  #wrap .search-entry-readmore a,
  #wrap .blog-entry-readmore a { display: inline-block; padding: 8px 2px; margin: -8px -2px; }
}

/* Inner pages reuse the homepage header (see HeaderInner.tsx). It's built to
   be transparent over the homepage hero photo, so give it a solid backing. */
.mm-header-solid { background: #10243B; }
/* Inner-page CSS still carries the old header's `.text { color: black !important }`,
   which would turn the header tagline black on the navy bar. */
#wrap .elementor-622 .elementor-element-e807d6c,
#wrap .elementor-622 .elementor-element-e807d6c * { color: #FFFFFF !important; }

/* Heading structure: each page has exactly one h1. These keep the look of the
   elements that used to be headings: the footer brand name, and the "Blog"
   band above a post (whose h1 is now the post title itself). */
#wrap .footer-brand { font-family: Montserrat, sans-serif; font-size: 23px; font-weight: 600; line-height: 1.4; margin: 0 0 20px; color: #333; }
#wrap .footer-brand--home { margin: 0; }
#wrap div.page-header-title { font-family: Montserrat, sans-serif; font-weight: bold; margin-top: -9px; margin-bottom: 318px; }
@media (max-width: 768px) { #wrap div.page-header-title { margin-top: 0; margin-bottom: 0; } }
@media (max-width: 767px) { #wrap .page-header div.page-header-title { margin-bottom: 12px; } }
/* The blog index gained a visible h1; it skips the tall banner spacing the theme gives other page titles. */
#wrap .page-header h1.page-header-title.mm-compact { margin-top: 0; margin-bottom: 0; }
@media (max-width: 767px) { #wrap .page-header h1.page-header-title.mm-compact { margin-bottom: 12px !important; } }
/* Headings inside post bodies that were written as h1; demoted to h2 at their original size. */
#wrap .entry-content h2.mm-was-h1 { font-size: 23px; }