/* The site header: on every page of the website, and the only thing above the generator
   (/build/). Tokens from ds/tokens.css; the logo lockup and buttons from ds/bundle.css. */
:root { --site-header: 64px; }

.site-header { position: sticky; top: 0; z-index: 50; height: var(--site-header); box-sizing: border-box;
  display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-6);
  background: var(--plate-200); color: var(--ink); border-bottom: 1px solid var(--line);
  font-family: var(--font-sans); }
.site-logo { flex: none; }
.site-logo .uq-logo-mark { padding: 0; }
.site-logo .uq-logo-word { font-size: 20px; }
.site-nav { display: flex; gap: var(--space-1); margin-left: auto; }
.site-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); color: var(--ink-muted);
  font: var(--text-button); text-decoration: none; transition: color var(--uq-dur-fast, 120ms) ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-header .uq-btn { flex: none; text-decoration: none; }
.site-header a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-nav + .uq-btn { margin-left: var(--space-2); }

/* the generator under the header: it fills the rest of the window */
.with-site-header .app { height: calc(100vh - var(--site-header)); height: calc(100dvh - var(--site-header)); }
.with-site-header .site-header { position: relative; }

@media (max-width: 900px) {
  :root { --site-header: 56px; }
  .site-header { gap: var(--space-3); padding: 0 var(--space-4); }
  .site-nav { display: none; }                    /* (phones: the logo and one button) */
  .site-header .uq-btn { margin-left: auto; }
  .with-site-header .app { height: auto; min-height: calc(100dvh - var(--site-header)); }
}