/* ═══════════════════════════════════════════════════════════════
   NeoMutt Docs — Custom Stylesheet
   Theme:   sphinx_book_theme (built on pydata-sphinx-theme)
   Palette: #005461  #018790  #00B7B5  #F4F4F4
   ═══════════════════════════════════════════════════════════════ */


/* ─── Layout ──────────────────────────────────────────────────
   Full-width content area; compact right-hand TOC sidebar.
   ──────────────────────────────────────────────────────────── */

.bd-sidebar-primary .navbar-brand {
  padding-top: 0;
}

.bd-article-container,
.bd-page-width,
.bd-content {
  max-width: 100% !important;
}

.bd-sidebar-secondary {
  max-width: 250px !important;
  min-width: 0 !important;
  flex: 0 0 250px !important;
}

footer.bd-footer-content { display: none; }

/* Article header toolbar — force horizontal flex layout */
.header-article-items__end,
.header-article-items__start {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.header-article-items__end .header-article-item,
.header-article-items__start .header-article-item {
  display: flex !important;
  align-items: center;
}


/* ─── Article body background ─────────────────────────────────
   White in light mode, black in dark — keeps text crisp.
   ──────────────────────────────────────────────────────────── */

html[data-theme=light] .bd-article-container { background: #fff; }
html[data-theme=dark]  .bd-article-container { background: #000; }

.page-index .bd-article-container { background: transparent !important; }

@media (prefers-color-scheme: light) {
  html[data-theme=auto] .bd-article-container { background: #fff; }
}
@media (prefers-color-scheme: dark) {
  html[data-theme=auto] .bd-article-container { background: #000; }
}


/* ─── Brand colours ───────────────────────────────────────────
   Override pydata-sphinx-theme CSS variables to use the
   NeoMutt teal palette across links, highlights and chrome.
   ──────────────────────────────────────────────────────────── */

html[data-theme=light] {
  --pst-color-primary: #005461;
  --pst-color-primary-highlight: #018790;
  --pst-color-link: #018790;
  --pst-color-link-hover: #005461;
  --pst-color-background: #e0f7f8;
}

html[data-theme=dark] {
  --pst-color-primary: #00B7B5;
  --pst-color-primary-highlight: #018790;
  --pst-color-link: #00B7B5;
  --pst-color-link-hover: #018790;
  --pst-color-background: #0d1e22;
}

@media (prefers-color-scheme: light) {
  html[data-theme=auto] {
    --pst-color-primary: #005461;
    --pst-color-primary-highlight: #018790;
    --pst-color-link: #018790;
    --pst-color-link-hover: #005461;
    --pst-color-background: #e0f7f8;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme=auto] {
    --pst-color-primary: #00B7B5;
    --pst-color-primary-highlight: #018790;
    --pst-color-link: #00B7B5;
    --pst-color-link-hover: #018790;
    --pst-color-background: #0d1e22;
  }
}


/* ─── Sphinx-design cards ─────────────────────────────────────
   Match article background so cards don't float on the
   default grey surface.
   ──────────────────────────────────────────────────────────── */

html[data-theme=light] .sd-card { background: #fff; color: #000; }
html[data-theme=dark]  .sd-card { background: #000; color: #fff; }

@media (prefers-color-scheme: light) {
  html[data-theme=auto] .sd-card { background: #fff; color: #000; }
}
@media (prefers-color-scheme: dark) {
  html[data-theme=auto] .sd-card { background: #000; color: #fff; }
}


/* ─── Diataxis landing-page cards ─────────────────────────────
   Colour-coded cards on index.md for the five doc categories.
   ──────────────────────────────────────────────────────────── */

html[data-theme=light] .sd-card.dia-start,
html[data-theme=light] .sd-card.dia-tutorial,
html[data-theme=light] .sd-card.dia-howto,
html[data-theme=light] .sd-card.dia-explanation,
html[data-theme=light] .sd-card.dia-reference {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #000;
}

html[data-theme=dark] .sd-card.dia-start,
html[data-theme=dark] .sd-card.dia-tutorial,
html[data-theme=dark] .sd-card.dia-howto,
html[data-theme=dark] .sd-card.dia-explanation,
html[data-theme=dark] .sd-card.dia-reference {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
}

@media (prefers-color-scheme: light) {
  html[data-theme=auto] .sd-card.dia-start,
  html[data-theme=auto] .sd-card.dia-tutorial,
  html[data-theme=auto] .sd-card.dia-howto,
  html[data-theme=auto] .sd-card.dia-explanation,
  html[data-theme=auto] .sd-card.dia-reference {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #000;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme=auto] .sd-card.dia-start,
  html[data-theme=auto] .sd-card.dia-tutorial,
  html[data-theme=auto] .sd-card.dia-howto,
  html[data-theme=auto] .sd-card.dia-explanation,
  html[data-theme=auto] .sd-card.dia-reference {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
  }
}

.sd-card.dia-start .sd-card-header,
.sd-card.dia-start .sd-card-body,
.sd-card.dia-start .sd-card-footer,
.sd-card.dia-tutorial .sd-card-header,
.sd-card.dia-tutorial .sd-card-body,
.sd-card.dia-tutorial .sd-card-footer,
.sd-card.dia-howto .sd-card-header,
.sd-card.dia-howto .sd-card-body,
.sd-card.dia-howto .sd-card-footer,
.sd-card.dia-explanation .sd-card-header,
.sd-card.dia-explanation .sd-card-body,
.sd-card.dia-explanation .sd-card-footer,
.sd-card.dia-reference .sd-card-header,
.sd-card.dia-reference .sd-card-body,
.sd-card.dia-reference .sd-card-footer {
  background-color: transparent !important;
}


/* ─── Tables ──────────────────────────────────────────────────
   Left-aligned, auto-width tables with branded header row
   and teal hover highlight.
   ──────────────────────────────────────────────────────────── */

table {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

th {
  text-align: left;
  background-color: #005461;
  color: #F4F4F4;
  padding: 0 0.5em 0 0.25em;
  vertical-align: top;
}

html[data-theme=dark] th {
  background-color: #018790;
  color: #F4F4F4;
}

@media (prefers-color-scheme: dark) {
  html[data-theme=auto] th {
    background-color: #018790;
    color: #F4F4F4;
  }
}

table.docutils td {
  padding: 0 0.5em 0 0.25em;
  vertical-align: top;
}

html[data-theme=light] table tbody tr:hover {
  background-color: #00B7B5 !important;
}

html[data-theme=dark] table tbody tr:hover {
  background-color: #005461 !important;
}

@media (prefers-color-scheme: light) {
  html[data-theme=auto] table tbody tr:hover {
    background-color: #00B7B5 !important;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme=auto] table tbody tr:hover {
    background-color: #005461 !important;
  }
}


/* ─── Horizontal rules ────────────────────────────────────────
   Visible border in both modes (theme default is very faint).
   ──────────────────────────────────────────────────────────── */

html[data-theme=light] hr { border: 1px solid #000; }
html[data-theme=dark]  hr { border: 1px solid #fff; }

@media (prefers-color-scheme: light) {
  html[data-theme=auto] hr { border: 1px solid #000; }
}
@media (prefers-color-scheme: dark) {
  html[data-theme=auto] hr { border: 1px solid #fff; }
}


/* ─── Highlighted lines in code blocks ────────────────────────
   Branded background for :emphasize-lines: markers.
   ──────────────────────────────────────────────────────────── */

html[data-theme=light] .highlight .hll {
  background-color: #005461;
  color: #F4F4F4;
  display: block;
}

html[data-theme=dark] .highlight .hll {
  background-color: #018790;
  color: #F4F4F4;
  display: block;
}

@media (prefers-color-scheme: light) {
  html[data-theme=auto] .highlight .hll {
    background-color: #005461;
    color: #F4F4F4;
    display: block;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme=auto] .highlight .hll {
    background-color: #018790;
    color: #F4F4F4;
    display: block;
  }
}


/* ── Sidebar background image ───────────────────────────────── */

html[data-theme=light] .bd-sidebar-primary {
  background: url("light.png") no-repeat center center / auto 100%;
  background-color: rgba(255, 255, 255, 0.65) !important;
  background-blend-mode: overlay;
}

html[data-theme=dark] .bd-sidebar-primary {
  background: url("dark.png") no-repeat center center / auto 100%;
  background-color: rgba(0, 0, 0, 0.65) !important;
  background-blend-mode: overlay;
}

@media (prefers-color-scheme: light) {
  html[data-theme=auto] .bd-sidebar-primary {
    background: url("light.png") no-repeat center center / auto 100%;
    background-color: rgba(255, 255, 255, 0.65) !important;
    background-blend-mode: overlay;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme=auto] .bd-sidebar-primary {
    background: url("dark.png") no-repeat center center / auto 100%;
    background-color: rgba(0, 0, 0, 0.65) !important;
    background-blend-mode: overlay;
  }
}


/* ── Front-page background image ────────────────────────────── */
html[data-theme=light] body.page-index .bd-article-container {
  background: url("light.png") no-repeat center center / cover !important;
  background-color: rgba(255, 255, 255, 0.45) !important;
  background-blend-mode: overlay;
}

html[data-theme=dark] body.page-index .bd-article-container {
  background: url("dark.png") no-repeat center center / cover !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  background-blend-mode: overlay;
}

@media (prefers-color-scheme: light) {
  html[data-theme=auto] body.page-index .bd-article-container {
    background-color: rgba(255, 255, 255, 0.45) !important;
    background-blend-mode: overlay;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme=auto] body.page-index .bd-article-container {
    background-color: rgba(0, 0, 0, 0.45) !important;
    background-blend-mode: overlay;
  }
}

/* ─── Footer accent ───────────────────────────────────────── */

.bd-footer {
  border-top: 3px solid #018790 !important;
}

svg.fa-twitter {
  color: #55acee;
}


/* ─── Sponsor link in navbar ──────────────────────────────────
   Heart + "Sponsor NeoMutt" badge shown in the article header.
   Hidden on narrow viewports (< 1500 px) alongside devel
   warning and GitHub stars badge.
   ──────────────────────────────────────────────────────────── */

.sponsor-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.8em;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #c00040;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

html[data-theme=light] .sponsor-link:hover {
  background: #d04060;
  color: #fff;
}

html[data-theme=light] .sponsor-heart {
  color: #c00040;
  font-size: 1.1em;
}

html[data-theme=light] .sponsor-link:hover .sponsor-heart {
  color: #fff;
}

html[data-theme=dark] .sponsor-link {
  border-color: #e06070;
  color: #f0a0a8;
}

html[data-theme=dark] .sponsor-heart {
  color: #f0a0a8;
}

html[data-theme=dark] .sponsor-link:hover {
  background: #d04060;
  color: #fff;
}

html[data-theme=dark] .sponsor-link:hover .sponsor-heart {
  color: #fff;
}

@media (prefers-color-scheme: light) {
  html[data-theme=auto] .sponsor-link:hover {
    background: #d04060;
    color: #fff;
  }

  html[data-theme=auto] .sponsor-heart {
    color: #c00040;
    font-size: 1.1em;
  }

  html[data-theme=auto] .sponsor-link:hover .sponsor-heart {
    color: #fff;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme=auto] .sponsor-link {
    border-color: #e06070;
    color: #f0a0a8;
  }

  html[data-theme=auto] .sponsor-heart {
    color: #f0a0a8;
  }

  html[data-theme=auto] .sponsor-link:hover {
    background: #d04060;
    color: #fff;
  }

  html[data-theme=auto] .sponsor-link:hover .sponsor-heart {
    color: #fff;
  }
}


/* ─── Development warning & responsive hide ───────────────────
   Orange "Under Development" badge; all three header extras
   (devel, sponsor, stars) collapse on narrow screens.
   ──────────────────────────────────────────────────────────── */

.devel-warning {
  padding: 0 0.5em;
  border-radius: 6px;
  font-size: 1.2rem;
  background: #ffaf4d;
  color: #000;
  border: 1px solid black;
}

@media screen and (max-width: 1500px) {
  .devel-warning, .sponsor-link, .stars-link {
    display: none;
  }
}


/* ─── Read the Docs server-side search ────────────────────────
   Styling for RTD search results injected via
   rtd-server-search.js.
   ──────────────────────────────────────────────────────────── */

.rtd-server-search-summary {
  margin: 1rem 0;
}

.rtd-server-search-list {
  margin-top: 1rem;
}

.rtd-server-search-list li {
  border-top: 1px solid var(--pst-color-border);
  padding: 1rem 0;
}

.rtd-server-search-context,
.rtd-server-search-snippet {
  color: var(--pst-color-text-muted);
  font-size: 0.9rem;
}

.rtd-server-search-context {
  margin-left: 0.25rem;
}

.rtd-server-search-snippet {
  margin: 0.35rem 0 0;
}

.rtd-server-search-snippet span,
.rtd-server-search-list a span {
  background-color: var(--pst-color-primary-bg);
  color: inherit;
  padding: 0 0.1rem;
  border-radius: 0.15rem;
}


/* ─── Force gruvbox-dark on shell code blocks ─────────────────
   Always render .. code-block:: sh with a dark terminal look,
   regardless of the page theme.  Token classes grouped by
   colour to reduce repetition.
   ──────────────────────────────────────────────────────────── */

.highlight-sh pre                { background: #000; color: #fff; }
.highlight-sh .highlight         { background: #000 !important; color: #DDD !important; }

/* Comments — grey */
.highlight-sh .highlight .c,
.highlight-sh .highlight .ch,
.highlight-sh .highlight .cm,
.highlight-sh .highlight .cp,
.highlight-sh .highlight .c1     { color: #928374 !important; }
.highlight-sh .highlight .cs     { color: #EBDBB2 !important; }

/* Keywords / operators — red */
.highlight-sh .highlight .k,
.highlight-sh .highlight .nd,
.highlight-sh .highlight .ow     { color: #FB4934 !important; }

/* Errors / deletions — inverted red */
.highlight-sh .highlight .err,
.highlight-sh .highlight .gd     { color: #282828 !important; background-color: #FB4934 !important; }

/* Generic output / prompt */
.highlight-sh .highlight .go     { color: #F2E5BC !important; }
.highlight-sh .highlight .gp     { color: #A89984 !important; }

/* Numbers — pink */
.highlight-sh .highlight .m,
.highlight-sh .highlight .mb,
.highlight-sh .highlight .mf,
.highlight-sh .highlight .mh,
.highlight-sh .highlight .mi,
.highlight-sh .highlight .mo,
.highlight-sh .highlight .il,
.highlight-sh .highlight .no     { color: #D3869B !important; }

/* Strings — green */
.highlight-sh .highlight .s,
.highlight-sh .highlight .sa,
.highlight-sh .highlight .sb,
.highlight-sh .highlight .sc,
.highlight-sh .highlight .dl,
.highlight-sh .highlight .sd,
.highlight-sh .highlight .s2,
.highlight-sh .highlight .sh,
.highlight-sh .highlight .si,
.highlight-sh .highlight .sx,
.highlight-sh .highlight .sr,
.highlight-sh .highlight .s1,
.highlight-sh .highlight .ss     { color: #B8BB26 !important; }

/* Escape sequences / builtins — orange */
.highlight-sh .highlight .se,
.highlight-sh .highlight .nb,
.highlight-sh .highlight .bp     { color: #FE8019 !important; }

/* Names — attribute yellow */
.highlight-sh .highlight .na     { color: #FABD2F !important; }

/* Names — class / function / namespace / tag — aqua */
.highlight-sh .highlight .nc,
.highlight-sh .highlight .nf,
.highlight-sh .highlight .nn,
.highlight-sh .highlight .nt,
.highlight-sh .highlight .fm     { color: #8EC07C !important; }

/* Variables — blue */
.highlight-sh .highlight .nv,
.highlight-sh .highlight .vc,
.highlight-sh .highlight .vg,
.highlight-sh .highlight .vi,
.highlight-sh .highlight .vm     { color: #83A598 !important; }

/* Operators / punctuation / whitespace — default text */
.highlight-sh .highlight .o,
.highlight-sh .highlight .p,
.highlight-sh .highlight .w      { color: #DDD !important; }

/* Highlighted line inside sh blocks */
.highlight-sh .highlight .hll    { background-color: #018790 !important; color: #F4F4F4 !important; }


/* ─── NeoMutt config code blocks ──────────────────────────────
   Green border to visually distinguish neomuttrc snippets.
   ──────────────────────────────────────────────────────────── */

.highlight-neomuttrc pre {
  border: 1px solid green;
  border-radius: 0.25rem;
}


/* ─── Field-list layout ──────────────────────────────────────
   Fix two-column grid so labels aren't crushed by wide code
   samples.  On narrow screens, stack label above value.
   ──────────────────────────────────────────────────────────── */

dl.field-list {
  grid-template-columns: max-content minmax(0, 1fr);
}

dl.field-list > dt {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

dl.field-list > dd {
  min-width: 0;
}

dl.field-list dd .highlight {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 48rem) {
  dl.field-list {
    grid-template-columns: 1fr;
  }

  dl.field-list > dt {
    margin-top: 0.75rem;
  }

  dl.field-list > dd {
    margin-bottom: 0.75rem;
  }
}


/* ─── Card footer quicklinks ──────────────────────────────────
   sd-stretched-link::after has z-index:1 and covers the whole
   card. Raise the footer above it so the quicklinks are clickable.
   ──────────────────────────────────────────────────────────── */

.sd-card-footer {
  position: relative;
  z-index: 2;
}