/* site-chrome.css: the shared header, menu and footer for every static page.
   Self-contained (does not rely on style.css), so it also works on pages that use
   their own stylesheet (FAQ, Hardware, Licensing...). Colours match the WordPress theme. */
.site-header, .site-footer { font-family: "Segoe UI", system-ui, sans-serif; line-height: 1.5; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(18,20,23,.94); border-bottom: 1px solid #2c333b; backdrop-filter: blur(10px); }
.site-header .wrap, .site-footer .wrap { width: min(1080px, calc(100% - 32px)); max-width: none; margin: 0 auto; padding: 0; }
.site-header .bar { display: flex; align-items: center; gap: 16px; min-height: 64px; position: relative; }
.site-header .brand { display: flex; align-items: center; gap: 10px; color: #f2f4f6; text-decoration: none; font-weight: 650; font-size: 17px; white-space: nowrap; }
.site-header .brand img { width: 32px; height: 32px; display: block; }
.site-header .topbar { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-header .topbar a { padding: 6px 10px; border-radius: 999px; color: #a7b0ba; text-decoration: none; font-size: 14px; white-space: nowrap; }
.site-header .topbar a:hover { color: #f2f4f6; background: #242a30; }
.site-header .topbar a[aria-current="page"] { color: #f2f4f6; background: #242a30; box-shadow: inset 0 -2px 0 #f47327; }
.site-header .menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.site-header .hamburger { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #2c333b; border-radius: 999px; padding: 8px 14px; color: #f2f4f6; cursor: pointer; font-size: 15px; user-select: none; }
.site-header .hamburger span::before { content: "\2630\00a0\00a0"; }
.site-header .menu-toggle:focus-visible + .hamburger { outline: 2px solid #3a82c4; outline-offset: 2px; }
.site-header .nav { display: none; }
.site-header .menu-toggle:checked ~ .nav { display: block; position: absolute; right: 0; top: 64px; background: #1b1f24; border: 1px solid #2c333b; border-radius: 14px; padding: 8px 0; min-width: 280px; max-height: calc(100vh - 80px); overflow: auto; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.site-header .nav ul { list-style: none; margin: 0; padding: 0; }
.site-header .nav .sub-menu a { padding-left: 32px; font-size: 15px; color: #a7b0ba; }
.site-header .nav a { display: block; padding: 9px 16px; color: #f2f4f6; text-decoration: none; }
.site-header .nav a:hover, .site-header .nav a[aria-current="page"] { background: #242a30; color: #f2f4f6; }
@media (max-width: 799px) {
  .site-header .bar { flex-direction: row; align-items: center; padding: 0; min-height: 64px; }
  .site-header .topbar { display: none; }
  .site-header .hamburger { margin-left: auto; }
  .site-header .menu-toggle:checked ~ .nav { position: fixed; left: 8px; right: 8px; top: 64px; min-width: 0; }
}
.site-footer { border-top: 1px solid #2c333b; padding: 28px 0 40px; margin-top: 40px; color: #a7b0ba; font-size: 15px; background: transparent; }
.site-footer .foot { display: grid; gap: 14px; }
.site-footer strong { color: #f2f4f6; }
.site-footer a { color: #f2f4f6; text-decoration: none; }
.site-footer p { margin: 6px 0 0; }
.site-footer .legal a { margin-left: 10px; }
.site-footer .social { display: flex; gap: 14px; }
.site-footer .social a { color: #f2f4f6; display: inline-flex; }

/* Step videos (build.py writes these only when a YouTube link is filled in) */
.step-video { margin-top: 10px; aspect-ratio: 16 / 9; max-width: 560px; border-radius: 10px; overflow: hidden; background: #000; }
.step-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Top bar dropdown: Hardware > Firmware SDK (2026-11-03). Same idea as the menu's sub-menu. */
.site-header .topbar .has-sub { position: relative; display: inline-flex; }
.site-header .topbar .topbar-sub { display: none; position: absolute; left: 0; top: 100%; padding-top: 6px; z-index: 60; }
.site-header .topbar .topbar-sub a { display: block; background: #1b1f24; border: 1px solid #2c333b; border-radius: 10px; padding: 9px 16px; color: #a7b0ba; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.site-header .topbar .topbar-sub a:hover, .site-header .topbar .topbar-sub a[aria-current="page"] { color: #f2f4f6; background: #242a30; }
.site-header .topbar .has-sub:hover .topbar-sub, .site-header .topbar .has-sub:focus-within .topbar-sub { display: block; }
.site-header .nav .sub-menu .sub-menu a { padding-left: 48px; font-size: 14px; }