/* ============================================================================
 * Mobile responsive baseline — Material Design 3 / Apple HIG / WCAG 2.5.5
 *
 * Required on every public-facing Info Kraft site. Critic gates publication
 * on `MOBILE_AUDIT.md` showing PASS for the 3 reference viewports
 * (iPhone SE 375x667, iPhone 14 Pro 393x852, iPad Pro 11 834x1194).
 *
 * Builder agents: append this content to your project's main stylesheet,
 * OR for static sites, copy this file into public/styles/ and link it
 * AFTER your main stylesheet so the cascade order is correct.
 *
 * Audit tool: scripts/mobile-audit.sh <slug>
 * ============================================================================
 */

/* ---- Universal mobile-friendly defaults (apply on every viewport) ---- */
/* Form inputs >= 16px prevents iOS auto-zoom regardless of screen size */
input,
select,
textarea {
  font-size: max(16px, var(--ik-text-base, 16px));
}

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

/* ---- Compact + Medium (0-839px): phones + tablets ---- */
@media (max-width: 839px) {
  /* 44px tap targets (Apple HIG / WCAG 2.5.5) */
  a,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  .ik-button,
  .btn,
  .btn-cta {
    min-height: 44px;
  }

  /* Top + footer nav: each item gets tappable padding */
  nav a,
  .ik-topbar__nav a,
  .ik-footer__nav a,
  .site-header nav a,
  .foot-nav a {
    padding: 12px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Card-internal links full row tappable */
  .service__title a,
  .kaigo-guide-nav a,
  article h3 a,
  li > a {
    display: block;
    padding-block: 10px;
    min-height: 44px;
  }

  /* Tables horizontally scrollable */
  table,
  .subsidy-table,
  .kaigo-result-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Header allows wrap */
  .ik-topbar,
  .site-header .inner {
    flex-wrap: wrap;
  }
}

/* ---- Compact (0-599px): phones in portrait — body type & layout collapse ---- */
@media (max-width: 599px) {
  /* Body baseline 16px (Apple HIG / Material readable size).
     Most desktop sites use 14px Gmail-style; that doesn't survive on phones. */
  html {
    font-size: 16px;
  }
  body,
  p,
  li,
  td,
  th,
  label,
  dd,
  dt,
  blockquote {
    font-size: max(16px, var(--ik-text-sm, 16px));
    line-height: 1.6;
  }

  /* Reduce hero vertical padding on small screens. */
  .hero,
  .kaigo-hero {
    padding-block: var(--ik-space-5, 24px);
  }

  /* Form rows stack on phone instead of side-by-side. */
  .kaigo-form-row,
  .ik-field-row {
    flex-direction: column;
    gap: var(--ik-space-3, 12px);
  }
}

/* ---- Medium (600-839px): tablets / large phones — body 16px sustained ---- */
@media (min-width: 600px) and (max-width: 839px) {
  body,
  p,
  li,
  td,
  label {
    font-size: 16px;
  }
}