/* ------------------------------------------------------------------ *
 * bb-mobile.css — makes the Better Brampton redesign usable on phones
 * and tablets WITHOUT changing the design.
 *
 * Injected by build-bb-site.js. Every rule lives inside a media query
 * with a max-width, so nothing here can reach a desktop screen.
 *
 * Rules target the export's own inline styles and structure rather than
 * added classes, because the page is a React app that re-renders — a
 * class written onto an element would not survive. Inline styles beat a
 * stylesheet, hence the !important on anything that overrides one.
 *
 * Nothing is hidden, removed or reworded at any width. The page holds
 * exactly the same content on a phone as on a desktop.
 * ------------------------------------------------------------------ */

/* ================================================================== *
 * 1. THE HEADER
 * At 390px the nav wrapped onto four rows and the sticky header stood
 * 205px tall — a quarter of the screen, permanently. Below 1280 the
 * links become one row that scrolls sideways: every link still there,
 * still tappable, but the header costs ~90px instead of 205px.
 * ================================================================== */

@media (max-width: 1279px) {
  header > div {
    padding: 8px 16px !important;
    gap: 6px !important;
    row-gap: 4px !important;
  }

  header nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    /* room for the 2px active underline that sits at the button's foot */
    padding-bottom: 2px;
  }
  header nav::-webkit-scrollbar { display: none; }

  header nav > button {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }
}

/* Laptops and iPad landscape: the row fits without scrolling once the
   links are slightly tighter, so let it sit still. */
@media (min-width: 1024px) and (max-width: 1279px) {
  header nav > button {
    font-size: 13.5px !important;
    padding: 9px 8px !important;
  }
  header nav { overflow-x: visible; }
}

/* Tablets and phones: the links get their own full-width row under the
   brand, and grow to a 44px tap target. */
@media (max-width: 1023px) {
  header > div { padding: 6px 16px !important; }
  header nav {
    margin-left: 0 !important;
    width: 100%;
    flex: 1 0 100% !important;
    gap: 0 !important;
  }
  header nav > button {
    font-size: 14px !important;
    padding: 9px 11px !important;
    min-height: 40px;
  }
  /* the Donate button keeps its place next to the brand */
  header > div > button:last-child,
  header > div > a:last-child {
    margin-left: auto !important;
  }
}

@media (max-width: 767px) {
  header > div { padding: 6px 14px !important; }
  header nav > button { font-size: 13.5px !important; padding: 10px 9px !important; }

  /* brand: a touch smaller so the top row is 44px, not 56px */
  header > div > button:first-child > span:first-child {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }
  header > div > button:first-child span[style*="font-size: 19px"],
  header > div > button:first-child span[style*="font-size:19px"] {
    font-size: 17px !important;
  }
}

/* the brand is a link home, so it needs a real tap target too */
@media (max-width: 1023px) {
  header > div > button:first-child { min-height: 40px; }
}

/* ================================================================== *
 * 2. TEXT THAT WAS TOO SMALL TO READ
 * The tracked uppercase labels render at 9.5–11.5px. That is fine on a
 * 27" monitor and not on a phone. Raised to 12px, and the tracking is
 * eased slightly so the wider glyphs do not force a wrap.
 * ================================================================== */

/* React rewrites the style attribute, so the value carries a space after
   the colon ("font-size: 10.5px"). Matching the source spelling silently
   matches nothing — both forms are listed so either survives. */
@media (max-width: 1194px) {
  [style*="font-size: 9.5px"],  [style*="font-size:9.5px"]  { font-size: 12px !important; }
  [style*="font-size: 10.5px"], [style*="font-size:10.5px"] { font-size: 12px !important; }
  [style*="font-size: 11.5px"], [style*="font-size:11.5px"] { font-size: 12.5px !important; }

  /* wider tracking at a bigger size would force these labels to wrap */
  [style*="letter-spacing: 0.18em"] { letter-spacing: .12em !important; }
  [style*="letter-spacing: 0.16em"] { letter-spacing: .12em !important; }
  [style*="letter-spacing: 0.14em"] { letter-spacing: .11em !important; }
  [style*="letter-spacing: 0.13em"] { letter-spacing: .1em !important; }
  [style*="letter-spacing: 0.12em"] { letter-spacing: .1em !important; }

  /* a 0.8em child of an already-small label lands at ~10px */
  [style*="font-size: 0.8em"] { font-size: .95em !important; }
}

/* ================================================================== *
 * 3. THINGS THAT WERE TOO SMALL TO TAP
 * Apple and Google both put the floor at ~44px. These were 4px, 13px
 * and 22px. Each one grows its HIT AREA without changing what is drawn.
 * ================================================================== */

@media (max-width: 1194px) {
  /* the fact-carousel bars: 4px tall, impossible to hit.
     Padding makes the target 24px; background-clip keeps the bar 4px. */
  div[aria-hidden="true"] > button[style*="height: 4px"],
  div[aria-hidden="true"] > button[style*="height:4px"] {
    height: 32px !important;
    padding: 14px 0 !important;
    background-clip: content-box !important;
    -webkit-background-clip: content-box !important;
  }

  /* footer links sat at 22–25px */
  footer button, footer a {
    min-height: 40px;
    display: inline-flex !important;
    align-items: center;
  }

  /* the consent box was 13x13 */
  form input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;
  }
  /* card call-to-action buttons rendered at 23px tall */
  button[style*="align-self: flex-start"] { min-height: 40px; }

  /* and its label becomes the tap target too */
  form label:has(> input[type="checkbox"]) {
    min-height: 44px;
    align-items: center !important;
  }
}

/* ================================================================== *
 * 4. FORMS
 * 16px is the threshold below which iOS Safari zooms the whole page in
 * when a field is focused, which then leaves the layout scrolled
 * sideways. Every field goes to 16px on phones for that reason alone.
 * ================================================================== */

@media (max-width: 767px) {
  form input[type="text"],
  form input[type="email"],
  form input[type="tel"],
  form input[type="number"],
  form textarea,
  form select {
    font-size: 16px !important;
    min-height: 44px;
  }
  form textarea { min-height: 96px; }
  form button[type="submit"] {
    min-height: 48px;
    width: 100%;
  }
}

/* The page scrolls to #signup and #lawn-sign itself, with a hard-coded
   110px offset (scrollY - 110) inside the design's own logic. The header
   must therefore stay UNDER 110px at every width, or those two jumps land
   beneath it. That constraint is why the rows above are as tight as they
   are — it is measured, not a style preference. */

/* ================================================================== *
 * 5. LANDING ON THE RIGHT SPOT
 * A jumped-to section must clear the sticky header, whose height moves
 * with the screen. Each tier is measured at its own boundary. This
 * changes where a click lands, never how anything is painted.
 * ================================================================== */

@media (min-width: 1280px) { [id] { scroll-margin-top: 86px; } }
@media (min-width: 1024px) and (max-width: 1279px) { [id] { scroll-margin-top: 80px; } }
@media (min-width: 768px) and (max-width: 1023px) { [id] { scroll-margin-top: 139px; } }
@media (max-width: 767px) { [id] { scroll-margin-top: 134px; } }

/* ================================================================== *
 * 6. SAFETY NET
 * Nothing overflowed when measured, but a long unbroken word — an email
 * address, a URL — can push a narrow column out later. This costs
 * nothing and cannot move anything that already fits.
 * ================================================================== */

@media (max-width: 767px) {
  h1, h2, h3, h4, p, li, td, th, span, a, label, legend { overflow-wrap: break-word; }
  img, svg, video { max-width: 100%; height: auto; }
}

/* ================================================================== *
 * 7. A PHONE HELD SIDEWAYS
 * In landscape the screen is only ~390px tall, so a 102px sticky header
 * eats a quarter of it. Below 460px of height the header packs down to
 * about 78px. Guarded by max-width too, so a short desktop window is
 * never affected.
 * ================================================================== */

@media (max-height: 460px) and (max-width: 1023px) {
  header > div { padding: 3px 14px !important; }
  header nav > button {
    padding: 7px 9px !important;
    min-height: 34px;
    font-size: 13px !important;
  }
  header > div > button:first-child { min-height: 34px; }
  header > div > button:first-child > span:first-child {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }
}