/* Keep the cyclist's head in view: anchor the header photo at the centre. */
.intro-header {
  background-position: center 50% !important;
}

/* Post and page titles in the right part of the header, so they never cover the
   cyclist (left in the photo); long titles wrap within that part. Not on phones. */
@media (min-width: 768px) {
  .intro-header .post-heading {
    text-align: right;
    padding-left: 35%;
  }
}

/* Black header text (also in dark mode: the photo stays the same), with a soft
   white glow so it stays readable over the darker parts of the photo.
   html[data-theme] outranks the theme's [data-theme="dark"] rules. */
html[data-theme] .intro-header,
html[data-theme] .intro-header * {
  color: #000 !important;
  border-color: #000 !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9) !important;
}

/* Same for the menu bar while it sits over the photo (not yet scrolled).
   Once scrolled it gets a white background and the theme's dark text. */
html[data-theme] .navbar-custom:not(.is-fixed) .navbar-toggle .icon-bar {
  background-color: #000 !important;
}
html[data-theme] .navbar-custom:not(.is-fixed) .navbar-brand,
html[data-theme] .navbar-custom:not(.is-fixed) .navbar-brand:hover,
html[data-theme] .navbar-custom:not(.is-fixed) .navbar-brand:focus {
  color: #000 !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9) !important;
}
@media (min-width: 768px) {
  html[data-theme] .navbar-custom:not(.is-fixed) .nav li a,
  html[data-theme] .navbar-custom:not(.is-fixed) .nav li a:hover,
  html[data-theme] .navbar-custom:not(.is-fixed) .nav li a:focus,
  html[data-theme] .navbar-custom:not(.is-fixed) #theme-toggle i {
    color: #000 !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9) !important;
  }
}