/*
 * Global responsive foundation for Junj theme.
 * Scope: cross-page overflow prevention, touch targets, iOS form zoom, safe area.
 * Page-specific layout belongs in page-*.css — not here.
 */

/* --- Media never overflow viewport --- */
img,
video,
iframe,
svg,
picture {
  max-width: 100%;
  height: auto;
}

/* --- iOS input zoom prevention (font-size < 16px triggers zoom) --- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* --- Global CTA / interactive touch-target floor (mobile) --- */
@media (max-width: 768px) {
  :where(
    .pill-action,
    .pc-action,
    .hero-action,
    .contact-action,
    .contact-submit,
    .support-hero__cta,
    .support-hero__contact,
    .support-page__contact,
    .about-standard-hero__contact,
    .about-standard-hero__nav-item,
    .lab-hero__contact,
    .oem-hero__contact,
    .oem-why__contact,
    .application-cta__action,
    .application-card__action,
    .featured-article__action,
    .article-entry__action,
    .oy-404-action,
    .oy-search-action,
    .shared-contact__submit,
    .shared-contact__faq-question
  ) {
    min-height: 44px;
  }

  .footer-social a {
    inline-size: 44px;
    block-size: 44px;
  }
}

/* --- Tablet: prevent accidental horizontal scroll from wide children --- */
@media (min-width: 769px) and (max-width: 1024px) {
  main,
  .site-main,
  [class$="-page"] {
    overflow-x: clip;
  }
}

/* --- Safe area for fixed/sticky chrome (notch devices) --- */
@supports (padding: env(safe-area-inset-top)) {
  .header-page {
    padding-top: env(safe-area-inset-top);
  }

  .site-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --- Table horizontal scroll container utility --- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table-scroll table {
  min-width: 480px;
}

/* --- Reduced motion: respect user preference globally --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}