/* ==========================================================================
   Header update, November 2026 (all pages)
   1. The white header bar and the logo stay at the top while the page
      scrolls behind them (tablet and desktop only).
   2. The Donate link in the top row is a red button at the far right.
   The header height is measured by a few lines in lmb-header.php (one folder
   up) and handed to this file as --lmb-header-bottom.
   This file loads only while the old "league-of-michigan-bicyclists" theme is
   active. When the new theme launches, lmb-header.php and this folder can go.
   ========================================================================== */
@media (min-width: 710px) {
  .site-header-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1100;
    box-shadow: 0 2px 10px rgba(1, 41, 57, 0.14);
  }
  /* Logged-in users: sit just below the WordPress toolbar. */
  .admin-bar .site-header-wrapper {
    top: 46px;
  }
  /* Links that jump to a spot on a page stop below the header, not under it. */
  html {
    scroll-padding-top: var(--lmb-header-bottom, 150px);
  }
  /* Ride Calendar: the sidebar ads stay below the header. */
  html body aside.sidebar.ads,
  html body .two-columns > .sidebar.ads {
    top: calc(var(--lmb-header-bottom, 150px) + 16px) !important;
  }
}
@media (min-width: 783px) {
  .admin-bar .site-header-wrapper {
    top: 32px;
  }
}
@media (min-width: 900px) {
  /* Ride Calendar: the search bar stays below the header. */
  html body .em.em-search {
    top: var(--lmb-header-bottom, 150px) !important;
  }
}

/* The Donate lettering uses its own copy of Montserrat Bold, stored in the
   theme's fonts folder. Every page loads the same file, so the word looks
   identical on the homepage and everywhere else. (Open-source font, SIL OFL.) */
@font-face {
  font-family: "LMB Donate";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("fonts/montserrat-700.woff2") format("woff2");
}

/* Red Donate button */
.site-header .util-nav .util-list a[href*="neoncrm.com/forms/99"] {
  display: inline-block;
  font-family: "LMB Donate", "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 19px;
  background: #cb3524;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 9px 18px;
  margin: -9px 0; /* keeps the header the same height as before */
  border-radius: 4px;
  transition: background-color 0.2s;
}
.site-header .util-nav .util-list a[href*="neoncrm.com/forms/99"]:hover,
.site-header .util-nav .util-list a[href*="neoncrm.com/forms/99"]:focus {
  background: #a82a1c;
  text-decoration: none;
}
/* Donate flag (tablet and desktop): the red hangs from the top edge of the
   header like a pennant. The bottom edge comes to a shallow point (about
   145 degrees) with straight edges, soft shading makes it look like satin,
   and a light shadow to the right and below lifts it off the header. Phones keep the plain red button inside the menu. */
@media (min-width: 710px) {
  .site-header .util-nav .util-list a[href*="neoncrm.com/forms/99"] {
    display: block;
    margin: 0;
    padding: 41px 10px 17px;
    border-radius: 0;
    background-color: #cb3524;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(255, 255, 255, 0.10) 22%, rgba(0, 0, 0, 0.10) 48%, rgba(255, 255, 255, 0.08) 74%, rgba(0, 0, 0, 0.16) 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 82.7%, 50% 100%, 0 82.7%);
    clip-path: polygon(0 0, 100% 0, 100% 82.7%, 50% 100%, 0 82.7%);
  }
  .site-header .util-nav .util-list a[href*="neoncrm.com/forms/99"]:hover,
  .site-header .util-nav .util-list a[href*="neoncrm.com/forms/99"]:focus {
    background-color: #a82a1c;
  }
}
/* Move Donate to the far right of the top row. */
@media (min-width: 710px) {
  .site-header .util-nav .util-list {
    display: flex;
    align-items: center;
  }
  .site-header .util-nav .util-list li:last-child {
    padding-right: 10px;
  }
  .site-header .util-nav .util-list li.menu-item-10669 {
    order: 99;
    padding-right: 0;
  }
}
@supports selector(li:has(a)) {
  @media (min-width: 710px) {
    .site-header .util-nav .util-list li:has(> a[href*="neoncrm.com/forms/99"]) {
      order: 99;
      align-self: flex-start;
      margin-top: -30px; /* lifts the flag to the top edge of the header */
      margin-bottom: -6px; /* keeps the header the same height as before */
      -webkit-filter: drop-shadow(4px 4px 3px rgba(1, 41, 57, 0.28));
      filter: drop-shadow(4px 4px 3px rgba(1, 41, 57, 0.28)); /* light shadow, right and below */
      padding: 0; /* Contact-to-Donate text gap matches the gap between the other links */
    }
  }
}