/* Shared preview navigation. The current layout keeps its established styling. */
:root {
  --site-switch-height: 44px;
  --site-header-height: 96px;
  --site-top: calc(var(--site-switch-height) + var(--site-header-height));
}

/* No empty strip when the archived website comparison is disabled. */
html[data-site-comparison=false] { --site-switch-height: 0px }

html[data-site-mode] { scroll-padding-top: calc(var(--site-top) + 14px) }
html[data-site-mode] body { padding-top: var(--site-switch-height) }
html[data-site-mode] .site-header { top: var(--site-switch-height) }
html[data-site-mode] .reading-progress { top: var(--site-switch-height) }
html[data-site-mode] .context-toolbar { top: var(--site-switch-height) }
html[data-site-mode] .context-page .site-header { top: calc(var(--site-switch-height) + 52px) }

.site-mode-switch {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: var(--site-switch-height);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  border-bottom: 1px solid #dce3ee;
  background: #f6f8fc;
  color: #142b52;
}
.site-mode-switch button {
  min-width: 105px;
  height: var(--site-switch-height);
  padding: 0 21px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 500 12px/1 var(--body, sans-serif);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.site-mode-switch button:hover { background: #e7edfa }
.site-mode-switch button[aria-pressed=true] { border-bottom-color: #405cdb; background: #e7edfa }
.site-mode-switch button:focus-visible { outline: 2px solid currentColor; outline-offset: -6px }

html[data-site-mode=parallax] .site-mode-switch { background: #102650; color: #f6f8fc; border-bottom-color: #ffffff24 }
html[data-site-mode=parallax] .site-mode-switch button:hover { background: #ffffff12 }
html[data-site-mode=parallax] .site-mode-switch button[aria-pressed=true] { background: #ffffff17; border-bottom-color: #b9c9ff }

html[data-site-mode] .hero[data-hero-variant=colour] { min-height: min(790px,calc(100svh - var(--site-top))) }

@media(max-width:850px) {
  :root { --site-header-height: 84px }
  html[data-site-mode] { scroll-padding-top: calc(var(--site-top) + 12px) }
  html[data-site-mode] .hero[data-hero-variant=colour] { min-height: min(650px,calc(100svh - var(--site-top))) }
}
@media(max-width:600px) {
  :root { --site-header-height: 76px }
  html[data-site-mode] .hero[data-hero-variant=colour] { min-height: min(700px,calc(100svh - var(--site-top))) }
}
@media(prefers-reduced-motion:reduce) {
  .site-mode-switch button { transition: none }
}

html[data-site-mode] .context-page { --site-top: calc(var(--site-switch-height) + var(--site-header-height) + 52px) }