/* zmenek.net 2026 redesign (Polaroid), see docs/superpowers/specs/2026-11-02-zmenek-polaroid-design.md
   Privacy (#zasebnost) and cookies (#o-piskotkih): the heading on the pinboard, the warm paper sheet,
   the cookie tables (stacked at 600px and below), .cookieChoice and the brown .cookieBtn. */

/* ---------------------------------------------------------------- Heading, on the pinboard */
#zasebnost .privacyTitle,
#o-piskotkih .cookieTitle {
  margin: 0 0 22px;
  font: 800 34px/1.15 var(--head);
  color: #fff;
  text-shadow: 0 1px 2px rgba(60,10,30,.55), 0 0 12px rgba(80,10,40,.35);
}
#zasebnost .privacyTitle span,
#o-piskotkih .cookieTitle span { color: var(--orange-lt); }

/* ---------------------------------------------------------------- The sheet: warm paper */
#zasebnost .privacyPolicy,
#o-piskotkih .cookiePolicy {
  max-width: 860px;
  padding: clamp(20px, 3vw, 40px);
  border-radius: 3px;
  background: var(--paper-warm);
  box-shadow: var(--shadow-print);
  font: 400 17px/1.65 var(--body);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
#zasebnost .privacyPolicy p,
#zasebnost .privacyPolicy ul,
#o-piskotkih .cookiePolicy p,
#o-piskotkih .cookiePolicy ul { margin: 0 0 12px; }
#zasebnost .privacyPolicy strong,
#o-piskotkih .cookiePolicy strong { font-weight: 700; color: var(--ink); }
#zasebnost .privacyPolicy h2,
#o-piskotkih .cookiePolicy h2 {
  margin: 28px 0 10px;
  font: 800 24px/1.25 var(--head);
  color: var(--brown);
}
#zasebnost .privacyPolicy h3,
#o-piskotkih .cookiePolicy h3 {
  margin: 18px 0 8px;
  font: 700 18px/1.35 var(--body);
  color: var(--ink);
  text-shadow: none;   /* the listing heading rule (#mainContent .ce_text h3) also matches */
}

/* lists: plum disc markers, 22px indent */
#zasebnost .privacyPolicy ul,
#o-piskotkih .cookiePolicy ul { padding-left: 22px; list-style: disc; }
#zasebnost .privacyPolicy li,
#o-piskotkih .cookiePolicy li { margin-bottom: 4px; }
#zasebnost .privacyPolicy li::marker,
#o-piskotkih .cookiePolicy li::marker { color: var(--plum); }

/* links: plum, underlined (running text, exempt from 44px) */
#zasebnost .privacyPolicy a,
#o-piskotkih .cookiePolicy a {
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#zasebnost .privacyPolicy code,
#o-piskotkih .cookiePolicy code { font-family: ui-monospace, Consolas, Menlo, "Courier New", monospace; font-size: .92em; line-height: 1; }

/* lead and footnote */
#zasebnost .privacyLead,
#o-piskotkih .cookieLead { font-size: 1.07em; }
#zasebnost .privacyPolicy .privacyUpdated,
#o-piskotkih .cookiePolicy .cookieUpdated { margin: 20px 0 0; font-size: .9em; color: var(--ink-muted); }

/* focus on the sheet: the brown ring */
#zasebnost .privacyPolicy :focus-visible,
#o-piskotkih .cookiePolicy :focus-visible {
  outline: 2px solid var(--brown-deep);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------------------------------------------------------------- Cookie table */
#o-piskotkih .cookieTable {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: .93em;
  line-height: 1.45;
}
#o-piskotkih .cookieTable th,
#o-piskotkih .cookieTable td {
  padding: 7px 10px;
  border: 1px solid var(--fact-line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;   /* "anywhere" would shrink the columns' min-content and split "zmenek.net" mid-word */
}
#o-piskotkih .cookieTable th { background: var(--cream); font-weight: 700; color: var(--ink); }
#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%; }

/* ---------------------------------------------------------------- The current choice and its button */
#o-piskotkih .cookieChoice {
  margin: 0 0 12px;
  padding: 12px 14px 2px;
  border: 1px solid var(--fact-line);
  background: rgba(255,255,255,.7);
}
#o-piskotkih .cookieChoice [data-consent-status] { font-weight: 700; }
#o-piskotkih .cookieBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 8px 8px 0;
  padding: 0 24px;
  border: 0;
  border-radius: 4px;
  background: var(--brown);
  font: 700 17px/1.2 var(--head);
  color: #fff;
  text-align: center;
  cursor: pointer;
}

@media (hover: hover) {
  #zasebnost .privacyPolicy a:hover,
  #o-piskotkih .cookiePolicy a:hover { color: var(--brown); }
  #o-piskotkih .cookieBtn:hover { background: var(--brown-deep); }
}

/* ---------------------------------------------------------------- Phones */
@media (max-width: 680px) {
  #zasebnost .privacyTitle,
  #o-piskotkih .cookieTitle { font-size: 28px; }
}

/* 600px and below: each row becomes a bordered block, the cells captioned by their 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 .cookieTable,
  #o-piskotkih .cookieTable tbody,
  #o-piskotkih .cookieTable tr,
  #o-piskotkih .cookieTable td { display: block; width: auto !important; }
  #o-piskotkih .cookieTable tr { margin-bottom: 10px; border: 1px solid var(--fact-line); }
  #o-piskotkih .cookieTable td { padding: 4px 10px; border: 0; }
  #o-piskotkih .cookieTable td:first-child { padding-top: 8px; background: var(--cream); }
  #o-piskotkih .cookieTable td:last-child { padding-bottom: 8px; }
  #o-piskotkih .cookieTable td::before { content: attr(data-label) ": "; font-weight: 700; }
  #o-piskotkih .cookieTable td:first-child::before { content: ""; }
}