/* Header wordmark.
   logo.png is an opaque white plate. mix-blend-mode: multiply knocks that
   plate out on the paper header, and also knocks the black ink out once a
   browser night mode darkens the header. The header image is the transparent
   file logo-header.png. In night mode the header joins the nav ink and the
   wordmark is flipped back to light ink, with hue-rotate putting the orange
   back. color-scheme tells the browser we handle night mode, so it does not
   run a second force-dark pass over the image. */

:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  body header,
  body .header,
  body header .header-content,
  body.home-editorial header,
  body.site-editorial header {
    background: #161311 !important;
    background-color: #161311 !important;
    color: #f3efe8 !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

  body nav.breadcrumb-nav,
  body .breadcrumb-wrap {
    background: #161311 !important;
    background-color: #161311 !important;
    border-bottom-color: transparent !important;
  }

  nav.breadcrumb-nav a,
  nav.breadcrumb-nav span,
  .breadcrumb-wrap,
  .breadcrumb-wrap a {
    color: rgba(243, 239, 232, 0.72) !important;
  }

  header .header-title,
  header .header-content .header-title,
  header h1,
  .header .header-title {
    color: #f6f1e8 !important;
  }

  header .header-subtitle,
  header .header-content .header-subtitle,
  header .text-muted,
  .header .header-subtitle {
    color: rgba(243, 239, 232, 0.72) !important;
  }

  header .city-selector,
  header .chr-header-city,
  header .city-selector:hover,
  header .chr-header-city:hover {
    color: #f6f1e8 !important;
    border-color: rgba(243, 239, 232, 0.35) !important;
    background: transparent !important;
  }

  nav.breadcrumb-nav .chr-lang-btn,
  header .chr-lang-btn,
  .header .chr-lang-btn {
    color: #f6f1e8 !important;
    border-bottom-color: rgba(243, 239, 232, 0.45) !important;
  }

  .logo img,
  img.header-logo,
  .header > a > img,
  body.home-editorial .logo img,
  body.site-editorial .logo img {
    mix-blend-mode: normal !important;
    filter: none !important;
    background: transparent !important;
  }
}