/* ═══════════════════════════════════════════════════════════════
   NeoMutt Themes — Custom Stylesheet
   Palette: #005461  #018790  #00B7B5  #F4F4F4
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar logo spacing ───────────────────────────────────── */
.bd-sidebar-primary .navbar-brand {
  padding-top: 0;
}

/* ── Wider content panel ────────────────────────────────────── */
.bd-article-container {
  max-width: 100% !important;
}

.bd-page-width {
  max-width: 100% !important;
}

.bd-content {
  max-width: 100% !important;
}

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

/* ── Brand colours — light mode ─────────────────────────────── */
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;
}

/* ── Brand colours — dark mode ──────────────────────────────── */
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;
}

/* ── Page icon decoration ───────────────────────────────────── */
.page-icon {
  display: block;
  margin: 0 auto 0.5rem auto;
  max-width: 120px;
  height: auto;
  opacity: 0.85;
}

/* ── Hero banner ────────────────────────────────────────────── */
.hero-banner {
  background: linear-gradient(135deg, #005461 0%, #018790 50%, #00B7B5 100%);
  color: #F4F4F4;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 84, 97, 0.3);
}

.hero-banner h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.8rem;
  color: #F4F4F4 !important;
}

.hero-banner p {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.92;
}

/* ── Feature cards grid ─────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.feature-card {
  border: 1px solid #018790;
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

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

html[data-theme=dark] .feature-card {
  background: #222;
  color: #fff;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 84, 97, 0.18);
}

a.feature-card {
  color: #000;
  display: block;
}

.feature-card img {
  width: 80px;
  height: 80px;
  margin-bottom: 0.75rem;
  object-fit: contain;
  background: transparent !important;
}

.feature-card h3 {
  color: #005461;
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

html[data-theme=dark] .feature-card h3 {
  color: #00B7B5;
}

.feature-card p {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.85;
}

html[data-theme=dark] .feature-card {
  border-color: #00B7B5;
}

/* ── Section divider ────────────────────────────────────────── */
.section-divider {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, transparent, #018790, transparent);
  margin: 2rem 0;
}

/* ── Accent buttons (fav-btn) ───────────────────────────────── */
.fav-btn {
  background: #018790;
  color: #F4F4F4;
  border: none;
  border-radius: 6px;
  padding: 0.4em 1em;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s, transform 0.15s;
  margin: 0 0.25em;
}

.fav-btn:hover {
  background: #005461;
  transform: translateY(-1px);
}

html[data-theme=dark] .fav-btn {
  background: #00B7B5;
  color: #005461;
}

html[data-theme=dark] .fav-btn:hover {
  background: #018790;
  color: #F4F4F4;
}

/* ── Select dropdown ────────────────────────────────────────── */
#theme-picker {
  border: 2px solid #018790;
  border-radius: 6px;
  padding: 0.35em 0.75em;
  font-size: 0.95rem;
  background: #F4F4F4;
  color: #005461;
  cursor: pointer;
}

html[data-theme=dark] #theme-picker {
  background: #1a2a2e;
  color: #00B7B5;
  border-color: #00B7B5;
}

/* ── Tables ─────────────────────────────────────────────────── */
th {
  text-align: left;
  background-color: #005461;
  color: #F4F4F4;
}

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


/* ── Terminal highlight ─────────────────────────────────────── */
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;
}


/* ── Terminal preview window ────────────────────────────────── */
.term-window {
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 84, 97, 0.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.term-titlebar {
  background: #005461;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
  position: relative;
}

.term-titlebar .title {
  color: #F4F4F4;
  font-size: 12px;
  font-weight: bold;
}

.blob {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.red    { background: #ff5f57; }
.yellow { background: #febc2e; }
.green  { background: #28c840; }

.terminal {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  white-space: pre;
  line-height: 1.35;
}

.terminal span {
  display: inline-block;
  line-height: inherit;
}

/* ── Footer accent ──────────────────────────────────────────── */
.bd-footer {
  border-top: 3px solid #018790 !important;
}

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

svg.fa-heart {
   color: #c00000;
}

/* ── Sponsor link in navbar ─────────────────────────────────── */
.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 (max-width: 1500px) {
    .margin {
        display: none;
    }
}

/* ── Index page screenshot – Dayfox (light) / Zenburn (dark) ──── */
html[data-theme=light] .index-preview {
  --s0: #3d2b5a; --s1: #f6f2ee; --s2: #3d2b5a; --s3: #e7d2be;
  --c0: #352c24; --c1: #a5222f; --c2: #396847; --c3: #ac5402;
  --c4: #2848a9; --c5: #6e33ce; --c6: #287980; --c7: #bfb6ae;
  --c8: #534c45; --c9: #b3434e; --c10: #577f63; --c11: #b86e28;
  --c12: #4863b6; --c13: #8452d5; --c14: #488d93; --c15: #f4ece6;
}

html[data-theme=dark] .index-preview {
  --s0: #f0e4cf; --s1: #404040; --s2: #f3eadb; --s3: #746956;
  --c0: #404040; --c1: #e3716e; --c2: #819b69; --c3: #b77e64;
  --c4: #6099c0; --c5: #b279a7; --c6: #66a5ad; --c7: #f0e4cf;
  --c8: #6f6768; --c9: #ec8685; --c10: #8bae68; --c11: #d68c67;
  --c12: #61abda; --c13: #cf86c1; --c14: #65b8c1; --c15: #c0ab86;
}

/* ── Preview terminal – uses CSS variables set by theme-data.js ── */
.term-window .terminal          { background: var(--s1); }
.term-window .terminal .status  { background-color: var(--s3); color: var(--s0); }
.term-window .terminal .header  { background-color: var(--s1); color: var(--c4); }
.term-window .terminal .normal  { background-color: var(--s1); color: var(--s0); }
.term-window .terminal .sign    { background-color: var(--s1); color: var(--c5); }

.term-window .terminal .sb_background { background-color: var(--s3);                   }
.term-window .terminal .sb_divider    { background-color: var(--s3);                   }
.term-window .terminal .sb_flagged    {                              color: var(--c9); }
.term-window .terminal .sb_highlight  { background-color: var(--c8);                   }
.term-window .terminal .sb_indicator  { background-color: var(--c4);                   }
.term-window .terminal .sb_new        {                              color: var(--c3); }
.term-window .terminal .sb_ordinary   {                              color: var(--c8); }

/* .term-window .terminal .indicator       { background-color: var(--c1);                   } */
/* .term-window .terminal .normal          { background-color: var(--c1); color: var(--c2); } */
/* .term-window .terminal .tree            {                              color: var(--c2); } */

/* .term-window .terminal .index           {                                                 } */
/* .term-window .terminal .index_collapsed {                               color: var(--c5); } */
/* .term-window .terminal .index_author    { background-color: var(--c10);                   } */
/* .term-window .terminal .index_date      { background-color: var(--c10);                   } */
/* .term-window .terminal .index_flags     { background-color: var(--c10);                   } */
/* .term-window .terminal .index_number    { background-color: var(--c10);                   } */
/* .term-window .terminal .index_size      { background-color: var(--c10);                   } */
/* .term-window .terminal .index_subject   { background-color: var(--c10);                   } */

/* ── Theme summary panel (preview page) ─────────────────────── */
.theme-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0.6rem 1rem;
  margin: 1rem 0;
  border: 1px solid #018790;
  border-radius: 8px;
  font-size: 0.95rem;
}

html[data-theme=dark] .theme-summary {
  border-color: #00B7B5;
}

.theme-summary-name {
  font-weight: 600;
  white-space: nowrap;
}

.theme-summary-downloads {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.theme-summary-downloads label {
  font-weight: 500;
  opacity: 0.7;
}

.theme-summary-downloads a {
  text-decoration: none;
  opacity: 0.75;
}

.theme-summary-downloads a:hover {
  opacity: 1;
}

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

/* ── 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;
}