/* Night mode for the whole site. Whenever the page is dark, <html> has
   data-blog-theme="dark": on every page when the header's switch is on, or on the
   blog, Spiritual Reads, quotes, poetry and Morning Shore pages when their own
   switch is (see Shared/_ThemeInit and site.js). The attribute keeps its blog name
   because night mode began on the blog.

   Three layers, in page order:
   1. night-auto.css: every stylesheet's light colours made dark, generated by
      Scripts/night-css.py (run it again after changing colours).
   2. This file: the night palette, the page, header and footer, and Bootstrap's
      parts (cards, forms, tables, menus, dialogs, alerts).
   3. The pages' own hand-written night rules (blog.css, spiritual.css and so on),
      loaded after this. */

[data-blog-theme="dark"] {
  --blog-night-page: #12150f;
  --blog-night-surface: #1b2017;
  --blog-night-raised: #242b1f;
  --blog-night-border: #333d2b;
  --blog-night-text: #dfe3d9;
  --blog-night-heading: #f2f4ee;
  --blog-night-muted: #a1a99a;
  --blog-night-link: #8fb8ff;

  /* The palette turned over: the light shades (backgrounds) become dark and the
     dark shades (text) light. The middle shades, used for buttons and badges with
     white text, stay much as they are. night-auto.css pins the few places that
     use a dark shade as a background. */
  --bb-blue-50: #131c2e;
  --bb-blue-100: #1b2a48;
  --bb-blue-200: #2a3f6b;
  --bb-blue-500: #60a5fa;
  --bb-blue-600: #3b82f6;
  --bb-blue-700: #8fb8ff;
  --bb-blue-900: #dbe7ff;

  --bb-sage-50: #12150f;
  --bb-sage-100: #1b2017;
  --bb-sage-200: #333d2b;
  --bb-sage-300: #4a5840;
  --bb-sage-500: #8ba06e;
  --bb-sage-600: #a3ba84;
  --bb-sage-700: #c5d0b8;
  --bb-sage-900: #e8ece2;

  --bb-gold-100: #3a321a;
  --bb-gold-400: #e3c15c;
  --bb-gold-500: #d4af37;
  --bb-gold-600: #dcbc55;
  --bb-gold-700: #f0d27a;

  color-scheme: dark;
}

[data-blog-theme="dark"] body {
  background: var(--blog-night-page);
  color: var(--blog-night-text);
}

/* Plain links only: :where() keeps this as weak as Bootstrap's own "a" rule, so
   any styled link (a card, a chip, a menu item) keeps its own colour. */
:where([data-blog-theme="dark"]) a {
  color: var(--blog-night-link);
}

[data-blog-theme="dark"] hr {
  border-color: var(--blog-night-border);
  opacity: 1;
}

[data-blog-theme="dark"] code {
  color: #f9a8d4;
}

[data-blog-theme="dark"] pre {
  background: var(--blog-night-raised);
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] ::placeholder {
  color: var(--blog-night-muted) !important;
}

/* Pictures a little softer, so they don't glare on the dark page. */
[data-blog-theme="dark"] main img:not([src$=".svg"]) {
  filter: brightness(0.92);
}

/* ---------- Header ---------- */

[data-blog-theme="dark"] .site-header,
[data-blog-theme="dark"] .site-subheader {
  background: var(--blog-night-surface);
  border-bottom-color: var(--blog-night-border);
}

/* Shore Finds (finds.css): each kind's ink lightens at night, so the category
   chips on the banners and the "good for" tags stay readable on their now dark
   backgrounds. */
[data-blog-theme="dark"] .sf-kind-place {
  --sf-ink: #7dd3fc;
}

[data-blog-theme="dark"] .sf-kind-dish {
  --sf-ink: #fdba74;
}

[data-blog-theme="dark"] .sf-kind-product {
  --sf-ink: #d8b4fe;
}

/* My Activity's gold border brightens on hover at night (site.css), where the
   day's deeper gold would fade into the dark bar. */
[data-blog-theme="dark"] .subheader-nav .subheader-nav-toggle.subheader-activity:hover,
[data-blog-theme="dark"] .subheader-nav .subheader-nav-toggle.subheader-activity[aria-expanded="true"] {
  border-color: #e3c15c;
}

/* The Finds button keeps its gold at night (site.css), hover included; this
   wins over the menu buttons' night hover and anything Scripts/night-css.py
   writes for it. */
[data-blog-theme="dark"] .header-finds-btn {
  background: #b8901f;
  color: #fff;
}

[data-blog-theme="dark"] .header-finds-btn:hover,
[data-blog-theme="dark"] .header-finds-btn:focus-visible {
  background: #977518;
  color: #fff;
}

[data-blog-theme="dark"] .header-search {
  border-color: var(--blog-night-border);
  background: var(--blog-night-raised);
}

[data-blog-theme="dark"] .header-search input {
  background: transparent;
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] .header-action-btn,
[data-blog-theme="dark"] .header-action-text strong {
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] .header-action-btn:hover {
  background: var(--blog-night-raised);
}

[data-blog-theme="dark"] .header-action-text small,
[data-blog-theme="dark"] .subheader-nav > a,
[data-blog-theme="dark"] .subheader-nav-toggle {
  color: var(--blog-night-muted);
}

[data-blog-theme="dark"] .header-action-icon,
[data-blog-theme="dark"] .subheader-nav > a:hover,
[data-blog-theme="dark"] .subheader-nav-toggle:hover,
[data-blog-theme="dark"] .subheader-nav-toggle[aria-expanded="true"],
[data-blog-theme="dark"] .site-header .brand-text {
  color: var(--blog-night-link);
}

[data-blog-theme="dark"] .subheader-nav > a,
[data-blog-theme="dark"] .subheader-nav-toggle {
  border-color: var(--blog-night-border);
  background: var(--blog-night-raised);
}

[data-blog-theme="dark"] .subheader-nav > a:hover,
[data-blog-theme="dark"] .subheader-nav-toggle:hover,
[data-blog-theme="dark"] .subheader-nav-toggle[aria-expanded="true"] {
  border-color: var(--blog-night-link);
  background: var(--blog-night-surface);
}

/* The night mode switch in the header: a moon by day, a sun by night. */
/* It shows the whole site's setting, even on a reading page in its own night mode. */
.theme-toggle .theme-toggle-sun,
[data-site-theme="dark"] .theme-toggle .theme-toggle-moon {
  display: none;
}

[data-site-theme="dark"] .theme-toggle .theme-toggle-sun {
  display: block;
}

/* ---------- Bootstrap's parts ---------- */

[data-blog-theme="dark"] .card,
[data-blog-theme="dark"] .modal-content,
[data-blog-theme="dark"] .offcanvas,
[data-blog-theme="dark"] .toast,
[data-blog-theme="dark"] .popover,
[data-blog-theme="dark"] .accordion-item,
[data-blog-theme="dark"] .list-group-item,
[data-blog-theme="dark"] .bg-white,
[data-blog-theme="dark"] .bg-body {
  border-color: var(--blog-night-border);
  background-color: var(--blog-night-surface) !important;
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] .card-header,
[data-blog-theme="dark"] .card-footer,
[data-blog-theme="dark"] .modal-header,
[data-blog-theme="dark"] .modal-footer,
[data-blog-theme="dark"] .toast-header,
[data-blog-theme="dark"] .popover-header,
[data-blog-theme="dark"] .bg-light {
  border-color: var(--blog-night-border);
  background-color: var(--blog-night-raised) !important;
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] .list-group-item-action:hover,
[data-blog-theme="dark"] .list-group-item-action:focus {
  background-color: var(--blog-night-raised) !important;
  color: var(--blog-night-heading);
}

[data-blog-theme="dark"] .list-group-item.active {
  border-color: var(--bb-blue-600);
  background-color: var(--bb-blue-600) !important;
  color: #fff;
}

[data-blog-theme="dark"] .accordion-button {
  background-color: var(--blog-night-surface);
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--blog-night-raised);
  color: var(--blog-night-heading);
}

[data-blog-theme="dark"] .accordion-button::after,
[data-blog-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}

[data-blog-theme="dark"] .text-dark,
[data-blog-theme="dark"] .text-body,
[data-blog-theme="dark"] .text-black {
  color: var(--blog-night-text) !important;
}

[data-blog-theme="dark"] .text-muted,
[data-blog-theme="dark"] .text-secondary,
[data-blog-theme="dark"] .form-text,
[data-blog-theme="dark"] .small.text-muted {
  color: var(--blog-night-muted) !important;
}

[data-blog-theme="dark"] .border,
[data-blog-theme="dark"] .border-top,
[data-blog-theme="dark"] .border-bottom,
[data-blog-theme="dark"] .border-start,
[data-blog-theme="dark"] .border-end {
  border-color: var(--blog-night-border) !important;
}

/* Forms */
[data-blog-theme="dark"] .form-control,
[data-blog-theme="dark"] .form-select,
[data-blog-theme="dark"] .input-group-text {
  border-color: var(--blog-night-border);
  background-color: var(--blog-night-raised);
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] .form-control:focus,
[data-blog-theme="dark"] .form-select:focus {
  border-color: var(--blog-night-link);
  background-color: var(--blog-night-raised);
  color: var(--blog-night-heading);
  box-shadow: 0 0 0 0.2rem rgba(143, 184, 255, 0.2);
}

[data-blog-theme="dark"] .form-control:disabled,
[data-blog-theme="dark"] .form-control[readonly],
[data-blog-theme="dark"] .form-select:disabled {
  background-color: var(--blog-night-surface);
  color: var(--blog-night-muted);
}

/* The select's arrow, drawn light. */
[data-blog-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dfe3d9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

[data-blog-theme="dark"] .form-check-input {
  border-color: #5a6650;
  background-color: var(--blog-night-raised);
}

[data-blog-theme="dark"] .form-check-input:checked {
  border-color: var(--bb-blue-600);
  background-color: var(--bb-blue-600);
}

[data-blog-theme="dark"] .form-range::-webkit-slider-runnable-track,
[data-blog-theme="dark"] .progress {
  background-color: var(--blog-night-raised);
}

/* Tables */
[data-blog-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--blog-night-text);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-color: var(--blog-night-heading);
  --bs-table-active-bg: rgba(255, 255, 255, 0.07);
  border-color: var(--blog-night-border);
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] .table > :not(caption) > * > * {
  border-bottom-color: var(--blog-night-border);
  color: inherit;
}

[data-blog-theme="dark"] .table-light,
[data-blog-theme="dark"] .table-light > *,
[data-blog-theme="dark"] .table > thead {
  --bs-table-bg: var(--blog-night-raised);
  background-color: var(--blog-night-raised);
  color: var(--blog-night-heading);
}

/* Menus */
[data-blog-theme="dark"] .dropdown-menu {
  border-color: var(--blog-night-border);
  background-color: var(--blog-night-surface);
  color: var(--blog-night-text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

[data-blog-theme="dark"] .dropdown-item,
[data-blog-theme="dark"] .dropdown-item-text {
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] .dropdown-item:hover,
[data-blog-theme="dark"] .dropdown-item:focus {
  background-color: var(--blog-night-raised);
  color: var(--blog-night-heading);
}

[data-blog-theme="dark"] .dropdown-header {
  color: var(--blog-night-muted);
}

[data-blog-theme="dark"] .dropdown-divider {
  border-top-color: var(--blog-night-border);
}

/* Navigation */
[data-blog-theme="dark"] .nav-tabs {
  border-bottom-color: var(--blog-night-border);
}

[data-blog-theme="dark"] .nav-tabs .nav-link.active,
[data-blog-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  border-color: var(--blog-night-border) var(--blog-night-border) var(--blog-night-surface);
  background-color: var(--blog-night-surface);
  color: var(--blog-night-heading);
}

[data-blog-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--blog-night-border);
}

[data-blog-theme="dark"] .breadcrumb-item.active,
[data-blog-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--blog-night-muted);
}

[data-blog-theme="dark"] .pagination .page-link {
  border-color: var(--blog-night-border);
  background: var(--blog-night-surface);
  color: var(--blog-night-link);
}

[data-blog-theme="dark"] .pagination .page-item.active .page-link {
  border-color: var(--bb-blue-600);
  background: var(--bb-blue-600);
  color: #fff;
}

[data-blog-theme="dark"] .pagination .page-item.disabled .page-link {
  color: var(--blog-night-muted);
}

/* Buttons */
[data-blog-theme="dark"] .btn-light {
  border-color: var(--blog-night-border);
  background-color: var(--blog-night-raised);
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] .btn-light:hover {
  background-color: var(--blog-night-border);
  color: var(--blog-night-heading);
}

[data-blog-theme="dark"] .btn-outline-secondary,
[data-blog-theme="dark"] .btn-outline-dark {
  border-color: #4a5840;
  color: var(--blog-night-text);
}

[data-blog-theme="dark"] .btn-outline-secondary:hover,
[data-blog-theme="dark"] .btn-outline-dark:hover {
  border-color: var(--blog-night-muted);
  background-color: var(--blog-night-raised);
  color: var(--blog-night-heading);
}

[data-blog-theme="dark"] .btn-outline-primary {
  border-color: var(--bb-blue-500);
  color: var(--blog-night-link);
}

[data-blog-theme="dark"] .btn-link {
  color: var(--blog-night-link);
}

/* Alerts and badges: dark tints of their colours. */
[data-blog-theme="dark"] .alert-success { border-color: #24492f; background-color: #142a1b; color: #a7e3b8; }
[data-blog-theme="dark"] .alert-info { border-color: #1f4659; background-color: #122833; color: #9fd8f0; }
[data-blog-theme="dark"] .alert-warning { border-color: #5a4a1a; background-color: #2e2710; color: #f2d98a; }
[data-blog-theme="dark"] .alert-danger { border-color: #5c2626; background-color: #2e1414; color: #f3a9a9; }
[data-blog-theme="dark"] .alert-primary { border-color: #2a3f6b; background-color: #131c2e; color: #b7cffd; }
[data-blog-theme="dark"] .alert-secondary,
[data-blog-theme="dark"] .alert-light { border-color: var(--blog-night-border); background-color: var(--blog-night-raised); color: var(--blog-night-text); }

[data-blog-theme="dark"] .alert .alert-link {
  color: inherit;
}

[data-blog-theme="dark"] .badge.bg-light,
[data-blog-theme="dark"] .text-bg-light {
  background-color: var(--blog-night-raised) !important;
  color: var(--blog-night-text) !important;
}

[data-blog-theme="dark"] .text-bg-warning,
[data-blog-theme="dark"] .badge.bg-warning {
  color: #1f1a08 !important;
}

/* ---------- Pieces that keep a look of their own ---------- */

/* The footer logo sits on a white tile at night too: the logo is drawn for it. */
[data-blog-theme="dark"] .brand-logo-plate {
  background: #fff;
}

/* The community map: its light style (Site Settings) shows the night map instead,
   with the same colours as the default .cmap in community.css. */
[data-blog-theme="dark"] .cmap.cmap-light {
  --cmap-bg: #0f130c;
  --cmap-bg-2: #172012;
  --cmap-dot: #343f2a;
  --cmap-dot-lit: #5b7149;
  --cmap-dot-hot: #8ba06e;
  --cmap-text: #e7ecdf;
  --cmap-muted: #9aa78c;
  --cmap-gold: #e3c15c;
  --cmap-pulse: rgba(227, 193, 92, 0.6);
  --cmap-pulse-end: rgba(227, 193, 92, 0);
  --cmap-arc: rgba(227, 193, 92, 0.14);
  --cmap-halo: rgba(227, 193, 92, 0.16);
  --cmap-halo-hot: rgba(227, 193, 92, 0.38);
  --cmap-line: rgba(255, 255, 255, 0.07);
  --cmap-chip: rgba(255, 255, 255, 0.06);
  --cmap-chip-line: rgba(255, 255, 255, 0.08);
  --cmap-pressed: #e3c15c;
  --cmap-on-pressed: #1d1806;
  --cmap-edge: transparent;
  --cmap-tip-bg: #f4f6f0;
  --cmap-tip-text: #2c3623;
  --cmap-tip-muted: #536440;
  --cmap-member: #7cc4ff;
  --cmap-member-halo: rgba(124, 196, 255, 0.2);
}

/* A deal's type label (Free to download, Bundle offer): a dark pill at night,
   so its text is light rather than the deal's own colour. */
[data-blog-theme="dark"] .deal-card-type {
  color: var(--blog-night-heading);
}

/* Waves compact menu: the "online" dot's ring matches the dark bar. */
[data-blog-theme="dark"] .wv-topbar-me-dot {
  box-shadow: 0 0 0 2px #1a1e15;
  animation: none;
}