/* Shared site chrome: the top bar and the footer. ONE stylesheet for both parts of the site: the app links css/chrome.css,
   the static pages link /assets/chrome.css (a copy made by tools/build_site.py). The markup comes from the same place too:
   Site.header()/Site.footer() in tools/build_site.py (also injected into dist/procvicovani/index.html; index.html carries a
   hand-kept copy for plain local development).
   Uses only tokens both stylesheets define: --bg --card --text --muted --border --link --focus --shadow. */
:root {
  --page-w: 880px;    /* content width of <main>; the top bar and the footer align to it */
  --topbar-h: 57px;   /* the sticky mock-exam bar sits exactly below the top bar */
}
@media (max-width: 600px) { :root { --topbar-h: 49px; } }
@media (pointer: coarse) { :root { --topbar-h: 61px; } }   /* 44px buttons + padding */
@media (pointer: coarse) and (max-width: 600px) { :root { --topbar-h: 57px; } }

/* ---------- Page frame and base type (the same on the static pages and in the app) ----------
   The content column (static pages: <main><div class="wrap">, app: <main id="view">), the body font and the page heading
   live HERE only, so every page of the site starts at the same place with the same h1. Do not restate them in
   css/style.css or in CSS of tools/build_site.py. */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main > .wrap, main#view {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 24px max(20px, env(safe-area-inset-right)) 32px max(20px, env(safe-area-inset-left));
}
@media (max-width: 600px) {
  main > .wrap, main#view { padding: 16px max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left)); }
}
h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.25; margin: 0 0 12px; }
@media (min-width: 44rem) { h1 { font-size: 2rem; } }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--topbar-h);
  /* background spans the window, the content lines up with <main> */
  padding: 8px max(20px, env(safe-area-inset-right), calc((100% - var(--page-w)) / 2 + 20px)) 8px max(20px, env(safe-area-inset-left), calc((100% - var(--page-w)) / 2 + 20px));
  background: var(--card);
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  line-height: 1.5;
}
.brand a { color: var(--text); font-weight: 700; font-size: 1.125rem; text-decoration: none; }
.brand a:hover { text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.topbar nav a {
  color: var(--muted);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
}
.topbar nav a:hover { color: var(--text); background: var(--bg); text-decoration: none; }
/* the current page (aria-current="page") or the section it belongs to (aria-current="true") */
.topbar nav a[aria-current] { background: rgba(37, 99, 235, 0.1); color: var(--link); font-weight: 600; }
.menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
.theme-toggle {
  margin-left: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle[hidden] { display: none; }   /* shown by the script that drives it */
.theme-toggle:hover { background: var(--bg); }
.theme-toggle svg { width: 18px; height: 18px; }

/* ---------- "Další": Průvodce, Nápověda, Data a záloha and, under a line, the light/dark switch ----------
   A dropdown on wide screens (driven by CHROME_JS / js/main.js); without JS and inside the ☰ menu its items are listed inline. */
.more { position: relative; display: flex; }
.more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.more-toggle::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.more.open .more-toggle::after { transform: translateY(1px) rotate(-135deg); }
.more-toggle:hover { color: var(--text); background: var(--bg); }
/* the current page is one of its items */
.more:has(.more-menu [aria-current]) .more-toggle { background: rgba(37, 99, 235, 0.1); color: var(--link); font-weight: 600; }
.more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 220px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.more.open .more-menu { display: flex; }
.topbar .more-menu a { padding: 8px 12px; }
.more-sep { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }
.more-menu .theme-toggle { width: auto; height: auto; margin: 0; padding: 8px 12px; justify-content: flex-start; border: none; background: transparent; }
/* the switch gets its name (aria-label "Tmavý režim") and state (aria-pressed) as visible text (UX-18) */
.more-menu .theme-toggle::after { content: "Tmavý režim: vypnutý"; margin-left: 8px; color: var(--muted); font-weight: 500; }
.more-menu .theme-toggle[aria-pressed="true"]::after { content: "Tmavý režim: zapnutý"; }
html:not(.js) .more-toggle, html:not(.js) .more-sep { display: none; }
html:not(.js) .more, html:not(.js) .more-menu { display: contents; }

/* Narrow screens: the menu folds behind ☰ - only when JS runs (html.js), otherwise the links simply wrap. */
@media (max-width: 840px) {
  /* UX-18: a visible word next to ☰ (the accessible name stays "Otevřít menu", which contains it) */
  html.js .menu-toggle { display: inline-flex; width: auto; min-width: 36px; padding: 0 10px; gap: 6px; }
  html.js .menu-toggle::after { content: "Menu"; font-size: 0.95rem; font-weight: 600; }
  html.js .topbar nav {
    position: absolute;
    top: 100%;
    right: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    min-width: 200px;
    display: none;
  }
  html.js .topbar nav.open { display: flex; }
  html.js .topbar nav a, html.js .topbar .more-menu .theme-toggle { padding: 10px 12px; }
  /* inside the ☰ menu "Další" unfolds: its items follow Zkoušky and Procvičování */
  html.js .topbar .more-toggle { display: none; }
  html.js .topbar .more, html.js .topbar .more-menu { display: contents; }
}
@media (max-width: 600px) {
  .topbar { padding: 6px max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left)); }
}
@media (pointer: coarse) {
  .menu-toggle, .theme-toggle { width: 44px; height: 44px; }
  html.js .menu-toggle { width: auto; min-width: 44px; }
  .topbar nav a, .more-toggle { padding-top: 10px; padding-bottom: 10px; }
  .more-menu .theme-toggle { min-height: 44px; }
}

/* ---------- Breadcrumbs (static pages: Site.add_page; app: crumbs() in js/lib/dom.js) ---------- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0 0 8px; padding: 0; font-size: 0.875rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin: 0 0.45rem; }
.crumbs a { color: var(--link); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
  padding: 18px 0 calc(24px + env(safe-area-inset-bottom));
}
.site-footer .inner {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}
.site-footer p { margin: 0.35rem 0; }
.site-footer a { color: var(--link); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1.1rem; margin-top: 0.6rem; }   /* laws left, project right */
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0; padding: 0; }
.site-footer .status-line { color: var(--text); }