/* vrocisms.com, direction "Velvet" (2026 redesign): privacy and cookie pages (#zasebnost, #o-piskotkih).
   Spec: docs/superpowers/specs/2026-11-01-vrocisms-velvet-design.md (Pages, Privacy and Cookies).
   Replaces the inline <style> blocks that privacy.php and cookies.php used to carry.
   One centred reading column: the heading bar and the text panel share its width. */

/* ---------- Column and heading ---------- */
/* 700px keeps the measure near 70ch at Dosis 17px (860px gave ~95 characters a line) */
#zasebnost, #o-piskotkih { max-width: 700px; margin-inline: auto; }
#zasebnost .topBar h1, #o-piskotkih .topBar h1 {
  padding-left: 2px;
  font: 400 26px/1.2 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 8px rgba(14, 0, 5, .6);
}

/* ---------- Text panel ---------- */
#zasebnost .privacyPolicy, #o-piskotkih .cookiePolicy {
  position: relative;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 52px);
  background: var(--panel); border: 1px solid var(--gold-faint);
  box-shadow: 0 16px 40px rgba(10, 0, 3, .45);
  font: 500 17px/1.65 var(--ui); color: var(--text);
  overflow-wrap: break-word;
}
:is(#zasebnost, #o-piskotkih) :is(p, ul) { margin: 0 0 12px; }
:is(#zasebnost, #o-piskotkih) strong { font-weight: 700; color: #fff; }

:is(#zasebnost, #o-piskotkih) h2 {
  margin: 28px 0 10px; scroll-margin-top: 16px;
  font: 400 22px/1.3 var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--pink-light);
}
:is(#zasebnost, #o-piskotkih) h3 { margin: 18px 0 8px; font: 700 18px/1.35 var(--ui); color: #fff; }
:is(#zasebnost, #o-piskotkih) h2 + h3 { margin-top: 12px; }

:is(#zasebnost, #o-piskotkih) ul { padding-left: 22px; }
:is(#zasebnost, #o-piskotkih) li { list-style: disc; margin: 0 0 4px; padding-left: 2px; }
:is(#zasebnost, #o-piskotkih) li::marker { color: var(--pink); }

/* running-text links: exempt from the 44px rule */
:is(#zasebnost, #o-piskotkih) :is(.privacyPolicy, .cookiePolicy) a {
  color: var(--pink-light); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

:is(#zasebnost, #o-piskotkih) code { font-family: Consolas, Menlo, "Courier New", monospace; font-size: .92em; }

.privacyLead, .cookieLead { font-size: 1.07em; }
#zasebnost .privacyUpdated, #o-piskotkih .cookieUpdated {
  margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--gold-faint);
  font-size: .9em; color: var(--muted);
}

/* ---------- Cookie table ---------- */
#o-piskotkih .cookieTable { width: 100%; margin: 4px 0 16px; border-collapse: collapse; font-size: .93em; line-height: 1.45; }
#o-piskotkih .cookieTable :is(th, td) {
  padding: 7px 10px; border: 1px solid rgba(255, 211, 56, .22); text-align: left; vertical-align: top;
}
#o-piskotkih .cookieTable th {
  background: rgba(255, 255, 255, .07); font-weight: 700; color: #fff; letter-spacing: .03em;
}
#o-piskotkih .cookieTable td:first-child { width: 22%; }
#o-piskotkih .cookieTable td:nth-child(2) { width: 18%; }
#o-piskotkih .cookieTable td:last-child { width: 17%; }

/* ---------- Hover (pointer devices only) ---------- */
@media (hover: hover) {
  :is(#zasebnost, #o-piskotkih) :is(.privacyPolicy, .cookiePolicy) a:hover { color: #fff; }
}

/* ---------- 999px and below ---------- */
@media (max-width: 999px) {
  #zasebnost .topBar h1, #o-piskotkih .topBar h1 { font-size: 21px; }
}

/* ---------- 639px and below: the panel runs to the gutters ---------- */
@media (max-width: 639px) {
  #zasebnost .privacyPolicy, #o-piskotkih .cookiePolicy { font-size: 16px; }
  :is(#zasebnost, #o-piskotkih) h2 { font-size: 20px; }
  :is(#zasebnost, #o-piskotkih) h3 { font-size: 17px; }
}

/* ---------- 600px and below: one bordered block per cookie, cells captioned by data-label ---------- */
@media (max-width: 600px) {
  #o-piskotkih .cookieTable thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  #o-piskotkih :is(.cookieTable, .cookieTable tbody, .cookieTable tr, .cookieTable td) { display: block; width: auto !important; }
  #o-piskotkih .cookieTable tr { margin-bottom: 10px; border: 1px solid rgba(255, 211, 56, .22); }
  #o-piskotkih .cookieTable td { padding: 4px 12px; border: 0; }
  #o-piskotkih .cookieTable td:first-child { margin-bottom: 4px; padding-block: 8px; background: rgba(255, 255, 255, .07); font-weight: 700; color: #fff; }
  #o-piskotkih .cookieTable td:last-child { padding-bottom: 10px; }
  #o-piskotkih .cookieTable td::before { content: attr(data-label) ": "; font-weight: 700; color: #fff; }
  #o-piskotkih .cookieTable td:first-child::before { content: none; }
}

/* ---------- Print ---------- */
@media print {
  #zasebnost, #o-piskotkih { max-width: none; }
  #zasebnost .privacyPolicy, #o-piskotkih .cookiePolicy { padding: 0; background: none; border: 0; box-shadow: none; color: #000; }
  :is(#zasebnost, #o-piskotkih) :is(h1, h2, h3, strong, a, th, .privacyUpdated, .cookieUpdated) { color: #000; text-shadow: none; }
  #o-piskotkih .cookieTable :is(th, td), #o-piskotkih .cookieTable tr { border-color: #999; }
}