/* Roadster Dark Mode (Dark Reader-style) by us 
   Goal: recolor only (no layout changes).
   Notes:
   - Single @media block.
   - No width/max-width/margin/padding/display/flex/position overrides.
*/

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Palette */
    --dr-bg: #0f1216;
    --dr-panel: #151a20;
    --dr-panel2: #12171d;
    --dr-nav: #1a1f25;
    --dr-border: rgba(255, 255, 255, 0.12);
    --dr-border-soft: rgba(255, 255, 255, 0.08);
    --dr-text: #e8edf4;
    --dr-muted: #aab2bd;
    --dr-link: #d6dde7;
    --dr-accent: #ff3b3b; /* tweak the red */

    /* Code */
    --dr-code-bg: #0b0e12;
    --dr-code-text: #d7dde5;

    /* Inputs */
    --dr-input-bg: #0b0e12;
  }

  /* Global */
  html, body {
    background: var(--dr-bg) !important;
    color: var(--dr-text) !important;
  }

  /* Layout rails (COLOR ONLY): Roadster uses white backgrounds on outer wrappers.
     We only set background-color to eliminate the white page margins. */
  .container--outer,
  .container,
  .wrap,
  .wrapper,
  .content,
  .content__inner,
  .page,
  .page__body,
  .site,
  main {
    background-color: var(--dr-panel) !important;
  }

  /* Header / logo */
  header.header, .header {
    background: var(--dr-panel2) !important;
    border-bottom-color: var(--dr-border) !important;
  }

  .logo__title {
    color: var(--dr-accent) !important;
    -webkit-text-fill-color: var(--dr-muted) !important;
  }

  /* Menu */
  nav.menu, .menu {
    background: var(--dr-nav) !important;
    border-bottom-color: var(--dr-accent) !important;
  }

  .menu__link {
    color: var(--dr-text) !important;
    background: transparent !important;
    border-right-color: var(--dr-border-soft) !important;
  }

  .menu__item--active .menu__link,
  .menu__link[aria-current="page"] {
    background: var(--dr-accent) !important;
  }

  .menu__link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  /* Section/list headers (color only – match panel background, do not change layout) */
  .page__header,
  .list__header,
  .section__header,
  .taxonomy__header,
  .content__header,
  .page-header,
  .list-header {
    background-color: var(--dr-panel) !important;
    border-bottom-color: var(--dr-muted) !important;
  }

  /* Panels / cards / widgets: only colors + borders */
  article, .post, .entry, .list, .card,
  .widget, .sidebar, .sidebar .widget,
  .sidebar__content, .block, .box {
    background: var(--dr-panel) !important;
    color: var(--dr-text) !important;
    border-color: var(--dr-border) !important;
  }

  /* Titles */
  h1, h2, h3, h4, h5, h6,
  .page__title, .post__title, .list__title,
  .entry__title, .post-title, .entry-title {
  color: var(--dr-text) !important; 
  }

  /* Post titles: keep single-page titles white, but make list/recent titles accent red */
  .post__title, .post-title {
    color: var(--dr-text) !important;
  }

  /* List titles (accent red): ONLY the main content lists, not sidebar widgets */
  .list .post__title a,
  .list .entry__title a,
  .list .post-title a,
  .list .entry-title a {
    color: var(--dr-accent) !important;
  }

  /* Hover: brighten (lists only) */
  .list .post__title a:hover,
  .list .entry__title a:hover,
  .list .post-title a:hover,
  .list .entry-title a:hover {
    color: #ffffff !important;
  }

  /* Meta */
  .meta, .post-meta, .entry-meta,
  .date, time, small {
    color: var(--dr-muted) !important;
  }

  /* Links */
  a {
    color: var(--dr-link) !important;
    text-decoration-color: rgba(255, 255, 255, 0.25) !important;
  }

  a:hover {
    color: #ffffff !important;
    text-decoration-color: rgba(255, 255, 255, 0.6) !important;
  }

  /* Section/widget headings with accent underline */
  .sidebar .widget__title, .widget__title,
  .section__title, .recent__title,
  .taxonomy__title {
    border-bottom-color: var(--dr-accent) !important;
  }

  /* Tags / badges */
  .tag, .tags a, a.tag, .taxonomy a {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--dr-border) !important;
    color: var(--dr-text) !important;
  }

  /* Code */
  pre, code, kbd, samp {
    background: var(--dr-code-bg) !important;
    color: var(--dr-code-text) !important;
    border-color: var(--dr-border) !important;
  }

  /* Inputs */
  input, textarea, select, button {
    background: var(--dr-input-bg) !important;
    color: var(--dr-text) !important;
    border-color: var(--dr-border) !important;
  }

  /* Tables */
  table {
    color: var(--dr-text) !important;
  }

  th, td {
    border-color: var(--dr-border-soft) !important;
  }

  thead th {
    background: var(--dr-panel2) !important;
  }

  /* Horizontal rules */
  hr {
    border-color: var(--dr-border) !important;
  }

  /* Footer (color only; DO NOT change widths) */
  footer.footer, .footer {
    background: var(--dr-panel2) !important;
    border-top-color: var(--dr-border) !important;
  }

  /* Blockquotes */
  blockquote {
    border-left-color: var(--dr-accent) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--dr-text) !important;
  }

  /* SVG icons */
  svg, svg * {
    stroke: currentColor;
    fill: currentColor;
  }

  /* Search widget (COLOR ONLY – kill white box) */
  .widget-search,
  .widget-search__form {
    background: var(--dr-panel2) !important;
    border-color: var(--dr-border) !important;
  }

  .widget-search__input {
    background: var(--dr-input-bg) !important;
    color: var(--dr-text) !important;
    border-color: var(--dr-border) !important;
  }
}

/* Restore list title size (theme regression fix) */
.list__title.post__title {
  font-size: 1.6rem;
  line-height: 1.2;
}

/* Constrain post images (Roadster/Hugo figures) */
.post__content img,
.post__content figure img,
.content img,
.content figure img {
  max-width: 900px;
  width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

/* List pages: make the "before <!--more-->" image a thumbnail and prevent clipping */
.list figure,
.list .post__content figure,
.list .entry__content figure {
  max-width: 520px;
  margin: 1rem 0;
}

.list figure img,
.list .post__content figure img,
.list .entry__content figure img {
  max-width: 520px;
  width: 100%;
  height: auto;
}

/* Some themes clamp list summaries; ensure the thumbnail isn't cropped */
.list__item,
.list__content,
.list__excerpt,
.post__excerpt,
.entry__excerpt {
  overflow: visible !important;
  max-height: none !important;
}