/* =====================================================================
   THEMES / NIGHT.CSS — Candlelit Old Book Theme for Read Runeberg
   ===================================================================== */

/* ==========================
   1. Theme Variables (NIGHT)
   ========================== */
body.night {
  --bg: #1b1613;
  --fg: #e9dfcf;
  --muted: #b5a794;

  --link: #e3c59b;
  --accent: #e3c59b;

  --card: #2b241d;
  --bord: #3d342b;

  --paper-texture: url(/assets/img/paper-fiber.webp);

  /* Shared header theme */
  --header-bg: #231a14;
  --header-text: #f8efe3;
  --header-btn-bg: rgba(255,255,255,0.05);
  --header-btn-border: rgba(255,255,255,0.15);

  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* ==========================
   2. Global Background & Text
   ========================== */
body.night {
  background-color: #18130e;
  background-image:
    url(/assets/img/paper-fiber.webp),
    linear-gradient(180deg, #1f1a15 0%, #0e0b08 100%);
  background-repeat: repeat, no-repeat;
  background-size: 800px auto, cover;
  background-attachment: fixed;
  background-blend-mode: soft-light;
  color: var(--fg);
  color-scheme: dark;
  position: relative;
}

/* Candle glow vignette */
/*
body.night::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 40% 10%, #ffd2a014, transparent 70%);
  mix-blend-mode: screen;
  z-index: -1;
}
*/

/* ==========================
   3. Links
   ========================== */
body.night a {
  color: var(--link);
  text-decoration-color: #fff0b44d;
}
body.night a:hover {
  color: #fff4c8;
  text-shadow: 0 0 5px #f0d2784d;
}

/* ==========================
   4. Header
   ========================== */
body.night .site-header {
  background: radial-gradient(circle at 30% 30%, #ffffff08 0%, transparent 80%),
              radial-gradient(circle at 70% 70%, #ffffff05 0%, transparent 90%);
  background-color: #1b1815;
  border-bottom: 1px solid #3a342d;
  color: #f3ede2;
  box-shadow: 0 2px 8px #0008;
}

body.night .brand {
  color: #f3ede2;
  text-shadow: 0 0 4px #fff0b440;
}
body.night .brand:hover {
  color: #fff4c8;
  text-shadow: 0 0 5px #f0d27866;
}

/* Floating candle-glow effect under logo */
body.night .brand::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.4rem;
  width: 1.2rem;
  height: 1.2rem;
  transform: translateY(-50%);
  background: radial-gradient(circle at center,
    #ffd28229 0%,
    #ffb46422 35%,
    #ffa0500a 65%,
    transparent 100%
  );
  filter: blur(12px);
  pointer-events: none;
  z-index: 0;
  animation: candle-glow-night 3s ease-in-out infinite;
}

@keyframes candle-glow-night {
  0%,100% { opacity: .7; transform: translateY(-50%) scale(1); }
  45%    { opacity: .5; transform: translateY(-50%) scale(1.03); }
  70%    { opacity: .9; transform: translateY(-50%) scale(0.97); }
}

/* ==========================
   5. Card & Reader Surfaces
   ========================== */
body.night .reader,
body.night .ocr,
body.night .facsimile {
  background: #281e12e0;
  border-color: #ffdc961a;
  color: #f6e9c5;
  box-shadow: inset 0 2px 12px #0004, 0 2px 6px #0004;
  backdrop-filter: brightness(0.9) contrast(1.05);
}

body.night .category-card,
body.night .book-card,
body.night .search-result {
  background: #2b2418ee;
  border: 1px solid #f0dcaa26;
  color: #f6eedd;
  box-shadow: 0 0 20px #c8a0501f inset, 0 0 40px #0009;
}
body.night .category-card:hover,
body.night .book-card:hover,
body.night .search-result:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 25px #f0d27826 inset, 0 0 50px #0006;
}

/* ==========================
   6. Typography
   ========================== */
body.night h1,
body.night h2,
body.night h3 {
  color: #f7e9c5;
  text-shadow: 0 0 4px #f0c87826;
  font-weight: 600;
}

body.night .book-title {
  color: #f7e9c5;
  text-shadow:
    0 -1px 1px #000,
    0 1px 2px #e0c67340,
    0 0 4px #cba65760;
  animation: title-shimmer 6s ease-in-out infinite alternate;
}
body.night .book-title:hover {
  animation-play-state: paused;
}

@keyframes title-shimmer {
  0%,100% {
    text-shadow:
      0 -1px 1px #000,
      0 1px 2px #e0c67340,
      0 0 6px #cba65760;
  }
  50% {
    text-shadow:
      0 -1px 1px #000,
      0 1px 2px #dcb35f80,
      0 0 8px #ffecb050;
  }
}

/* ==========================
   7. Inputs & Buttons
   ========================== */
body.night input,
body.night select,
body.night button {
  background: #3a3123;
  color: #f6eedd;
  border: 1px solid #f0dcaa33;
}
body.night input::placeholder {
  color: #faf0c899;
}

/* Candle flicker on theme toggle */
body.night #nightToggle {
  animation: candle-flicker 2.8s infinite ease-in-out alternate;
  color: #f6e7b2;
  text-shadow: 0 0 3px #f6e7b280, 0 0 6px #e0c67380;
  filter: drop-shadow(0 0 2px #cba65760);
}

@keyframes candle-flicker {
  0%,100% {
    text-shadow: 0 0 4px #f6e7b2, 0 0 8px #e0c673, 0 0 12px #b48b41;
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 6px #ffecb0, 0 0 12px #e0c673, 0 0 18px #cba657;
    transform: scale(1.04);
  }
  75% {
    text-shadow: 0 0 5px #f6e7b2, 0 0 10px #dcb35f, 0 0 14px #a67c3b;
    transform: scale(0.98);
  }
}

/* ==========================
   8. Footer
   ========================== */
body.night footer {
  border-top: 1px solid #ffffff26;
  color: #d8cba4;
  background:
    radial-gradient(circle at 50% 30%, #1e140acc, #0a0805e6);
  padding: 1.5rem 0;
}

/* ==========================
   9. Hero Parallax Illumination
   ========================== */
body.night .hero-intro::before {
  opacity: .25;
  filter: brightness(0.7);
  background:
    radial-gradient(circle at 30% 20%, #503c2880, transparent 60%),
    radial-gradient(circle at 70% 80%, #32281466, transparent 60%),
    repeating-linear-gradient(0deg, #ffffff08 0 2px, #fff0 2px 4px),
    linear-gradient(180deg, #1b150f 0%, #1a130b 100%);
}

/* ==========================
   10. Skip Link
   ========================== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 1000;
  transform: translateY(-100%);
}
.skip-link:focus {
  top: 0;
  transform: translateY(0);
}



body.night .featured-card .meta {
  background: linear-gradient(
    to top,
    rgba(10, 7, 4, 0.85),
    rgba(10, 7, 4, 0.55),
    rgba(10, 7, 4, 0.15),
    transparent
  );
  padding: 0.85rem 0.9rem 0.75rem;
}


body.night .featured-card .meta h3 {
  color: #fff3da; /* brighter than normal h3 */
  font-weight: 600;
  line-height: 1.25;
  text-shadow:
    0 1px 2px #000c,
    0 0 6px #0008;
}


body.night .featured-card .meta .author {
  color: #e0d2b4;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px #000a;
}

body.night .featured-card:hover .meta {
  background: linear-gradient(
    to top,
    rgba(18, 12, 7, 0.92),
    rgba(18, 12, 7, 0.65),
    rgba(18, 12, 7, 0.25),
    transparent
  );
}

body.night .featured-card:hover .meta h3 {
  color: #fff7e8;
}