/* ============================================================================
   SITE MENU — one header row on every page (owner 2026-10-30, option 6).
   The site's pages sit in the top bar itself, between the crest and the gold
   Contact Us button: Medicare · ACA / Health · Life Insurance · Annuities ·
   Tools · Navigators, the current page lit gold. Home is the crest and
   Contact is the gold button, so those two links are in the markup (one
   list, scripts/site_build.py SITE_NAV, identical on every page) but shown
   only in the phone menu. Under 1200px the row becomes a ≡ Menu button that
   drops the full list of eight under the bar. Loaded by the homepage and by
   every interior page, so the header cannot drift between them.
   ========================================================================== */
.site-nav { display: flex; align-items: center; justify-content: center; gap: .1rem; flex: 1 1 auto; min-width: 0; margin: 0 1rem; }
.site-nav a {
  flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: .6rem .85rem;
  font-family: var(--sans); font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #f5f6fa; text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .25s, border-color .25s;
}
.site-nav a:hover { color: #fffdf7; }
.site-nav a.active { color: #e3c87a; border-bottom-color: #c8a44e; }
.site-nav a:focus-visible { outline: 2px solid #c8a44e; outline-offset: -4px; }
.site-nav a.home, .site-nav a.contact { display: none; }   /* the crest is Home; Contact is the gold button */
.menu-toggle { display: none; }
.topbar-actions { display: flex; align-items: center; gap: .7rem; }

/* the row tightens step by step as the screen narrows (the computer's base type is large, 2026-10-31), so six tabs,
   the wordmark and the button share the width down to 1200px */
@media (max-width: 1699px) { .site-nav a { font-size: .8rem; letter-spacing: .04em; padding: .6rem .7rem; } }
@media (max-width: 1500px) { .site-nav a { font-size: .76rem; letter-spacing: .03em; padding: .6rem .55rem; } }
@media (max-width: 1299px) { .site-nav a { font-size: .72rem; letter-spacing: .02em; padding: .6rem .45rem; } }

/* under 1200px: a ≡ Menu button beside Contact Us; the list drops under the bar */
@media (max-width: 1199px) {
  .site-nav {
    position: fixed; top: 77px; left: 0; right: 0; z-index: 999; margin: 0; padding: .5rem 1rem 1rem;   /* under the header and its 1px hairline */
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: linear-gradient(180deg, #10214c, #0b1838);   /* solid: the list reads over any page */
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid rgba(200, 164, 78, .35); box-shadow: 0 18px 44px rgba(5, 9, 20, .5);
    max-height: calc(100vh - 77px); max-height: calc(100svh - 77px); overflow-y: auto;
  }
  .site-nav:not(.open) { display: none; }
  .site-nav a, .site-nav a.home, .site-nav a.contact { display: flex; min-height: 48px; padding: .8rem .9rem; border-bottom: 0; border-radius: 8px; font-size: 1rem; letter-spacing: .04em; }
  .site-nav a.active { background: rgba(200, 164, 78, .12); box-shadow: inset 3px 0 0 #c8a44e; }
  .site-nav a:hover { background: rgba(255, 255, 255, .05); }
  .site-nav a:focus-visible { outline-offset: -2px; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .95rem 0 .85rem; border-radius: 999px; cursor: pointer;
    font-family: var(--sans); font-weight: 700; font-size: .9rem; letter-spacing: .03em; color: #fff;
    background: rgba(8, 21, 46, .38); border: 1px solid rgba(200, 164, 78, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: background .25s, border-color .25s;
  }
  .menu-toggle:hover { background: rgba(200, 164, 78, .16); border-color: #fff3c4; }
  .menu-toggle:focus-visible { outline: 2px solid #e3c87a; outline-offset: 2px; }
  .menu-toggle[aria-expanded="true"] { background: rgba(200, 164, 78, .22); border-color: #e3c87a; }
  .menu-toggle .bars { position: relative; width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  .menu-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
  .menu-toggle[aria-expanded="true"] .bars { border-color: transparent; }
  .menu-toggle[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bars::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid currentColor; transform: rotate(-45deg); }
}
/* small phones: the word goes, the button is the three bars alone; the gold
   button and the crest give a little so the wordmark keeps its room */
@media (max-width: 600px) {
  .menu-toggle { width: 44px; padding: 0; justify-content: center; }
  .menu-toggle .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar-actions { gap: .5rem; }
}
@media (max-width: 480px) {
  .topbar-actions { gap: .4rem; }
  .topbar #contactOpen { padding: 10px 12px; font-size: 13px; }
  .menu-toggle { width: 40px; min-height: 40px; }
}
@media (max-width: 400px) { .topbar .crest { width: 50px; height: 50px; } .topbar .brand { gap: 8px; } }
@media (max-width: 350px) { .topbar .brand-name span { display: none; } }   /* the tiniest phones: the wordmark alone beside the crest */
@media (prefers-reduced-motion: reduce) { .site-nav a, .menu-toggle { transition: none; } }
@media print { .site-nav, .menu-toggle { display: none !important; } }