/* ==========================================================================
   Responsive hardening — New Moon Cafe (restored static site)

   The original BentoBox "osaka" theme is already mobile-first, so this file
   deliberately stays minimal: it only closes gaps that can cause horizontal
   scrolling or unreadable content, and never restyles the theme's layout.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

/* Nothing may force the page wider than the viewport.
   `clip` is used instead of `hidden` so position: sticky keeps working. */
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Media scales down instead of forcing horizontal scroll -------------------- */
img, video, canvas, svg {
  max-width: 100%;
}

img, video { height: auto; }

/* Map / video embeds stay inside the viewport and keep their ratio ---------- */
iframe, embed, object { max-width: 100%; }

iframe[src*="google.com/maps"],
iframe[src*="youtube"],
iframe[src*="vimeo"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Long unbroken strings (emails, URLs) wrap instead of overflowing ---------- */
p, li, dd, dt, h1, h2, h3, h4, h5, h6, address, figcaption {
  overflow-wrap: break-word;
}

/* Wide tables scroll inside their own box rather than the page ------------- */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Forms: full width, and 16px so iOS does not zoom on focus ---------------- */
@media (max-width: 768px) {
  input, select, textarea {
    max-width: 100%;
    font-size: 16px;
  }
}

/* Comfortable touch targets for icon-only controls ------------------------- */
@media (max-width: 768px) {
  .social-accounts a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Honour the visitor's reduced-motion preference --------------------------- */
@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;
  }
}