/* Dunavia site bar (Ry 10-06: "it really could use a little more polish... especially the nav menu").
   One bar on every page: sticky, frosted forest green, the live link as a button, the current page marked, a menu on phones. */
:root { --sb-bg: rgba(13, 33, 22, .82); --sb-ink: #f6f3ea; --sb-mut: #a9bdb0; --sb-acc: #8cc8ef; --sb-line: rgba(140, 200, 239, .22); }
header.sitebar { display: block; padding: 0; margin: 0; gap: 0; }   /* pages style a bare <header> (padding, flex): the bar ignores that */
.sitebar { position: sticky; top: 0; z-index: 40; background: var(--sb-bg); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--sb-line); font-family: Roboto, system-ui, sans-serif; }
.sitebar .sb-in { max-width: 1180px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sitebar a { text-decoration: none; border: 0; }
.sb-brand { display: flex; align-items: center; gap: 10px; color: var(--sb-ink); font: 700 22px/1 Gelasio, Georgia, serif; letter-spacing: .2px; }
.sb-brand img { border-radius: 7px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); width: 30px; height: 30px; }
.sb-nav { display: flex; align-items: center; gap: 4px; }
.sb-nav a { color: var(--sb-ink); opacity: .86; font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: background .15s, opacity .15s, color .15s; }
.sb-nav a:hover, .sb-nav a:focus-visible { opacity: 1; background: rgba(140, 200, 239, .12); }
.sb-nav a[aria-current="page"] { opacity: 1; color: var(--sb-acc); background: rgba(140, 200, 239, .14); }
.sb-nav a.sb-live, .sb-menu a.sb-live { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; opacity: 1; color: #0d2116; background: var(--sb-acc); font-weight: 700; padding: 8px 16px; }
.sb-nav a.sb-live:hover, .sb-nav a.sb-live:focus-visible { background: #b5dcf5; }
.sb-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #e2463f; box-shadow: 0 0 0 0 rgba(226, 70, 63, .6); animation: sb-pulse 2s infinite; }
@keyframes sb-pulse { 70% { box-shadow: 0 0 0 7px rgba(226, 70, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 70, 63, 0); } }
@media (prefers-reduced-motion: reduce) { .sb-live .dot { animation: none; } }
.sitebar a:focus-visible, .sb-menu summary:focus-visible { outline: 2px solid var(--sb-acc); outline-offset: 2px; }
.sb-menu { display: none; position: relative; }
.sb-menu summary { list-style: none; cursor: pointer; color: var(--sb-ink); font-size: 15px; font-weight: 500; padding: 8px 14px; border: 1px solid var(--sb-line); border-radius: 999px; }
.sb-menu summary::-webkit-details-marker { display: none; }
.sb-menu[open] summary { background: rgba(140, 200, 239, .14); }
.sb-menu nav { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: #102a1c; border: 1px solid var(--sb-line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.sb-menu nav a { color: var(--sb-ink); padding: 11px 14px; border-radius: 10px; font-size: 16px; }
.sb-menu nav a:hover, .sb-menu nav a[aria-current="page"] { background: rgba(140, 200, 239, .12); color: var(--sb-acc); }
.sb-menu nav a.sb-live { margin: 4px 0 0; justify-content: center; }
@media (max-width: 860px) { .sb-nav { display: none; } .sb-menu { display: block; } .sitebar .sb-in { padding: 0 16px; height: 58px; } .sb-brand { font-size: 20px; } }