/* ============================================================
   RAUARING — client skin
   This file is Rauaring's alone. It is not part of the system and
   nothing here belongs in _STARTER-template: another client on the
   same theme pack keeps the neutral grey chrome and the light card.

   All it does is take the light background off the content area and
   set the type in light grey, so the whole site reads dark. It runs
   in both theme packs, so switching chrome never changes the palette.
   ============================================================ */

:root {
    --bg-primary: #2a2a2b;      /* the ground everything sits on */
    --bg-content: transparent;  /* no content card — this is the whole trick */
    --accent: #bfd730;
    --text-primary: #e2e3e4;
    --text-heading: #f2f3f4;
    --text-link: #ffffff;
    --text-meta: #9a9b9c;
    --menu-item-color: #e2e3e4;
    /* The Puuram monogram in the sidebar foot is filled with this. It ships as
       near-black for a light panel; on this palette that is the panel colour,
       and the logo simply vanished. */
    --icon-color: rgba(226, 227, 228, 0.28);
    --menu-icon-color: #e2e3e4;
    --transition-logo-opacity: 0.16;
}

/* The card is drawn in css/style.css for a light content area: a pale
   background with dark text on it. Losing the background is half the job —
   the type it was drawn against has to come back up with it. */
.content-wrapper {
    background: transparent;
    box-shadow: none;
    color: var(--text-primary);
}

.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4,
.content-wrapper h5,
.content-wrapper h6 { color: var(--text-heading); }

/* The system draws h1 at -0.06em, which is set for a display face on a light
   card. Museo Sans and DM Sans both want more air than that at this size. */
.content-wrapper h1 { letter-spacing: -0.03em; }

/* Section headings run 15% smaller than the system draws them: on a page with
   no card holding it, an h2 that size competes with the h1. */
.content-wrapper h2 { font-size: 1.87rem; }

.content-wrapper a { color: var(--text-link); }
.content-wrapper .kicker { color: var(--accent); }

.content-wrapper .wp-block-image figcaption,
.content-wrapper .image-caption { color: var(--text-meta); }

/* Buttons and the prev/next footer were outlined in black for the light card. */
.content-wrapper .download-btn,
.content-wrapper .download-all-btn,
.content-wrapper .link-btn,
.content-wrapper .page-nav-btn {
    color: var(--text-meta);
    border-color: rgba(255, 255, 255, 0.25);
}

.content-wrapper .download-btn:hover,
.content-wrapper .download-all-btn:hover,
.content-wrapper .link-btn:hover,
.content-wrapper .page-nav-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

/* The sidebar's logo slot is a square that grows from 60px to 280px. The mark
   is round, so filling that square edge to edge leaves it no air at all — it
   sits at half the square, centred. */
html.theme-sidebar #brand-logo[data-logo="mark"] {
    width: 50%;
    height: 50%;
}

/* Sidebar theme only: its active entry is darkened against the dark panel,
   which on this palette reads as switched off. Give it the green instead. */
html.theme-sidebar .site-menu .menu-item.active > a > .menu-text {
    color: var(--accent);
}

/* ===== Page-change swash =====
   The system sweeps its artwork diagonally across the screen. A ring has no
   direction to sweep in — off-centre it just looks nudged — so this one stays
   put and turns through 45° instead. Square artwork, so the box has to be told
   its ratio or the template's wide La Prima proportion flattens it.

   Both keyframe sets are redefined here rather than patched: an animation is
   one name, and overriding half of @keyframes swash is not a thing. */
.transition-logo {
    width: min(105vh, 105vw);
    aspect-ratio: 1;
}

@keyframes swash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    35%, 65% {
        opacity: var(--transition-logo-opacity);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    @keyframes swash-still {
        0%, 100% { opacity: 0; }
        25%, 75% { opacity: var(--transition-logo-opacity); }
    }
}