/* Site header: a floating pill bar, sticky at the top. Contains the brand, the primary links (.site-nav__link, only the most
   important few), the Apply button, a GitHub icon, the theme toggle and the menu toggle. Secondary links live in the menu panel
   (.site-menu), which hangs below the bar. A link that is in the bar on wide screens also appears in the panel with
   .site-menu__link--primary, shown on small screens only. Load after button.css. */

.site-header { position: sticky; top: 0; z-index: 20; padding: 14px var(--gutter) 0; pointer-events: none; }
.site-header__bar { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: 1120px; margin: 0 auto; padding: var(--space-2) 10px var(--space-2) 20px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-bar); }

.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.brand__mark { width: 60px; height: auto; aspect-ratio: 2.126; }
.brand__word { font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.brand__word b { font-weight: 800; }

.site-nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); }
.site-nav__link { color: var(--ink); font-size: .98rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-nav__link:hover { color: var(--teal-ink); }

/* round icon controls: GitHub link, theme toggle, menu toggle */
.icon-link, .theme-toggle, .menu-toggle { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.icon-link:hover { border-color: var(--teal); color: var(--teal-ink); }
.theme-toggle:hover, .menu-toggle:hover { border-color: var(--teal); }
.icon-link svg { width: 19px; height: 19px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

/* menu toggle: three bars that turn into a cross while the menu is open */
.menu-toggle { position: relative; }
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s, opacity .18s, top .22s; }
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 19px; }
.menu-toggle span:nth-child(3) { top: 24px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* The menu panel hangs below the bar on every screen size. On wide screens it holds only the secondary links (the primary ones
   are in the bar); on small screens the bar keeps just the icons and the panel holds everything. Absolutely positioned so the
   hidden panel takes no space in the page flow (visibility alone would keep its height). */
.site-menu { position: absolute; top: 100%; right: max(var(--gutter), calc((100% - 1120px) / 2)); display: grid; gap: 2px; width: 300px; margin-top: var(--space-2); padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-panel); pointer-events: auto;
  box-shadow: var(--shadow-menu);
  visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
.site-menu.is-open { visibility: visible; opacity: 1; transform: none; }
.site-menu__link { padding: 14px var(--space-4); border-radius: var(--radius-input); color: var(--ink); font-weight: 600; text-decoration: none; }   /* wears .glass-lift for its hover */
.site-menu__apply { margin-top: 6px; }
@media (min-width: 761px) { .site-menu__link--primary, .site-menu__apply { display: none; } }   /* already in the bar */

@media (max-width: 760px) {
  .brand__mark { width: 48px; }
  .brand__word { font-size: 1.1rem; }
  .site-nav__link, .site-nav__apply { display: none; }   /* the bar keeps only the icons; the links and the Apply button move into the menu */
  .site-menu { left: var(--gutter); right: var(--gutter); width: auto; max-width: 1120px; margin-inline: auto; }
}
@media (max-width: 380px) { .brand__word { display: none; } }