:root {
  --header-height: 90px;
  --footer-height: 50px;
  --paper: #f4e3c3;
  --paper-ink: #3b3024;
  --paper-edge: #c1b59f;
  --tab: #f4e3c3;
  --tab-dim: #e0c896;
  --tab-hover: #f7dcae;
  --tab-edge: #9a805f;
  --bg: #0f0e0d;
  --shadow-1: 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, .45);
  --accent: #7b6752;
  --glass-bg: rgba(43, 39, 35, .4);
  --glass-bg-strong: rgba(43, 39, 35, .7);
  --glass-border: rgba(255, 255, 200, .3);
  --icon: #f5ebd8;
  --editor: rgba(51, 102, 153, 0.5);
  --reviewer: rgba(111, 0, 0, 0.5);
  --toolbox: rgba(38, 127, 0, 0.5);
  --medium-aspect: 850px;
  --small-aspect: 500px;
}

html,
body {
  height: 100dvh;
  margin: 0;
  padding: 0;
  background: #000;
  display: flex;
  flex-direction: column;
}

/* Base */
body {
  margin: 0;
  color: var(--paper-ink);
  font: 11px Tahoma, Verdana, Arial, Sans-Serif;
  filter: saturate(0.85) contrast(1.05);
  overflow-x: hidden;
  overflow-y: hidden;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hero {
  position: relative;
  max-width: 100%;
  flex: 1;
  background: black url('/wp-content/themes/yoricktours/assets/images/bg/dark-riders-bg.avif') center/cover no-repeat fixed;
  display: flex;
  overflow: hidden;
  isolation: isolate;
}

/* Background image layer */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.85) contrast(1.05);
  transform: scale(1.02);
  z-index: -2;
}

/* Dark gradient + red vignette for legibility & mood */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(143, 13, 22, 0.25), transparent 60%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
  z-index: -1;
}

/* Banner */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  overflow: hidden;
  padding-left: 20px;
  flex-shrink: 0;
}

.banner * {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.9));
}

.banner .logo {
  height: 50px;
  object-fit: contain;
}

.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner .logo {
  height: 50px;
}

.banner-nav {
  position: absolute;
  display: flex;
  gap: 0px;
  margin-left: auto;
  right: 0px;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: background 0.2s;
}

.nav-btn img {
  width: 40px;
  height: 40px;
}

.nav-btn:hover {
  background: #444;
}

.nav-btn+.nav-btn {
  margin-left: -30px;
}

/* ===== Main layout ===== */
.container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  margin: 0;

  height: auto;
  overflow: hidden;
}

/* Shared layout for all panels */
.container>section {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.container>section[hidden] {
  display: none !important;
}

/* Glass panel styles (background image/video + tint) */
.glass-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  color: var(--tab-dim);
  background: rgba(15, 12, 10, 0.8);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  border: 1px solid var(--glass-border);
  border-left: none;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: width .28s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height: 0;
}

.glass-panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  filter: brightness(0.3);
}

.glass-panel-bg.align-left {
  background-position: left center;
}

.glass-panel-bg.align-center {
  background-position: center center;
}

.glass-panel-bg.align-right {
  background-position: right center;
}

/* Optional subtle fallback tint for iOS Safari */
.glass-panel-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: black;
  opacity: var(--overlay-opacity, 0.25);
  transition: opacity 1.5s ease;
  z-index: 1;
}

/* Overlay tint */
.glass-panel-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: black;
  /* always black */
  opacity: var(--overlay-opacity, 0.2);
  /* default tint */
  transition: opacity 1.5s ease;
  /* animate alpha */
  z-index: 2;
}

/* Video sits on top, can fade in/out */
.glass-panel-bg .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 1;
  opacity: 0;
  /* start hidden */
  transition: opacity 1.5s ease;
}

.glass-panel-content {
  position: relative;
  z-index: 3;
  flex: 1;
  overflow-y: auto;
  /* ensures text doesn’t overlap scrollbar */
}

/* Consistent scrollbar styling across all glass panels */
.glass-panel-content::-webkit-scrollbar {
  width: 8px;
}

.glass-panel-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.glass-panel-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Tint reveal states */
.glass-panel.reveal .glass-panel-bg video.bg-video {
  opacity: 1;
}

.glass-panel.hide .glass-panel-bg video.bg-video {
  opacity: 0
}

/* =======================================
   SIDEBAR LAYOUT & STYLES
   ======================================= */

#sidebar {
  flex: 0 0 auto;
  font-size: 14px;
  border-radius: 0 8px 8px 0 !important;
  width: 59px;
  min-width: 59px;
  padding: 0;
  background: var(--glass-bg);
  transition: width 0.28s ease, background 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

/* =======================================
   BURGER BUTTON (mobile only)
   ======================================= */

/* Show burger on mobile */
#burger-button {
  display: none;
  /* hidden on desktop */
}

/* Mobile-only appearance */
@media (max-width: 1024px) {
  #burger-button {
    align-items: center;
    width: 47px;
    height: 48px;
    padding-left: 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background: transparent;
  }

  #burger-button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.95;
  }

  #burger-button:hover {
    background: rgba(255, 255, 200, 0.12);
  }

  #burger-button:active {
    background: rgba(255, 255, 200, 0.18);
  }

  /* Active (sidebar open) */
  #burger-button.active {
    background: rgba(255, 255, 200, 0.1);
  }
}

/* =======================================
   SIDEBAR HEADER (burger + optional title)
   ======================================= */

.sidebar-header {
  display: none;
  align-items: center;
  padding: 6px;
}

.sidebar-header .sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--paper-ink, #f5f5dc);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Show only on mobile */
@media (max-width: 1024px) {
  .sidebar-header {
    display: flex;
  }
}

/* Hide on wide screens */
@media (min-width: 851px) {
  .sidebar-header {
    display: none;
  }
}

/* =======================================
   SEARCH BAR
   ======================================= */

#sidebar .search-container {
  display: flex;
  align-items: center;
  padding-left: 10px;
  height: 48px;
  border-bottom: 1px solid rgba(255, 255, 200, .15);
  box-sizing: border-box;
}

#sidebar .search-icon {
  flex: 0 0 40px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebar .search-icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

#sidebar .search-container input {
  height: 25px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 200, .3);
  background: rgba(31, 26, 22, .85);
  color: #eee;
  outline: none;
  opacity: 0;
  transition: max-width .28s ease, opacity .18s ease,
    background-color .2s ease, border-color .2s ease;
}

#sidebar:hover .search-container input,
#sidebar.expanded .search-container input {
  max-width: 100%;
  opacity: 1;
}

#sidebar:not(:hover):not(.expanded) .search-container input::placeholder {
  color: transparent;
}

/* =======================================
   MENU & LABELS
   ======================================= */

#sidebar ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
}

#sidebar .menu-item {
  display: flex;
  align-items: center;
  height: 48px;
  border-radius: 6px;
  cursor: default;
  overflow: hidden;
}

#sidebar .menu-item:hover {
  background: rgba(255, 255, 200, .08);
}

#sidebar .menu-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  flex: 1;
}

#sidebar .icon {
  flex: 0 0 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebar .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

/* =======================================
   EXPANSION BEHAVIOR
   ======================================= */

/* Always allow manual expansion via .expanded */
#sidebar.expanded {
  width: 200px;
  min-width: 200px;
  background: var(--glass-bg-strong);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .45);
}

#sidebar.expanded .label,
#sidebar.expanded .search-container input {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* === Desktop hover expansion (only on hover-capable devices) === */
@media (hover: hover) and (min-width: 851px) {
  #sidebar:not(.expanded):hover {
    width: 200px;
    min-width: 200px;
    background: var(--glass-bg-strong);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .45);
  }

  #sidebar:not(.expanded):hover .label,
  #sidebar:not(.expanded):hover .search-container input {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  #sidebar:not(.expanded):hover .search-icon {
    display: none;
  }

  #sidebar.expanded .search-icon {
    display: none;
  }
}

/* --- MOBILE BEHAVIOR (Burger controls expansion) --- */
@media (max-width: 1024px) {

  /* Show header with burger */
  .sidebar-header {
    display: flex;
  }

  /* Hide on desktop */
  #burger-button {
    display: flex;
  }

  /* Disable hover effects entirely */
  #sidebar:hover {
    width: 59px !important;
    min-width: 59px !important;
    background: var(--glass-bg) !important;
    box-shadow: none !important;
  }

  #sidebar:hover .label,
  #sidebar:hover .search-container input {
    opacity: 0 !important;
    transform: translateX(-6px) !important;
    pointer-events: none !important;
  }

  #sidebar:hover .search-icon {
    display: flex !important;
  }

  /* Sidebar expanded via burger click */
  #sidebar.expanded {
    width: 200px !important;
    min-width: 200px !important;
    background: var(--glass-bg-strong) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .45) !important;
  }

  #sidebar.expanded .label,
  #sidebar.expanded .search-container input {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* =======================================
   SCROLLBAR
   ======================================= */

.sidebar-menu {
  scrollbar-width: thin;
  overflow-y: auto;
}

/* === Match hover behavior when expanded === */
#sidebar.expanded .search-icon {
  display: none !important;
}

#sidebar.expanded .search-container input {
  opacity: 1 !important;
  max-width: 100% !important;
  pointer-events: auto;
}

/* ===========================
   TOOLBAR + EDIT BUTTON
   (migrated from sidebar.php)
   =========================== */

.toolbar-left {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.toolbar-left.show {
  max-height: 40px;
  opacity: 1;
}

/* Shared toolbar button styles */
.tool-btn,
.edit-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--tab-edge);
  border-radius: 6px;
  background: var(--tab);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
  padding: 0;
}

.edit-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}

.tool-btn img,
.edit-toggle img {
  width: 18px;
  height: 18px;
  pointer-events: none;
  object-fit: contain;
}

.tool-btn:hover,
.edit-toggle:hover {
  background: white;
}

.tool-btn:active,
.edit-toggle:active {
  transform: translateY(1px);
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
}

/* Footer */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  color: #d0c4b0;
  font-size: 0.85rem;
}

/* icon groups */
.footer-social {
  display: flex;
  justify-content: space-between;
  /* space out left, center, right */
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  /* keep all in one row */
  width: 100%;
  padding: 10px;
  color: #d0c4b0;
  font-size: 0.85rem;
}

/* support + social groups */
.footer-social .support,
.footer-social .social {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.footer-copyright-1 {
  display: none;
  font-size: 0.75rem;
  margin-bottom: -10px;
}

/* center copyright */
.footer-social .footer-copyright-2 {
  white-space: nowrap;
  text-align: center;
  flex: 0 1 auto;
  font-size: 0.75rem;
}

/* --- responsive under 600px --- */
@media (max-width: 500px) {
  footer {
    flex-direction: column;
    align-items: center;
    padding: 5px;
    gap: 4px;
  }

  .footer-copyright-1 {
    display: block;
  }

  .footer-copyright-2 {
    display: none;
    order: -1;
    width: 100%;
    text-align: center;
    margin-bottom: 6px;
  }

  footer .support,
  footer .social {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
  }

  footer .social-btn {
    width: 22px;
    height: 22px;
  }

  footer .social-btn svg {
    width: 16px;
    height: 16px;
  }
}

footer a.text-link {
  color: #d0c4b0;
  text-decoration: none;
  font-size: .85rem;
  opacity: .9;
}

footer a.text-link:hover {
  text-decoration: underline;
}

/* Footer groups */
.support,
.social {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.support {
  justify-content: flex-start;
}

.social {
  justify-content: flex-end;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(245, 235, 216, 0.35);
  border-radius: 50%;
  text-decoration: none;
  color: var(--icon);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.social-btn:hover svg {
  fill: white;
  transform: translateY(-1px);
  border-color: rgba(245, 235, 216, 0.5);
  background: rgba(245, 235, 216, 0.08);
}

.social-btn.icon-only {
  width: 25px;
  height: 25px;
  padding: 0;
  justify-content: center;
}

.social-btn svg {
  fill: #e0c896;
  stroke: none;
  width: 20px;
  height: 20px;
  display: block;
}

.social-icon {
  stroke: none;
  width: 20px;
  height: 20px;
  display: block;
}

.icon-16 {
  display: block;
  width: 16px;
  height: 16px;
}

.icon-16 svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-18 {
  min-height: 18px;
}

.icon-img {
  vertical-align: middle;
  display: inline-block;
}

/* === CASE BUTTON (used for featured + case index) === */
.cases-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
  width: 100%;
}

.books-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
  width: 100%;
}

.letter-container {
  break-inside: avoid;
}

.case-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
}

.case-divider {
  margin-top: 2px;
  margin-bottom: 7px;
  color: #d1c7b8;
  font-size: 1rem;
  font-weight: bold;
}

/* Case button inside */
.case-list .case-button {
  padding: 0.8rem 0.8rem 0 0.8rem;
  margin-bottom: 0;
}

.featured-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.case-button {
  display: flex;
  gap: 0.8rem;
  padding: 0.8rem;
  margin: 0.5rem 0;
  border-left: 4px solid #8b0000;
  border-radius: 4px;
  background: rgba(20, 20, 20, 0.75);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.case-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* === CASE BUTTON THUMBNAIL + FRAME ===
   The frame PNG is 100x100px but the visible window
   is not perfectly centered. To align the photo inside
   the artwork, the image needs a manual offset and
   slightly uneven size: 86x83px.

   ⚠️ Do not replace with calc() or 96x96 – it will break
   the visual alignment with the custom frame graphic.
*/
.case-button .case-index-thumb {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.case-button .case-index-thumb .thumb-img {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 86px;
  height: 83px;
  object-fit: cover;
  border-radius: 3px;
  z-index: 1;
}

.case-button .case-index-thumb .thumb-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.case-button .case-text h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #f5f5dc;
}

.case-button .case-text h3 .case-link {
  color: inherit;
  text-decoration: none;
}

.case-button .case-text h3 .case-link:hover {
  text-decoration: underline;
  color: #fff;
}

.case-button-unpublished {
  opacity: 0.4;
}

.case-button-draft-label {
  font-weight: normal;
  font-size: 0.8em;
  opacity: 0.5;
}

/* Unified item button (used for changelog + search results) */
.item-button {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0;
  background: rgba(20, 20, 20, 0.75);
  border-left: 3px solid #a0a0a0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.item-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.item-button .item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-button .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item-button .item-text h4 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #f5f5dc;
}

.item-button .item-text .item-link {
  color: inherit;
  text-decoration: none;
}

.item-button .item-text .item-link:hover {
  text-decoration: underline;
  color: #fff;
}

/* Allow the text column to actually shrink inside the flex row */
.item-button .item-text {
  flex: 1;
  min-width: 0;
}

/* Clamp long descriptions to 2 lines (works whether you used <p> or <p class="item-meta">) */
.item-button .item-text p,
.item-button .item-text .item-meta {
  margin: 0.25rem 0 0;

  /* multi-line clamp */
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  /* handle long tokens like {@source-...} so they wrap before clamping */
  overflow-wrap: anywhere;
  line-height: 1.4;
  max-height: calc(1.4em * 2);
}

.dialog-variant {
  background-size: cover;
  background-position: center;
  aspect-ratio: 3 / 2;
  width: min(90vw, 600px);
  height: auto;
  max-height: min(80vh, 400px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
  position: relative;
}

/* Shared banner behind text */
.dialog-banner {
  background: rgba(0, 0, 0, 0.6);
  padding: 1em;
  text-align: center;
  color: #dfdfdf;
}

.dialog-banner .dialog-headline {
  margin: 0 0 0.5em;
  font-size: 1.2rem;
  font-weight: bold;
  color: #cfd0f8;
}

.dialog-banner p {
  margin: 0.2em 0;
  font-size: 1rem;
}

/* Shared actions */
.dialog-actions {
  display: flex;
  justify-content: center;
  gap: 1em;
  padding: 1em;
  background: rgba(0, 0, 0, 0.4);
}

.dialog-actions button {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  background: #fff;
  padding: 6px 14px;
  font-weight: bold;
  cursor: pointer;
}

.dialog-actions button.primary {
  background: #3b3024;
  color: #f4e3c3;
}

.page-content {
  margin: 10px;
}

/* Welcome page styling */

.welcome-page {
  margin: 10px;
}

.welcome-page .main-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2rem;
  align-items: start;
}

.welcome-page .main-layout h2 {
  font-size: 0.9rem;
  color: #f4e3c3;
}

/* Video styling */
.welcome-page .video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.welcome-page .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

.welcome-page .cases {
  grid-column: 2;
  grid-row: 1;
}

/* Case list cards */
.welcome-page .case-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 1rem;
}

.welcome-page .case {
  background: #1a1a1a;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.welcome-page .case h3 {
  margin-top: 0;
  color: #d9d9d9;
}

/* Changelog block look */
.changelog.compact h2 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.changelog.compact .item-button {
  padding: 0.4rem 0.6rem;
  gap: 0.6rem;
  margin: 0.35rem 0;
  border-left-width: 2px;
}

.changelog.compact .item-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.changelog.compact .item-text {
  min-width: 0;
}

.changelog.compact .item-text h4 {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.changelog.compact .item-text .item-meta {
  margin-top: 0.15rem;
  line-height: 1.25;

  /* keep to 1–2 lines max */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .welcome-page .main-layout {
    grid-template-columns: 1fr;
  }

  .welcome-page .video {
    grid-column: 1;
    grid-row: auto;
  }

  .welcome-page .cases {
    grid-column: 1;
    grid-row: auto;
  }

  .welcome-page .changelog {
    grid-column: 1;
    grid-row: auto;
    margin-top: 2rem;
  }
}

/* ============================
   Responsive Video Embeds
   ============================ */

/* Wrapper class for any embedded video (YouTube, Vimeo, etc.) */
/* Inline videos flex naturally with text and float when wide enough */
/* YouTube embed wrapper */
.video-inline {
  display: block;
  float: none;
  clear: both;

  width: min(500px, 100%);
  min-width: 250px;

  aspect-ratio: 16 / 9;
  margin: 1em auto;

  background: var(--paper);
  border: 1px solid var(--tab-edge);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
}

.video-inline iframe,
.video-inline video {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.smarttag-image-inline,
.smart-3d-preview {
  margin: 0 1em 1em 0em;
  width: 300px;
  max-width: 300px;
  width: auto;
  background: var(--paper);
  border: 1px solid var(--tab-edge);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

/* On narrow screens, stop floating — make it full width */
@media (max-width: 1024px) {
  .video-inline {
    float: none;
    display: block;
    width: 300px;
  }

  .video-inline,
  .smarttag-image-inline,
  .smart-3d-preview {
    width: 300px;
  }
}

/* On narrow screens, stop floating — make it full width */
@media (max-width: 500px) {
  .video-inline,
  .smarttag-image-inline,
  .smart-3d-preview {
    width: 250px;
  }
}

#case-banner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 85px;
  width: 100%;
  overflow: hidden;
  background-color: black;
  flex-shrink: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

#case-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  /* start far left */
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
  opacity: 1;
}

#banner-image {
  height: 85px;
}

#case-banner #case-status {
  height: 40px;
  margin-bottom: -10px;
}

/* Status stamp / content emblem */
#case-status {
  position: absolute;
  top: 20px;
  right: 12px;
  width: 100px;
  height: auto;
  opacity: 0.95;
  z-index: 5;

  /* Thin black outline */
  filter: drop-shadow(0 0 0.5px black)
          drop-shadow(0 0 0.5px black)
          drop-shadow(0 0 0.5px black);
}

/* Normal case outcome stamps */
#case-status.case-status-stamp {
  transform: rotate(3deg);
}

/* Sidetrack emblem */
#case-status.case-status-sidetrack {
  width: 120px;
  transform: none;
}

/* === META BAR (socials + author) === */
#case-meta-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem 0.4rem 0.4rem;
  color: #f5f5dc;
  z-index: 3;
  border-radius: 0 0 8px 8px;
  backdrop-filter: blur(1px) saturate(115%);
  -webkit-backdrop-filter: blur(1px) saturate(115%);
  color: #d0c4b0;
}

/* Left (share buttons) */
.case-meta-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Desktop: show normal buttons */
.case-meta-left:not(.mobile-only) {
  display: flex;
  gap: 8px;
}

/* Hide unified button by default */
.case-meta-left.mobile-only {
  display: none;
}

/* Mobile: hide old buttons, show unified one */
@media (max-width: 1024px) {
  .case-meta-left:not(.mobile-only) {
    display: none !important;
  }

  .case-meta-left.mobile-only {
    display: flex !important;
    justify-content: flex-start;
    gap: 8px;
  }
}

.share-btn {
  fill: #e0c896;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(245, 235, 216, 0.35);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.share-btn img {
  width: 15px;
  height: 15px;
  opacity: 0.85;
}

.share-btn:hover {
  fill: white;
  background: rgba(255, 255, 200, 0.1);
  transform: translateY(-1px);
}

.share-btn.copied {
  background: rgba(255, 255, 200, 0.25);
}

.case-meta-right {
  display: flex;
  align-items: center;
  gap: 4px;
  font-style: italic;
  font-size: 0.9em;
  color: #e2d8c3;
  margin-bottom: -5px;
}

.author-label {
  opacity: 0.8;
  font-style: italic;
  color: rgba(255, 255, 240, 0.8);
}

.case-author {
  font-style: italic;
  color: #f5f5dc;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.8),
    0 0 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.2px;
  white-space: nowrap;
  line-height: 1;
}

.case-tab-content-container {
  height: 100%;
}

.case-summary-scroll-panel {
  height: calc(100% - 85px);
  overflow: auto;
}

.case-summary {
  position: relative;
}

.case-article {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  position: relative;
  padding: 0.5rem 260px 0.5rem 1rem;
  scroll-behavior: smooth;
  display: grid;
  gap: 1rem;
  min-width: 270px;
}

.case-article hr {
  border-top: 2px solid black;
  margin-top: 23px;
  width: 100px;
}

.case-article.no-slideshow-container {
  padding: 0.5rem 1rem 0.5rem 1rem;
}

.case-article-display-header {
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(0,0,0,.25);
}

.case-article-byline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

@media (max-width: 500px) {
  .case-article {
    scroll-behavior: smooth;
  }

  .case-article-byline {
    display: flex;
    justify-content: space-between;
  }
}

.case-heading {
  height: 30px;
}

.case-authors {
  height: 22px;
  float: right;
  font-size: 8px;
  font-style: italic;
  margin-right: 10px;
  right: 0px;
  bottom: 0px;
  display: block;
}

.case-heading-ruler {
  height: 0px;
  border-bottom: 2px solid #7A0000;
  overflow: hidden;
}

.case-text-container {
  max-width: 100%;
  text-align: justify;
}

.case-sources {
  font-size: 0.95em;
}

.case-sources h4 {
  margin-bottom: 0.5rem;
  font-weight: bold;
  display: inline;
}

.case-media-rights,
.case-special-thanks {
  font-size: 0.95em;
}

.case-media-rights .case-media-rights-info {
  margin-top: -15px;
}

.letter-paper {
  border: 1px solid lightgray;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

/* Card Layout */
/* === Base Case Card === */
.case-card {
  background: #fffdf9;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
}

.case-card-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* === Visual modifiers === */
.case-card--actor {
  border-color: #d0b18a;
}

.case-card-actor .actor-details {
  flex: 1 1 250px;
  min-width: 200px;
}

.case-card--investigation {
  border-color: #b89b5e;
}

.case-card--event {
  border-color: #a2854d;
}

/* === Shared text elements === */
.case-card-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #3e2e1e;
  margin: 0;
}

.case-card-text {
  margin-top: 0.5rem;
  line-height: 1.5;
  color: #2e2e2e;
}

/* === Decorative, optional === */
.case-card-icon img,
.case-card-photo img {
  border-radius: 6px;
  object-fit: cover;
}

.card-main {
  display: block;
}

.card-details {
  display: block;
  overflow: hidden;
}

.actor-photo {
  float: left;
  width: 130px;
  height: 170px;
  margin: 0 1rem 0.5rem 0;
  border: 1px solid #aaa;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  position: relative;
}

.card-staple {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

.scene-photo {
  float: left;
  width: 220px;
  height: 170px;
  margin: 0 1rem 0.5rem 0;
  border: 1px solid #aaa;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  position: relative;
}

.card-bullet-block {
  clear: both;
}

.card-bullet-block .card-bullet-header {
  font-weight: bold;
  margin-bottom: 10px;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-birth-death {
  font-style: italic;
  font-size: 0.8em;
  /* smaller than name */
  color: #555;
  /* subtle gray */
  margin: 2px 0 6px 0;
  /* tight spacing below name */
  line-height: 1.3;
}

.card-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: bold;
  color: #3a2a16;
  margin-bottom: 4px;
}

.card-name-text {
  flex: 1;
  margin-right: 8px;
}

.card-bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
  line-height: 1.4;
  color: #3b2b17;
}

/* --- Conclusion Block --- */
.card-conclusion-block {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: #fcfbf6;
  border-top: 3px solid #b7a16a;
  border-radius: 8px;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05) inset;
  position: relative;
}

.card-conclusion-block strong {
  display: block;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5b4725;
  margin-bottom: 0.5rem;
}

.card-conclusion-text {
  font-style: italic;
  color: #333;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.card-stamp-image {
  text-align: center;
  margin-top: 0.75rem;
}

.card-stamp-image .stamp-img {
  max-height: 50px;
  opacity: 0.9;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.25));
  transform: rotate(-2deg);
}

/* --- “Stamp” Text --- */
.card-stamp-text {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-weight: bold;
  font-size: 0.9rem;
  color: #553;
  border: 2px solid rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(250, 235, 180, 0.3);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  transform: rotate(-2deg);
}

.category-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  filter: sepia(0.5) brightness(0.95) contrast(1.05);
  opacity: 0.95;
}

.card-role {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: #6b4b2b;
}

.card-role-icon {
  width: 32px;
  height: 32px;
  filter: sepia(0.4) brightness(0.95) contrast(1.1);
  opacity: 0.95;
  image-rendering: crisp-edges;
  vertical-align: middle;
}

/* Make lawyers pop more visibly */
.role-lawyer .card-role-icon,
.role-prosecutor .card-role-icon {
  filter: sepia(0.8) hue-rotate(-15deg) saturate(1.8) brightness(1.05);
}

/* Optional: distinguish defense and prosecution */
.role-defense-attorney .card-role-icon {
  filter: sepia(0.8) hue-rotate(60deg) saturate(1.6) brightness(1.1);
}

.role-prosecutor .card-role-icon {
  filter: sepia(0.8) hue-rotate(-20deg) saturate(1.8) brightness(1.05);
}

/* Timeline player container takes full available space */
#case-timeline-player {
  position: absolute;
  inset: 0;
  z-index: 0;

  height: auto;
  min-height: 0;

  background-size: cover;
  background-position: center bottom;
  background-attachment: scroll;

  overflow: hidden;
}

#case-timeline-player:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: none;
  background-attachment: scroll;
  overflow: hidden;
}

#case-timeline-player:fullscreen .timeline-toolbar {
  bottom: 18px;
}

/* Shared pseudo fullscreen base */
.case-panel[data-panel="timelines"].pseudo-fullscreen,
.case-panel[data-panel="locations"].pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  z-index: 999999 !important;
  background-attachment: scroll !important;
}

/* Timeline should clip */
#case-timeline-player.pseudo-fullscreen {
  overflow: hidden !important;
}

/* Locations must not clip Leaflet controls */
.case-panel[data-panel="locations"].pseudo-fullscreen {
  overflow: visible !important;
  background: #000 !important;
}

.case-panel[data-panel="timelines"].pseudo-fullscreen #case-timeline-player,
.case-panel[data-panel="locations"].pseudo-fullscreen #case-map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.case-panel[data-panel="locations"].pseudo-fullscreen .leaflet-control-container {
  position: relative !important;
  z-index: 10000 !important;
}

.case-panel[data-panel="locations"].pseudo-fullscreen .leaflet-left {
  left: 10px !important;
}

.case-panel[data-panel="locations"].pseudo-fullscreen .leaflet-top {
  top: 60px !important;
}

body.fullscreen-lock {
  overflow: hidden !important;
}

/* Map container takes full available space */
#case-map {
  position: absolute;
  overflow: hidden;
  inset: 0;
  z-index: 0;
}

#case-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* box-shadow: inset 0px 10px 10px 0px rgba(0, 0, 0, 0.35); */
  z-index: 2;
}

.brass-btn {
  width: 40px;
  height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  cursor: pointer;

  user-select: none;
  -webkit-user-drag: none;

  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    opacity 0.2s ease;
}

.brass-btn:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

.brass-btn.is-disabled {
  opacity: .25;
  pointer-events: none;
}

.brass-btn.is-playing {
  filter:
    brightness(1.15) drop-shadow(0 0 6px rgba(255, 210, 120, .45));
}

.brass-btn.is-loading {
  animation: brassPulse 1.2s infinite ease-in-out;
}

@keyframes brassPulse {

  0%,
  100% {
    opacity: .65;
  }

  50% {
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  .brass-btn {
    width: 37px;
    height: 37px;
  }
}

@media (max-width: 500px) {
  .brass-btn {
    width: 27px;
    height: 27px;
  }
}

.map-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 1000;
}

/* Opacity slider bar (to the left of opacity button) */
.opacity-slider-container {
  position: absolute;
  top: 140px;
  /* align vertically with opacity button */
  right: 45px;
  /* offset to the left of the button stack */
  width: 130px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 30, 0.6);
  border-radius: 6px;
  padding: 6px;
  z-index: 4000;
}

#opacity-slider {
  width: 100%;
  height: 6px;
}

/* --- Wrapper combines both sides --- */
.layer-panel-group {
  position: absolute;
  top: 225px;
  right: 0px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  z-index: 4001;
}

/* --- Text side (dark box) --- */
.layer-panel {
  width: 130px;
  background: rgba(30, 30, 30, 0.65);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  padding: 6px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* --- Layer list & items --- */
.layer-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.layer-row {
  position: relative;
  border-radius: 6px;
  padding: 8px 6px;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  transition: opacity 0.2s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.layer-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  z-index: 0;
}

.layer-text {
  text-shadow: 1px 1px 2px black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.layer-title {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
}

.layer-years {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  line-height: 1.1;
}

.layer-hidden .layer-title,
.layer-hidden .layer-years {
  color: rgba(255, 255, 255, 0.5);
}

/* --- Gold Eye Buttons Column --- */
.layer-eye-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.layer-eye {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.layer-eye:hover {
  transform: scale(1.1);
  filter: brightness(1.3);
}

img[data-highres],
img[data-full] {
  cursor: url("/wp-content/themes/yoricktours/assets/images/magnifying-glass-cursor.png") 7 7, pointer !important;
}

img[data-3d] {
  cursor: url("/wp-content/themes/yoricktours/assets/images/3d-cursor.png") 7 7, pointer !important;
}

.smarttag-error {
  color: red;
  font-weight: bold;
}

/* ----------------------------------
   Translate quote effect
---------------------------------- */

.yt-translate-wrap {
  display: block;
  text-align: center;
  margin: 1rem 0;
}

.yt-translate {
  position: relative;
  display: inline-block;
  max-width: 100%;
  text-align: center;

  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.5em;
  line-height: 1.6;
  color: #27231e;
}

/* Invisible height keeper */
.yt-translate-measure {
  display: block;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Original text */
.yt-translate-original {
  display: block;
  opacity: 1;
  z-index: 2;
  transition:
    opacity .7s ease,
    filter .9s ease,
    transform .9s ease;
}

/* Translation text */
.yt-translate-translation {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  z-index: 3;
  filter: blur(10px);
  transform: translateY(.5rem);
  transition:
    opacity .7s ease .25s,
    filter .8s ease .25s,
    transform .8s ease .25s;
}

/* Hover / focus */
.yt-translate:hover .yt-translate-original,
.yt-translate:focus .yt-translate-original {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(-.4rem) scale(1.03);
}

.yt-translate:hover .yt-translate-translation,
.yt-translate:focus .yt-translate-translation {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Smoke attached to original text */
.yt-translate-original::before,
.yt-translate-original::after {
  content: "";
  position: absolute;
  inset: -0.25em;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  filter: blur(14px);
  background:
    radial-gradient(circle at 30% 50%, rgba(70, 55, 40, .14), transparent 22%),
    radial-gradient(circle at 60% 45%, rgba(70, 55, 40, .10), transparent 26%);
  transition:
    opacity .7s ease,
    transform 1.3s ease;
}

.yt-translate:hover .yt-translate-original::before,
.yt-translate:focus .yt-translate-original::before {
  opacity: .75;
  transform: translateY(-.5rem) translateX(.2rem) scale(1.03);
}

.yt-translate:hover .yt-translate-original::after,
.yt-translate:focus .yt-translate-original::after {
  opacity: .45;
  transform: translateY(-.9rem) translateX(-.3rem) scale(1.08);
}

.yt-translate-note {
  display: block;
  margin-bottom: .35rem;
  font-family: Georgia, serif;
  font-size: .75rem;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
}