<div class="dvf-page">
  <main class="dvf-content"><p>Page content above the footer</p></main>
  <footer class="dvf">
    <div class="dvf-inner">
      <span class="dvf-copy">&copy; 2026 Kestrel Docs</span>

      <div class="dvf-version">
        <button class="dvf-version-btn" id="dvfVersionBtn" aria-haspopup="listbox" aria-expanded="false">
          <span id="dvfVersionLabel">v4.2 (latest)</span>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="6 9 12 15 18 9"/></svg>
        </button>
        <ul class="dvf-version-menu" id="dvfVersionMenu" role="listbox" hidden>
          <li role="option" data-v="4.2" data-latest="true">v4.2 <span class="dvf-tag">latest</span></li>
          <li role="option" data-v="4.1">v4.1</li>
          <li role="option" data-v="3.0">v3.0</li>
          <li role="option" data-v="2.5" data-eol="true">v2.5 <span class="dvf-tag dvf-tag-eol">EOL</span></li>
        </ul>
      </div>

      <p class="dvf-eol-note" id="dvfEolNote" hidden>You are viewing an unsupported version. <a href="#" id="dvfLatestLink">Switch to latest &rarr;</a></p>

      <nav class="dvf-links">
        <a href="#">GitHub</a>
        <a href="#">Changelog</a>
        <a href="#">API Reference</a>
        <a href="#" id="dvfEditLink">Edit this page</a>
      </nav>
    </div>
  </footer>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#fff}
.dvf-page{min-height:100vh;display:flex;flex-direction:column}
.dvf-content{flex:1;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px;padding:50px 20px}

.dvf{border-top:1px solid #e2e8f0}
.dvf-inner{max-width:1000px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#64748b}
.dvf-copy{white-space:nowrap}

.dvf-version{position:relative}
.dvf-version-btn{display:flex;align-items:center;gap:6px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;color:#334155;cursor:pointer;font-family:inherit}
.dvf-version-btn:hover{background:#f1f5f9}
.dvf-version-btn svg{transition:transform .15s;color:#94a3b8}
.dvf-version.open .dvf-version-btn svg{transform:rotate(180deg)}

.dvf-version-menu{position:absolute;bottom:calc(100% + 6px);left:0;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 28px -8px rgba(0,0,0,.15);list-style:none;min-width:150px;padding:5px;z-index:5}
.dvf-version-menu li{padding:7px 10px;border-radius:6px;font-size:12.5px;color:#334155;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.dvf-version-menu li:hover{background:#f1f5f9}
.dvf-version-menu li[aria-selected="true"]{background:#eef2ff;color:#4338ca;font-weight:700}
.dvf-tag{font-size:9px;font-weight:800;text-transform:uppercase;background:#dcfce7;color:#15803d;padding:2px 6px;border-radius:5px}
.dvf-tag-eol{background:#fee2e2;color:#b91c1c}

.dvf-eol-note{width:100%;order:5;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:12px;padding:8px 12px;border-radius:8px}
.dvf-eol-note a{color:#b45309;font-weight:700;text-decoration:underline}

.dvf-links{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
.dvf-links a{color:#64748b;text-decoration:none;transition:color .15s}
.dvf-links a:hover{color:#0f172a}

@media (max-width:640px){
  .dvf-inner{flex-direction:column;align-items:flex-start}
  .dvf-links{margin-left:0}
}

var versionBtn = document.getElementById('dvfVersionBtn');
var versionWrap = versionBtn.closest('.dvf-version');
var menu = document.getElementById('dvfVersionMenu');
var label = document.getElementById('dvfVersionLabel');
var eolNote = document.getElementById('dvfEolNote');
var latestLink = document.getElementById('dvfLatestLink');
var editLink = document.getElementById('dvfEditLink');

function closeMenu() {
  menu.hidden = true;
  versionWrap.classList.remove('open');
  versionBtn.setAttribute('aria-expanded', 'false');
}
function openMenu() {
  menu.hidden = false;
  versionWrap.classList.add('open');
  versionBtn.setAttribute('aria-expanded', 'true');
}

versionBtn.addEventListener('click', function () {
  if (menu.hidden) openMenu(); else closeMenu();
});

document.addEventListener('click', function (e) {
  if (!versionWrap.contains(e.target)) closeMenu();
});

function selectVersion(li) {
  var v = li.dataset.v;
  var isLatest = li.dataset.latest === 'true';
  var isEol = li.dataset.eol === 'true';

  Array.prototype.forEach.call(menu.querySelectorAll('li'), function (item) {
    item.removeAttribute('aria-selected');
  });
  li.setAttribute('aria-selected', 'true');

  label.textContent = 'v' + v + (isLatest ? ' (latest)' : '');
  eolNote.hidden = !isEol;
  editLink.href = '#docs-v' + v;
  closeMenu();
}

Array.prototype.forEach.call(menu.querySelectorAll('li'), function (li) {
  if (li.dataset.latest === 'true') li.setAttribute('aria-selected', 'true');
  li.addEventListener('click', function () { selectVersion(li); });
});

latestLink.addEventListener('click', function (e) {
  e.preventDefault();
  selectVersion(menu.querySelector('li[data-latest="true"]'));
});