/* chrome.css — the frame of the FST4 web: the top bar, the vertical menu on
 * the left, the content column and the site footer.
 *
 * Every page kind loads it — the hand-written pages (with fst4.css for their
 * content), the generated introduction (which carries its own content
 * styles) and the Doxygen API reference (doxygen.css + fst4_doxygen.css) —
 * so it depends on nothing: it declares its own tokens (--ch-*) and styles
 * only the .ch-* elements and footer.site. The menu HTML itself comes from
 * tools/chrome.py, the single source for all three page kinds.
 *
 * Layout: a sticky top bar; below it a two-column shell whose left column is
 * the menu, sticky for the full viewport height so it is present at all
 * times and exactly as wide as its longest item needs (so a larger font
 * widens it rather than overflowing), and whose right column is the page. The bar and the menu wear the
 * two violets of the UTIA web site (see the token block) -- painted on the
 * absolutely positioned .ch-bg child of each, NOT on the sticky element
 * itself, and the bar starts with a thin strip in the page colour
 * (--ch-strip-h): Safari 26 tints the browser window with the colour it
 * finds in the first few pixel rows of the page (an invisible element does
 * not count, a bottom border does, a fixed element needs 6px of height to
 * count), so those rows are kept neutral while the bar below them stays
 * violet. Safari 15-18 use the theme-color metas that tools/chrome.py emits
 * instead. Under 760px the menu becomes a
 * wrapping horizontal strip under the bar.
 */

/* Colours: the two violets of utia.cas.cz -- the site's base violet
   (#3b2ea7, its hero and footer background) for the top bar and the lighter
   violet of the geometric pattern drawn over it (#4435bb) for the menu; the
   institute's cyan accent (#00fcf0) marks the active item and the FST4 tag.
   Brand colours, so they are the same in the dark colour scheme. */
:root {
  --ch-bar-h: 60px;      /* the neutral strip + the violet bar */
  --ch-strip-h: 8px;
  --ch-strip: #f9f9f7;   /* = the page background, light and dark */
  --ch-bar-bg: #3b2ea7;
  --ch-side-bg: #4435bb;
  --ch-ink: #ffffff;
  --ch-ink-2: #e4e1fb;
  --ch-muted: #b9b3ee;
  --ch-accent: #00fcf0;
  --ch-hover: rgba(255,255,255,0.10);
  --ch-active: rgba(255,255,255,0.16);
  --ch-border: rgba(255,255,255,0.18);
  --ch-foot-ink: #898781;
  --ch-foot-line: #e1e0d9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ch-strip: #0d0d0d;
    --ch-foot-line: #2c2c2a;
  }
}

body { margin: 0; }

/* ---------- the colour carriers (see the header comment) ---------- */
.ch-bg { position: absolute; inset: 0; z-index: -1; }
.ch-bar .ch-bg { background: var(--ch-bar-bg); top: var(--ch-strip-h); }
.ch-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: var(--ch-strip-h); background: var(--ch-strip);
}
.ch-side .ch-bg { background: var(--ch-side-bg); }

/* ---------- top bar ---------- */
.ch-bar {
  position: sticky; top: 0; z-index: 60;
  box-sizing: border-box; height: var(--ch-bar-h);
  background: transparent; color: var(--ch-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: var(--ch-strip-h) 22px 0 20px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ch-brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; min-width: 0; }
.ch-brand a { color: inherit; text-decoration: none; font-size: 21px; font-weight: 700; letter-spacing: 0.2px; }
.ch-brand a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ch-brand .t2 { font-size: 14px; font-weight: 500; color: var(--ch-accent); }
.ch-org a {
  color: var(--ch-ink-2); text-decoration: none; white-space: nowrap;
  font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase;
}
.ch-org a:hover { color: #fff; }

/* ---------- shell: menu + page ---------- */
.ch-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--ch-bar-h)); }
.ch-side {
  position: sticky; top: var(--ch-bar-h); z-index: 50;
  flex: 0 0 auto; width: max-content;   /* as wide as its longest item plus the symmetric padding */
  box-sizing: border-box; height: calc(100vh - var(--ch-bar-h));
  background: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ch-side-in { box-sizing: border-box; height: 100%; overflow-y: auto; padding: 14px 10px 20px; }
.ch-side a {
  display: block; color: var(--ch-ink-2); text-decoration: none;
  font-size: 14.5px; line-height: 1.3; padding: 7px 11px; margin: 2px 0;
  border-radius: 6px; border-left: 3px solid transparent;
}
.ch-side a:hover { background: var(--ch-hover); color: #fff; }
.ch-side a.act { background: var(--ch-active); color: #fff; font-weight: 600; border-left-color: var(--ch-accent); }
.ch-side .ch-sep { height: 1px; background: var(--ch-border); margin: 10px 8px; }
.ch-content { flex: 1 1 auto; min-width: 0; }

/* ---------- site footer (shared by all page kinds) ---------- */
footer.site {
  border-top: 1px solid var(--ch-foot-line); margin-top: 30px;
  padding: 18px 20px 30px; color: var(--ch-foot-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px; line-height: 1.5;
}
footer.site .ch-foot-in { max-width: 900px; margin: 0 auto; }
footer.site a { color: inherit; }

/* ---------- narrow screens ---------- */
@media (max-width: 760px) {
  .ch-bar { height: auto; padding: calc(var(--ch-strip-h) + 10px) 14px 10px; }
  .ch-brand a { font-size: 18px; }
  .ch-org { display: none; }
  .ch-shell { display: block; }
  .ch-side { position: relative; top: auto; width: auto; height: auto; }
  .ch-side-in { height: auto; overflow: visible; display: flex; flex-wrap: wrap; gap: 2px 2px; padding: 8px; }
  .ch-side a { padding: 5px 10px; font-size: 13.5px; border-left: 0; margin: 0; }
  .ch-side a.act { border-left: 0; }
  .ch-side .ch-sep { display: none; }
}

/* ---------- print ---------- */
@media print {
  .ch-bar, .ch-side { display: none; }
  .ch-shell { display: block; }
  footer.site { border-top: 1px solid #999; color: #444; }
}

/* ---------- the Doxygen reference inside the frame ---------- */
/* Doxygen lays its pages out for the full window; inside the content column
   the text is capped at a readable width (the tab bar keeps the full width). */
.ch-content #doc-content { max-width: 1120px; padding-right: 20px; box-sizing: border-box; }