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

/* ---- Injected controls ----
   The wrapper's `top` is set by JS to align vertically with the centered logo. */
.h25-sc {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  z-index: 50;
  pointer-events: none;
  direction: ltr;
}

/* search at the left edge, theme toggle at the right edge — 50px like the homepage */
.h25-sc-search {
  position: absolute;
  top: 0;
  left: 50px;
  transform: translateY(-50%);
  pointer-events: auto;
}
.h25-sc-theme {
  position: absolute;
  top: 0;
  right: 50px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.14rem;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  pointer-events: auto;
}

.h25-sc-search-btn {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.h25-sc-search-btn:hover { background: rgba(0, 0, 0, 0.06); }

.h25-sc-opt {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.h25-sc-opt.active { background: #111; color: #fff; }

.h25-sc-search-input {
  position: absolute;
  left: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0.3rem 0.5rem;
  font-size: 1rem;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  border: 1px solid #ccc;
  border-radius: 20px;
  outline: none;
  background: #fff;
  color: #111;
  direction: rtl;
  text-align: right;
  transition: width 0.4s ease, opacity 0.3s ease;
}
.h25-sc.search-open .h25-sc-search-input { width: 200px; opacity: 1; pointer-events: auto; }
.h25-sc-search-input[type="search"]::-webkit-search-cancel-button,
.h25-sc-search-input[type="search"]::-webkit-search-decoration { display: none; }
.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 — match the homepage */
html.dark-mode .h25-sc-search-btn { color: #f7f7f7; }
html.dark-mode .h25-sc-search-btn:hover { background: rgba(255, 255, 255, 0.08); }
html.dark-mode .h25-sc-theme {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
html.dark-mode .h25-sc-opt { color: #f7f7f7; }
html.dark-mode .h25-sc-opt.active { background: #1f1f1f; color: #fff; }
html.dark-mode .h25-sc-search-input { background: #111; border-color: rgba(255, 255, 255, 0.16); color: #fff; }
html.dark-mode .h25-sc-search-input::placeholder { color: #bdbdbd; }

/* mobile — match the homepage */
@media (max-width: 600px) {
  .h25-sc-search { left: 16px; }
  .h25-sc-theme { right: 16px; }
  .h25-sc-opt { width: 26px; height: 26px; }
  .h25-sc-search-btn { width: 42px; height: 42px; }
  .h25-sc.search-open .h25-sc-search-input { width: min(190px, 50vw); }
}

/* Match the homepage's logo top spacing exactly. The homepage header uses a fixed
   1.5rem; the block theme's root padding-top resolves a hair smaller on mobile. */
body.single .wp-site-blocks { padding-top: 1.5rem !important; }

/* ===========================================================================
   DARK THEME (single posts). Pure black to match the homepage.
   =========================================================================== */
html.dark-mode {
  color-scheme: dark;
  --wp--preset--color--base: #000000;
  --wp--preset--color--contrast: #f8f9fa;
  --wp--preset--color--primary: #e6e6e6;
  --wp--preset--color--secondary: #9aa4b2;
  --wp--preset--color--tertiary: #a8c7fa;
}

/* (1) Make every page surface pure black — removes the header/content banding,
   and beats the per-category gradients in style.css (which use !important). */
html.dark-mode,
html.dark-mode body,
html.dark-mode body.single .wp-site-blocks,
html.dark-mode .wp-block-template-part,
html.dark-mode header.wp-block-template-part,
html.dark-mode main { background-color: #000 !important; }

/* 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; }
html.dark-mode .wp-block-post-content a { color: #a8c7fa; }

/* (2) Logos to white — theme header logo + the sticky bar logo */
html.dark-mode .wp-block-site-logo img,
html.dark-mode img.custom-logo,
html.dark-mode #stickyTopbar .center-logo img { filter: brightness(0) invert(1); }

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

/* Share / social-link icons. Each <li> carries inline color + background-color,
   so dark overrides require !important. Dark circle + light icon, like the footer. */
html.dark-mode .wp-block-social-links .wp-social-link {
  background-color: #1f1f1f !important;
  color: #d4d4d4 !important;
}
html.dark-mode .wp-block-social-links .wp-social-link:hover { background-color: #2c2c2c !important; }
html.dark-mode .wp-block-social-links .wp-social-link svg { fill: currentColor !important; }
/* copy-link confirmation toast */
html.dark-mode .copy-feedback { background: #1f1f1f !important; color: #fff !important; }

/* (4) Sticky reading bar + progress */
html.dark-mode #stickyTopbar {
  background-color: rgba(10, 10, 10, 0.72) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
  border-bottom-color: #000 !important; /* was a hardcoded white 1px line */
}
html.dark-mode .reading-time-text { color: #b8bfca !important; }
html.dark-mode .dot.filled { background-color: #c2c8d2 !important; }
html.dark-mode .dot.empty { border-color: #c2c8d2 !important; }
/* back-to-top arrow: category-coloured background + black arrow */
html.dark-mode .back-to-top-btn {
  background-color: var(--h25-cat-color, #2a2a2a) !important;
  color: #000 !important;
}
html.dark-mode .back-to-top-btn:hover { filter: brightness(0.92); }
html.dark-mode .article-icon-badge { filter: none !important; }
/* progress-bar track → black (removes the noisy white line); the category-coloured
   fill (#progressBar) still shows the read progress. */
html.dark-mode #progressBarContainer { background: #000 !important; }

/* (5) Business info box */
html.dark-mode #business-info-snippet {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: #4a4527 !important;
  color: #d8d8d8 !important;
  box-shadow: none !important;
}
html.dark-mode #business-info-snippet strong { color: #f1f1f1 !important; }
html.dark-mode #business-info-snippet a { color: #8ab4f8 !important; }

/* (6) Related posts */
html.dark-mode .related-post-item,
html.dark-mode [class*="category-"].related-post-item {
  background: #141414 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html.dark-mode .related-post-title { color: #f1f1f1 !important; }
html.dark-mode .related-post-date { color: #9a9a9a !important; }
/* category badge text must be black on its light pastel pill (was white) */
html.dark-mode .related-post-category { color: #000 !important; }
html.dark-mode .image-gradient-overlay,
html.dark-mode [class*="category-"] .image-gradient-overlay {
  background: linear-gradient(to top, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 60%) !important;
}
html.dark-mode .pagination .page-numbers { background: #2a2a2a !important; color: #e0e0e0 !important; }
html.dark-mode .pagination .page-numbers:hover { background: #383838 !important; }
html.dark-mode .pagination .current { background: #dbd39a !important; color: #000 !important; }

/* Older source-attribution box (if present on a post) */
html.dark-mode .source-info-box { background: #161616 !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; }

/* Misc content blocks */
html.dark-mode blockquote { border-color: #444; }
html.dark-mode .wp-block-code, html.dark-mode pre { background: #1a1a1a !important; color: #e6e6e6 !important; }
html.dark-mode hr { border-color: #333; }
html.dark-mode .wp-block-post-featured-image img { opacity: .95; }