/* Paver Las Vegas: layout and contrast fixes from QA round 1 (AGE-259). Loaded after the theme CSS. */

/* Home intro: a project photo fills the right column (its embed was removed). */
.home-intro-photo { display: block; width: 100%; height: auto; border-radius: 4px; }
@media (min-width: 981px) {
  .home .et_pb_row_3 { display: flex; align-items: stretch; }
  .home .et_pb_row_3 > .et_pb_column_11 { position: relative; min-height: 360px; }
  .home .et_pb_column_11 .et_pb_code_5, .home .et_pb_column_11 .et_pb_code_inner { position: static; }
  .home .et_pb_column_11 .home-intro-photo { position: absolute; inset: 0; height: 100%; object-fit: cover; }
}

/* Location pages: the quote panel was a 39% black wash, so its orange heading and white text could not be read. */
.quote-panel { background-color: rgba(0, 0, 0, .82) !important; }

/* Footer: the email column has no address in it. */
.footer__contact-info-email { display: none !important; }

/* Phone menu button (was a 32px light-teal icon font glyph): a dark 44px hamburger that turns into an X when open. */
.et_pb_menu .et_mobile_nav_menu .mobile_nav { display: inline-block; }
.et_pb_menu .mobile_menu_bar { display: block; width: 44px; height: 44px; }
.et_pb_menu .mobile_menu_bar::before {
  content: "" !important; display: block; width: 44px; height: 44px; position: static !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M9 13h26M9 22h26M9 31h26' stroke='%23571111' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 44px 44px no-repeat;
}
.et_pb_menu .mobile_menu_bar[aria-expanded="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M12 12l20 20M32 12L12 32' stroke='%23571111' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 980px) {
  /* Top bar: "Call Now!" was white on light grey; the number becomes a real call button. */
  .header__topbar-contact-item--phone { color: #333 !important; font-size: 15px !important; font-weight: 600; display: flex !important; align-items: center; justify-content: center; gap: 10px; height: auto !important; padding: 6px 0; }
  .header__topbar-contact-item--phone .fa { display: none; }
  .header__topbar-contact-item--phone a {
    display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 4px;
    background: #571111; color: #fff !important; font-size: 16px !important; font-weight: 700; line-height: 1; text-decoration: none;
  }
  .header__topbar-left { width: 100% !important; float: none !important; }

  /* Footer navigation: show its two links instead of a second, empty hamburger. */
  .footer-menu .et_mobile_nav_menu { display: none !important; }
  .footer-menu .et_pb_menu__menu { display: block !important; width: 100%; text-align: left; }

  /* Footer contact strip: stack the columns inside the screen. */
  .footer__contact-info-inner { display: block !important; width: auto !important; padding: 24px 15px !important; }
  .footer__contact-info-col { width: auto !important; max-width: 100% !important; float: none !important; position: static !important; left: auto !important; margin: 0 0 20px !important; text-align: center; }
  .footer__contact-info-col:last-child { margin-bottom: 0 !important; }
  .footer__contact-info-col-inner { padding-left: 0 !important; }
  .footer__contact-info-title { color: #fff !important; }
  .footer__contact-info-link { width: auto !important; white-space: nowrap; font-size: 20px !important; height: auto !important; }
  .footer__contact-info-social-list { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0 !important; padding: 0 !important; }

  /* Bottom footer logo was cut in half. */
  .footer__copyright-inner::before { background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }

  /* Home "benefits" circles were pushed off the right edge by their desktop offsets. */
  .benefits-left .benefits-item, .benefits-right .benefits-item { left: 0 !important; right: auto !important; width: 100% !important; max-width: 100% !important; }
  .benefits-item .benefits-info { min-width: 0; flex: 1 1 auto; }
}

@media (max-width: 600px) {
  /* Home hero buttons overlapped: stack them full width. */
  .banner__buttons { flex-wrap: wrap !important; gap: 12px; }
  .banner__buttons .banner__btn { width: 100% !important; margin: 0 !important; box-sizing: border-box; text-align: center; }
}

/* QA round 2 (AGE-259): phone-width polish. */
@media (max-width: 980px) {
  /* P4: footer phone/email icon sat on top of "CALL US NOW:"; put it above the text. */
  .footer__contact-info-col-inner::before { position: static !important; display: block !important; margin: 0 auto 8px; }
  .footer__contact-info-phone { padding: 0 !important; }
  .footer__contact-info-phone::before, .footer__contact-info-phone::after { display: none !important; }

  /* P6: the home form panel was 312px over a grey overlay; make the panel full width and drop the overlay. */
  .home .et_pb_section_1::after { display: none !important; }
  .home .et_pb_section_1 .et_pb_row_1, .home .et_pb_section_1 .et_pb_column_3, .home .et_pb_section_1 .et_pb_code_3 { width: 100% !important; max-width: none !important; }
}

@media (max-width: 600px) {
  /* P5: "Why You Should Choose" items were 40% wide (109px) with a 70px gutter; one item per row. */
  .why-choose__item { width: 100% !important; margin-right: 0 !important; }

  /* P2: "Request A Free Estimate" was clipped in narrow buttons; let it wrap and shrink a little. */
  .banner-form__submit-btn { white-space: normal !important; height: auto !important; min-height: 54px; padding: 10px 12px !important; font-size: 16px !important; line-height: 1.25 !important; }
}

@media (max-width: 480px) {
  /* P3: three bullet columns ran together; one column on phones. */
  .bullets-3 { column-count: 1; }
}

/* Fix-soon: 16px form fields on phones so iOS Safari doesn't zoom in on focus. */
@media (max-width: 980px) {
  .wpcf7-form-control:not(.wpcf7-submit) { font-size: 16px !important; }
}