/*
 * Novia mobile fixes — layered AFTER the original webflow stylesheet
 * (see src/app/layout.tsx, loaded right after the template css).
 *
 * Scope: footer layout at phone widths + platform input/send baseline only.
 * The template css stays byte-faithful to the licensed export: these labels
 * ("About Us", "For Businesses", "Join the Waitlist") are longer than the
 * template-author's single-word labels his footer was designed around, so the
 * template's own one-row patterns overflow on ~390px screens. Desktop is
 * untouched (everything below is max-width gated).
 */

/* Platform baseline: no gray/blue flash on tap; no landscape font inflation. */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* iOS Safari zooms the page when focusing an input under 16px (Webflow's
   .w-input default is 14px). Keep the waitlist field phone-usable. */
.footer-text-field {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  /* Footer nav pill row: never break words inside a pill; let whole pills
     wrap to additional centered rows instead of shrinking labels apart. */
  .footer-navigation {
    flex-flow: wrap;
    row-gap: 0.25rem;
  }

  .footer-link {
    white-space: nowrap;
  }

  /* Waitlist form: the one-row input + pill + hint doesn't fit a phone.
     Stack full-width (same pattern the contact form already uses on mobile). */
  .footer-form {
    flex-flow: column;
    align-items: stretch;
  }

  .footer-form .submit-button.footer {
    width: var(--_spacing---container-weight--full);
    text-align: center;
  }

  /* Legal row: wrap as whole links under the copyright instead of clipping
     off the left edge of the screen. */
  .uitlity-link-wrap {
    flex-flow: wrap;
    row-gap: 0.5rem;
    justify-content: flex-start;
  }

  .utility-link {
    white-space: nowrap;
  }

  /* Contact "The Plan" two-panel: the template's fixed ratio grid
     (760fr 496fr) has no small-width override, so both panels squeeze into
     ~120px columns on phones (left panel clipped, label chips cut, button
     text wraps onto its duplicate). Stack each panel full-width instead —
     the template itself renders an identical squeeze on its own contact
     page, so this is a faithful-fix, not a rebrand regression. */
  .contact-office-row {
    grid-template-columns: 1fr;
  }
}

/* Touch has no hover: reset the template's hover states that would otherwise
   stick after a tap (padding expansion + background fill). */
@media (hover: none) {
  .footer-link:not(.w--current):hover,
  .footer-soical-wrapper:hover,
  .utility-link:hover {
    padding: var(--_spacing---space-medium) var(--_spacing---space-1-extra-small);
    background-color: transparent;
    color: var(--_color---white-60);
  }

  .footer-link:not(.w--current):hover {
    color: var(--_color---white);
  }

  .utility-link:hover {
    text-decoration: none;
  }
}