/* CV-430 — textová stránka (zásady zpracování osobních údajů).
   Drží se palety webu, ale utlumeně: dlouhý právní text musí jít číst,
   takže žádné neonové nadpisy přes celou obrazovku a žádné animace pod textem. */

:root {
  --bg: #01080c;
  --cyan: #00f5ff;
  --green: #00ff9a;
  --muted: #7debf0;
  --text: #d8ffff;
}

html, body { margin: 0; padding: 0; background: var(--bg); }
* { box-sizing: border-box; }

body.text-page {
  color: var(--text);
  font-family: 'IBM Plex Mono', 'Share Tech Mono', monospace;
  -webkit-font-smoothing: antialiased;
}

.doc {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.doc-grid {
  position: fixed;
  inset: -60px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 245, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
}

.doc-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 40px) clamp(16px, 4vw, 40px) clamp(60px, 9vw, 120px);
}

/* --- hlavička --- */
.doc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 245, 255, .2);
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: .2em;
  color: var(--muted);
}

.doc-top a { color: var(--cyan); text-decoration: none; }
.doc-top a:hover { color: var(--green); }

.doc-head { margin: clamp(26px, 5vw, 52px) 0 clamp(20px, 3vw, 32px); }

.doc-kicker {
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: .3em;
  color: var(--green);
}

.doc h1 {
  margin: 12px 0 0;
  font-size: clamp(26px, 5vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cyan);
  text-wrap: balance;
}

.doc-rule {
  margin-top: 16px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan) 0%, rgba(0, 245, 255, .12) 60%, rgba(0, 245, 255, 0) 100%);
}

/* --- obsah --- */
.doc h2 {
  margin: clamp(30px, 4.5vw, 46px) 0 14px;
  padding-top: 18px;
  border-top: 1px dashed rgba(0, 245, 255, .22);
  font-size: clamp(16px, 2.4vw, 23px);
  line-height: 1.3;
  font-weight: 600;
  color: #ffffff;
  text-wrap: balance;
}

.doc h3 {
  margin: 26px 0 10px;
  font-size: clamp(13px, 1.7vw, 16px);
  font-weight: 600;
  color: var(--cyan);
}

.doc p {
  margin: 0 0 14px;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.85;
  color: #cdf7fa;
  text-wrap: pretty;
}

.doc ul {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}

.doc li {
  position: relative;
  margin-bottom: 9px;
  padding-left: 22px;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.8;
  color: #cdf7fa;
  text-wrap: pretty;
}

.doc li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--green);
  opacity: .75;
}

.doc a { color: var(--cyan); }
.doc a:hover { color: var(--green); }

.doc strong { color: #ffffff; font-weight: 600; }

/* --- vyznačené bloky --- */
.doc-card {
  margin: 0 0 18px;
  padding: clamp(14px, 2vw, 22px);
  background: rgba(0, 16, 20, .7);
  border: 1px solid rgba(0, 245, 255, .28);
  border-left: 2px solid rgba(0, 245, 255, .6);
}

.doc-card p:last-child,
.doc-card ul:last-child { margin-bottom: 0; }

.doc-basis {
  margin: 0 0 20px;
  padding: 9px 12px;
  background: rgba(0, 8, 10, .6);
  border-left: 2px solid rgba(0, 255, 154, .45);
  font-size: clamp(11px, 1.2vw, 13px);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--green);
}

.doc-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  font-size: clamp(12px, 1.35vw, 14px);
  line-height: 1.8;
}

.doc-meta dt { color: var(--muted); letter-spacing: .12em; font-size: .85em; }
.doc-meta dd { margin: 0; color: #ffffff; }

.doc-updated {
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: 16px;
  border-top: 1px solid rgba(0, 245, 255, .2);
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: .16em;
  color: var(--muted);
}

/* --- tabulka cookies --- */
.doc-table-wrap {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid rgba(0, 245, 255, .22);
}

.doc-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: clamp(11px, 1.2vw, 13px);
  line-height: 1.65;
  background: rgba(0, 16, 20, .7);
}

.doc-table th,
.doc-table td {
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 245, 255, .14);
}

.doc-table thead th {
  background: rgba(0, 8, 10, .6);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--cyan);
  white-space: nowrap;
}

.doc-table tbody tr:last-child th,
.doc-table tbody tr:last-child td { border-bottom: 0; }

.doc-table td { color: #cdf7fa; }
.doc-table code { font-family: inherit; color: var(--green); white-space: nowrap; }

.doc-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid rgba(0, 255, 154, .45);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--green);
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- tlačítko pro otevření nastavení cookies --- */
.doc-button {
  display: inline-block;
  margin: 0 0 20px;
  padding: 11px 18px;
  background: rgba(0, 245, 255, .1);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: inherit;
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: .22em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.doc-button:hover,
.doc-button:focus-visible { background: var(--cyan); color: #02181a; }

@media (max-width: 520px) {
  .doc-meta { grid-template-columns: 1fr; gap: 0 0; }
  .doc-meta dd { margin-bottom: 10px; }
}