/*
 * Theme Name: Xena Central
 * Author: Ariane
 * Design URI: https://www.unloved-heart.net
 */

/* ============================================================
   Lumora Gallery — Xena Central Theme
   style.css

   Derived from the classic-fansite starter (see its own README.md
   for the general customisation recipe) — same --fs-* and --lum-*
   variable slots and required component classes, re-themed with a
   warrior-and-bard palette (weathered stone, bronze/gold-to-teal
   gradient) and typography matching the sibling Lumora Press theme
   "Xena Central" (custom themes/xena-theme in the Lumora Press
   project), plus that theme's own signature touches not present in
   Lumora Gallery's bundled themes: a lighter two-stop gradient for
   small hover accents (nav links, pagination), warm-tinted (rather
   than neutral black) card hover shadows, and colored strong/em
   emphasis in description text.

   All customisation hooks are still CSS custom properties in :root,
   same as classic-fansite — see that theme's README.md for the
   override-via-custom.css pattern if this theme is ever forked again.
   ============================================================ */

/* ── Customisation variables ──────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Primary accent — bronze, echoing the banner's own armor */
  --fs-accent:             #a3672e;
  --fs-accent-light:       #c9974d;
  --fs-accent-text:        #ffffff;

  /* Foreground/text-safe accent tokens — see classic-fansite's own
     comment on why these stay separate from --fs-accent/-light. */
  --fs-accent-ink:         var(--fs-accent);
  --fs-accent-ink-hover:   #7a4a1c;

  /* A plainer two-stop gradient (lighter red/orange to lighter
     green/blue) for small accents — nav-link hover, the active
     pagination pill — where the full bronze-to-teal sweep below
     would be too busy crammed into a couple inches of width. Ported
     from the sibling Lumora Press theme; classic-fansite/default have
     no equivalent gradient accent at all. */
  --fs-accent-grad-light:  linear-gradient(90deg, #e88a5c 0%, #5cb3c2 100%);

  /* The full bronze -> gold -> teal sweep, for larger fills (section
     headings, the banner's own fallback background before the image
     loads, the nav/footer top border). */
  --fs-accent-grad:        linear-gradient(90deg,
                             #7a4a1c 0%, #a3672e 18%, #c9974d 36%,
                             #b3a878 50%, #8fa084 64%, #57907f 80%,
                             #3f7d6e 92%, #2b5c50 100%);

  /* Page shell — no separate dark outer frame in light mode (unlike
     classic-fansite's own centered-panel-on-a-dark-margin layout):
     --fs-page-bg matches --fs-body-bg exactly, so the sibling Lumora
     Press theme's flat, full-width light background carries over here
     too. Dark mode still darkens the outer frame slightly (see below). */
  --fs-page-bg:            var(--fs-body-bg);
  --fs-body-bg:            #f6f1e7;
  --fs-panel-bg:           #fffdf8;
  --fs-panel-border:       #ddd0b3;

  /* Navigation — a light card-coloured bar (matching the Press theme's
     own header), not classic-fansite's dark band. */
  --fs-nav-bg:             var(--fs-panel-bg);
  --fs-nav-link:           var(--fs-muted);
  --fs-nav-link-hover:     #ffffff;
  --fs-nav-border:         rgba(0,0,0,.08);

  /* Banner — no fixed height; the image's own aspect ratio decides,
     framed as a rounded, padded card (see .fs-banner-bg/-img below)
     rather than classic-fansite's edge-to-edge crop. */
  --fs-banner-bg:          var(--fs-accent-grad);
  --fs-banner-title-color: #ffffff;
  --fs-banner-title-size:  2.2rem;

  /* Section headings */
  --fs-section-bg:         var(--fs-accent-grad);
  --fs-section-text:       var(--fs-accent-text);

  /* Footer — light, matching the nav bar rather than classic-fansite's
     dark footer. */
  --fs-footer-bg:          var(--fs-panel-bg);
  --fs-footer-text:        var(--fs-muted);

  /* Layout */
  --fs-max-width:          1100px;
  --fs-radius:             8px;
  --fs-font-family:        'EB Garamond', Georgia, serif;
  --fs-font-display:       'Cinzel', Georgia, serif;
  --fs-font-ui:            'Nunito Sans', system-ui, sans-serif;

  /* Thumbnail grid (consumed by lum-thumbgrid) — a slightly airier
     gap than classic-fansite's default, matching the sibling Press
     theme's generous card spacing. */
  --lum-thumb-min:         150px;
  --lum-gap:               .75rem;

  /* Content-area text tokens (light defaults) */
  --fs-text:               #2a2420;
  --fs-muted:              #93866f;
  --fs-head-text:          #2a2420;
  /* The gradient's own teal stop, as a solid colour — for accents
     (card hover ring) that want real teal rather than a light tint. */
  --fs-accent-teal:        #3f7d6e;
  /* A soft teal-cream blend rather than flat parchment — pairs with
     --fs-head-text below for the thumbnail info bar instead of the
     old muddy --fs-muted-on-cream combination. */
  --fs-thumb-cap-bg:       #e3ece7;
  --fs-sort-bg:            var(--fs-panel-bg);
  /* Card-meta row tints, each pulled from a different stop of
     --fs-accent-grad (bronze -> gold -> sage -> teal) so Images/Views/
     Date read as three genuinely distinct hues along the theme's own
     gradient rather than two near-identical parchment tones plus one
     teal — the previous --fs-card-tint-neutral/-warm pairing read as
     "very cream/brown" overall. --fs-card-tint-neutral/-warm are kept
     as-is (still used by .lum-card-albums/.lum-catlist-even/etc.),
     these three are additive. */
  --fs-card-tint-blue:     #dfeee9;
  --fs-card-tint-sage:     #e3ecdf;
  --fs-card-tint-gold:     #f3ddab;
  --fs-card-tint-neutral:  #ede3cd;
  --fs-card-tint-warm:     #f6e6d2;
  --fs-catlist-even:       #ede3cd;
  --fs-catlist-hover:      #f6e6d2;

  /* Keyboard focus ring — its own token so it can be tuned per mode. */
  --fs-focus-ring:         var(--fs-accent);

  /* Warm-tinted shadow color (replaces classic-fansite's neutral
     black rgba(0,0,0,..) on card hover) — matches the sibling Press
     theme's own warm shadow tone exactly. */
  --fs-shadow-color:       42, 33, 20;

  /* PhotoSwipe v5's own theming tokens — unaffected by data-bs-theme,
     since the lightbox is always dark chrome regardless of the site's
     colour mode (same as every other Lumora theme). */
  --pswp-bg:                       #201a12;
  --pswp-icon-color:               #f6e6d2;
  --pswp-icon-color-secondary:     #c9974d;
}

/* ── Dark mode overrides ──────────────────────────────────── */
/* The outer page shell (--fs-page-bg, nav, footer) is already dark, */
/* so only the inner content area changes. */
html[data-bs-theme="dark"] {
  color-scheme: dark;

  --fs-body-bg:            #1a1815;
  --fs-panel-bg:           #26221c;
  --fs-panel-border:       #3c362b;
  --fs-text:               #ede4d2;
  --fs-muted:              #96876e;
  --fs-head-text:          #ede4d2;
  /* Brightened for visibility against dark surfaces, same relationship
     --fs-accent-ink's own light->dark brightening already has. */
  --fs-accent-teal:        #5cb3a0;
  /* A dark teal tint distinct from the page background below, instead
     of matching it exactly (which left the caption bar with no real
     background of its own in dark mode). */
  --fs-thumb-cap-bg:       #182420;
  --fs-sort-bg:            #26221c;
  --fs-card-tint-blue:     #173330;
  --fs-card-tint-sage:     #1d2f22;
  --fs-card-tint-gold:     #4a3a12;
  --fs-card-tint-neutral:  #221f1a;
  --fs-card-tint-warm:     #3a2c17;
  --fs-catlist-even:       #221f1a;
  --fs-catlist-hover:      #3a2c17;
  /* Slightly darker outer frame in dark mode */
  --fs-page-bg:            #14100a;
  --fs-nav-border:         rgba(255,255,255,.12);

  /* --fs-accent (#a3672e) already reads fine as text/link colour, but
     a lighter tint keeps every text/link/border use comfortably above
     4.5:1 against the dark content-area surfaces above. */
  --fs-accent-ink:         #d99a52;
  --fs-accent-ink-hover:   #e8b06e;
  --fs-focus-ring:         #d99a52;
}

/* ── Reset / base ─────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

/* ============================================================
   Accessibility — keyboard focus visibility
   ============================================================ */
.fs-body a:focus-visible,
.fs-body button:focus-visible,
.fs-body input:focus-visible,
.fs-body select:focus-visible,
.fs-body textarea:focus-visible,
.fs-body [tabindex]:focus-visible {
  outline: 2px solid var(--fs-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Layout
   ============================================================ */

/* ── Page shell ───────────────────────────────────────────── */
.fs-body {
  background: var(--fs-page-bg);
  min-height: 100vh;
  font-family: var(--fs-font-family);
  color: var(--fs-text);
  margin: 0;
  padding: 0;
}

/* Full-width shell, matching the sibling Press theme — no centered
   fixed-width panel/box-shadow "floating card on a dark margin" look.
   Each section below (banner, nav, main, footer) centers its own inner
   content instead. */
.fs-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Site network bar ─────────────────────────────────────── */
/* Links out to the wider xenacentral.com site network, above the
   banner. Originally an always-dark strip ported from the sibling
   xena-theme (that theme's own predecessor); restyled to match the
   sibling Lumora Press theme's own primary nav bar instead (light
   card-coloured background, gradient underline, uppercase
   letter-spaced links, gradient-pill hover) — the same look .fs-nav
   below already borrows from that theme. Every value here is a plain
   --fs-* token that's already redefined for dark mode elsewhere in
   this file, so this bar now goes light/dark automatically along with
   the rest of the page, with no separate dark override block needed
   (matching how the Press theme's own .lp-site-header needs none
   either). The "current site" indicator (.fs-topnav-active) is a real
   feature this bar has that Press's own nav doesn't need — kept, just
   recoloured to stay legible on the new light background. */
.fs-topnav {
  background: var(--fs-nav-bg);
  border-bottom: 3px solid transparent;
  border-image: var(--fs-accent-grad) 1;
}

.fs-topnav-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  justify-content: center;
  margin: 0 auto;
  max-width: var(--fs-max-width);
  padding: .4rem 1rem;
}

.fs-topnav-group {
  display: flex;
  flex-wrap: wrap;
}

.fs-topnav-link {
  border-radius: var(--fs-radius);
  color: var(--fs-nav-link);
  display: inline-block;
  font-family: var(--fs-font-ui);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  padding: .4rem .85rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, color .2s;
  white-space: nowrap;
}

.fs-topnav-link:hover {
  background: var(--fs-accent-grad-light);
  color: #fff;
}

.fs-topnav-active {
  color: var(--fs-accent-ink) !important;
  font-weight: 700;
  position: relative;
}

.fs-topnav-active::after {
  background: var(--fs-accent-grad);
  bottom: -1px;
  content: '';
  height: 2px;
  left: .85rem;
  position: absolute;
  right: .85rem;
}

@media (max-width: 575px) {
  .fs-topnav-inner {
    justify-content: flex-start;
  }

  .fs-topnav-link {
    font-size: .7rem;
    padding: .3rem .6rem;
  }
}

/* ── Banner ───────────────────────────────────────────────── */
/* A rounded, padded image card sitting on the page background — same
   treatment as the sibling Press theme's own banner, replacing
   classic-fansite's edge-to-edge crop with a dark text scrim. No fixed
   height: the image's own aspect ratio decides. Light mode keeps its
   original solid-color `outline` frame; dark mode gets its own
   override below (a slim bronze-to-teal gradient frame — the
   .fs-banner-bg background peeking out through its own padding, since
   border-image doesn't support border-radius — plus a warmer glowing
   shadow), because both the flat outline color (--fs-panel-bg) and the
   original elevation shadow (built for casting on a light surface) go
   nearly invisible against the dark palette. Ported from the sibling
   Press theme's identical .xc-banner__link/.xc-banner__image fix,
   adapted to this theme's own .fs-banner-bg wrapper (a plain <div>,
   not an <a>) and its single html[data-bs-theme="dark"] switch (no
   separate prefers-color-scheme media query needed — this theme has no
   "system default" state, unlike Press's three-way toggle). */
.fs-banner {
  background: var(--fs-body-bg);
  padding: 1.5rem 1.5rem 2rem;
}

.fs-banner-bg {
  max-width: var(--fs-max-width);
  margin: 0 auto;
  line-height: 0;
}

.fs-banner-bg img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 16px 36px rgba(var(--fs-shadow-color),.28);
  outline: 3px solid var(--fs-panel-bg);
  outline-offset: -3px;
}

html[data-bs-theme="dark"] .fs-banner-bg {
  background: var(--fs-accent-grad);
  border-radius: 16px;
  padding: 3px;
}

html[data-bs-theme="dark"] .fs-banner-bg img {
  border-radius: 13px;
  outline: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 42px -10px rgba(217, 154, 82, 0.4),
    0 0 42px -10px rgba(92, 179, 160, 0.25);
}

/* Hidden — images/header.png already carries its own carved-stone
   title treatment ("XENA CENTRAL"), so overlaying the dynamic
   {GALLERY_NAME}/{GALLERY_DESCRIPTION} text (and classic-fansite's own
   dark scrim behind it) on top would be visually redundant. The markup
   itself stays in template.html for visitors with CSS disabled. */
.fs-banner-text {
  display: none;
}

@media (max-width: 575px) {
  .fs-banner-bg img { border-radius: 10px; }
}

@media (max-width: 575px) {
  html[data-bs-theme="dark"] .fs-banner-bg {
    border-radius: 12px;
    padding: 2px;
  }

  html[data-bs-theme="dark"] .fs-banner-bg img {
    border-radius: 10px;
  }
}

/* ── Navigation ───────────────────────────────────────────── */
/* A light card-coloured bar (matching the Press theme's own header),
   not classic-fansite's dark band — its own inner content stays
   centered under the full-width bar the same way .fs-main/.fs-footer's
   inner content do. */
.fs-nav {
  background: var(--fs-nav-bg);
  border-bottom: 3px solid transparent;
  border-image: var(--fs-accent-grad) 1;
  position: sticky;
  top: 0;
  z-index: 100;
}

.fs-nav-inner {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  max-width: var(--fs-max-width);
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.fs-nav-inner::-webkit-scrollbar { display: none; }

.fs-nav-link {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1.05rem;
  color: var(--fs-nav-link);
  text-decoration: none;
  font-family: var(--fs-font-ui);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .015em;
  white-space: nowrap;
  border-right: 1px solid var(--fs-nav-border);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}

.fs-nav-link:first-child { border-left: 1px solid var(--fs-nav-border); }

.fs-nav-link:hover {
  background: var(--fs-accent-grad-light);
  color: var(--fs-nav-link-hover);
}

/* {NAVIGATION} (ThemeRenderer::renderNav()) markup, styled to look
   identical to the .fs-nav-link chips above. */
.fs-nav-inner .navbar-nav {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fs-nav-inner .nav-item {
  display: flex;
}

.fs-nav-inner .nav-link {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1.05rem;
  color: var(--fs-nav-link);
  text-decoration: none;
  font-family: var(--fs-font-ui);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .015em;
  white-space: nowrap;
  border-right: 1px solid var(--fs-nav-border);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}

.fs-nav-inner .nav-item:first-child .nav-link {
  border-left: 1px solid var(--fs-nav-border);
}

.fs-nav-inner .nav-link:hover {
  background: var(--fs-accent-grad-light);
  color: var(--fs-nav-link-hover);
}

.fs-nav-admin {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .6rem;
  flex-shrink: 0;
}

.lum-admin-link {
  color: var(--fs-muted) !important;
  font-family: var(--fs-font-ui);
  font-size: .78rem;
  text-decoration: none;
  padding: .28rem .6rem;
  border: 1px solid var(--fs-nav-border);
  border-radius: var(--fs-radius);
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}

.lum-admin-link:hover {
  color: var(--fs-accent-ink) !important;
  border-color: var(--fs-accent-ink);
}

/* ── Colour-mode toggle (in nav) ──────────────────────────── */
.lum-color-toggle {
  background: transparent;
  border: 1px solid var(--fs-nav-border);
  border-radius: var(--fs-radius);
  color: var(--fs-muted);
  cursor: pointer;
  font-family: var(--fs-font-ui);
  font-size: .78rem;
  padding: .25rem .5rem;
  line-height: 1.4;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
}

.lum-color-toggle:hover {
  color: var(--fs-accent-ink);
  border-color: var(--fs-accent-ink);
}

/* ── Main content ─────────────────────────────────────────── */
.fs-main {
  flex: 1;
  max-width: var(--fs-max-width);
  margin: 0 auto;
  width: 100%;
  padding: 1.5rem;
}

/* ── Footer ───────────────────────────────────────────────── */
/* Light, matching the nav bar, rather than classic-fansite's dark
   footer — same reasoning as the nav bar above. */
.fs-footer {
  background: var(--fs-footer-bg);
  color: var(--fs-footer-text);
  text-align: center;
  padding: .8rem 1rem;
  font-family: var(--fs-font-ui);
  font-size: .82rem;
  border-top: 3px solid transparent;
  border-image: var(--fs-accent-grad) 1;
}

.fs-footer a {
  color: var(--fs-accent-ink);
  text-decoration: none;
}

.fs-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ============================================================
   Typography
   ============================================================ */
.fs-main { color: var(--fs-text); }

.fs-main h1, .fs-main h2, .fs-main h3,
.fs-main h4, .fs-main h5, .fs-main h6 {
  color: var(--fs-head-text);
  font-family: var(--fs-font-display);
  font-weight: 600;
}

.fs-main a { color: var(--fs-accent-ink); }
.fs-main a:hover, .fs-main a:focus { color: var(--fs-accent-ink-hover); }

.fs-main ul, .fs-main ol { color: var(--fs-text); }

.fs-main blockquote {
  border-left: 3px solid var(--fs-accent);
  padding: .5rem 1rem;
  margin: 1rem 0;
  color: var(--fs-muted);
  font-style: italic;
}

.fs-main code, .fs-main kbd, .fs-main samp {
  background: var(--fs-card-tint-neutral);
  color: var(--fs-text);
  border-radius: .25rem;
  padding: .1rem .3rem;
}

.fs-main pre {
  background: var(--fs-card-tint-neutral);
  color: var(--fs-text);
  border-radius: var(--fs-radius);
  padding: .75rem 1rem;
  overflow-x: auto;
}

.fs-main small,
.fs-main .text-muted { color: var(--fs-muted) !important; }

/*
 * strong/em/u/del/s — ported from the sibling Lumora Press theme,
 * where every rendered content area (post/page/album/category
 * description) gets a deliberate look rather than plain browser
 * defaults: bold in the theme's warm accent, italics a cooler teal
 * tint, underline/strikethrough a heavier offset decoration line.
 * Scoped to .fs-main so gallery/album descriptions (which can carry
 * basic HTML) pick this up automatically.
 */
.fs-main strong, .fs-main b {
  color: var(--fs-accent-ink);
  font-weight: 700;
}

.fs-main em, .fs-main i {
  color: color-mix(in srgb, var(--fs-text) 80%, #2b5c50 20%);
}

.fs-main u {
  text-decoration-color: var(--fs-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.fs-main del, .fs-main s {
  color: var(--fs-muted);
  text-decoration-color: #954c1f;
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
}

/* ============================================================
   Gallery component styles
   ============================================================ */

/* ── Section headings ─────────────────────────────────────── */
.fs-main .lum-section-title {
  font-family: var(--fs-font-ui);
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fs-section-text);
  background: var(--fs-section-bg);
  padding: .42rem .85rem;
  border-radius: var(--fs-radius);
  margin-bottom: .85rem;
  margin-top: 0;
}

/* ── Stats grid ───────────────────────────────────────────── */
.lum-stat-box {
  background: var(--fs-panel-bg);
  border: 1px solid var(--fs-panel-border);
  border-top: 3px solid transparent;
  border-image: var(--fs-accent-grad) 1;
  border-radius: var(--fs-radius);
  padding: .75rem .5rem;
  text-align: center;
}

.lum-stat-num {
  font-family: var(--fs-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fs-accent-ink);
  line-height: 1.1;
}

.lum-stat-lbl {
  font-family: var(--fs-font-ui);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fs-muted);
  margin-top: .18rem;
}

/* ── Category / Album card grid ───────────────────────────── */
.lum-catcard {
  border-radius: var(--fs-radius);
  border: 1px solid var(--fs-panel-border);
  background: var(--fs-panel-bg);
  transition: box-shadow .2s, transform .2s, border-color .2s;
  overflow: hidden;
}

/* A two-tone bronze/teal ring, not just the plain warm shadow-lift
   .lum-thumb-item:hover also uses — that shared, single-colour
   treatment made every hoverable surface feel identical. The ring
   spans the same two ends of --fs-accent-grad already anchoring this
   theme's other signature moments (nav underline, banner frame).
   renderCatgrid() gives both categories and albums the identical
   .lum-catcard markup with no type modifier class, so the two variants
   below tell them apart by content instead: an album card's own meta
   row always renders an unconditional .lum-card-views span (see that
   method's own docblock), which a category card's meta row never has
   (only the conditional .lum-card-subcats/.lum-card-albums). */
.lum-catcard:hover {
  border-color: transparent;
  transform: translateY(-2px);
}

/* Category cards — the bolder ring, since these are the top-level
   navigation choice. */
.lum-catcard:not(:has(.lum-card-views)):hover {
  box-shadow:
    0 4px 18px rgba(var(--fs-shadow-color),.18),
    0 0 0 2px var(--fs-accent-ink),
    0 0 0 4px color-mix(in srgb, var(--fs-accent-teal) 55%, transparent);
}

/* Album cards — the same two-tone idea, softened further so a dense
   grid of episode cards doesn't turn into a wall of bold rings: a
   thinner ring, and both colours themselves mixed down in opacity
   rather than just narrower. */
.lum-catcard:has(.lum-card-views):hover {
  box-shadow:
    0 4px 18px rgba(var(--fs-shadow-color),.18),
    0 0 0 1px color-mix(in srgb, var(--fs-accent-ink) 70%, transparent),
    0 0 0 2px color-mix(in srgb, var(--fs-accent-teal) 25%, transparent);
}

.lum-catcard .card-title a {
  color: var(--fs-accent-ink);
  text-decoration: none;
  font-weight: 600;
}

.lum-catcard .card-title a:hover { text-decoration: underline; }

.lum-catcard-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.lum-catcard-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
  background: var(--fs-card-tint-blue);
  color: var(--fs-accent-ink);
}

.lum-card-desc {
  font-size: .82rem;
  margin-top: .35rem;
}

/* ── Card info rows ───────────────────────────────────────── */
.lum-card-meta { margin-top: .3rem; }

.lum-card-meta span {
  display:     block;
  text-align:  center;
  padding:     .2rem .4rem;
  font-family: var(--fs-font-ui);
  font-size:   .72rem;
  color:       var(--fs-head-text);
  line-height: 1.3;
}

.lum-card-images,
.lum-card-subcats { background: var(--fs-card-tint-blue); }

/* .lum-card-albums (category cards) keeps the original neutral
   parchment tint — only the album card's own three-row Images/Views/
   Date trio (all present together on the same card) gets the fuller
   bronze/gold/sage/teal spread below, so those three read as distinct
   at a glance instead of two near-identical parchment tones. */
.lum-card-albums  { background: var(--fs-card-tint-neutral); }

.lum-card-views   { background: var(--fs-card-tint-sage); }

.lum-card-date    { background: var(--fs-card-tint-gold); }

/* ── Thumbnail grid ───────────────────────────────────────── */
.lum-thumbgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--lum-thumb-min), 1fr));
  gap: var(--lum-gap);
  margin-bottom: 1.25rem;
}

.lum-thumb-item {
  margin: 0;
  background: var(--fs-panel-bg);
  border: 1px solid var(--fs-panel-border);
  border-radius: var(--fs-radius);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}

.lum-thumb-item:hover {
  box-shadow: 0 3px 14px rgba(var(--fs-shadow-color),.2);
  transform: translateY(-2px);
}

.lum-thumb-item a {
  display: block;
  overflow: hidden;
}

.lum-thumb-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.lum-thumb-item:hover img { transform: scale(1.05); }

.lum-thumb-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: .28rem .45rem;
  font-family: var(--fs-font-ui);
  font-size: .7rem;
  /* --fs-head-text (dark ink) on the new teal-tinted --fs-thumb-cap-bg,
     not --fs-muted's low-contrast greyish-brown on flat parchment —
     that combination was the "muddy" info bar. */
  color: var(--fs-head-text);
  background: var(--fs-thumb-cap-bg);
  border-top: 1px solid var(--fs-panel-border);
  line-height: 1.2;
  gap: .2rem;
}

.lum-resolution {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lum-views::before {
  content: '👁 ';
  font-size: .62rem;
}

.lum-thumb-date {
  flex: 1 0 100%;
  text-align: center;
  /* A touch of the theme's own warm ink accent instead of another
     muddy grey — reads as a deliberate secondary line, not a faded
     one, and pairs with the caption's cooler teal-tinted background. */
  color: var(--fs-accent-ink);
}

.lum-thumb-date::before {
  content: '📅 ';
  font-size: .62rem;
}

/* ── Sort bar ─────────────────────────────────────────────── */
.lum-sort-bar {
  background: var(--fs-sort-bg);
  border: 1px solid var(--fs-panel-border);
  border-radius: var(--fs-radius);
  padding: .45rem .7rem;
  margin-bottom: .75rem;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
  background: none;
  padding: 0;
  font-family: var(--fs-font-ui);
  font-size: .88rem;
  margin-bottom: 1rem;
}

.breadcrumb-item a {
  color: var(--fs-accent-ink);
  text-decoration: none;
}

.breadcrumb-item a:hover { text-decoration: underline; }

/* ── Pagination (Bootstrap colour overrides) ──────────────── */
.lum-pagination .pagination { margin-bottom: .4rem; }

.page-link {
  color: var(--fs-accent-ink);
  font-family: var(--fs-font-ui);
}

.page-link:hover,
.page-link:focus { color: var(--fs-accent-ink-hover); }

/* The active/current page uses the same lighter two-stop gradient as
   nav-link hover, ported from the sibling Press theme — classic-
   fansite's own version is a flat --fs-accent fill. */
.page-item.active .page-link {
  background: var(--fs-accent-grad-light);
  border-color: transparent;
  color: #fff;
}

/* ── Primary button (Bootstrap colour override) ───────────── */
.btn-outline-primary {
  --bs-btn-color:               var(--fs-accent-ink);
  --bs-btn-border-color:        var(--fs-accent-ink);
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            var(--fs-accent);
  --bs-btn-hover-border-color:  var(--fs-accent);
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           var(--fs-accent);
  --bs-btn-active-border-color: var(--fs-accent);
}

.btn-primary {
  --bs-btn-bg:                  var(--fs-accent);
  --bs-btn-border-color:        var(--fs-accent);
  --bs-btn-hover-bg:            var(--fs-accent-light);
  --bs-btn-hover-border-color:  var(--fs-accent-light);
  --bs-btn-active-bg:           var(--fs-accent-light);
  --bs-btn-active-border-color: var(--fs-accent-light);
}

.fs-main .btn:disabled,
.fs-main .btn.disabled { opacity: .55; cursor: not-allowed; }

.lum-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--fs-panel-border);
  background: var(--fs-panel-bg);
  color: var(--fs-text);
  transition: background .15s, color .15s, border-color .15s;
}

.lum-icon-btn:hover {
  background: var(--fs-accent);
  border-color: var(--fs-accent);
  color: #fff;
}

/* ── Album description ────────────────────────────────────── */
.lum-album-desc {
  color: var(--fs-text);
  background: var(--fs-panel-bg);
  border-left: 3px solid var(--fs-accent);
  border-radius: 0 var(--fs-radius) var(--fs-radius) 0;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
  line-height: 1.6;
}

/* ── Category description ─────────────────────────────────── */
.lum-cat-desc {
  color: var(--fs-text);
  background: var(--fs-panel-bg);
  border-left: 3px solid var(--fs-accent);
  border-radius: 0 var(--fs-radius) var(--fs-radius) 0;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
  line-height: 1.6;
}

/* ── Who Is Online strip ──────────────────────────────────── */
.lum-who-is-online {
  font-family: var(--fs-font-ui);
  font-size: .82rem;
  color: var(--fs-muted);
  text-align: center;
  margin-top: 1rem;
  margin-bottom: .5rem;
}

/* ── Empty state ──────────────────────────────────────────── */
.lum-empty { border-radius: var(--fs-radius); }

/* ── PhotoSwipe lightbox ───────────────────────────────────── */
/* PhotoSwipe's own chrome (top bar, counter, caption, next/prev
   arrows) otherwise ships completely unstyled by both bundled themes —
   this gives it the same bronze-to-teal identity as the rest of the
   theme instead of PhotoSwipe's generic black default. Built from
   --fs-accent-ink-hover/--fs-accent/--fs-accent-light/--pswp-bg (via
   color-mix()) rather than hardcoded hex, matching the same token-
   driven approach the sibling classic-fansite/default themes use. */
/* The top bar uses the theme's own full bronze -> gold -> sage -> teal
   sweep (--fs-accent-grad — the same signature gradient already used
   for the nav underline and banner frame), not just a two-stop bronze
   slice — the sibling xena-theme (this theme's own predecessor)
   already has an almost-identical dark-bronze-to-rust top bar of its
   own, so a plain two-tone bronze gradient here read as a near-copy
   rather than this theme's own distinct identity. */
.pswp__top-bar {
  background: var(--fs-accent-grad) !important;
}

.pswp__button {
  color: var(--pswp-icon-color);
  opacity: 1;
}

.pswp__button:hover {
  opacity: .85;
}

.pswp__button--download-button {
  width: 50px;
  height: 60px;
  padding: 10px;
  background-color: transparent;
  transition: background-color .2s;
}

.pswp__button--download-button:hover {
  background-color: color-mix(in srgb, var(--fs-accent-ink-hover) 55%, transparent);
}

.pswp__counter {
  color: var(--pswp-icon-color);
  font-family: var(--fs-font-ui);
  font-size: .82rem;
  opacity: 1;
}

.pswp__caption {
  background: linear-gradient(to top, color-mix(in srgb, var(--pswp-bg) 82%, transparent) 0%, transparent 100%);
}

.pswp__caption__center {
  color: var(--pswp-icon-color);
  font-family: var(--fs-font-family);
  font-size: .88rem;
  margin: 0 auto;
  max-width: 800px;
  text-align: center;
}

/* Next/prev arrows — a soft circular backdrop rather than PhotoSwipe's
   bare icon, so they read clearly against any image. */
.pswp__button--arrow .pswp__icn {
  background: color-mix(in srgb, var(--fs-accent-ink-hover) 45%, transparent);
  border-radius: 50%;
  transition: background .2s;
}

.pswp__button--arrow:hover .pswp__icn {
  background: color-mix(in srgb, var(--fs-accent-light) 65%, transparent);
}

/* ── Category list (row layout) ───────────────────────────── */
.lum-catlist {
  border: 1px solid var(--fs-panel-border);
  border-radius: var(--fs-radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.lum-catlist-header {
  display: grid;
  grid-template-columns: 140px 1fr 100px 100px;
  background: var(--fs-accent-grad);
  color: var(--fs-accent-text);
  font-family: var(--fs-font-ui);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  align-items: center;
}

.lum-catlist-header-cell {
  padding: .5rem .75rem;
}

.lum-catlist-header-cell--albums,
.lum-catlist-header-cell--images {
  text-align: center;
}

.lum-catlist-row {
  display: grid;
  grid-template-columns: 140px 1fr 100px 100px;
  align-items: center;
  border-top: 1px solid var(--fs-panel-border);
  border-left: 3px solid transparent;
  background: var(--fs-panel-bg);
  transition: background .15s, border-left-color .15s;
}

.lum-catlist-row:nth-child(even) { background: var(--fs-catlist-even); }

/* This is the actual /?cat category-browsing hover (category_layout
   defaults to list, not the .lum-catcard grid above) — a bronze-to-
   teal tinted sweep plus a left accent bar, replacing the old flat
   --fs-catlist-hover swap (the same peach tone :nth-child(even)
   already uses, so hover barely read as a distinct state). */
.lum-catlist-row:hover {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--fs-accent-ink) 10%, var(--fs-panel-bg)) 0%,
    color-mix(in srgb, var(--fs-accent-teal) 14%, var(--fs-panel-bg)) 100%
  );
  border-left-color: var(--fs-accent-ink);
}

.lum-catlist-col-thumb {
  padding: .5rem;
  line-height: 0;
}

.lum-catlist-col-thumb a { display: block; }

.lum-catlist-col-thumb img.lum-catcard-img {
  width: 120px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--fs-radius);
}

.lum-catlist-col-thumb .lum-catcard-placeholder {
  width: 120px;
  height: 150px;
  border-radius: var(--fs-radius);
  background: var(--fs-card-tint-blue);
  color: var(--fs-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lum-catlist-col-name {
  padding: .75rem 1rem;
}

.lum-catlist-col-name a {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--fs-accent-ink);
  text-decoration: none;
  margin-bottom: .2rem;
}

.lum-catlist-col-name a:hover { text-decoration: underline; }

.lum-catlist-desc {
  font-size: .85rem;
  color: var(--fs-muted);
  line-height: 1.4;
}

.lum-catlist-col-albums,
.lum-catlist-col-images {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fs-accent-ink);
  padding: .75rem .5rem;
}

/* ============================================================
   Forms (search boxes, future public-facing forms)
   ============================================================ */
.fs-main .form-control,
.fs-main .form-select {
  background-color: var(--fs-panel-bg);
  border-color: var(--fs-panel-border);
  color: var(--fs-text);
}

.fs-main .form-control:focus,
.fs-main .form-select:focus {
  background-color: var(--fs-panel-bg);
  color: var(--fs-text);
  border-color: var(--fs-accent-ink);
  box-shadow: 0 0 0 .2rem rgba(163,103,46,.18);
}

.fs-main .form-label { color: var(--fs-head-text); font-weight: 600; }

.fs-main .form-check-input:checked {
  background-color: var(--fs-accent);
  border-color: var(--fs-accent);
}

.fs-main .form-text { color: var(--fs-muted); }

.fs-main .is-invalid,
.fs-main .form-control.is-invalid { border-color: #dc3545; }
.fs-main .invalid-feedback { color: #dc3545; }

.fs-main .is-valid,
.fs-main .form-control.is-valid { border-color: #198754; }
.fs-main .valid-feedback { color: #198754; }

/* ============================================================
   Tables (search results, future data views)
   ============================================================ */
.fs-main .table {
  color: var(--fs-text);
  border-color: var(--fs-panel-border);
}

.fs-main .table > thead {
  color: var(--fs-accent-text);
  background: var(--fs-accent);
}

.fs-main .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: var(--fs-catlist-even);
  color: var(--fs-text);
}

.fs-main .table-hover > tbody > tr:hover > * {
  background: var(--fs-catlist-hover);
}

.fs-main .table-responsive {
  border-radius: var(--fs-radius);
  overflow: hidden;
  border: 1px solid var(--fs-panel-border);
}

/* ============================================================
   Messages / alerts
   ============================================================ */
.fs-main .alert { border-radius: var(--fs-radius); }

/* ============================================================
   Utility components
   ============================================================ */
.lum-panel {
  background: var(--fs-panel-bg);
  border: 1px solid var(--fs-panel-border);
  border-radius: var(--fs-radius);
  padding: 1rem;
}

.lum-divider {
  border: none;
  border-top: 1px solid var(--fs-panel-border);
  margin: 1.5rem 0;
}

.fs-main .badge { border-radius: var(--fs-radius); font-weight: 600; }

/* ============================================================
   Media — hover overlays
   ============================================================ */
.lum-hover-overlay { position: relative; }

.lum-hover-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background .2s ease;
  pointer-events: none;
}

.lum-hover-overlay:hover::after { background: rgba(0,0,0,.18); }

/* ============================================================
   Loading indicator
   ============================================================ */
.lum-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: .2rem solid var(--fs-panel-border);
  border-top-color: var(--fs-accent);
  border-radius: 50%;
  animation: lum-spin .7s linear infinite;
}

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

/* ============================================================
   Print styles
   ============================================================ */
@media print {
  .fs-nav, .fs-footer, .fs-banner, .fs-topnav, .lum-sort-bar,
  .lum-pagination, .lum-admin-link, .lum-color-toggle {
    display: none !important;
  }
  .fs-main { padding: 0 !important; max-width: 100%; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 575px) {
  .lum-catlist-header,
  .lum-catlist-row {
    grid-template-columns: 80px 1fr 56px 56px;
  }

  .lum-catlist-col-thumb img.lum-catcard-img,
  .lum-catlist-col-thumb .lum-catcard-placeholder {
    width: 72px;
    height: 90px;
  }

  .lum-catlist-col-name {
    padding: .5rem .6rem;
  }

  .lum-catlist-col-name a { font-size: .875rem; }

  .lum-catlist-col-albums,
  .lum-catlist-col-images {
    font-size: .85rem;
    padding: .5rem .25rem;
  }

  .lum-catlist-header-cell--albums,
  .lum-catlist-header-cell--images {
    font-size:      .6rem;
    padding:        .5rem .15rem;
    letter-spacing: 0;
  }
}

@media (max-width: 575px) {
  :root {
    --lum-thumb-min:         120px;
    --lum-gap:               .5rem;
  }

  .fs-main { padding: 1rem .875rem; }

  .lum-sort-bar { padding: .4rem .55rem; }

  .lum-sort-bar .btn-group {
    display:   flex;
    flex-wrap: wrap;
    width:     100%;
    gap:       .35rem;
  }

  .lum-sort-bar .btn-group > .btn {
    flex:          1 1 auto;
    margin-left:   0 !important;
    border-radius: var(--fs-radius) !important;
    font-size:     .75rem;
    padding:       .3rem .45rem;
  }
}

@media (min-width: 992px) {
  :root { --lum-thumb-min: 170px; }
}

/* ── Lightbox staff info box (PhotoSwipe) ─────────────────────────────────
   Admin/staff-only "copy image HTML" panel injected into the PhotoSwipe
   lightbox (see ThemeRenderer::renderLightboxJs()). Styled to match
   PhotoSwipe's own always-dark chrome rather than data-bs-theme, since the
   lightbox itself is unaffected by the site's colour-mode toggle. Identical
   to the bundled themes' own block — this is a utility overlay, not a
   themed component, so it intentionally doesn't follow the fansite
   aesthetic. */
.lum-lightbox-info-btn {
  opacity: .85;
}

.lum-lightbox-info-btn:hover {
  opacity: 1;
}

.lum-lightbox-info {
  display:  none;
  position: fixed;
  z-index:  100000;
  left:     16px;
  bottom:   76px;
  max-width: min(92vw, 420px);
  background:    rgba(20, 20, 20, .92);
  color:         #f5f5f5;
  border:        1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  padding:       .75rem .875rem;
  box-shadow:    0 4px 18px rgba(0, 0, 0, .45);
  font-size:     .8rem;
}

.lum-lightbox-info.is-open {
  display: block;
}

.lum-lightbox-info-label {
  display:        block;
  font-size:      .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity:        .7;
  margin:         .5rem 0 .15rem;
}

.lum-lightbox-info-label:first-child {
  margin-top: 0;
}

.lum-lightbox-info-url,
.lum-lightbox-info-html {
  display:       block;
  width:         100%;
  background:    rgba(255, 255, 255, .08);
  color:         #f5f5f5;
  border:        1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  padding:       .25rem .4rem;
  font-family:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:     .72rem;
  resize:        none;
}

.lum-lightbox-info-html {
  min-height: 3.2em;
}

.lum-lightbox-info-actions {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  margin-top:  .5rem;
}

.lum-lightbox-info-copy {
  background:    #2d7dfa;
  color:         #fff;
  border:        none;
  border-radius: 4px;
  padding:       .3rem .75rem;
  font-size:     .75rem;
  cursor:        pointer;
}

.lum-lightbox-info-copy:hover {
  background: #1c6ce8;
}

.lum-lightbox-info-feedback {
  font-size: .75rem;
  color:     #7cfc9c;
}