/* ===========================================================================
   25H — single-post chrome (dark-mode toggle + search) and dark theme.
   Loaded only on single posts.
   =========================================================================== */

/* ---- Injected controls (search + theme toggle) ---- */
.h25-sc {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 60;
  pointer-events: none;
  direction: ltr;
}
.h25-sc-search {
  position: absolute;
  top: 22px;
  left: 22px;
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.h25-sc-theme {
  position: absolute;
  top: 24px;
  right: 22px;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: #efefef;
  pointer-events: auto;
}
.h25-sc-search-btn,
.h25-sc-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #111;
  line-height: 0;
}
.h25-sc-search-btn { padding: 6px; }
.h25-sc-opt {
  width: 32px;
  height: 26px;
  border-radius: 999px;
  color: #6b6b6b;
}
.h25-sc-opt.active { background: #111; color: #fff; }

.h25-sc-search-input {
  width: 0;
  opacity: 0;
  padding: 0;
  margin-inline-start: 8px;
  border: 0;
  border-bottom: 1px solid #cfcfcf;
  background: transparent;
  color: #111;
  font-family: inherit;
  font-size: 1rem;
  direction: rtl;
  text-align: right;
  transition: width .25s ease, opacity .25s ease;
}
.h25-sc.search-open .h25-sc-search-input {
  width: min(62vw, 320px);
  opacity: 1;
}
.h25-sc-search-btn:focus-visible,
.h25-sc-opt:focus-visible,
.h25-sc-search-input:focus-visible {
  outline: 2px solid rgba(0, 0, 0, .35);
  outline-offset: 3px;
}

/* dark variants of the controls */
html.dark-mode .h25-sc-search-btn { color: #f1f1f1; }
html.dark-mode .h25-sc-theme { background: #2a2a2a; }
html.dark-mode .h25-sc-opt { color: #a9a9a9; }
html.dark-mode .h25-sc-opt.active { background: #f1f1f1; color: #111; }
html.dark-mode .h25-sc-search-input { color: #f1f1f1; border-bottom-color: #444; }

/* ===========================================================================
   Dark theme for the article. Flips theme.json color variables, then patches
   the parts that hardcode light colors.
   =========================================================================== */
html.dark-mode {
  color-scheme: dark;
  --wp--preset--color--base: #1f1f1b;
  --wp--preset--color--contrast: #f8f9fa;
  --wp--preset--color--primary: #e6e6e6;
  --wp--preset--color--secondary: #9aa4b2;
  --wp--preset--color--tertiary: #a8c7fa;
}

/* Page background — beats the per-category gradients in style.css (which use
   !important). body.single matches every single post. */
html.dark-mode body.single .wp-site-blocks { background: #1f1f1b !important; }
html.dark-mode body { background-color: #1f1f1b; color: #e6e6e6; }

/* Text + headings */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode .wp-block-post-title,
html.dark-mode .wp-block-post-title a { color: #f8f9fa; }
html.dark-mode p, html.dark-mode li, html.dark-mode figcaption,
html.dark-mode .wp-block-post-content { color: #e0e0e0; }

/* Links inside the article body */
html.dark-mode .wp-block-post-content a { color: #a8c7fa; }

/* Category pill (post-terms) */
html.dark-mode .wp-block-post-terms a {
  background: #2e2e2e !important;
  color: #f1f1f1 !important;
}

/* Source attribution box */
html.dark-mode .source-info-box {
  background: #262626 !important;
  color: #cfcfcf !important;
  box-shadow: none !important;
}
html.dark-mode .source-info-box .source-info-header,
html.dark-mode .source-info-box a { color: #f1f1f1 !important; }

/* Related posts (Jetpack + theme) */
html.dark-mode .jp-related-posts,
html.dark-mode .jp-relatedposts { color: #e0e0e0; }
html.dark-mode .jp-related-posts h3,
html.dark-mode .jp-relatedposts h3,
html.dark-mode .jp-relatedposts-headline { color: #f8f9fa !important; }

/* Quotes, code, separators */
html.dark-mode blockquote { border-color: #444; }
html.dark-mode .wp-block-code, html.dark-mode pre {
  background: #28292a !important;
  color: #e6e6e6 !important;
}
html.dark-mode hr { border-color: #333; }

/* Soften imagery slightly so it doesn't glare on the dark page */
html.dark-mode .wp-block-post-featured-image img { opacity: .92; }

/* Footer */
html.dark-mode footer,
html.dark-mode .wp-block-template-part:last-of-type { background: #141414; }
html.dark-mode footer p,
html.dark-mode footer a,
html.dark-mode footer .wp-block-paragraph { color: #cfcfcf; }