/* BloodShare UI foundation (UI/UX redesign).
   Shared by base.html and landing.html. Tailwind (CDN) does the layout; this
   file holds only what utility classes cannot express cleanly: global focus,
   reduced motion, type rhythm and the mobile bottom bar. */

:root {
    --bs-brand: #D32F2F;
    --bs-brand-dark: #B71C1C;
    --bs-ink: #1F2430;
    --bs-focus: #1D4ED8; /* blue ring: visible on red, white and cream alike */
    --bs-bottom-nav-h: 4.25rem;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-size: 1rem;           /* 16px base, never smaller for running text */
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga";
}

/* Headings read as one family and break evenly instead of leaving orphans. */
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.01em; }
p, li { text-wrap: pretty; }

/* Numbers (counts, kilometres, dates) line up in columns. */
.tabular, [data-tabular] { font-variant-numeric: tabular-nums; }

/* ---- Keyboard focus: one visible ring everywhere, mouse users unaffected ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--bs-focus);
    outline-offset: 2px;
    border-radius: 0.5rem;
}
/* Fields already draw a ring through Tailwind; keep ours on top of it. */
:where(input, select, textarea):focus-visible { outline-offset: 0; }

/* ---- Skip link ---- */
.bs-skip {
    position: fixed; left: 1rem; top: -4rem; z-index: 1000;
    background: #fff; color: var(--bs-ink); font-weight: 700;
    padding: 0.75rem 1rem; border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(17, 24, 39, 0.2);
    transition: top 0.15s ease;
}
.bs-skip:focus { top: 1rem; }

/* ---- Touch targets: anything tappable is at least 44 x 44 ---- */
.bs-tap { min-width: 44px; min-height: 44px; }

/* ---- Mobile bottom bar ---- */
.bs-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid rgb(229 231 235);
}
.bs-bottom-nav a { -webkit-tap-highlight-color: transparent; }
@media (min-width: 768px) { .bs-bottom-nav { display: none; } }
@media (max-width: 767.98px) {
    /* Room so the bar never covers the last row of content or the footer. */
    body.has-bottom-nav main { padding-bottom: calc(var(--bs-bottom-nav-h) + env(safe-area-inset-bottom, 0) + 1rem); }
}

/* ---- Motion: keep it, but respect people who turned it off ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Forms: errors and hints are readable, not decorative ---- */
.errorlist { list-style: none; padding: 0; margin: 0.25rem 0 0; color: #B91C1C; font-size: 0.875rem; font-weight: 600; }

/* Printing a request (families do) should not print chrome. */
@media print {
    .bs-bottom-nav, header.sticky, #bs-toasts { display: none !important; }
}

/* ---- Shared text field (request form; reusable). 16px stops iOS zooming on
   focus; 48px tall is comfortable for a thumb; the border meets 3:1. ---- */
.bl-input {
    width: 100%;
    min-height: 48px;
    border-radius: 0.75rem;
    background-color: #F8FAFC;
    border: 1px solid #8B95A5;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    color: #1F2430;
}
.bl-input::placeholder { color: #6B7280; }
.bl-input:focus {
    border-color: #D32F2F;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.18);
    background-color: #fff;
}
.bl-input[aria-invalid="true"] { border-color: #B91C1C; }
.bl-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.5rem;
}