/* Kiosk-specific overrides on top of Tailwind. */
html, body { height: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* Inter loaded via Google Fonts in App.razor; the Tailwind config in
     App.razor already extends fontFamily.sans, but body needs an explicit
     declaration so non-Tailwind elements (raw HTML in error pages, bare
     <p>, the Blazor error UI) also pick it up. cpp-kiosk parity. */
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
button { min-height: 44px; min-width: 44px; }   /* WCAG touch-target */
.kiosk-btn-primary {
  @apply px-6 py-3 rounded-lg bg-emerald-600 text-white font-semibold hover:bg-emerald-700;
}

/*
  FocusOnNavigate (Routes.razor) calls h1.focus() after every navigation
  so screen readers announce the new page. Without :focus-visible the
  browser draws its default outline on every load. Suppress :focus for
  the programmatic case + keep :focus-visible (keyboard tab) intact.
*/
h1:focus { outline: none; }
h1:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 4px;
  border-radius: 4px;
}

/*
  Buttons that get programmatic focus via FocusOnNavigate (data-autofocus
  on the landing first card) suppress the default outline on the
  programmatic flip while keeping :focus-visible for keyboard users.
*/
button:focus { outline: none; }
button:focus-visible {
  outline: 3px solid #0ea5e9;
  outline-offset: 2px;
}