/* Mince Pie Rank theme - layered over Bootstrap 5.3.
   Public pages (body.mpr-public) get the frosted-glass look;
   admin pages (body.mpr-admin) are left on stock Bootstrap. */

:root {
    --mpr-bg: #c0e1ff;
    --mpr-ink: #111;
    --mpr-ink-soft: #222;

    /* frosted glass recipe */
    --mpr-frost-bg: rgba(255, 255, 255, 0.2);
    --mpr-frost-panel: rgba(255, 255, 255, 0.3);
    --mpr-frost-active: rgba(255, 255, 255, 0.35);
    --mpr-frost-chip: rgba(255, 255, 255, 0.4);
    --mpr-frost-border: 1px solid rgba(255, 255, 255, 0.3);
    --mpr-frost-blur: blur(5px);
    --mpr-shadow-panel: 0 4px 30px rgba(0, 0, 0, 0.1);
    --mpr-shadow-card: 0.2em 0.1em 0.5em rgba(0, 0, 0, 0.1);
}

/* no backdrop-filter (older Firefox/Safari, effects disabled): frosted
   panels can't blur what is behind them, so they get more opaque instead
   of translucent, keeping text legible without the blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --mpr-frost-bg: rgba(255, 255, 255, 0.75);
        --mpr-frost-panel: rgba(255, 255, 255, 0.85);
        --mpr-frost-active: rgba(255, 255, 255, 0.85);
        --mpr-frost-chip: rgba(255, 255, 255, 0.9);
    }
}

/* light blue page background and ink, public pages only */
body.mpr-public {
    --bs-body-bg: var(--mpr-bg);
    --bs-body-color: var(--mpr-ink);
    --bs-emphasis-color: var(--mpr-ink);
    --bs-link-color: var(--mpr-ink);
    --bs-link-hover-color: #000;
    --bs-secondary-color: #444;
}

/* the snow layer (rendered server-side only on public pages while the
   year is active): behind every surface, above the flat background, and
   carrying the old sky gradient the snowflakes fall against */
#canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #c0e1ff 0%, #8ec8ff 84%);
}

/* reusable frosted surface; components pick it up in later phases */
.mpr-frost {
    background: var(--mpr-frost-bg);
    backdrop-filter: var(--mpr-frost-blur);
    -webkit-backdrop-filter: var(--mpr-frost-blur);
    border: var(--mpr-frost-border);
    box-shadow: var(--mpr-shadow-panel);
}

/* ---------- Navigation (public pages) ---------- */

/* the drawer: full-height frosted overlay, slid up from the bottom until
   opened. at desktop widths the transform/visibility below is overridden and
   the state classes have no visual effect. */
.mpr-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    color: var(--mpr-ink);
    border: none;
    border-right: var(--mpr-frost-border);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.2s ease-out, visibility 0.2s;
}

.mpr-menu.is-open {
    transform: translateY(0);
    visibility: visible;
}

.mpr-menu-links {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* let the flex child actually shrink so the scroll ever kicks in
       on long link lists / short viewports (matters in the old design too) */
    min-height: 0;
}

.mpr-menu-brand {
    padding: 1em;
    font-size: 1.25em;
    font-weight: bold;
    text-decoration: none;
    color: var(--mpr-ink);
}

.mpr-menu-links a {
    padding: 1em;
    font-weight: bold;
    text-decoration: none;
    color: var(--mpr-ink);
}

.mpr-menu-links a:hover,
.mpr-menu-footer a:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.mpr-menu-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    border-top: var(--mpr-frost-border);
}

.mpr-menu-footer a {
    padding: 1em;
    font-weight: bold;
    text-decoration: none;
    color: var(--mpr-ink);
}

.mpr-menu-close {
    padding: 1em;
    font-weight: bold;
    color: var(--mpr-ink);
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
}

.mpr-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* the bottom pill that opens the drawer (mobile only) */
.mpr-menu-pill {
    position: fixed;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    width: 8em;
    border: none;
    border-radius: 2em;
    padding: 0.75em 1em;
    font-weight: bold;
    color: var(--mpr-ink);
    cursor: pointer;
}

/* page content never scrolls behind an open overlay; the pill hides itself
   behind the overlay like the old design, the drawer's Close button (or Esc)
   closes it again */
@media (max-width: 991.98px) {
    body.mpr-public.mpr-menu-open {
        overflow: hidden;
    }

    body.mpr-public.mpr-menu-open .mpr-menu-pill {
        display: none;
    }
}

/* desktop: the drawer becomes a permanent left-mounted rail */
@media (min-width: 992px) {
    .mpr-menu {
        width: 320px;
        transform: none;
        visibility: visible;
    }

    .mpr-menu-pill {
        display: none;
    }

    /* nothing to close on the static rail */
    .mpr-menu-close {
        display: none;
    }

    body.mpr-public .mpr-main {
        margin-left: 320px;
    }
}

/* ---------- Surfaces (public pages) ---------- */

/* cards are frosted panels with a softer shadow than the nav */
.mpr-public .card {
    --bs-card-border-radius: 1em;
    background: var(--mpr-frost-bg);
    backdrop-filter: var(--mpr-frost-blur);
    -webkit-backdrop-filter: var(--mpr-frost-blur);
    border: var(--mpr-frost-border);
    box-shadow: var(--mpr-shadow-card);
}

/* pie-card CTA sits at the bottom of the card so the buttons form a clean
   line across the grid, regardless of how much text each card carries */
.mpr-public .card-body {
    display: flex;
    flex-direction: column;
}

.mpr-public .card-body > .btn {
    margin-top: auto;
}

/* breadcrumb: a frosted bar with the old wrap/gap layout */
.mpr-public .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(17, 17, 17, 0.5);
    background: var(--mpr-frost-bg);
    backdrop-filter: var(--mpr-frost-blur);
    -webkit-backdrop-filter: var(--mpr-frost-blur);
    border: var(--mpr-frost-border);
    box-shadow: var(--mpr-shadow-panel);
    border-radius: 0.5em;
    padding: 0.75em 1em;
    flex-wrap: wrap;
}

.mpr-public .breadcrumb-item a {
    color: var(--mpr-ink);
    font-weight: bold;
}

/* buttons: frosted everywhere, border weight communicates the variant.
   active filter chips (btn-dark) read like the old .filters a.selected */
.mpr-public .btn {
    color: var(--mpr-ink);
    font-weight: bold;
    background: var(--mpr-frost-bg);
    backdrop-filter: var(--mpr-frost-blur);
    -webkit-backdrop-filter: var(--mpr-frost-blur);
}

.mpr-public .btn-primary {
    border: 1px solid rgba(17, 17, 17, 0.3);
    border-radius: 1em;
}

.mpr-public .btn-primary:hover,
.mpr-public .btn-primary:focus-visible {
    background: rgba(255, 255, 255, 0.55);
    border-color: #111;
    color: #111;
}

.mpr-public .btn-outline-secondary,
.mpr-public .btn-outline-primary {
    border: 1px dotted #666;
    border-radius: 0.5em;
}

.mpr-public .btn-outline-secondary:hover,
.mpr-public .btn-outline-secondary:focus-visible,
.mpr-public .btn-outline-primary:hover,
.mpr-public .btn-outline-primary:focus-visible {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid #111;
    color: #111;
}

.mpr-public .btn-dark {
    background: var(--mpr-frost-active);
    border: 1px solid #111;
    border-radius: 0.5em;
}

.mpr-public .btn-dark:hover,
.mpr-public .btn-dark:focus-visible {
    background: rgba(255, 255, 255, 0.55);
    color: #111;
}

/* category chips inside pie cards: the old mini-category-link pills */
.mpr-public .badge.bg-secondary {
    background: var(--mpr-frost-chip);
    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: 1em;
    color: var(--mpr-ink);
    font-weight: bold;
    padding: 0.4em 0.8em;
}

/* whole-form panels (submit/edit) sit slightly stronger so inputs read well */
.mpr-public .mpr-form-panel {
    background: var(--mpr-frost-panel);
    backdrop-filter: var(--mpr-frost-blur);
    -webkit-backdrop-filter: var(--mpr-frost-blur);
    border: var(--mpr-frost-border);
    box-shadow: var(--mpr-shadow-panel);
    border-radius: 1em;
    padding: 1.5em;
}

.mpr-public .form-control,
.mpr-public .form-select {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(17, 17, 17, 0.25);
    border-radius: 0.5em;
    color: var(--mpr-ink);
}

.mpr-public .form-control:focus,
.mpr-public .form-select:focus {
    background-color: #fff;
    border-color: #111;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.mpr-public .form-label {
    color: var(--mpr-ink);
    font-weight: bold;
}