/**
 * Volunteer portal styles — clean, mobile-first.
 */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.opportunity-card {
    transition: transform 0.15s, box-shadow 0.15s;
    border: 1px solid rgba(0,0,0,.08);
}
.opportunity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/*
 * Hero background defaults to the vHours green gradient but is overridden
 * by the per-hub --hub-primary / --hub-primary-light CSS variables that
 * templates/volunteer/layout.php injects from hubs.primary_color.
 */
.hero-section {
    background: linear-gradient(
        135deg,
        var(--hub-primary, #15803d) 0%,
        var(--hub-primary-light, #22c55e) 100%
    );
    color: white;
    padding: 3rem 0;
}
.hero-section h1 {
    font-weight: 700;
}

/*
 * Logo card inside the hero — gives any multi-color logo a clean white
 * backdrop so it never has to fight the hero background. Previously we
 * forced logos to monochrome white with a CSS filter, which mangled
 * branded logos (UWMC's circle-with-people, etc.).
 */
.hero-section .hero-logo-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 22px;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.hero-section .hero-logo-card img {
    max-height: 80px;
    max-width: 280px;
    display: block;
}

.stat-card .stat-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ============================================
   FONT SIZE & READABILITY FIXES
   Inspinia defaults are too small for a public-facing portal.
   ============================================ */

body {
    font-size: 16px;
    line-height: 1.6;
}

/* ---------- Navbar ---------- */
.navbar {
    font-size: 1rem;
}
.navbar .nav-link {
    font-size: 1rem;
    padding: 0.6rem 1rem;
}
.navbar-brand {
    font-size: 1.25rem;
    font-weight: 600;
}

/* ---------- Hero Section ---------- */
.hero-section {
    padding: 3.5rem 0;
}
.hero-section h1 {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}
/* Hub-authored welcome copy. Constrained so a long message stays readable
   rather than running the full width of a wide screen. */
.hero-welcome {
    max-width: 46rem;
    font-size: 1.15rem;
    line-height: 1.7;
    opacity: 0.95;
}
.hero-welcome p:last-child {
    margin-bottom: 0;
}

.hero-section p,
.hero-section .lead {
    font-size: 1.15rem;
    opacity: 0.92;
}

/* ---------- Opportunity Cards ---------- */
.opportunity-card {
    border-left: 4px solid #22c55e;
    border-radius: 0.5rem;
    padding: 1.25rem;
}
.opportunity-card .card-body {
    padding: 1rem 1.25rem;
}
.opportunity-card .card-title,
.opportunity-card h5,
.opportunity-card h6 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.opportunity-card .card-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #4b5563;
}
.opportunity-card .badge {
    font-size: 0.8rem;
    padding: 0.35em 0.7em;
    font-weight: 500;
}
.opportunity-card .text-muted,
.opportunity-card small {
    font-size: 0.875rem;
}

/* Category color stripes — override the default green per-category */
.opportunity-card[data-category="education"]   { border-left-color: #3b82f6; }
.opportunity-card[data-category="environment"] { border-left-color: #22c55e; }
.opportunity-card[data-category="health"]      { border-left-color: #ef4444; }
.opportunity-card[data-category="animals"]     { border-left-color: #f59e0b; }
.opportunity-card[data-category="community"]   { border-left-color: #8b5cf6; }
.opportunity-card[data-category="disaster"]    { border-left-color: #dc2626; }

/* ---------- Opportunity Detail ---------- */
/* The detail page previously rendered the description at Bootstrap's fs-6
   (1rem), which is smaller than the 1.05rem summary shown on the card that led
   the volunteer there. Reading it felt like the text shrank on the page that
   matters most. This audience skews older, so the body copy is set larger than
   the preview rather than merely equal to it. */
.opportunity-description {
    font-size: 1.15rem;
    line-height: 1.75;
    color: #374151;
}
.opportunity-description ul,
.opportunity-description ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.opportunity-description li {
    margin-bottom: 0.35rem;
}
.opportunity-description blockquote {
    border-left: 3px solid #d1d5db;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #4b5563;
}
.opportunity-description p:last-child {
    margin-bottom: 0;
}

/* ---------- Stat Cards ---------- */
.stat-card {
    padding: 1.25rem;
    text-align: center;
}
.stat-card .stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.25rem;
}
.stat-card .stat-label {
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: 500;
}

/* ---------- "What to Bring / What to Wear" info cards ---------- */
.info-card,
.requirement-card {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    line-height: 1.6;
    border-radius: 0.5rem;
}
.info-card h6,
.requirement-card h6,
.info-card .card-title,
.requirement-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.info-card ul li,
.requirement-card ul li {
    padding: 0.25rem 0;
    font-size: 0.95rem;
}

/* ---------- Badges (Type, Location) ---------- */
.badge {
    font-size: 0.8rem;
    padding: 0.35em 0.7em;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ---------- General Spacing & Readability ---------- */
p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; }

.card {
    margin-bottom: 1.5rem;
}
.card-body {
    padding: 1.25rem;
}

/* ---------- Footer ---------- */
footer {
    font-size: 0.9rem;
    padding: 2rem 0;
}

/* ---------- Forms (volunteer-facing) ---------- */
.form-control,
.form-select {
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
}
.form-label {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}
.btn {
    font-size: 1rem;
    padding: 0.5rem 1.25rem;
}

/* ============================================================================
   SENIOR-FRIENDLY PASS (punch list I)
   ============================================================================
   UWMC's volunteers are mostly seniors. The client's words: font size, obvious
   buttons and short paths matter more than density or cleverness. Item D fixed
   the one instance they caught; this is the general sweep.

   Everything below is scoped to the volunteer portal. templates/volunteer/
   layout.php is the only file that loads this stylesheet, so the admin and
   kiosk interfaces are unaffected.

   The approach is to raise the floor rather than edit markup. The portal uses
   Bootstrap's .small (67 uses of .text-muted, 28 of .small, 15 of .btn-sm), so
   overriding those utilities here fixes every page at once and keeps future
   pages correct by default.

   Three things drive the choices:
     1. Nothing a volunteer READS drops below 1rem. Small grey text is the worst
        case for older eyes, and .small + .text-muted together were exactly that.
     2. Anything you CLICK is at least 44px tall, per WCAG 2.5.5 target size.
        A 0.5rem-padded button was landing around 38px.
     3. Muted text is darkened. Bootstrap's #6c757d is about 4.7:1 on white,
        which scrapes AA at best and fails once the text is also small.
   ============================================================================ */

/* THE ROOT CAUSE, and it is not obvious.
 *
 * Inspinia is an admin theme. Its base is --ins-body-font-size: 13px, and it
 * REDEFINES Bootstrap's fs-* utilities on a compressed scale of its own:
 *
 *     .fs-4  1.01625rem   ~16px
 *     .fs-5  0.84552rem   ~13.5px
 *     .fs-6  0.69105rem   ~11px
 *
 * Stock Bootstrap has fs-5 at 1.25rem and fs-6 at 1rem, so this portal's pages
 * were written expecting "slightly smaller heading" and got "nearly unreadable".
 * opportunity.php renders the shift DATE, the one thing a volunteer must read to
 * know when to turn up, in fs-6. That is about 11px.
 *
 * Item D fixed a single instance of this on the description without anyone
 * realising it was systemic. This is the systemic fix.
 *
 * rem resolves against the ROOT element, not body, and Inspinia never sets an
 * html font-size, so it inherits the browser default 16px. Setting body alone
 * would leave every rem value anchored to 16px while body claimed 18px, which is
 * how you end up with paragraphs SMALLER than the body text they sit in. So the
 * root moves, and everything below is expressed in rem against it. */
html {
    font-size: 18px;
}

body {
    font-size: 1rem;
    line-height: 1.65;
}

/* Inspinia's fs-* are !important, so these have to be too. Restores
   Bootstrap-like semantics: a bigger number is smaller, but nothing is tiny. */
.fs-1 { font-size: 2.25rem !important; }
.fs-2 { font-size: 1.9rem  !important; }
.fs-3 { font-size: 1.6rem  !important; }
.fs-4 { font-size: 1.35rem !important; }
.fs-5 { font-size: 1.2rem  !important; }
.fs-6 { font-size: 1.05rem !important; }

/* ---------- Nothing readable below 1rem ---------- */
small,
.small,
.form-text,
.opportunity-card .card-text,
.opportunity-card .text-muted,
.opportunity-card small,
.info-card,
.requirement-card,
.info-card ul li,
.requirement-card ul li,
.stat-card .stat-label,
footer {
    font-size: 1rem;
    line-height: 1.6;
}

h6,
.info-card h6,
.requirement-card h6,
.info-card .card-title,
.requirement-card .card-title {
    font-size: 1.05rem;
}

p {
    font-size: 1.05rem;
    line-height: 1.65;
}

/* Badges are labels rather than prose, so they may stay smaller, but 0.8rem was
   too far. */
.badge,
.opportunity-card .badge {
    font-size: 0.9rem;
    padding: 0.4em 0.75em;
}

/* ---------- Contrast ---------- */
/* Bootstrap's muted grey is too light once the text is small. This is roughly
   7:1 on white, comfortably AA and close to AAA for body text. */
.text-muted,
.opportunity-card .text-muted,
.stat-card .stat-label {
    color: #495057 !important;
}

.opportunity-card .card-text {
    color: #343a40;
}

/* ---------- Obvious, tappable buttons ---------- */
.btn {
    font-size: 1.05rem;
    padding: 0.7rem 1.5rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

/* btn-sm stays visually lighter but must still be hittable. */
.btn-sm {
    font-size: 1rem;
    padding: 0.5rem 1.1rem;
    min-height: 44px;
}

/* The primary action on a page should not be ambiguous. */
.btn-lg {
    font-size: 1.2rem;
    padding: 0.9rem 2rem;
    min-height: 56px;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    font-size: 1.05rem;
    padding: 0.7rem 0.9rem;
    min-height: 48px;
}

.form-label {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

/* A checkbox you can actually hit, with a label that is part of the target. */
.form-check {
    padding-left: 2rem;
    margin-bottom: 0.6rem;
}
.form-check-input {
    width: 1.35rem;
    height: 1.35rem;
    margin-left: -2rem;
    margin-top: 0.15rem;
}
.form-check-label {
    font-size: 1.05rem;
    padding-left: 0.35rem;
    cursor: pointer;
}

/* ---------- Focus, for keyboard and low vision ---------- */
/* Nothing defined a focus style before, so the browser default was whatever it
   happened to be, and on some it is nearly invisible against a coloured button. */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Links ---------- */
/* Colour alone is not a reliable signal for an older or colour-blind reader, so
   links inside prose carry an underline. Nav and buttons are excluded: they read
   as controls from position and shape. */
main p a,
.opportunity-description a,
.hero-welcome a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ---------- Navigation ---------- */
.navbar .nav-link {
    font-size: 1.05rem;
    padding: 0.75rem 1rem;
    min-height: 48px;
    display: flex;
    align-items: center;
}
.navbar-brand {
    font-size: 1.35rem;
}

/* ---------- Tables, where they appear (My Hours, My Shifts) ---------- */
.table {
    font-size: 1.05rem;
}
.table td,
.table th {
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
}

/* ---------- Cards ---------- */
.opportunity-card .card-title,
.opportunity-card h5,
.opportunity-card h6 {
    font-size: 1.25rem;
}

/* ---------- Respect a reduced-motion preference ---------- */
/* The card lift on hover is decoration. Some older users run this setting
   because motion is uncomfortable, not merely unfashionable. */
@media (prefers-reduced-motion: reduce) {
    .opportunity-card {
        transition: none;
    }
    .opportunity-card:hover {
        transform: none;
    }
}

/* ---------- Interest filter pills (matching) ---------- */
/* A multi-select dropdown is the obvious control and the wrong one here. It
   hides the options until tapped, needs a precise tap to open, and on a phone
   hands the user the OS picker. These are ordinary checkboxes wearing a pill,
   so every option is visible, the whole pill is the target, and it works with
   no JavaScript at all. Item I's 44px floor applies. */
.interest-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.interest-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 2px solid #ced4da;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.2;
    color: #212529;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.interest-pill:hover {
    border-color: var(--hub-primary, #15803d);
}

/* The checkbox itself is hidden, so the pill must carry the state visibly.
   Colour alone is not enough: the border weight changes too, for anyone who
   cannot separate the two greens. */
.interest-pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.interest-pill.is-checked,
.interest-pill:has(input:checked) {
    background: var(--hub-primary, #15803d);
    border-color: var(--hub-primary, #15803d);
    color: #fff;
    font-weight: 600;
}

/* Keyboard users get the same ring everything else has. */
.interest-pill:focus-within {
    outline: 3px solid var(--hub-primary, #15803d);
    outline-offset: 2px;
}

/* ---------- Why a card matched ---------- */
.match-reason {
    font-size: 1rem;
    color: #14532d;
    background: #f0fdf4;
    border-left: 3px solid var(--hub-primary, #15803d);
    padding: 0.4rem 0.7rem;
    border-radius: 0.25rem;
}

/* ---------- Small screens ---------- */
/* A senior on a phone is the hardest case: smallest text, least steady tap.
   Full-width primary buttons remove the aiming problem entirely. */
@media (max-width: 575.98px) {
    html {
        font-size: 17px;
    }
    .hero-section h1 {
        font-size: 1.85rem;
    }
    .btn-lg,
    .hero-section .btn {
        width: 100%;
        margin-bottom: 0.6rem;
    }
    .card-body {
        padding: 1.1rem;
    }
}