/* Site-level additions on top of the ODVIKU design system. Keep the DS files untouched. */
html { background: var(--bg); scroll-padding-top: var(--nav-height); }
body { margin: 0; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 960px) { html { scroll-padding-top: 64px; } }

/* The mobile menu sheet is position: fixed inside the nav. The nav's backdrop-filter would make
   the nav its containing block and clip the sheet, so drop the filter while the sheet is open. */
.od-nav:has(.od-sheet) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
body:has(.od-sheet) { overflow: hidden; }

/* Skip link (all pages) */
.site-skip {
  position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--action); color: var(--on-action); font-family: var(--font-sans); font-size: 15px; font-weight: 500; text-decoration: none;
}
.site-skip:focus { top: 12px; }

/* Inner pages: the Nav is hydrated in its own mount point; display: contents keeps it sticky
   relative to the page rather than to the mount point. */
#nav-root { display: contents; }

/* Legal pages (privacy, terms, accessibility) */
.site-legal { padding-top: var(--space-9); }
.site-legal > .od-glow { left: 12%; top: 0; width: 900px; height: 560px; }
.site-legal > .od-container { position: relative; z-index: 1; }
.site-legal__head { max-width: 760px; display: grid; gap: 24px; margin-bottom: var(--space-8); }
.site-legal__meta { letter-spacing: 0.14em; text-transform: uppercase; }
.site-legal__body { max-width: 760px; }
.site-legal__body h2 { margin: var(--space-7) 0 var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.site-legal__body h2:first-child { margin-top: 0; }
.site-legal__body h3 { margin: var(--space-5) 0 var(--space-3); }
.site-legal__body p, .site-legal__body li { color: var(--ink-muted); }
.site-legal__body p + p, .site-legal__body ul + p { margin-top: var(--space-4); }
.site-legal__body ul { margin: var(--space-4) 0 0; padding-left: 22px; display: grid; gap: 8px; }
.site-legal__body li::marker { color: var(--accent); }
.site-legal__body strong { color: var(--ink); font-weight: 500; }
.site-legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.site-legal__body a:hover { color: var(--ink); }
.site-legal__body code { font-family: var(--font-mono); font-size: 0.875em; color: var(--ink); }
@media (max-width: 720px) {
  .site-legal { padding-top: var(--space-8); }
  .site-legal__head { margin-bottom: var(--space-7); }
}

/* 404 */
.site-nf { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.site-nf main { flex: 1; display: flex; align-items: center; }
.site-nf .od-nav__actions .od-btn { display: inline-flex; }
.site-nf__copy { position: relative; z-index: 1; display: grid; gap: 24px; max-width: 640px; padding: 96px 0; }