/* ============================================================
   House of the Dragon — Dragonquill — Lumora Gallery Theme
   custom.css

   Dragonquill colour palette (matched to the Lumora Press
   "Dragonquill" theme — a dark chronicle-archive design):

     Deep ink black   #05070a  — outer page shell
     Iron black       #0d1218  — body / panels
     Parchment        #eee8da  — body text
     Antique gold     #d4a85f  — accent, links, section gradient
     Bright gold      #f0c979  — hover states
     Ember red        #a43d35  — section gradient, catlist header
     Ember bright     #d35b43  — card/catcard top accent, "views" row
     Pale ice         #a6bdc2  — stat box accent, "date" row

   Headings set in Cinzel; body copy in Cormorant Garamond/Arima;
   nav, labels, and meta rows in Source Sans 3 (all Google Fonts,
   loaded in template.html).
   ============================================================ */

/* ── Colour overrides ─────────────────────────────────────── */
:root {
  /* Primary: antique gold — links, accents, filled buttons */
  --fs-accent:             #d4a85f;
  /* Bright gold: hover states */
  --fs-accent-light:       #f0c979;
  /* Dark ink for text on filled gold backgrounds */
  --fs-accent-text:        #100a06;

  /* Outer gutter: deep chronicle black */
  --fs-page-bg:            linear-gradient(160deg, #05070a 0%, #0d1218 100%);

  /* Content: iron black panels */
  --fs-body-bg:            #0d1218;
  --fs-panel-bg:           #12181e;
  --fs-panel-border:       rgba(212,168,95,.22);

  /* Navigation: near-black bar, parchment links */
  --fs-nav-bg:             #0a0e12;
  --fs-nav-link:           rgba(238,232,218,.78);
  --fs-nav-link-hover:     #f0c979;
  --fs-nav-hover-bg:       rgba(212,168,95,.10);

  /* Banner fallback colour while image loads */
  --fs-banner-height:      0px;
  --fs-banner-bg:          #05070a;
  --fs-banner-title-color: #eee8da;

  /*
   * Section headings: ember-to-gold gradient — dragonfire meeting
   * quill-gold, the theme's signature motif.
   */
  --fs-section-bg:         linear-gradient(to right, #a43d35, #d4a85f);
  --fs-section-text:       #170d08;

  /* Footer: near-black, warm ember undertone */
  --fs-footer-bg:          linear-gradient(90deg, #0a0e12 0%, #140d09 100%);
  --fs-footer-text:        rgba(238,232,218,.65);

  /* Body/muted/heading text — the base classic-fansite theme's light-mode
     defaults (dark grays, meant for a white panel) were left unset here,
     so album/category descriptions, page titles, and the shortcode box
     were rendering unreadably dark against these dark iron panels. */
  --fs-text:               #eee8da;
  --fs-muted:               rgba(238,232,218,.62);
  --fs-head-text:          #f2e9d6;

  /* Page max-width: wide enough for the header image */
  --fs-max-width:          1200px;

  /* Fonts: Cormorant Garamond/Arima body, matching the Dragonquill
     Lumora Press theme's own font stack. */
  --fs-font-family:        'Arima', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ── Banner: edge-to-edge full viewport width at 500px height ──
   Breaks out of .fs-page's centered/boxed max-width panel — the
   standard 100vw + negative-margin full-bleed technique — so the
   banner spans the entire browser width like the Dragonquill Lumora
   Press theme's own masthead, instead of being capped at
   --fs-max-width like the rest of the page. */
.fs-banner {
  background-color:    #05070a;
  background-image:    url('images/dragonquill-banner.jpg');
  background-position: center top;
  background-repeat:   no-repeat;
  background-size:     cover;
  height:              500px;
  left:                50%;
  margin-left:         -50vw;
  margin-right:        -50vw;
  min-height:          0;
  overflow:            visible;
  position:            relative;
  right:               50%;
  width:               100vw;
}

.fs-banner-bg   { display: none; }
.fs-banner-text { display: none; }

/* ── Page panel shadow ────────────────────────────────────── */
.fs-page {
  box-shadow: 0 0 60px rgba(0,0,0,.70), 0 4px 34px rgba(212,168,95,.10);
}

/* Prevents the full-bleed .fs-banner's 100vw width (which can be a
   fraction wider than the viewport when a scrollbar is present) from
   introducing horizontal scroll. Applied to .fs-body (the true outer,
   unconstrained-width container) rather than .fs-page — .fs-page is
   the boxed panel .fs-banner needs to break out of via its negative
   margins, so overflow-x: hidden there would clip that overflow right
   back down to the boxed width instead of allowing the full bleed. */
/* Stone-chronicle backdrop — mirrors the Dragonquill Lumora Press
   theme's own body background: a dark overlay over the stone texture,
   plus a faint 36px grid-line grain, layered over the --fs-page-bg
   gradient as a fallback while the image loads. Visible in the outer
   gutter framing .fs-page's own boxed/opaque panel. */
.fs-body {
  background:
    linear-gradient(rgba(5,7,10,.55), rgba(5,7,10,.65)),
    url('images/dragonquill-stone-background.jpg') center top / cover fixed no-repeat,
    radial-gradient(circle at 50% -12%, rgba(164,61,53,.16), transparent 31rem),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    var(--fs-page-bg);
  background-attachment: fixed, fixed, scroll, scroll, scroll, scroll;
  background-size:       cover, cover, auto, 36px 36px, 36px 36px, auto;
  overflow-x: hidden;
}

/* Network bar (sibling fansites + main site) */
.fs-topnav {
  background:    #05070a;
  border-bottom: 1px solid rgba(212,168,95,.35);
  font-size:     .72rem;
}

.fs-topnav-inner {
  align-items:     center;
  display:         flex;
  flex-wrap:       wrap;
  gap:             .25rem .75rem;
  justify-content: space-between;
  padding:         .4rem 1rem;
}

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

.fs-topnav-link {
  border-right:      1px solid rgba(238,232,218,.12);
  color:             rgba(238,232,218,.60);
  display:           inline-block;
  flex-shrink:       0;
  font-family:       'Source Sans 3', Arial, sans-serif;
  letter-spacing:    .06em;
  padding:           .15rem .65rem;
  text-decoration:   none;
  text-transform:    uppercase;
  transition:        color .15s;
  white-space:       nowrap;
}

.fs-topnav-group .fs-topnav-link:last-child { border-right: none; }

.fs-topnav-link:hover { color: #f0c979; }

.fs-topnav-active {
  color:       #d4a85f !important;
  font-weight: 700;
  position:    relative;
}

.fs-topnav-active::after {
  background: #a43d35;
  bottom:     -1px;
  content:    '';
  height:     2px;
  left:       .65rem;
  position:   absolute;
  right:      .65rem;
}

@media (max-width: 575px) {
  .fs-topnav-inner { justify-content: flex-start; }
  .fs-topnav-link  { font-size: .68rem; padding: .15rem .5rem; }
}

/* ── Navigation ───────────────────────────────────────────── */
.fs-nav {
  border-bottom: 2px solid rgba(212,168,95,.28);
}

.fs-nav-link {
  border-right-color: rgba(212,168,95,.14);
  font-family:        'Source Sans 3', Arial, sans-serif;
  font-size:          .85rem;
  font-weight:        700;
  letter-spacing:     .05em;
  text-transform:     uppercase;
}

.fs-nav-link:first-child {
  border-left-color: rgba(212,168,95,.14);
}

/* {NAVIGATION} markup equivalents of the .fs-nav-link overrides above. */
.fs-nav-inner .nav-link {
  border-right-color: rgba(212,168,95,.14);
  font-family:        'Source Sans 3', Arial, sans-serif;
  font-size:          .85rem;
  font-weight:        700;
  letter-spacing:     .05em;
  text-transform:     uppercase;
}

.fs-nav-inner .nav-item:first-child .nav-link {
  border-left-color: rgba(212,168,95,.14);
}

.lum-admin-link {
  border-color: rgba(212,168,95,.30);
  color:        rgba(238,232,218,.65) !important;
}

.lum-admin-link:hover {
  border-color: rgba(212,168,95,.60);
  color:        #f0c979 !important;
}

/* ── Footer ───────────────────────────────────────────────── */
.fs-footer {
  border-top: 2px solid rgba(212,168,95,.28);
}

.fs-footer a       { color: rgba(238,232,218,.65); }
.fs-footer a:hover { color: #f0c979; }

/* ── Section headings ─────────────────────────────────────── */
.lum-section-title {
  border-radius:     2px;
  font-family:       'Cinzel', Georgia, serif;
  letter-spacing:    .06em;
}

/* Fix: style.css's ".fs-main h1..h6 { color: var(--fs-head-text); }" Typography
   rule has higher specificity (class+element) than the base ".lum-section-title"
   rule (class only), so it was winning over the intended --fs-section-text
   colour whenever the title is rendered as an <h2> (it always is — see
   index.php's "Recently Updated"/"Categories"/"Latest Additions" headings).
   This scoped selector (two classes) has higher specificity than ".fs-main h2". */
.fs-main .lum-section-title {
  color: var(--fs-section-text);
}

/* ── Stat box accent bar ──────────────────────────────────── */
.lum-stat-box {
  border-top-color: #a6bdc2;
}

/* ── Thumbnail items ──────────────────────────────────────── */
.lum-thumb-item {
  border-radius: 4px;
}

.lum-thumb-item img {
  transition: transform .32s ease, filter .32s ease;
}

.lum-thumb-item:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 2px 10px rgba(212,168,95,.22);
  transform:  translateY(-3px);
}

.lum-thumb-item:hover img {
  filter:    contrast(1.08) saturate(1.05) brightness(1.02);
  transform: scale(1.06);
}

/* ── Thumbnail caption: stacked info rows ─────────────────── */
.lum-thumb-caption {
  background: none;
  border-top: 1px solid rgba(212,168,95,.25);
  display:    block;
  gap:        0;
  padding:    0;
}

.lum-resolution,
.lum-views,
.lum-thumb-date {
  display:        block;
  font-family:    'Source Sans 3', Arial, sans-serif;
  font-size:      .7rem;
  line-height:    1.3;
  overflow:       hidden;
  padding:        .22rem .35rem;
  text-align:     center;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.lum-resolution { background: #182127; color: #d4a85f; font-weight: 700; }
.lum-views      { background: #1c1210; color: #d35b43; font-weight: 400; }
.lum-thumb-date { background: #12181e; color: #a6bdc2; font-weight: 400; }

/* ── Album / category cards ───────────────────────────────── */
.lum-catcard {
  border-radius: 4px;
  border-top:    2px solid #d35b43;
}

.lum-catcard-img {
  height:     175px;
  transition: filter .32s ease;
}

.lum-catcard:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 2px 10px rgba(212,168,95,.20);
  transform:  translateY(-3px);
}

.lum-catcard:hover .lum-catcard-img {
  filter: contrast(1.06) saturate(1.04) brightness(1.02);
}

.lum-catcard .card-title a {
  font-family: 'Cinzel', Georgia, serif;
}

.lum-catcard .card-title a:hover {
  color: #f0c979;
}

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

.lum-card-meta span {
  display:     block;
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-size:   .72rem;
  line-height: 1.3;
  padding:     .2rem .4rem;
  text-align:  center;
}

/* Scoped as ".lum-card-meta .lum-card-images" (two classes) rather than a
   single ".lum-card-images" so this rule's specificity beats the base
   theme's ".lum-card-meta span { color: var(--fs-head-text); }" rule
   (class+element) — without this, the "images"/"views"/"updated" card
   meta rows fell back to the base theme's dark-gray text colour, which
   is unreadable against these dark panel backgrounds. Mirrors the same
   fix already applied to .lum-section-title above. */
.lum-card-meta .lum-card-images,
.lum-card-meta .lum-card-subcats { background: #182127; color: #d4a85f; }

.lum-card-meta .lum-card-views,
.lum-card-meta .lum-card-albums  { background: #1c1210; color: #d35b43; }

.lum-card-meta .lum-card-date    { background: #12181e; color: #a6bdc2; }

/* ── Card / list placeholders ─────────────────────────────── */
.lum-catcard-placeholder,
.lum-catlist-col-thumb .lum-catcard-placeholder {
  background: linear-gradient(135deg, #12181e 0%, #1c1210 100%);
  color:      rgba(238,232,218,.28);
}

/* ── Category list thumbnails ─────────────────────────────── */
.lum-catlist-col-thumb img.lum-catcard-img {
  border:     1px solid rgba(212,168,95,.25);
  transition: filter .32s ease;
}

.lum-catlist-row:hover .lum-catlist-col-thumb img {
  filter: contrast(1.05) saturate(1.04) brightness(1.02);
}

.lum-catlist-header {
  background: linear-gradient(90deg, #a43d35 0%, #d4a85f 100%);
  color:      #170d08;
}

.lum-catlist-row:nth-child(even) { background: #12181e; }
.lum-catlist-row:hover            { background: #17130d; }

/* ── Pagination ───────────────────────────────────────────── */
/* Bootstrap's own pagination component (.page-link's default white
   background, gray border) otherwise shows through untouched — the base
   theme only recolors the link text and the active page, not the
   button chrome. These Bootstrap 5.3 CSS variables retheme the whole
   control to match the dark iron palette used elsewhere. */
.pagination {
  --bs-pagination-color:                 #d4a85f;
  --bs-pagination-bg:                    #12181e;
  --bs-pagination-border-color:          rgba(212,168,95,.22);
  --bs-pagination-hover-color:           #f0c979;
  --bs-pagination-hover-bg:              #182127;
  --bs-pagination-hover-border-color:    rgba(212,168,95,.40);
  --bs-pagination-focus-color:           #f0c979;
  --bs-pagination-focus-bg:              #182127;
  --bs-pagination-active-color:          #100a06;
  --bs-pagination-active-bg:             #d4a85f;
  --bs-pagination-active-border-color:   #d4a85f;
  --bs-pagination-disabled-color:        rgba(238,232,218,.30);
  --bs-pagination-disabled-bg:           #0d1218;
  --bs-pagination-disabled-border-color: rgba(212,168,95,.15);
}

.page-item.disabled .page-link { color: rgba(238,232,218,.30); }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb-item a       { color: #d4a85f; }
.breadcrumb-item a:hover { color: #f0c979; }

/* ── Responsive adjustments ───────────────────────────────── */
@media (max-width: 575px) {
  .fs-banner {
    background-position: center center;
    background-size:     cover;
    height:               auto;
    min-height:           140px;
  }
  :root { --fs-max-width: 100%; }
  .lum-catcard-img { height: 130px; }

  .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: 576px) and (max-width: 991px) {
  .fs-banner {
    background-position: center center;
    background-size:     cover;
    height:               auto;
    min-height:           180px;
  }
  .lum-catcard-img { height: 150px; }
}

/* ── PhotoSwipe lightbox top bar ──────────────────────────── */
/* Overrides style.css's own ".pswp__top-bar" gradient (gold-to-brighter-
   gold via --fs-accent/--fs-accent-light, which reads as flat tan) with
   the theme's ember-to-gold signature gradient instead. */
.pswp__top-bar {
  background: linear-gradient(90deg, #a43d35 0%, #d4a85f 100%) !important;
}

/* ── Dark mode (data-bs-theme="dark" via Lumora colour toggle) ──
   Deepens the already-dark Dragonquill palette a further step for
   the colour-mode toggle, mirroring the light/dark-mode override
   pattern used by the other seven-kingdoms.net themes. ─────────── */
html[data-bs-theme="dark"] .lum-thumb-caption {
  border-top-color: rgba(212,168,95,.35);
}

html[data-bs-theme="dark"] .lum-resolution { background: #0e141a; color: #d4a85f; }
html[data-bs-theme="dark"] .lum-views      { background: #140d0a; color: #d35b43; }
html[data-bs-theme="dark"] .lum-thumb-date { background: #0a0e12; color: #a6bdc2; }

html[data-bs-theme="dark"] .lum-card-images,
html[data-bs-theme="dark"] .lum-card-subcats { background: #0e141a; color: #d4a85f; }

html[data-bs-theme="dark"] .lum-card-views,
html[data-bs-theme="dark"] .lum-card-albums  { background: #140d0a; color: #d35b43; }

html[data-bs-theme="dark"] .lum-card-date    { background: #0a0e12; color: #a6bdc2; }

html[data-bs-theme="dark"] .lum-card-meta span { color: inherit; }

html[data-bs-theme="dark"] .lum-catlist-header {
  background: linear-gradient(90deg, #7a2e28 0%, #b8924a 100%);
  color: #0a0604;
}

html[data-bs-theme="dark"] .lum-catlist-row:nth-child(even) { background: #0c1015; }
html[data-bs-theme="dark"] .lum-catlist-row:hover            { background: #120e0a; }

html[data-bs-theme="dark"] .breadcrumb-item a       { color: #d4a85f; }
html[data-bs-theme="dark"] .breadcrumb-item a:hover { color: #f0c979; }

html[data-bs-theme="dark"] .fs-footer a       { color: rgba(238,232,218,.55); }
html[data-bs-theme="dark"] .fs-footer a:hover { color: #f0c979; }

html[data-bs-theme="dark"] .lum-catcard-placeholder,
html[data-bs-theme="dark"] .lum-catlist-col-thumb .lum-catcard-placeholder {
  background: linear-gradient(135deg, #0a0e12 0%, #140d0a 100%);
  color:      rgba(200,200,200,.22);
}

html[data-bs-theme="dark"] .lum-catcard .card-title a:hover { color: #f0c979; }

html[data-bs-theme="dark"] .lum-color-toggle {
  border-color: rgba(238,232,218,.20);
  color:        rgba(238,232,218,.60);
}

html[data-bs-theme="dark"] .lum-color-toggle:hover {
  border-color: rgba(238,232,218,.5);
  color:        #f5efe0;
}