/* Shared ODE chrome — header + footer — used by every project's outer index.html.
   One copy; edit here to restyle every project at once. Per-project variance
   (title/subtitle text) lives in that project's own HTML, injected by chrome.js.
   Colours and the header metrics are --chrome-* tokens, so a theme
   (viewer/themes/<name>.css, linked after this file) can restyle the chrome by
   overriding them on :root. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow: hidden; }

:root {
  --chrome-bg: #ffffff;
  --chrome-text: #1c1c1c;
  --chrome-subtitle: #1c1c1c;
  --chrome-muted: #666666;
  --chrome-border: #e0e0e0;
  --chrome-footer-bg: #ffffff;
  --chrome-footer-border: #e0e0e0;
  --chrome-header-height: 56px;
  --chrome-title-size: 1.5rem;
  --chrome-title-weight: 900;
  --chrome-subtitle-size: 1.2rem;
  --chrome-logo-height: 38px;
}

body {
  background: var(--chrome-bg);
  font-family: 'Lato', Arial, sans-serif;
  color: var(--chrome-text);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  padding: 0 2rem;
  height: var(--chrome-header-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--chrome-border);
  background: var(--chrome-bg);
  z-index: 50;
}

header .title-group {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  white-space: nowrap;
}

header h1 {
  font-weight: var(--chrome-title-weight);
  font-size: var(--chrome-title-size);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chrome-text);
}

header .title-group > span {
  font-size: var(--chrome-subtitle-size);
  line-height: 1;
  color: var(--chrome-subtitle);
  letter-spacing: 0.02em;
  font-weight: 300;
}

/* A "›" in data-chrome-title is drawn as the ODE chevron (chrome.js). The
   title's words are spans so they sit either side of it; inline-flex keeps a
   title without a chevron laid out exactly like plain text. */
header h1 {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
header h1 .title-chevron {
  display: block;
  width: 0.48em;
  height: 1em;
  fill: currentColor;
}

header .spacer { flex: 1; }

header .ode-logo {
  height: var(--chrome-logo-height);
  width: auto;
  display: block;
}

/* Narrow viewports (phones): the single-row title + subtitle + logo no longer
   fit on one line, so stack the title and shrink both lines instead of
   letting the row overflow. */
@media (max-width: 600px) {
  header {
    padding: 0 1rem;
    gap: 0.5rem;
  }

  header .title-group {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
  }

  header h1 {
    font-size: 1.15rem;
  }

  header .title-group > span {
    font-size: 0.85rem;
  }
}

#viewer {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: grab;
}

#viewer:active { cursor: grabbing; }

#viewer iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* Legal notice — on the outer page itself (not just inside the iframed
   viewer's annotation panel), so it's reachable without opening anything and
   without depending on the iframe having loaded. Dedicated layout space
   rather than an overlay, so it never covers the embedded viewer's own
   bottom toolbar (orbit/fly/walk, AR/VR, etc). Three-column layout mirrors
   ode.or.at's own site footer: copyright / legal / contact. */
footer {
  flex-shrink: 0;
  padding: 4px 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--chrome-footer-border);
  background: var(--chrome-footer-bg);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chrome-muted);
  z-index: 50;
}
footer nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
footer a {
  color: var(--chrome-muted);
  text-decoration: none;
}
footer a:hover {
  color: var(--chrome-text);
  text-decoration: underline;
}

@media (max-width: 600px) {
  footer {
    padding: 4px 0.75rem;
    gap: 6px;
    font-size: 8px;
  }
}