/* Centered figure captions */
.caption {
  text-align: center;
}

/* Abbreviations: dotted underline with a hover tooltip */
abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

/* ============================================================
   Dark / light theme toggle in the navbar
   ============================================================ */
.menu .menu-divider {
  width: 1px;
  height: 18px;
  padding: 0;
  margin: 0 2px 0 8px;
  background: #cacaca;
  vertical-align: middle;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  color: #34495e;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { color: #c05b4d; }
html[data-theme="dark"] .theme-toggle { color: #c9ccd1; }
html[data-theme="dark"] .theme-toggle:hover { color: #d2685c; }
html[data-theme="dark"] .menu .menu-divider { background: #44444a; }

/* Dark/light toggle inside the mobile slideout menu */
.mobile-theme-toggle { padding: 0; }
.mobile-theme-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 30px;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  font-size: 18px;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-theme-toggle button svg { width: 20px; height: 20px; }

/* ============================================================
   Dark mode
   ============================================================ */
html[data-theme="dark"] body,
html[data-theme="dark"] .slideout-panel {
  background: #1b1b1d;
  color: #c9ccd1;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .post-title,
html[data-theme="dark"] .archive-name,
html[data-theme="dark"] .collection-title {
  color: #e8eaed;
}

/* Logo and navigation */
html[data-theme="dark"] .logo,
html[data-theme="dark"] .logo:hover { color: #e8eaed; }
html[data-theme="dark"] .menu-item-link { color: #c9ccd1; }
html[data-theme="dark"] .menu .menu-item-link:hover,
html[data-theme="dark"] .menu .active .menu-item-link { color: #d2685c; }

/* Links */
html[data-theme="dark"] a { color: #c9ccd1; }
html[data-theme="dark"] .post-content a,
html[data-theme="dark"] .post-title a:hover { color: #d2685c; }

/* Muted / meta text */
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .post-time,
html[data-theme="dark"] .more-meta,
html[data-theme="dark"] .post-nav,
html[data-theme="dark"] .copyright,
html[data-theme="dark"] .footer { color: #9aa0a6; }
html[data-theme="dark"] .footer a,
html[data-theme="dark"] .copyright a { color: #c9ccd1; }

/* Borders and rules */
html[data-theme="dark"] .post + .post,
html[data-theme="dark"] .post-footer,
html[data-theme="dark"] .post-tags,
html[data-theme="dark"] hr { border-color: #34343a; }
html[data-theme="dark"] hr { background: #34343a; }

/* Inline code and code blocks */
html[data-theme="dark"] code { background: #26262a; color: #e06c9a; }
html[data-theme="dark"] pre,
html[data-theme="dark"] .highlight,
html[data-theme="dark"] .highlight pre { background: #26262a !important; color: #c9ccd1; }

/* Blockquote */
html[data-theme="dark"] blockquote {
  background: rgba(210, 104, 92, 0.08);
  border-left-color: rgba(210, 104, 92, 0.4);
}

/* Tables */
html[data-theme="dark"] table th,
html[data-theme="dark"] table td { border-color: #34343a; }
html[data-theme="dark"] table th { background: #26262a; }
html[data-theme="dark"] table tr,
html[data-theme="dark"] table tr:nth-child(2n) { background: transparent; }

/* Table of contents */
html[data-theme="dark"] .post-toc { background: #26262a; }

/* Back to top */
html[data-theme="dark"] .back-to-top { background: #26262a; color: #c9ccd1; }

/* Archive list */
html[data-theme="dark"] .archive-post-link,
html[data-theme="dark"] .archive-post-time { color: #c9ccd1; }
html[data-theme="dark"] .archive-post { border-left-color: #34343a; }

/* Mobile navbar and slideout menu */
html[data-theme="dark"] .mobile-navbar {
  background: #1b1b1d;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .mobile-navbar .mobile-navbar-icon { color: #c9ccd1; }
html[data-theme="dark"] .mobile-menu { background-color: #161618; }
html[data-theme="dark"] .mobile-menu .mobile-menu-list { border-top-color: #34343a; }
html[data-theme="dark"] .mobile-menu .mobile-menu-item { border-bottom-color: #34343a; }
html[data-theme="dark"] .mobile-menu .mobile-menu-list a,
html[data-theme="dark"] .mobile-theme-toggle button { color: #c9ccd1; }

/* Pagefind search UI */
html[data-theme="dark"] .pagefind-search {
  --pagefind-ui-primary: #d2685c;
  --pagefind-ui-text: #c9ccd1;
  --pagefind-ui-background: #1b1b1d;
  --pagefind-ui-border: #34343a;
  --pagefind-ui-tag: #26262a;
}