/* ==================== LAYOUT ==================== */
body {
  padding-top: 4.5rem;
  padding-bottom: 1rem;
}

/* ==================== NAVBAR ==================== */
nav.navbar {
  background: rgb(45,40,54);
  background: linear-gradient(180deg, rgba(45,40,54,1) 0%, rgba(17,4,24,1) 28%, rgba(62,51,65,1) 95%, rgba(48,41,54,1) 100%);
  font-family: 'Raleway', sans-serif;
  color: #ccc;
}
#story-title {
  font-weight: 900;
}
#chapter-title {
  font-weight: 400;
  font-size: 1.5em;
  padding-left: 1em;
  border-left: 1px solid #888;
}
#chapter-title .arrow {
  height: 1.5rem;
}
#author-name {
  font-weight: 200;
}
.nav-header > li {
  margin-right: 1rem;
}

/* Back to front page button */
.nav-back-btn {
  text-decoration: none;
  /* Match height of dropdown-toggle buttons (caret ::after adds ~0.555em) */
  min-height: calc(1.5em + 1rem + 0.2em);
}
.nav-back-btn:hover {
  color: #fff;
}

/* ==================== NAVBAR EXPAND BUTTON (mobile only) ==================== */
.navbar-expand-btn {
  display: none;
}

/* ==================== NAVBAR MOBILE / NARROW ==================== */
/* Bootstrap's navbar-expand-md switches to column layout below 768px, causing
   the many navbar items to stack vertically and balloon the bar. On mobile we
   keep only the essentials (back, chapter selector, gloss) in the top bar and
   hide secondary items behind a chevron toggle that expands the bar. */
@media (max-width: 767.98px) {
  /* Force single-row layout: override Bootstrap's column flex direction */
  nav.navbar .navbar-nav.nav-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  /* Compact mode: keep navbar to a single row, no wrapping */
  nav.navbar:not(.navbar-expanded) .container-fluid {
    flex-wrap: nowrap;
    gap: 0.3rem;
  }
  /* Tighter spacing */
  .nav-header > li {
    margin-right: 0.2rem;
  }

  /* Chapter selector: grow to fill available space */
  #chapter-title {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0.5em;
    font-size: 1.2em;
    overflow: hidden;
  }
  #chapter-title .nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7rem;
  }
  /* Hide part selector and separator on mobile (chapter dropdown is enough) */
  #chapter-title > span:first-of-type,
  #chapter-title .navbar-nav:first-child {
    display: none;
  }

  /* Compact mode: hide secondary items */
  nav.navbar:not(.navbar-expanded) .nav-secondary-item,
  nav.navbar:not(.navbar-expanded) #story-title,
  nav.navbar:not(.navbar-expanded) #wmplayer-nav,
  nav.navbar:not(.navbar-expanded) #author-name {
    display: none;
  }
  /* Compact WMPlayer controls (if it manages to show): shrink */
  #wmplayer-nav .wmp-track-title { display: none; }
  #wmplayer-nav .wmp-progress-bar-container { width: 3rem; }

  /* Expand button: visible on mobile, pushed to the right edge */
  .navbar-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #ccc;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: auto;
    transition: background 0.15s, color 0.15s;
  }
  .navbar-expand-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
  }
  .navbar-expand-btn i {
    transition: transform 0.2s;
  }

  /* === EXPANDED STATE: reveal all items, allow wrapping === */
  nav.navbar.navbar-expanded .container-fluid {
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
  nav.navbar.navbar-expanded .nav-secondary-item {
    display: list-item;
  }
  nav.navbar.navbar-expanded #story-title {
    display: block;
    max-width: none;
    overflow: visible;
  }
  nav.navbar.navbar-expanded #author-name {
    display: block;
  }
  /* Show WMPlayer in expanded mode only if it actually has a playlist */
  nav.navbar.navbar-expanded #wmplayer-nav:not(.hidden) {
    display: inline-flex;
  }
  /* Show part selector when expanded */
  nav.navbar.navbar-expanded #chapter-title > span:first-of-type,
  nav.navbar.navbar-expanded #chapter-title .navbar-nav:first-child {
    display: flex;
  }
  /* Don't truncate chapter title when expanded */
  nav.navbar.navbar-expanded #chapter-title {
    overflow: visible;
    flex: 0 1 auto;
  }
  nav.navbar.navbar-expanded #chapter-title .nav-link {
    max-width: none;
  }
  /* Rotate chevron up when expanded */
  nav.navbar.navbar-expanded .navbar-expand-btn i {
    transform: rotate(180deg);
  }
}

/* Hide WMPlayer on very narrow screens in compact mode */
@media (max-width: 379.98px) {
  nav.navbar:not(.navbar-expanded) #wmplayer-nav {
    display: none;
  }
}

/* ==================== CHAPTER CONTENT ==================== */
.chapter-heading {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2em;
  font-size: 2rem;
  font-weight: 900;
  font-family: 'Raleway', sans-serif;
}

.chapter-wrapper {
  margin: 0;
  padding: 0;
}

#content .para-box > p {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  text-indent: 2rem;
  margin-bottom: 0;
  line-height: 1.8rem;
  font-size: 1rem;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
}

@media (min-width: 1000px) {
  #content .para-box {
    margin-left: 8rem;
    margin-right: 8rem;
  }
}
@media (max-width: 999px) {
  #content .para-box {
    margin-left: 0;
    margin-right: 0;
  }
}

.break {
  display: flex;
  flex-flow: row;
  justify-content: center;
}
.break hr {
  width: 50%;
}

/* ==================== IMAGES ==================== */
.inline-image {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.inline-image > div {
  width: 80vw;
}
.inline-image > div > img {
  width: 100%;
}
.inline-image-img {
  opacity: 0;
  transition: opacity .35s linear;
  min-height: 50px;
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
}
.inline-image-img[data-scroll="in"] {
  opacity: 1;
  transition-duration: 0.5s;
}
.inline-image div.image-caption {
  text-align: center;
  font-size: small;
  font-family: 'Raleway', sans-serif;
  width: 80%;
}

/* ==================== AUDIO ==================== */
.inline-audio {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.inline-audio-inner {
  text-align: center;
  font-family: 'Raleway', sans-serif;
}
.audio-cue {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.audio-cue:hover {
  background-color: rgba(128, 128, 128, 0.2);
}
.audio-cue .audio-play-icon {
  flex-shrink: 0;
}
.audio-cue .audio-title {
  font-size: 1.1rem;
}
.inline-audio a {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: #888;
}

/* ==================== CAROUSEL ==================== */
.inline-carousel {
  min-height: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.inline-carousel .carousel-inner {
  overflow: visible;
}
.inline-carousel .carousel-item {
  /* Floated slides break layout when overflow is visible; reset */
  float: none;
  display: block;
  margin-right: 0;
}
.inline-carousel .carousel-item:not(.active) {
  display: none;
}
.inline-carousel img {
  max-width: 95vw;
  max-height: 75vh;
  object-fit: contain;
  margin: 0 auto;
}
.carousel-outline {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  color: white !important;
  filter: none !important;
  text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
}
.carousel-outline h5 {
  font-weight: 900;
}
.carousel-caption {
  position: relative;
  left: 0;
  top: 1rem;
  right: 0;
  bottom: auto;
  padding: 0;
}
.carousel-caption-inner {
  width: 65%;
  margin: 0 auto;
}
@media screen and (max-width: 574px) {
  .carousel-caption-inner {
    width: 90%;
  }
}
.carousel-control {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.carousel-indicators {
  bottom: auto;
  top: 10px;
}

/* ==================== WMPlayer NAVBAR PLAYER ==================== */
#wmplayer-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  color: #ccc;
}
#wmplayer-nav.hidden {
  display: none;
}
#wmplayer-nav .wmp-button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  border-radius: 3px;
  transition: background 0.15s;
  color: inherit;
}
#wmplayer-nav .wmp-button:hover {
  background: rgba(255, 255, 255, 0.1);
}
#wmplayer-nav .wmp-button svg {
  fill: currentColor;
}
#wmplayer-nav .wmp-track-title {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ccc;
}
#wmplayer-nav .wmp-track-title.empty {
  color: #666;
  font-style: italic;
}
#wmplayer-nav .wmp-progress-bar-container {
  width: 6rem;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
#wmplayer-nav .wmp-progress-bar {
  height: 100%;
  background: #D87C01;
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s linear;
}
[data-bs-theme="light"] #wmplayer-nav {
  color: #555;
}
[data-bs-theme="light"] #wmplayer-nav .wmp-track-title {
  color: #444;
}
[data-bs-theme="light"] #wmplayer-nav .wmp-track-title.empty {
  color: #999;
}
[data-bs-theme="light"] #wmplayer-nav .wmp-progress-bar-container {
  background: rgba(0, 0, 0, 0.1);
}

/* --- Playlist dropdown --- */
#wmplayer-nav .wmp-playlist-btn {
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
  font-size: 1rem;
  transition: background 0.15s;
}
#wmplayer-nav .wmp-playlist-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.wmp-playlist-drop {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1050;
  min-width: 220px;
  max-height: 50vh;
  overflow-y: auto;
  background: rgba(30, 26, 36, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: #ccc;
}
.wmp-playlist-drop .wmp-playlist-item {
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition: background 0.1s;
}
.wmp-playlist-drop .wmp-playlist-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.wmp-playlist-drop .wmp-playlist-item.wmp-current {
  color: #D87C01;
  font-weight: 600;
}

/* ==================== NAVIGATION ARROWS ==================== */
.nav-arrows {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 1rem 2rem;
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
}
.nav-arrows a {
  color: #ccc;
  text-decoration: none;
}
.nav-arrows a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==================== BI ICONS ==================== */
.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

/* ==================== THEME SWITCHER ==================== */
.btn-bd-primary {
  --bd-violet-bg: #473861;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}

/* ==================== DARK/LIGHT IMAGE FIXES ==================== */
[data-bs-theme="light"] .carousel-control-prev-icon,
[data-bs-theme="light"] .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}

/* ==================== READ TRACKER (dropdown checkmarks) ==================== */
.dropdown-item .fa-check {
  font-size: 0.75rem;
  margin-left: 0.4rem;
  color: #4CAF50;
  opacity: 0;
  transition: opacity 0.15s;
}
.dropdown-item.read .fa-check {
  opacity: 1;
}

/* NEW badge in chapter dropdown */
.badge-new {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'Raleway', sans-serif;
  color: #fff;
  background: #4CAF50;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  margin-left: 0.3rem;
  vertical-align: middle;
  letter-spacing: 0.5px;
}

/* ==================== GLOSS POPUP ==================== */
#gloss-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s, opacity 0.15s;
}
#gloss-btn:hover {
  color: #fff;
}
#gloss-btn.no-gloss {
  opacity: 0.35;
  cursor: default;
}
#gloss-btn.no-gloss:hover {
  color: #aaa;
}

#gloss-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4.5rem;
}
#gloss-overlay.hidden {
  display: none;
}

#gloss-popup {
  background: rgba(40, 35, 50, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  max-width: 650px;
  width: 90%;
  max-height: 75vh;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #ccc;
}
[data-bs-theme="light"] #gloss-popup {
  background: rgba(255, 245, 245, 0.97);
  color: #222;
}
#gloss-popup h2, #gloss-popup h3 {
  font-family: 'Raleway', sans-serif;
  color: #D87C01;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
[data-bs-theme="light"] #gloss-popup h2, [data-bs-theme="light"] #gloss-popup h3 {
  color: #C86C01;
}
#gloss-popup p {
  margin-bottom: 0.8rem;
}
#gloss-popup em {
  color: #bbb;
}
[data-bs-theme="light"] #gloss-popup em {
  color: #520;
}

#gloss-close {
  float: right;
  background: none;
  border: 1px solid #555;
  color: #aaa;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  transition: all 0.15s;
}
[data-bs-theme="light"] #gloss-close {
  color: #333;
}
#gloss-close:hover {
  background: #555;
  color: #fff;
}
[data-bs-theme="light"] #gloss-close:hover {
  background: #555;
  color: #ccc;
}

#chapter-sentinel {
  height: 1px;
  width: 100%;
}

/* ==================== PAGE CURL ==================== */
.page-curl {
  position: fixed;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 940;
  transition: opacity 0.3s, transform 0.2s;
  opacity: 0.7;
}
.page-curl:hover {
  opacity: 1;
  transform: scale(1.08);
}
.page-curl.hidden {
  display: none;
}

/* Single bottom-right curl — toggles between rendered and source view */
#page-curl-toggle {
  --page-curl-icon: '\f02d';  /* fa-book-open (default: click to view source) */
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg,
    transparent 50%,
    rgba(180, 160, 140, 0.85) 50%,
    rgba(160, 140, 120, 0.9) 62%,
    rgba(200, 185, 165, 0.85) 100%);
  box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.35);
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
  border-bottom-right-radius: 2px;
}
#page-curl-toggle.in-source-view {
  --page-curl-icon: '\f15c';  /* fa-file-lines (source view active: click to return) */
}
#page-curl-toggle::after {
  content: var(--page-curl-icon);
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transform: rotate(-45deg);
  pointer-events: none;
}

/* ==================== SOURCE VIEW ==================== */
#source-view {
  display: none;
  margin: 0;
  padding: 2rem 10rem 2rem 10rem;
  font-family: 'Liberation Mono', 'Courier New', Courier, monospace;
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
  border-radius: 0;
  overflow-wrap: break-word;
}

/* Reduce excessive side padding on narrow screens */
@media (max-width: 1280px) {
  #source-view {
    padding: 2rem 3rem;
  }
}
@media (max-width: 768px) {
  #source-view {
    padding: 1rem 1rem;
    font-size: 0.9rem;
  }
}

/* Lame hack to match source-view background to the light theme */
[data-bs-theme="light"] #source-view {color:#515151;background:#f1ecf1}

#source-view.visible {
  display: block;
}
#source-view code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
}

#content.hidden {
  display: none;
}

/* PREVIEW BANNER */
.preview-banner {
  background: linear-gradient(90deg, #4CAF50 0%, #2d7d30 100%);
  color: #fff;
  text-align: center;
  padding: 0.5rem 1rem;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
  position: sticky;
  top: 4.5rem;
  z-index: 1020;
}