/* Web Professionals v3.8.20 — mobile contact strip.
 * Kept separate from the established header, menu, hero and dock styles.
 * The strip is normal document flow, never sticky or fixed.
 */
.webpro-mobile-contactbar { display: none; }

@media screen and (max-width: 1120px) {
  .webpro-mobile-contactbar {
    display: block;
    position: relative;
    margin: 0;
    background: #080807;
    color: #ffffff;
  }
  .webpro-mobile-contactbar__inner {
    display: flex;
    align-items: stretch;
    min-height: 44px;
  }
  .webpro-mobile-contactbar a {
    position: relative;
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, .12);
  }
  .webpro-mobile-contactbar a > span { min-width: 0; overflow-wrap: anywhere; }
  .webpro-mobile-contactbar a + a::before {
    content: "";
    position: absolute;
    inset-block: 12px;
    left: 0;
    width: 1px;
    background: #34342e;
  }
  .webpro-mobile-contactbar svg {
    display: block;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
  }
  .webpro-mobile-contactbar .webpro-mobile-contactbar__whatsapp { color: #73e39a; }
  .webpro-mobile-contactbar .webpro-mobile-contactbar__arrow { font-size: 15px; }
  .webpro-mobile-contactbar a:hover { background: rgba(255, 255, 255, .07); }
  .webpro-mobile-contactbar a:focus-visible {
    outline: 2px solid #ffc928;
    outline-offset: -4px;
    border-radius: 4px;
  }
}
@media print {
  .webpro-mobile-contactbar { display: none !important; }
}

/* The additional flow strip can be partly visible when the menu opens.
 * Use its measured remaining viewport space, rather than assuming the logo
 * row always starts at viewport y=0. Menu styling and open/close code stay intact.
 */
@media screen and (max-width: 1120px) {
  .webpro-mobile-contactbar ~ .site-header .main-nav {
    height: var(--webpro-contact-menu-height, calc(100dvh - 114px)) !important;
    max-height: var(--webpro-contact-menu-height, calc(100dvh - 114px)) !important;
  }
  .webpro-mobile-contactbar ~ .nav-scrim {
    top: var(--webpro-contact-header-bottom, 114px) !important;
  }
}