/* Responsive rules shared by every preview design. Loaded after each page's own styles. */

/* Never allow sideways scrolling on small screens. */
html, body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; height: auto; }
h1, h2, h3, p, a, li, b { overflow-wrap: break-word; }

/* Dropdowns also open by keyboard (focus) and by tap (.open, set in data.js). */
nav.main li:focus-within > .drop,
nav.main li.open > .drop { opacity: 1; visibility: visible; }

/* Mega menu is centred in the header instead of under its link, so it never runs off-screen. */
header .wrap, header .bar { position: relative; }
nav.main > ul > li:has(> .drop.mega) { position: static; }
nav.main .drop.mega,
nav.main li:hover > .drop.mega,
nav.main li:focus-within > .drop.mega,
nav.main li.open > .drop.mega { left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100vw - 32px); }
/* The last two menus open leftwards so they stay inside the screen. */
nav.main > ul > li:nth-last-child(-n+3) > .drop:not(.mega) { left: auto; right: 0; }

/* 16px form text stops iPhones zooming in when a field is tapped. */
input, select, textarea { font-size: 16px !important; }

/* Comfortable tap targets on touch screens. */
@media (hover: none) {
  .drop a, .mnav a, .mnav summary, .drawer a, .mmenu a, footer li a { min-height: 40px; display: flex; align-items: center; }
}

/* Lock page scroll while a full-screen menu is open. */
body.menu-open { overflow: hidden; }

/* Fixed bottom bars respect the iPhone home indicator. */
.mbar { padding-bottom: env(safe-area-inset-bottom); }

/* Respect users who turn off animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Small phones (iPhone SE and smaller). */
@media (max-width: 380px) {
  .wrap { width: calc(100% - 24px); }
  .btn { padding: 11px 16px; font-size: 14.5px; }
  .wa, .wa-fab { right: 12px; bottom: 12px; }
}