{# Auto-generated by Changemaker Lite Header Builder — do not edit manually #}
{% extends "base.html" %}

{% block announce %}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav class="cm-header-nav" role="navigation" aria-label="Application">
  <div class="cm-header-nav__inner">
    <a href="#" data-path="/campaigns" class="cm-header-nav__link">
      <span class="material-icons">campaign</span>
      <span class="cm-header-nav__label">Campaigns</span>
    </a>
    <a href="#" data-path="/map" class="cm-header-nav__link">
      <span class="material-icons">map</span>
      <span class="cm-header-nav__label">Map</span>
    </a>
    <a href="#" data-path="/shifts" class="cm-header-nav__link">
      <span class="material-icons">groups</span>
      <span class="cm-header-nav__label">Volunteer</span>
    </a>
    <a href="#" data-path="/gallery" class="cm-header-nav__link">
      <span class="material-icons">play_circle</span>
      <span class="cm-header-nav__label">Gallery</span>
    </a>
    <a href="#" data-path="/responses" class="cm-header-nav__link">
      <span class="material-icons">forum</span>
      <span class="cm-header-nav__label">Responses</span>
    </a>
    <a href="#" data-path="/donate" class="cm-header-nav__link">
      <span class="material-icons">favorite</span>
      <span class="cm-header-nav__label">Donate</span>
    </a>
    <a href="#" data-path="/login" class="cm-header-nav__link">
      <span class="material-icons">login</span>
      <span class="cm-header-nav__label">Sign In</span>
    </a>
  </div>
</nav>
<script>
// Resolve nav link hrefs based on the current browser hostname.
// localhost → http://localhost:{ADMIN_PORT}
// subdomain.example.org → {proto}://app.example.org
(function() {
  var h = location.hostname;
  var base;
  if (h === 'localhost' || h === '127.0.0.1') {
    base = location.protocol + '//localhost:' + ({{ config.extra.admin_port }} || 3000);
  } else {
    var parts = h.split('.');
    if (parts.length >= 3) { parts[0] = 'app'; }
    else { parts.unshift('app'); }
    base = location.protocol + '//' + parts.join('.');
  }
  var links = document.querySelectorAll('.cm-header-nav__link[data-path]');
  for (var i = 0; i < links.length; i++) {
    links[i].setAttribute('href', base + links[i].getAttribute('data-path'));
  }
})();
</script>
<style>
/* Override MkDocs Material announce bar container */
.md-banner {
  background: #6f42c1 !important;
  color: #ffffff !important;
}
/* Hide the dismiss (X) button that Material adds for announce.dismiss */
.md-banner__button {
  display: none !important;
}
.cm-header-nav {
  background: #6f42c1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  z-index: 10;
}
.cm-header-nav__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 1400px;
  width: 100%;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.cm-header-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
  line-height: 1;
}
.cm-header-nav__link:hover {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}
.cm-header-nav__link:active {
  transform: translateY(0);
}
.cm-header-nav__link .material-icons {
  font-size: 16px;
  opacity: 0.9;
}
@media (max-width: 768px) {
  .cm-header-nav { padding: 0 8px; }
  .cm-header-nav__label { display: none; }
  .cm-header-nav__link { padding: 8px 10px; }
  .cm-header-nav__inner { gap: 4px; }
}
</style>
{% endblock %}