/* Automatic dark appearance shared by every page. Artwork keeps its original colours. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --site-dark-bg: #141416;
    --site-dark-surface: #202024;
    --site-dark-raised: #2b2b30;
    --site-dark-text: #f2f2f7;
    --site-dark-muted: #b9b9c2;
    --site-dark-link: #8bbcff;
    --site-dark-border: #797985;
    /* Existing long-form article styles use these names. */
    --bg: var(--site-dark-bg);
    --fg: var(--site-dark-text);
    --muted: var(--site-dark-muted);
    --border: var(--site-dark-border);
    --link: var(--site-dark-link);
  }
  html, html body { background-color: var(--site-dark-bg); color: var(--site-dark-text); }
  html body section { background-color: var(--site-dark-bg) !important; }
  html body section[class*="footer"], html body .site-language {
    background-color: var(--site-dark-surface) !important;
    color: var(--site-dark-text);
  }
  html body :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,figcaption,label,.aftl-text,.card-title,.card-text,.plan-title,.price) {
    color: var(--site-dark-text) !important;
  }
  html body :is(.aftl-section-subtitle,.price-term,figcaption,.text-muted) { color: var(--site-dark-muted) !important; }
  html body :is(.text-black,.text-dark) { color: var(--site-dark-text) !important; }
  html body a:not(.btn), html body a:is(.text-primary,.text-warning,.text-danger,.text-black,.text-secondary) {
    color: var(--site-dark-link) !important;
  }
  html body a:not(.btn):is(:focus,:focus-visible,:active) { color: var(--site-dark-link) !important; }
  html body a:not(.btn):hover { color: #bfd9ff !important; }
  /* The legacy mobile rule has three classes; name the opened nav explicitly. */
  html body nav.navbar.navbar-dropdown, html body nav.navbar.navbar-dropdown.opened,
  html body .navbar :is(.navbar-collapse,.dropdown-menu) {
    background: var(--site-dark-surface) !important;
    border-color: var(--site-dark-border) !important;
  }
  html body .navbar :is(.navbar-brand,.navbar-caption,.nav-link,.dropdown-item) { color: var(--site-dark-text) !important; }
  html body .navbar .nav-link:hover, html body .navbar .dropdown-item:hover { color: var(--site-dark-link) !important; background-color: var(--site-dark-raised) !important; }
  html body .navbar-toggler .hamburger span { background-color: var(--site-dark-text) !important; }
  html body :is(.card-wrap,.card-wrapper,.card-box,.plan,.plan-header,.plan-body,.list-group-item) {
    background-color: var(--site-dark-surface) !important;
    color: var(--site-dark-text) !important;
    border-color: var(--site-dark-border) !important;
  }
  html body :is(.form-control,.form-select,.site-language select) {
    color: var(--site-dark-text) !important;
    background-color: var(--site-dark-raised) !important;
    border-color: var(--site-dark-border) !important;
    box-shadow: none !important;
  }
  html body .form-control::placeholder { color: var(--site-dark-muted); opacity: 1; }
  html body .site-language select { color: var(--site-dark-link) !important; border-color: var(--site-dark-link) !important; }
  html body :is(.form-control,.form-select,.site-language select):focus {
    border-color: var(--site-dark-link) !important;
    outline: 2px solid var(--site-dark-link) !important;
    outline-offset: 3px;
  }
  html body .btn {
    background-color: var(--site-dark-raised) !important;
    border-color: var(--site-dark-border) !important;
    color: var(--site-dark-text) !important;
  }
  html body .btn:is(:hover,:focus,:focus-visible,:active,.focus,.active) { color: var(--site-dark-text) !important; background-color: #3c3c44 !important; border-color: var(--site-dark-link) !important; }
  html body .btn[class*="-outline"] { color: var(--site-dark-link) !important; background-color: transparent !important; }
  html body .btn:is(:disabled,.disabled) { color: var(--site-dark-text) !important; opacity: .6; }
  html body .alert-success { background-color: #193727 !important; color: #c9ecd5 !important; border-color: #4c8760 !important; }
  html body .alert-danger { background-color: #421b22 !important; color: #ffd9df !important; border-color: #b96979 !important; }
  html body :is(code,pre) { background-color: var(--site-dark-surface); color: var(--site-dark-text); }
  html body :is(hr,.blog-link), html body .grid :is(img,video) { border-color: var(--site-dark-border) !important; }
  html body .blog-link:hover { background-color: var(--site-dark-raised); }
  html body #header15-43 { background-image: linear-gradient(135deg,#3b301d,#1b1916) !important; }
  html body .aftl-overlay { background-color: #09090b !important; }
  /* Dark lettering in partner logos needs a light backing, without recolouring the images. */
  html body #gallery3-4f .item-img { background-color: #f5f5f7; border-radius: 8px; }
  :focus-visible { outline-color: var(--site-dark-link); }
  ::selection { background: #375c92; color: #fff; }
}