/* ---------------------------------------------------------------------------
   Mobile + touch layer. Loaded after every engine stylesheet so these win.
   Rules come from a measured audit (320 / 360 / 390 / 414 / 768 / 844x390) against:
   WCAG 2.2 (1.4.4, 1.4.10, 2.5.8), Apple HIG 44pt + Material 48dp targets,
   16px body text on phones, safe-area insets, hover-only effects gated to real pointers.
   --------------------------------------------------------------------------- */

/* Anchor jumps land below the fixed nav pill, not under it. */
html {
  scroll-padding-top: 96px;
}

/* ---- Type floor on phones and tablets: body 16px, small text 14px -------
   Gated on the pointer as well as the width, exactly like the label floor
   below. Width alone left a 768px tablet - a touch screen at desktop width -
   reading 12px review quotes and tool captions. */
@media (max-width: 767px), (pointer: coarse) {
  :root {
    --text-body: 16px;
    --text-body-sm: 14px;
  }
}

/* Labels never below 12px on phones or any touch screen (tablets, phone landscape). */
@media (max-width: 767px), (pointer: coarse) {
  :root {
    --text-label: 12px;
    --text-label-s: 12px;
  }

  .footer-meta,
  .hero-review__source p,
  .hero-review__byline,
  .nav-plain {
    font-size: 12px;
  }
}

/* 320-359px: "BrewedOps." fits the 288px content box. */
@media (max-width: 359px) {
  .hero-title,
  .method-intro__title {
    font-size: 44px;
  }
}

/* ---- Safe areas (notch / home indicator; needs viewport-fit=cover) ----- */
.nav-root {
  padding-top: max(12px, env(safe-area-inset-top));
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

@media (min-width: 640px) {
  .nav-root {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

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

/* ---- Touch targets: 44px minimum on touch screens ----------------------- */
@media (pointer: coarse) {
  .footer-link,
  .link-sweep,
  .kape__faq-sub a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-links__list {
    row-gap: 0;
  }

  .nav-wordmark {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .nav-plain {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav-cta .btn {
    min-height: 44px;
  }

  /* The scroll-progress rail is decoration a thumb can't use, and it sits over content in landscape. */
  .scroll-rail {
    display: none;
  }
}

/* ---- Hover effects only for real pointers (no sticky states after a tap) - */
@media (hover: none) {
  .build-card:hover,
  .kape-stage:hover .kapp {
    transform: none;
  }

  .build-card:hover {
    border-color: var(--color-border);
  }

  .footer-link:hover {
    color: var(--color-fg-secondary);
  }
}

/* ---- Short screens (phone landscape): pinned method panels fit 390px ---- */
@media (max-height: 500px) and (orientation: landscape) {
  /* below the 52px nav pill + its 12-16px inset */
  .method-pipe {
    top: 92px;
  }

  .method-step {
    padding-top: calc(92px + 3rem);
  }

  .method-step__name {
    font-size: clamp(40px, 15svh, 88px);
  }

  .method-step__tagline {
    margin-top: 0.6rem;
    font-size: 15px;
  }

  .method-step__bullets {
    margin-top: 0.9rem;
    gap: 0.5rem 1.25rem;
  }

  .method-step__bullet {
    gap: 0.3rem;
  }

  .method-step__icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .method-intro__title {
    font-size: clamp(40px, 16svh, 80px);
  }

  .nav-bar {
    height: 52px;
  }
}