/* Phone-only fixes layered over the compiled Replit CSS, which has no source to edit.
   Attribute selectors match Tailwind's arbitrary-value classes exactly without escaping. */
@media (max-width: 767px) {
  /* Labels as small as 8px were unreadable on phones; 12px is the practical floor. */
  [class~="text-[8px]"],
  [class~="text-[9px]"],
  [class~="text-[10px]"] {
    font-size: 12px !important;
  }
  [class~="text-[11px]"],
  .section-label {
    font-size: 12.5px !important;
  }

  /* iOS zooms the page when a focused field is under 16px. */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  [data-testid="input-newsletter-email"] {
    min-height: 44px;
  }

  /* 44px minimum touch targets (Apple HIG, WCAG 2.5.5). */
  [data-testid="button-mobile-menu"],
  [data-testid="button-theme-toggle"],
  [data-testid^="button-share-idea-"],
  [data-testid="link-instagram"],
  [data-testid="link-tiktok"],
  [data-testid="button-newsletter-submit"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  [data-testid^="button-filter-"] {
    min-width: 44px;
    justify-content: center;
  }
  [data-testid^="button-filter-"],
  [data-testid^="footer-link-"],
  [data-testid="link-contact"],
  a[href="/"][class~="text-[12px]"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Inline link inside the copyright line: padding grows the hit area without moving text. */
  [data-testid="link-criterion"] {
    padding-block: 14px;
  }
}