/* responsive-base.css
 * Loaded after Bootstrap, before page-specific CSS.
 * Establishes shared mobile foundation: safe-area insets, fluid media,
 * fluid base type, and a mobile override for the .f-40 utility class
 * used in headlines and navbar/footer logos.
 *
 * Breakpoint convention (Bootstrap 4/5 defaults):
 *   sm 576 · md 768 · lg 992 · xl 1200
 */

/* Notch / bezel safe areas (requires viewport-fit=cover on the meta tag) */
body {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Media should never force horizontal scroll */
img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* Fluid base type. Note: this only cascades to elements sized in rem.
 * Px-sized headings (e.g. .f-40) still need explicit mobile overrides
 * — see below. */
html {
  font-size: clamp(15px, 0.95rem + 0.2vw, 17px);
}

/* P1: .f-40 is a flat 40px utility used on multiple surfaces
 * (composer headline, plan-locked state, landing pages, navbar/footer
 * brand). Replace the fixed size with a fluid one so it scales down
 * gracefully on phones without wrapping into 6–7 lines. */
.f-40 {
  font-size: clamp(24px, 6vw, 40px);
}