/**
 * meerkat-brand.css — the meerkat mark, site-wide
 *
 * Three things live here:
 *   1. .meerkat-brand   the colour mark sitting behind "Meerkatdatabase 2.0"
 *                       in the top navbar
 *   2. .meerkat-mark    a reusable monochrome mark that flips black/white with
 *                       the palette
 *   3. .meerkat-spinner the house loading indicator (see meerkatSpinner.js)
 *
 * Assets — /includes/img/
 *   meerkat-mark-colour.png   the photograph, cut out          (nav watermark)
 *   meerkat-mark-black.png    high-contrast, dark ink          (light palette)
 *   meerkat-mark-white.png    high-contrast, light ink         (dark palette)
 *   ...-128.png               half-size copies for small uses
 * All three are derived from MK2.ico; the monochrome pair is posterised so the
 * eye mask, ear and muzzle still read at 24px.
 *
 * Dark palette hook: `rota-dark` on <html>. When dark mode goes site-wide,
 * add that page's hook to the selectors marked DARK HOOK below and nothing
 * else has to change.
 */

/* ═══════════════════════════════════════════════ 1. navbar brand watermark */

.navbar .navbar-brand.meerkat-brand {
    position: relative;
    z-index: 0;
    /* The text clears the mark with a little air: the head spans 0.15rem to
       2.55rem, so the text starts at 2.9rem. */
    padding-left: 2.9rem;
    display: inline-flex;
    align-items: center;
    /* No min-height: forcing one made the brand taller than the navbar's own
       line box, which pushed the bar down over the page content below it. */
}

.navbar .navbar-brand.meerkat-brand::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    /* Never taller than the navbar, so it cannot hang over the page below */
    height: 2.4rem;
    max-height: 100%;
    background: url('/includes/img/meerkat-mark-colour.png') no-repeat left center;
    background-size: contain;
    /* 0.55 keeps the animal readable while the brand text, which sits clear of
       it in the padding, stays at full strength. Even directly over the
       brightest pixel of the mark, white text holds 7.2:1 — WCAG 2.1 1.4.3
       wants 4.5:1. */
    opacity: 0.55;
    z-index: -1;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════ 2. reusable mono mark */

.meerkat-mark {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background: url('/includes/img/meerkat-mark-black.png') no-repeat center;
    background-size: contain;
}

/* DARK HOOK */
html.rota-dark .meerkat-mark {
    background-image: url('/includes/img/meerkat-mark-white.png');
}

/* ═══════════════════════════════════════════════════════════ 3. spinner */

.meerkat-spinner {
    --ms-size: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.meerkat-spinner__ring {
    position: relative;
    width: var(--ms-size);
    height: var(--ms-size);
    display: grid;
    place-items: center;
}

/* The ring turns; the meerkat does not. A rotating head reads as a glitch,
   a rotating ring reads as waiting. */
.meerkat-spinner__ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(139, 115, 85, 0.25);   /* earth, faint */
    border-top-color: #C17F59;                    /* terracotta, the moving arc */
    animation: meerkat-spin 1s linear infinite;
}

.meerkat-spinner__mark {
    width: calc(var(--ms-size) * 0.66);
    height: calc(var(--ms-size) * 0.66);
    background: url('/includes/img/meerkat-mark-black-128.png') no-repeat center;
    background-size: contain;
}

.meerkat-spinner__label {
    font-size: 1.05rem;
    font-weight: 700;
    color: #3D3228;                 /* chrome brown on sand: 10.97:1 */
    text-align: center;
}

.meerkat-spinner__caption {
    font-size: 0.95rem;
    font-weight: 600;
    color: #4A3B2C;                 /* earth on white: 10.75:1, on sand 9.47:1 */
    letter-spacing: 0.01em;
    min-height: 1.2em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Card variant: the spinner brings its own background, so whatever is behind
   it does not have to be tinted dark for it to be readable. Used by the
   session tracker's full-screen waits. */
.meerkat-spinner--card {
    background: #F5F0E6;            /* Kalahari cream */
    border: 1px solid #D4B896;      /* sand edge */
    border-radius: 14px;
    padding: 1.6rem 2.2rem;
    box-shadow: 0 10px 30px rgba(30, 24, 17, 0.25);
    gap: 0.75rem;
}

.meerkat-spinner--card .meerkat-spinner__label {
    margin-top: 0.2rem;
}

/* Terracotta is only 2.87:1 on the cream card, under the 3:1 WCAG 2.1 1.4.11
   asks of a non-text indicator - and the turning arc IS the indicator. Rust
   on cream is 4.00:1. */
.meerkat-spinner--card .meerkat-spinner__ring::before {
    border-color: rgba(139, 115, 85, 0.3);
    border-top-color: #B85C38;
}

/* A card carries its own contrast, so it keeps the dark mark even when it is
   sitting on a dimmed page. */
.meerkat-spinner--card.meerkat-spinner--light .meerkat-spinner__mark {
    background-image: url('/includes/img/meerkat-mark-black-128.png');
}
.meerkat-spinner--card.meerkat-spinner--light .meerkat-spinner__label { color: #3D3228; }
.meerkat-spinner--card.meerkat-spinner--light .meerkat-spinner__caption { color: #4A3B2C; }

/* Light ink, for a spinner sitting on a dark scrim (the full-screen overlays
   in sessionTracker.php, for one). White on rgba(0,0,0,0.5) over any page is
   at least 9:1. */
.meerkat-spinner--light .meerkat-spinner__mark {
    background-image: url('/includes/img/meerkat-mark-white-128.png');
}
.meerkat-spinner--light .meerkat-spinner__caption {
    color: #F7F1E6;
}
.meerkat-spinner--light .meerkat-spinner__ring::before {
    border-color: rgba(247, 241, 230, 0.25);
    border-top-color: #E0A578;
}

/* DARK HOOK */
html.rota-dark .meerkat-spinner__mark {
    background-image: url('/includes/img/meerkat-mark-white-128.png');
}
html.rota-dark .meerkat-spinner__caption {
    color: var(--k-text-dim, #D9C4A5);   /* 9.34:1 on the dark surface */
}
html.rota-dark .meerkat-spinner__ring::before {
    border-color: rgba(217, 196, 165, 0.22);
    border-top-color: var(--k-today-accent, #C17F59);
}

@keyframes meerkat-spin {
    to { transform: rotate(360deg); }
}

/* Fallback for a placeholder that has not been upgraded yet - between the
   markup rendering and meerkatSpinner.js running, and permanently if the
   script ever fails to load. Without this a placeholder would be an empty
   div, which is worse than the Bootstrap spinner it replaced. The attribute
   is removed on upgrade, so this styling gets out of the way by itself. */
[data-meerkat-spinner] {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

[data-meerkat-spinner]::after {
    content: "";
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 3px solid rgba(139, 115, 85, 0.25);
    border-top-color: #C17F59;
    animation: meerkat-spin 1s linear infinite;
}

/* Respect a reduced-motion preference: the ring stops turning and simply
   sits there, and the caption still tells the viewer something is happening
   (WCAG 2.1 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    .meerkat-spinner__ring::before {
        animation: none;
        border-top-color: #C17F59;
    }
}

@media print {
    .meerkat-spinner { display: none !important; }
    .navbar .navbar-brand.meerkat-brand::before { display: none !important; }
}