/*
 * Mobile usability overrides — the only stylesheet in this project that is NOT
 * a reproduction of the WordPress original. Everything here is scoped to
 * `max-width: 767px`, so the desktop layout stays byte-for-byte as it was.
 *
 * All of it exists for one reason: the Mesmerize theme sizes its mobile touch
 * controls in `rem`, and the root font-size drops to 14px below 1024px, so the
 * controls land at 33-40px — under the 44px minimum for a reliable touch
 * target. Delete this file (and its <link> in app/layout.js) to revert.
 */

@media screen and (max-width: 767px) {
  /* --- Hamburger toggle: 35px -> 44px. The icon and the hover "bubble" are
     sized independently by the theme, so both have to grow together or the
     circle stops being centred behind the icon. --- */
  .main_menu_col [data-component='offcanvas'] i.fa {
    height: 44px;
    width: 44px;
    line-height: 44px;
  }

  .main_menu_col [data-component='offcanvas'] .bubble {
    height: 44px;
    width: 44px;
  }

  /* --- Off-canvas menu rows: 33px -> 44px. These are the primary navigation
     on mobile, so they matter most. --- */
  .offcanvas_menu li a {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* --- Buttons: the plain `.button` lands at 40px. `.button.big` is already
     44px, so it is deliberately not touched. --- */
  .button:not(.big):not(.large) {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  /* --- Contact Form 7 submit: 35px, and full-width so it is easy to hit.
     Qualified with the element+attribute selector because the theme's
     `input[type="submit"] { width: auto }` is (0,1,1) and would otherwise
     out-rank a bare `.wpcf7-submit` class at (0,1,0). --- */
  input[type='submit'].wpcf7-submit {
    min-height: 44px;
    width: 100%;
  }

  /* --- Form fields: 16px prevents iOS Safari from zooming the viewport when a
     field takes focus. --- */
  .wpcf7-form input[type='text'],
  .wpcf7-form input[type='email'],
  .wpcf7-form textarea {
    font-size: 16px;
  }

  /* --- Contact page: centre the three blocks.
     `page-contact-us.css` faithfully reproduces a WordPress `wpautop` bug that
     drops every rule after the first, including `.contact-section { flex: 1 1
     300px }` and the `flex-direction: column` mobile rule. The blocks therefore
     stayed a wrapping row sized to their own content, landing at three
     different widths and three different left offsets (222/208/305px wide at
     x=75/35/35) — so their centred text was not centred on the page.

     Stacking them full-width restores what the page author intended and makes
     the centring actually read as centred. Desktop keeps the original
     three-column layout untouched. --- */
  .contact-container {
    flex-direction: column;
  }

  .contact-section {
    width: 100%;
  }

  /* The empty <p> elements are wpautop artifacts that act as load-bearing flex
     spacers in the desktop row; stacked in a column they are just dead gaps. */
  .contact-container > p:empty {
    display: none;
  }

  /* --- "Send Us a Message" reads as a form, so its heading, labels and fields
     are left-aligned while the two info blocks above stay centred.

     The theme sets `body { text-align: center }` and only flips it to `left` at
     `min-width: 768px`, so everything below that breakpoint inherits centring —
     which is why this section is left-aligned on desktop already and needed
     fixing only here. Declaring `text-align` on the section itself beats the
     inherited value outright, so no specificity juggling is needed. --- */
  .contact-section.contact-form {
    text-align: left;
  }
}