/*
 * Theme Name:  Dragonquill - HOTD
 * Author: Ariane
 * Design URI: https://www.so-obsessed.com
 */

/* ============================================================
   Lumora Gallery — Classic Fansite Theme
   style.css

   All customisation hooks are CSS custom properties in :root.
   To override without editing this file, create custom.css in
   this folder and link it after style.css in template.html:

     <link rel="stylesheet" href="{THEME_URL}custom.css">

   Ready-to-use fandom colour presets are in README.md.
   ============================================================ */

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

  /* Primary accent — the signature colour of your fansite */
  --fs-accent:             #4a1f6e;
  --fs-accent-light:       #6d3a9e;
  --fs-accent-text:        #ffffff;

  /* Foreground/text-safe accent tokens — used wherever the accent sits */
  /* on text, a link, or an interactive-control border rather than as   */
  /* a filled background (where --fs-accent's own contrast against its  */
  /* white/light foreground text is what matters, not this token).      */
  /* Identical to --fs-accent/--fs-accent-light in light mode; swapped   */
  /* for lighter tints in dark mode — see the dark-mode block below for  */
  /* why this matters. */
  --fs-accent-ink:         var(--fs-accent);
  --fs-accent-ink-hover:   var(--fs-accent-light);

  /* Page shell */
  --fs-page-bg:            #1a1a2a;
  --fs-body-bg:            #f0eef5;
  --fs-panel-bg:           #ffffff;
  --fs-panel-border:       #d4c8e8;

  /* Navigation */
  --fs-nav-bg:             #2a1040;
  --fs-nav-link:           rgba(255,255,255,.80);
  --fs-nav-link-hover:     #ffffff;
  --fs-nav-hover-bg:       rgba(255,255,255,.10);

  /* Banner */
  --fs-banner-height:      220px;
  --fs-banner-bg:          linear-gradient(135deg, #2a1040 0%, #4a1f6e 50%, #2a1040 100%);
  --fs-banner-title-color: #ffffff;
  --fs-banner-title-size:  2.2rem;

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

  /* Footer */
  --fs-footer-bg:          #2a1040;
  --fs-footer-text:        rgba(255,255,255,.65);

  /* Layout */
  --fs-max-width:          980px;
  --fs-radius:             3px;
  --fs-font-family:        system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Thumbnail grid (consumed by lum-thumbgrid) */
  --lum-thumb-min:         150px;
  --lum-gap:               .5rem;

  /* Content-area text tokens (light defaults) */
  --fs-text:               #222222;
  --fs-muted:              #6c757d;
  --fs-head-text:          #333333;
  --fs-thumb-cap-bg:       #f7f5fc;
  --fs-sort-bg:            var(--fs-panel-bg);
  --fs-card-tint-blue:     #ede8f5;
  --fs-card-tint-neutral:  var(--fs-body-bg);
  --fs-card-tint-warm:     #f5f0e8;
  --fs-catlist-even:       #f7f5fc;
  --fs-catlist-hover:      #ede8f5;

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

  /* 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. */
  --pswp-bg:                   #1a0a2a;
  --pswp-icon-color:           #f0eef5;
  --pswp-icon-color-secondary: #b98ee8;
}

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

  --fs-body-bg:            #1e1e2e;
  --fs-panel-bg:           #252535;
  --fs-panel-border:       #3e3a58;
  --fs-text:               #dde0f0;
  --fs-muted:              #8890ab;
  --fs-head-text:          #b8bcd8;
  --fs-thumb-cap-bg:       #1e1e2e;
  --fs-sort-bg:            #252535;
  --fs-card-tint-blue:     #1e1a35;
  --fs-card-tint-neutral:  #222230;
  --fs-card-tint-warm:     #222018;
  --fs-catlist-even:       #222230;
  --fs-catlist-hover:      #1e1a35;
  /* Slightly darker outer frame in dark mode */
  --fs-page-bg:            #12121a;

  /* --fs-accent (#4a1f6e) is a deep, near-black purple — well under  */
  /* 2:1 contrast against the dark content-area surfaces above when   */
  /* used as text/link colour, though it works fine as a *background* */
  /* (--fs-section-bg, .lum-catlist-header, filled buttons) since its  */
  /* own white foreground text stays high-contrast regardless of mode. */
  /* These lighter lavender tints keep every text/link/border use of   */
  /* the accent at 5.8:1+ against both --fs-body-bg and --fs-panel-bg. */
  --fs-accent-ink:         #b98ee8;
  --fs-accent-ink-hover:   #d4b8f0;
  --fs-focus-ring:         #b98ee8;
}

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

/* ============================================================
   Accessibility — keyboard focus visibility
   ============================================================ */
/* Bootstrap's default focus rings are easy to lose against this      */
/* theme's dark nav/footer and (in dark mode) dark content panels.    */
/* Give every interactive element a clearly visible, theme-aware      */
/* outline on keyboard focus. */
.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 {
  border-radius: 2px;
  outline: 2px solid var(--fs-focus-ring);
  outline-offset: 2px;
}

/* The nav and footer sit on a dark background in both colour modes,  */
/* so their focus rings stay a fixed light colour rather than the     */
/* adaptive --fs-focus-ring (which would be too dark against          */
/* --fs-nav-bg/--fs-footer-bg in light mode). */
.fs-nav a:focus-visible,
.fs-nav button:focus-visible,
.fs-footer a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

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

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

/* Centered panel — classic fixed-width fansite layout */
.fs-page {
  background: var(--fs-body-bg);
  box-shadow: 0 0 60px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: var(--fs-max-width);
  min-height: 100vh;
}

/* ── Banner ───────────────────────────────────────────────── */
.fs-banner {
  background: var(--fs-banner-bg);
  min-height: var(--fs-banner-height);
  overflow: hidden;
  position: relative;
}

.fs-banner-bg {
  inset: 0;
  line-height: 0;
  position: absolute;
  z-index: 0;
}

.fs-banner-bg img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

.fs-banner-text {
  background: linear-gradient(to top, rgba(0,0,0,.52) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--fs-banner-height);
  padding: 1.25rem 1.5rem;
  position: relative;
  z-index: 1;
}

.fs-banner-title {
  color: var(--fs-banner-title-color);
  font-size: var(--fs-banner-title-size);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}

.fs-banner-desc {
  color: rgba(255,255,255,.82);
  font-size: .95rem;
  margin: .3rem 0 0;
  text-shadow: 0 1px 5px rgba(0,0,0,.5);
}

.fs-banner-desc:empty { display: none; }

/* ── Navigation ───────────────────────────────────────────── */
.fs-nav {
  background: var(--fs-nav-bg);
  border-bottom: 3px solid var(--fs-accent);
  position: sticky;
  top: 0;
  z-index: 100;
}

.fs-nav-inner {
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

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

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

.fs-nav-link:first-child { border-left: 1px solid rgba(255,255,255,.07); }

.fs-nav-link:hover {
  background: var(--fs-nav-hover-bg);
  color: var(--fs-nav-link-hover);
}

/* {NAVIGATION} (ThemeRenderer::renderNav()) markup, styled to look
   identical to the .fs-nav-link chips above — LG-33's "Most Viewed"
   album/category context only reached the default theme before this,
   since a hardcoded nav never had a {NAVIGATION} token to plug into. */
.fs-nav-inner .navbar-nav {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

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

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

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

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

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

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

.lum-admin-link:hover {
  border-color: rgba(255,255,255,.55);
  color: #fff !important;
}

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

.lum-color-toggle:hover {
  border-color: rgba(255,255,255,.55);
  color: #fff;
}

/* ── Main content ─────────────────────────────────────────── */
.fs-main {
  flex: 1;
  padding: 1.5rem;
}

/* ── Footer ───────────────────────────────────────────────── */
.fs-footer {
  background: var(--fs-footer-bg);
  border-top: 3px solid var(--fs-accent);
  color: var(--fs-footer-text);
  font-size: .82rem;
  padding: .8rem 1rem;
  text-align: center;
}

.fs-footer a {
  color: rgba(255,255,255,.72);
  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);
}

.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);
  color: var(--fs-muted);
  font-style: italic;
  margin: 1rem 0;
  padding: .5rem 1rem;
}

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

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

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

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

/* ── Section headings ─────────────────────────────────────── */
/* Scoped as ".fs-main .lum-section-title" (two classes) rather than a  */
/* single ".lum-section-title" so this rule's specificity beats the     */
/* Typography rule above (".fs-main h1..h6", one class + one element).  */
/* Section titles are always rendered as heading elements (e.g. index.php's */
/* "Recently Updated"/"Categories"/"Latest Additions" are <h2>s), so without */
/* this the Typography rule's --fs-head-text colour silently won over the   */
/* intended light --fs-section-text colour, making titles unreadably dark   */
/* against the dark --fs-section-bg background. */
.fs-main .lum-section-title {
  background: var(--fs-section-bg);
  border-radius: var(--fs-radius);
  color: var(--fs-section-text);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: .85rem;
  margin-top: 0;
  padding: .42rem .85rem;
  text-transform: uppercase;
}

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

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

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

/* ── Category / Album card grid ───────────────────────────── */
.lum-catcard {
  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-catcard:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.14);
  transform: translateY(-2px);
}

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

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

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

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

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

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

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

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

.lum-card-views,
.lum-card-albums  { background: var(--fs-card-tint-neutral); }

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

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

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

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

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

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

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

.lum-thumb-caption {
  align-items: center;
  background: var(--fs-thumb-cap-bg);
  border-top: 1px solid var(--fs-panel-border);
  color: var(--fs-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .7rem;
  gap: .2rem;
  justify-content: space-between;
  line-height: 1.2;
  padding: .28rem .45rem;
}

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

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

.lum-thumb-date {
  color: var(--fs-muted);
  flex: 1 0 100%;
  text-align: center;
}

.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);
  margin-bottom: .75rem;
  padding: .45rem .7rem;
}

/* Sort links render as Bootstrap's generic .btn-outline-secondary,      */
/* which otherwise stays its default grey and never picks up the theme's */
/* own accent colour. */
.lum-sort-bar .btn-outline-secondary {
  background: transparent;
  border-color: var(--fs-panel-border);
  color: var(--fs-text);
}

.lum-sort-bar .btn-outline-secondary:hover,
.lum-sort-bar .btn-outline-secondary:focus {
  background: transparent;
  border-color: var(--fs-accent-ink);
  color: var(--fs-accent-ink-hover);
}

.lum-sort-bar .btn-outline-secondary.active {
  background: var(--fs-accent);
  border-color: var(--fs-accent);
  color: #fff;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
  background: none;
  font-size: .88rem;
  margin-bottom: 1rem;
  padding: 0;
}

.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); }

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

.page-item.active .page-link {
  background-color: var(--fs-accent);
  border-color: var(--fs-accent);
  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 { cursor: not-allowed; opacity: .55; }

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

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

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

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

/* ── Shortcode box (Lumora Press Shortcodes plugin, LG-052) ──── */
.lum-shortcode-box {
  background:    var(--fs-panel-bg);
  border:        1px solid var(--fs-panel-border);
  border-radius: var(--fs-radius);
  font-size:     .85rem;
  margin-bottom: 1rem;
  padding:       .75rem 1rem;
}

.lum-shortcode-label {
  color:          var(--fs-muted);
  display:        block;
  font-size:      .72rem;
  letter-spacing: .03em;
  margin-bottom:  .3rem;
  text-transform: uppercase;
}

.lum-shortcode-field {
  align-items: center;
  display:     flex;
  gap:         .5rem;
}

.lum-shortcode-input {
  background:    var(--fs-body-bg);
  border:        1px solid var(--fs-panel-border);
  border-radius: 4px;
  color:         var(--fs-text);
  flex:          1 1 auto;
  font-family:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:     .8rem;
  min-width:     0;
  padding:       .3rem .5rem;
}

.lum-shortcode-copy {
  background:    var(--fs-accent);
  border:        none;
  border-radius: 4px;
  color:         var(--fs-accent-text);
  cursor:        pointer;
  flex:          0 0 auto;
  font-size:     .8rem;
  padding:       .3rem .75rem;
}

.lum-shortcode-copy:hover {
  background: var(--fs-accent-light);
}

.lum-shortcode-feedback {
  color:       var(--fs-muted);
  font-size:   .75rem;
  margin-left: .5rem;
}

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

/* ── 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 — this gives it the
   same accent identity as the rest of the theme instead of
   PhotoSwipe's generic black default. Built entirely from --fs-accent/
   --fs-accent-light/--pswp-bg (via color-mix()) rather than hardcoded
   hex, so a theme forked from this one via custom.css (see this
   theme's own README.md) automatically re-colors the lightbox too,
   with zero extra rules needed. */
.pswp__top-bar {
  background: linear-gradient(90deg, var(--fs-accent) 0%, var(--fs-accent-light) 100%) !important;
}

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

.pswp__button:hover {
  opacity: .85;
}

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

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

.pswp__counter {
  color: var(--pswp-icon-color);
  font-family: var(--fs-font-family);
  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) 45%, transparent);
  border-radius: 50%;
  transition: background .2s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ============================================================
   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);
  border-color: var(--fs-accent-ink);
  box-shadow: 0 0 0 .2rem rgba(74,31,110,.18);
  color: var(--fs-text);
}

.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 {
  border-color: var(--fs-panel-border);
  color: var(--fs-text);
}

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

.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: 1px solid var(--fs-panel-border);
  border-radius: var(--fs-radius);
  overflow: hidden;
}

/* ============================================================
   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 {
  background: rgba(0,0,0,0);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition: background .2s ease;
}

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

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

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

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

/* ============================================================
   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 {
    height: 90px;
    width: 72px;
  }

  .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;
    letter-spacing: 0;
    padding:        .5rem .15rem;
  }
}

@media (max-width: 575px) {
  :root {
    --lum-thumb-min:         120px;
    --lum-gap:               .35rem;
    --fs-banner-height:      160px;
    --fs-banner-title-size:  1.5rem;
  }

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

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

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

  .lum-sort-bar .btn-group > .btn {
    border-radius: var(--fs-radius) !important;
    flex:          1 1 auto;
    font-size:     .75rem;
    margin-left:   0 !important;
    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 Default theme's 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 {
  background:    rgba(20, 20, 20, .92);
  border:        1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  bottom:   76px;
  box-shadow:    0 4px 18px rgba(0, 0, 0, .45);
  color:         #f5f5f5;
  display:  none;
  font-size:     .8rem;
  left:     16px;
  max-width: min(92vw, 420px);
  padding:       .75rem .875rem;
  position: fixed;
  z-index:  100000;
}

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

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

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

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

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

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

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

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

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