/* KONUM: CodeAndSystems.Website\wwwroot\css\pages\privacy.css
   Privacy policy page: its own styles (moved out of the old privacy-policy.html, unchanged) and, at the end, the dark theme of the page
   (generated from the light colours of the rules above, then hand-tuned). Loaded after site.css, before theme.css. */

.privacy-body { padding: 72px 0 120px; }
.privacy-layout { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; }
@media(max-width:900px){ .privacy-layout { grid-template-columns: 1fr; gap: 40px; } .privacy-toc { display: none; } }

/* Sticky TOC */
.privacy-toc {
  position: sticky; top: 90px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.toc-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted);
}
.toc-links { padding: 8px; display: flex; flex-direction: column; gap: 1px; }
.toc-links a {
  display: block; padding: 8px 10px; border-radius: 6px;
  font-size: 12.5px; color: var(--muted2); text-decoration: none;
  font-weight: 300; transition: all 0.15s; line-height: 1.4;
}
.toc-links a:hover { background: var(--bg3); color: var(--text); }
.toc-links a.active { background: var(--purple-xl); color: var(--purple-l); font-weight: 500; }

/* Content */
.privacy-content { min-width: 0; }

.pp-section { margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--border); }
.pp-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.pp-section h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--text); margin-bottom: 16px; line-height: 1.2;
  display: flex; align-items: center; gap: 12px;
}
.pp-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--purple-xl); border: 1px solid #ddd6fe;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}

.pp-section p {
  font-size: 14.5px; color: var(--muted2); line-height: 1.8;
  font-weight: 300; margin-bottom: 14px;
}
.pp-section p:last-child { margin-bottom: 0; }

.pp-section h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px; font-weight: 600; color: var(--text);
  margin: 24px 0 10px; letter-spacing: -0.01em;
}

.pp-list {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.pp-list li {
  font-size: 14px; color: var(--muted2); font-weight: 300;
  padding-left: 20px; position: relative; line-height: 1.65;
}
.pp-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-l); flex-shrink: 0;
}

.pp-highlight {
  background: var(--purple-xl); border: 1px solid #ddd6fe;
  border-radius: 10px; padding: 16px 20px; margin: 16px 0;
  font-size: 14px; color: var(--muted2); line-height: 1.7; font-weight: 300;
}
.pp-highlight strong { color: var(--purple-l); }

.pp-table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: 13.5px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
}
.pp-table th {
  background: var(--bg2); padding: 11px 14px; text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--border);
}
.pp-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  color: var(--muted2); font-weight: 300; line-height: 1.55; vertical-align: top;
}
.pp-table tr:last-child td { border-bottom: none; }
.pp-table tr:nth-child(even) td { background: var(--bg2); }

/* Contact box */
.pp-contact-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; margin-top: 24px;
}
.pp-contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.pp-contact-row:last-child { border-bottom: none; }
.pp-contact-icon {
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--purple-xl); border: 1px solid #ddd6fe;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.pp-contact-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 1px; }
.pp-contact-val { color: var(--text); font-weight: 300; }
.pp-contact-val a { color: var(--purple-l); text-decoration: none; }
.pp-contact-val a:hover { text-decoration: underline; }

/* Last updated badge */
.last-updated {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); background: var(--bg2);
  border: 1px solid var(--border); border-radius: 100px;
  padding: 4px 12px; margin-bottom: 40px;
}

/* SAFETY: scroll-reveal must never be able to hide legal text.
   A wrapper taller than the viewport can never satisfy the reveal
   observer's visibility threshold, which leaves the whole policy at
   opacity 0 on small screens. Force these containers visible. */
.privacy-body .privacy-content,
.privacy-body .privacy-toc,
.privacy-body .fade-up {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Long values (addresses, emails) must wrap instead of overflowing */
.pp-contact-row > div { min-width: 0; }
.pp-contact-val { word-break: break-word; overflow-wrap: anywhere; }
.pp-section p, .pp-list li { overflow-wrap: break-word; }

/* Mobile */
@media (max-width: 768px) {
  .privacy-body { padding: 44px 0 80px; }

  .pp-section { margin-bottom: 40px; padding-bottom: 40px; }
  .pp-section h2 { font-size: 19px; gap: 10px; margin-bottom: 14px; }
  .pp-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
  .pp-section h3 { font-size: 14.5px; margin: 20px 0 9px; }
  .pp-section p { font-size: 14px; line-height: 1.75; }
  .pp-list li { font-size: 13.5px; }

  .pp-highlight { padding: 14px 16px; font-size: 13.5px; }

  .pp-table { font-size: 12.5px; }
  .pp-table th { padding: 9px 10px; font-size: 10px; }
  .pp-table td { padding: 10px 10px; line-height: 1.5; }

  .pp-contact-box { margin-top: 20px; }
  .pp-contact-row { padding: 12px 14px; gap: 10px; font-size: 13px; align-items: flex-start; }
  .pp-contact-icon { width: 28px; height: 28px; border-radius: 6px; font-size: 12px; }

  .last-updated { margin-bottom: 28px; }
}

/* ================================================================ dark theme */
html[data-theme="dark"] .pp-icon { border: 1px solid color-mix(in srgb, #451ffa 40%, var(--card)); }
html[data-theme="dark"] .pp-highlight { border: 1px solid color-mix(in srgb, #451ffa 40%, var(--card)); }
html[data-theme="dark"] .pp-contact-icon { border: 1px solid color-mix(in srgb, #451ffa 40%, var(--card)); }