/* Mobile action bar — 15 October 2026.
 *
 * Four thumb targets pinned to the bottom of the viewport on phones, the way an
 * app's tab bar is. Replaces the old .sticky-bar, which lived on the 52 blog
 * pages, appeared only after 600px of scroll, and was absent from /, /book,
 * /prices and /assessment — the four pages where people actually decide.
 *
 * Labels are deliberately neutral. This bar renders on the ED, genital warts
 * and HPV pages, and a label naming the service is a disclosure to whoever
 * glances at that phone. It says how to get in touch, never what for.
 */

:root { --appbar-h: 58px; }

#appbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  background: #fff;
  border-top: 1px solid #dfe6e6;
  box-shadow: 0 -2px 14px rgba(12, 58, 62, .10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
#appbar ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
#appbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box;   /* min-height must INCLUDE the padding, or the bar grows
                               taller than the body padding that clears it */
  gap: 3px;
  min-height: var(--appbar-h);
  padding: 7px 2px 6px;
  text-decoration: none;
  color: #15585e;
  font-size: 11px; font-weight: 600; line-height: 1;
}
#appbar a:active { background: #f1f8f8; }
#appbar svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Book is the only coloured target: one primary action, not four competing ones. */
#appbar .ab-book {
  color: #fff; background: #0c3a3e;
  margin: 6px 7px; border-radius: 10px;
  min-height: calc(var(--appbar-h) - 12px);
}
#appbar .ab-book:active { background: #15585e; }
/* Outside 10:00–20:00 Manila a call rings an empty room. Still tappable — dimmed and labelled. */
#appbar .ab-shut { color: #9bb6b8; }
#appbar .ab-note { font-size: 9px; font-weight: 500; }

#appbar[hidden] { display: none !important; }

@media (max-width: 768px) {
  #appbar { display: block; }
  /* Without this the last line of every page hides behind the bar. */
  body { padding-bottom: calc(var(--appbar-h) + env(safe-area-inset-bottom, 0px)); }
  /* Back-to-top sat at 80px, which the bar would now cover. */
  .back-to-top { bottom: calc(var(--appbar-h) + 14px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Belt and braces: any .sticky-bar this patch did not reach stays out of the way. */
  .sticky-bar { display: none !important; }
}