/* Build it Better shared responsive base (CentCom 31855 / 31867 / ET-27626).
 * Included ONCE by templates/base_content.html for every Build it Better app page
 * (body.bb-app). New builds inherit it with no per-page work.
 *  - dvh always has a vh declaration above it as the fallback
 *  - safe-area insets on notched devices
 *  - 44x44px minimum touch targets inside app content
 *  - no horizontal overflow down to 320px
 *  - breakpoints 1024 / 768 / 480 (respond BEFORE the layout reaches its floor)
 * Scoped to body.bb-app .content-main: the site header, brand font (Archivo Black)
 * and every colour are untouched. Layout only - no colour or font declarations. */

:root {
  --bb-vh: 100vh;
  --bb-vh: 100dvh;
  --bb-safe-top: env(safe-area-inset-top, 0px);
  --bb-safe-right: env(safe-area-inset-right, 0px);
  --bb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bb-safe-left: env(safe-area-inset-left, 0px);
  --bb-touch: 44px;
  --bb-gutter: 16px;
}

body.bb-app { max-width: 100%; }

body.bb-app .content-main {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  padding-left: max(var(--bb-gutter), var(--bb-safe-left));
  padding-right: max(var(--bb-gutter), var(--bb-safe-right));
  padding-bottom: max(24px, var(--bb-safe-bottom));
}

/* nothing in app content may be wider than its box */
body.bb-app .content-main *,
body.bb-app .content-main *::before,
body.bb-app .content-main *::after { box-sizing: border-box; }
body.bb-app .content-main :where(img, video) { max-width: 100%; height: auto; }
body.bb-app .content-main :where(canvas, svg, iframe) { max-width: 100%; }
body.bb-app .content-main h1,
body.bb-app .content-main h2,
body.bb-app .content-main h3,
body.bb-app .content-main p,
body.bb-app .content-main li,
body.bb-app .content-main td,
body.bb-app .content-main th,
body.bb-app .content-main a,
body.bb-app .content-main code { overflow-wrap: anywhere; }
body.bb-app .content-main pre {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* wide tables scroll inside their own box, never the page */
body.bb-app .content-main table { max-width: 100%; }
body.bb-app .content-main .bb-scroll,
body.bb-app .content-main .table-wrap,
body.bb-app .content-main .table-scroll,
body.bb-app .content-main .tbl-wrap {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
body.bb-app .content-main :where(input, select, textarea) { max-width: 100%; }
/* grid/flex children may shrink below their content width */
body.bb-app .content-main :where(section, article, div) { min-width: 0; }

/* 44x44 touch targets (WCAG 2.5.5) */
body.bb-app .content-main :where(button, [role="button"], input[type="button"], input[type="submit"],
  input[type="reset"], select, summary, .btn, .button) {
  min-height: var(--bb-touch); min-width: var(--bb-touch);
}
body.bb-app .content-main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
  min-height: var(--bb-touch);
  font-size: max(16px, 1em); /* stops iOS zooming into a focused field */
}
body.bb-app .content-main :where(input[type="checkbox"], input[type="radio"]) {
  width: 24px; height: 24px; margin: 10px;
}
body.bb-app .content-main :where(a):not(p a):not(li a):not(td a):not(th a):not(h1 a):not(h2 a):not(h3 a):not(span a):not(small a):not(em a):not(strong a) {
  min-height: var(--bb-touch);
  display: inline-flex; align-items: center;
}
/* inline links in running text: pad the hit area without moving the text */
body.bb-app .content-main :where(p a, li a, td a, th a, span a) { padding-block: 12px; margin-block: -12px; }

/* short screens: shared full-height shells use a dvh height that has a vh fallback above it */
body.bb-app .bb-fill { min-height: 60vh; min-height: 60dvh; }
body.bb-app .bb-fill-screen { min-height: 100vh; min-height: 100dvh; }

/* ---- breakpoints ---- */
@media (max-width: 1024px) {
  body.bb-app .content-main { --bb-gutter: 20px; }
  body.bb-app .content-main :where(.grid, [class*="-grid"], [class*="grid-"]) { min-width: 0; }
}
@media (max-width: 768px) {
  body.bb-app .content-main { --bb-gutter: 14px; }
  body.bb-app .content-main :where(.row, .cols, .split, [class*="-row"], [class*="-cols"], [class*="-split"]) {
    flex-wrap: wrap;
  }
  body.bb-app .content-main :where(.row, .cols, .split, [class*="-row"], [class*="-cols"], [class*="-split"]) > * {
    min-width: 0;
  }
}
@media (max-width: 480px) {
  body.bb-app .content-main { --bb-gutter: 12px; }
  body.bb-app .content-main :where(button, .btn, .button) { max-width: 100%; }
  body.bb-app .content-main :where(h1) { font-size: clamp(1.4rem, 7vw, 2rem); }
}
/* landscape phones / short windows: never pin a panel taller than the visible viewport */
@media (max-height: 520px) {
  body.bb-app .bb-fill, body.bb-app .bb-fill-screen { min-height: 0; }
}