/*
 * Phone and tablet improvements on top of The7 / WPBakery. Not on live.
 *
 * Every rule is inside a max-width: 1023px query, so desktop (1024px and up)
 * renders exactly as the theme does. Loaded after the theme's stylesheets
 * (see src/app/[[...slug]]/page.tsx). The client logos that The7 never
 * lazy-loads on small screens are loaded by src/app/mobile-lazy.ts.
 */

@media (max-width: 1023px) {
  /* WPBakery fades these in when a scroll library reaches them, and the
     site does not load that library: on phones the office address under
     the contact form stayed invisible. Show them. */
  html body .wpb_animate_when_almost_visible {
    opacity: 1 !important;
    animation: none !important;
  }

  /* Forms: 16px text so iOS does not zoom into a field when it is tapped,
     and 44px fields and buttons. */
  html body .wpcf7-form input[type="text"],
  html body .wpcf7-form input[type="email"],
  html body .wpcf7-form input[type="tel"],
  html body .wpcf7-form textarea {
    font-size: 16px;
    min-height: 44px;
  }
  /* !important: The7 styles submit buttons through a selector with two
     :not() clauses, which outranks any reasonable selector here. */
  html body .wpcf7-form .wpcf7-submit {
    min-height: 44px !important;
    padding: 12px 28px !important;
    font-size: 16px !important;
  }
  html body .wpcf7-form input[type="file"] {
    min-height: 44px;
    font-size: 16px;
  }

  /* The news slider has fifteen pages: keep the dots on one line. */
  html body .slick-dots {
    white-space: nowrap;
  }
  html body .slick-dots li {
    margin: 0 2px;
  }

  /* A 44px target around the menu icon. */
  html body .dt-mobile-menu-icon {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  /* The7 clones the menu icon into a fixed "floating" copy and shows it
     (.show-floating-icon) once the header has scrolled away. Its scroll
     handler reads the previous scroll position, so after a quick return to
     the top the class stays on and both icons show, stacked 8px apart. While
     the floating copy is shown, hide the header's own icon: one icon, and
     the floating one opens the same menu. */
  html body .masthead.show-floating-icon .dt-mobile-menu-icon:not(.floating-btn) {
    visibility: hidden;
  }
}

@media (max-width: 767px) {
  /* Justified text on a phone-width column opens wide gaps between words. */
  html body [style*="text-align: justify"] {
    text-align: left !important;
  }

  /* Project card titles are set at 36px inline, which runs past the edge
     of a half-width card. */
  html body .vc-hoverbox-front .vc_custom_heading {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  html body .slick-dots li,
  html body .slick-dots li button {
    width: 16px;
    height: 16px;
  }
  html body .slick-dots li button {
    transform: scale(0.7);
  }

  /* News articles set their body copy as 14pt spans inside <h2>s, so it
     takes the heading's 44px line height: on a phone that is a word or two
     per very tall line. Give it body-text spacing. */
  html body .wpb_text_column h2:has(> span[style*="font-size: 14pt"]) {
    line-height: 30px;
  }
}