/* Shared header extras for the homepage and /events/ (behavior: /assets/js/site-header.js). */
:root { --ev-yellow: #F8D849; --ev-navy: #233348; }

/* Active nav link: the page you're on, or the homepage section in view. Same teal as hover. */
[data-export-header] a.cs-nav-active { color: #3AAFB9; }

/* Topbar events ticker (desktop; the topbar is hidden below 1024px).
   Hover is a color change only (set with the other #cs-topbar link rules in each page). */
#cs-topbar #cs-ev-top { margin-right: auto; display: inline-flex; align-items: center; gap: 10px; }
#cs-topbar #cs-ev-top .cs-ev-link { display: inline-flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: .02em; font-weight: 700; }
#cs-ev-top .cs-ev-tag { background: var(--ev-navy); color: var(--ev-yellow); padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#cs-topbar #cs-ev-top .cs-topbar-sep { margin: 0 2px; }
#cs-topbar #cs-ev-top .cs-ev-more { color: var(--ev-yellow); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#cs-topbar #cs-ev-top .cs-ev-more:hover { color: #fff; }

/* Calendar icon button where the topbar is hidden (phones + tablets) */
#cs-ev-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 45; width: 52px; height: 52px; display: none; align-items: center; justify-content: center;
  border-radius: 14px; background: rgba(35, 51, 72, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 10px 26px rgba(10, 20, 35, .35); color: #fff;
}
#cs-ev-fab svg { width: 24px; height: 24px; }
#cs-ev-fab i { position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--ev-yellow); border: 2px solid var(--ev-navy); }
@media (max-width: 1023px) { #cs-ev-fab { display: flex; } }