/* ═══════════════════════════════════════════════════════════
   assets/css/privacy.css — tonirulislam.tech
   Identical component system to cookies.css; priv- prefix.
   Shares the global CSS variable system from style.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.priv-hero {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: clamp(52px, 8vw, 110px) max(24px, 5vw) clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  transition: background .35s, border-color .35s;
}

/* Ambient glow blob — top-right, matches cook-hero::before */
.priv-hero::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  top: -160px; right: -80px;
  pointer-events: none;
}

.priv-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.ph-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  background: var(--accent-light);
  border: 1px solid rgba(232, 103, 58, 0.25);
  border-radius: 100px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.ph-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 700; line-height: 1.08;
  color: var(--text-black);
  letter-spacing: -.03em;
  margin-bottom: 20px;
  transition: color .35s;
}
.ph-title em {
  font-style: italic;
  color: var(--accent-color);
}

.ph-meta {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 14px;
}
.ph-date {
  font-size: .85rem; color: var(--text-muted);
}
.ph-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px;
  background: var(--accent-light);
  border: 1px solid rgba(232, 103, 58, .2);
  border-radius: 100px;
  font-size: .75rem; font-weight: 600;
  color: var(--accent-color);
}

/* ── Page wrapper ─────────────────────────────────────────── */
.priv-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) max(24px, 5vw) clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 52px;
  align-items: start;
}

/* ── Preamble / acceptance banner ────────────────────────── */
.acceptance-banner {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.ab-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.ab-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text-black);
  margin-bottom: 6px;
}
.ab-sub {
  font-size: .88rem; line-height: 1.7;
  color: var(--text-muted);
}
.ab-sub strong { color: var(--text-dark); }

/* ── Main column ──────────────────────────────────────────── */
.priv-main { min-width: 0; }

/* ── Section ──────────────────────────────────────────────── */
.priv-section {
  scroll-margin-top: calc(var(--nav-height) + 16px);
}
.ps-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.ps-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem; font-weight: 700;
  -webkit-text-stroke: 1.5px var(--accent-color);
  color: transparent;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}
.ps-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--text-black);
  line-height: 1.2;
  transition: color .35s;
}
.ps-title em { font-style: italic; color: var(--accent-color); }

.ps-body p {
  font-size: .96rem; line-height: 1.82;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.ps-body p:last-child { margin-bottom: 0; }
.ps-body p > strong { color: var(--text-black); }
.ps-body code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .78rem; padding: 2px 7px;
  background: var(--code-bg);
  border-radius: 6px;
  color: var(--accent-color);
}
.ps-body a {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ps-body a:hover { opacity: .8; }

/* ── Highlights / callouts ───────────────────────────────── */
.ps-highlight {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  border-radius: 14px;
  margin: 20px 0;
  border: 1px solid transparent;
}
.ps-highlight.info {
  background: rgba(2, 132, 199, .06);
  border-color: rgba(2, 132, 199, .2);
}
.ps-highlight.ok {
  background: rgba(5, 150, 105, .06);
  border-color: rgba(5, 150, 105, .2);
}
.ps-highlight.warn {
  background: var(--accent-light);
  border-color: rgba(232, 103, 58, .2);
}
.psh-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; }
.psh-text { font-size: .88rem; line-height: 1.72; color: var(--text-dark); }
.psh-text strong { color: var(--text-black); }
.psh-text a { color: var(--accent-color); text-decoration: underline; text-underline-offset: 3px; }

/* ── Lists ────────────────────────────────────────────────── */
.ps-list {
  margin: 12px 0 16px 0;
  padding-left: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.ps-list li {
  font-size: .96rem; line-height: 1.7; color: var(--text-dark);
}
.ps-list li strong { color: var(--text-black); }
.ps-list li code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .78rem; padding: 1px 6px;
  background: var(--code-bg); border-radius: 5px;
  color: var(--accent-color);
}
.ps-list li a { color: var(--accent-color); text-underline-offset: 3px; }

/* ── Cookie table (reused from cookies.css) ──────────────── */
.cookie-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 20px 0;
  box-shadow: var(--shadow-sm);
}
.cookie-table {
  width: 100%; border-collapse: collapse; font-size: .84rem;
}
.cookie-table thead { background: var(--bg-secondary); }
.cookie-table th {
  padding: 11px 16px; text-align: left;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cookie-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--divider);
  color: var(--text-dark);
  vertical-align: middle; line-height: 1.5;
}
.cookie-table tr:last-child td { border-bottom: none; }
.cookie-table tr:hover td { background: var(--accent-light); }
.cookie-table code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .78rem; padding: 2px 7px;
  background: var(--code-bg); border-radius: 6px;
  color: var(--accent-color);
}

/* Category badges — shared with cookies.css */
.ct-badge {
  display: inline-block;
  padding: 2px 9px; border-radius: 100px;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.ct-badge.essential { background: rgba(5,150,105,.1);  color: #059669; }
.ct-badge.analytics { background: rgba(2,132,199,.1);  color: #0284c7; }
.ct-badge.functional{ background: rgba(245,158,11,.1); color: #d97706; }
.ct-badge.marketing { background: rgba(232,103,58,.1); color: #e8673a; }

/* ── Rights grid ──────────────────────────────────────────── */
.rights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.right-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.right-card:hover {
  border-color: rgba(232, 103, 58, .3);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.rc-icon {
  font-size: 1.3rem;
  margin-bottom: 10px;
  display: block;
}
.rc-title {
  font-size: .85rem; font-weight: 700;
  color: var(--text-black);
  margin-bottom: 6px;
}
.rc-desc {
  font-size: .8rem; line-height: 1.55;
  color: var(--text-muted);
}

/* ── Divider ──────────────────────────────────────────────── */
.priv-divider {
  height: 1px;
  background: var(--divider);
  margin: 40px 0;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */
.priv-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  display: flex; flex-direction: column; gap: 20px;
}

/* TOC card */
.toc-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.toc-head {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.toc-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 2px;
}
.toc-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px;
  font-size: .81rem; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  transition: all .2s;
  border-left: 2px solid transparent;
}
.toc-link:hover  { color: var(--accent-color); background: var(--accent-light); }
.toc-link.active { color: var(--accent-color); background: var(--accent-light); border-left-color: var(--accent-color); }
.toc-num {
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--bg-secondary); color: var(--text-muted);
  font-size: .66rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s, color .2s;
}
.toc-link.active .toc-num { background: var(--accent-color); color: #fff; }

/* Data / snapshot card */
.data-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.data-card-head {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.data-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--divider);
  font-size: .82rem;
}
.data-row:last-child { border-bottom: none; }
.data-key { color: var(--text-muted); }
.data-val { font-weight: 700; }
.data-val.yes     { color: #059669; }
.data-val.no      { color: #dc2626; }
.data-val.neutral { color: var(--text-dark); }

/* Related / third-party policy links */
.tpp-list {
  display: flex; flex-direction: column; gap: 6px;
}
.tpp-link {
  display: block;
  padding: 8px 12px; border-radius: 10px;
  font-size: .82rem; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  transition: all .2s;
}
.tpp-link:hover { color: var(--accent-color); border-color: rgba(232,103,58,.3); background: var(--accent-light); }
.tpp-link.active-page {
  color: var(--accent-color);
  background: var(--accent-light);
  border-color: rgba(232,103,58,.3);
  font-weight: 600;
  cursor: default;
}

/* Contact nudge */
.contact-nudge {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-mid) 100%);
  border-radius: 16px;
  padding: 22px 20px;
  color: #fff;
}
.cn-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 8px;
}
.cn-sub {
  font-size: .82rem; line-height: 1.6; opacity: .88; margin-bottom: 16px;
}
.cn-btn {
  display: inline-block;
  padding: 9px 18px; border-radius: 10px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.45);
  color: #fff; font-size: .84rem; font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s;
  backdrop-filter: blur(4px);
}
.cn-btn:hover { background: rgba(255,255,255,.32); border-color: rgba(255,255,255,.7); }

/* ═══════════════════════════════════════════════════════════
   REVEAL ANIMATION
   ═══════════════════════════════════════════════════════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal-up.visible { opacity: 1; transform: none; }

/* ── §3 Purpose cards ─────────────────────────────────────── */
.purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0;
}
/* last card (5th) spans full width when grid has 3 cols */
.purpose-grid .purpose-card:last-child:nth-child(3n - 1) {
  grid-column: span 1;
}
.purpose-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.purpose-card:hover {
  border-color: rgba(232,103,58,.3);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.purpose-icon {
  font-size: 1.3rem;
  margin-bottom: 10px;
  display: block;
}
.purpose-name {
  font-size: .85rem; font-weight: 700;
  color: var(--text-black); margin-bottom: 6px;
}
.purpose-desc {
  font-size: .8rem; line-height: 1.6;
  color: var(--text-muted);
}

/* ── §4 Legal basis cards ────────────────────────────────── */
.legal-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.legal-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.legal-card:hover {
  border-color: rgba(232,103,58,.3);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.legal-card-head {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.legal-icon { font-size: 1.2rem; }
.legal-basis-badge {
  padding: 2px 9px; border-radius: 100px;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.legal-basis-badge.consent  { background: rgba(5,150,105,.1);  color: #059669; }
.legal-basis-badge.legit    { background: rgba(2,132,199,.1);  color: #0284c7; }
.legal-basis-badge.contract { background: rgba(245,158,11,.1); color: #d97706; }
.legal-title {
  font-size: .86rem; font-weight: 700;
  color: var(--text-black); margin-bottom: 7px;
}
.legal-desc {
  font-size: .8rem; line-height: 1.6;
  color: var(--text-muted); margin-bottom: 12px;
}
.legal-applies {
  font-size: .72rem; font-weight: 600;
  color: var(--accent-color);
  padding: 4px 10px; border-radius: 8px;
  background: var(--accent-light);
  display: inline-block;
}

/* ── §6 Retention timeline ───────────────────────────────── */
.retention-list {
  margin: 20px 0;
  position: relative;
  padding-left: 0;
}
.retention-item {
  display: flex;
  gap: 16px;
  margin-bottom: 0;
  position: relative;
}
/* Vertical connecting line */
.retention-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 7px; top: 20px;
  width: 2px;
  height: calc(100% + 0px);
  background: var(--divider);
}
.retention-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-color);
  border: 3px solid var(--bg-primary);
  outline: 2px solid var(--accent-color);
  flex-shrink: 0; margin-top: 3px;
  position: relative; z-index: 1;
  transition: background .2s;
}
.retention-content {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  flex: 1;
  transition: border-color .2s;
}
.retention-item:hover .retention-content { border-color: rgba(232,103,58,.3); }
.retention-label {
  font-size: .86rem; font-weight: 700;
  color: var(--text-black); margin-bottom: 4px;
}
.retention-period {
  font-size: .82rem; font-weight: 600;
  color: var(--accent-color); margin-bottom: 6px;
}
.ret-note {
  font-size: .75rem; font-weight: 400;
  color: var(--text-muted); margin-left: 4px;
}
.retention-detail {
  font-size: .8rem; line-height: 1.6;
  color: var(--text-muted);
}

/* ── §7 Provider cards ───────────────────────────────────── */
.provider-cards {
  display: flex; flex-direction: column;
  gap: 12px; margin: 20px 0;
}
.provider-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.provider-card:hover {
  border-color: rgba(232,103,58,.3);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.provider-card-head {
  display: flex; align-items: center;
  gap: 12px; margin-bottom: 10px;
}
.provider-icon { font-size: 1.3rem; flex-shrink: 0; }
.provider-name {
  font-size: .9rem; font-weight: 700;
  color: var(--text-black); line-height: 1.2;
}
.provider-role {
  font-size: .75rem; color: var(--text-muted);
}
.provider-badge {
  margin-left: auto; flex-shrink: 0;
  padding: 2px 10px; border-radius: 100px;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.provider-badge.neutral { background: rgba(2,132,199,.1);  color: #0284c7; }
.provider-badge.warn    { background: rgba(245,158,11,.1); color: #d97706; }
.provider-desc {
  font-size: .84rem; line-height: 1.7;
  color: var(--text-muted);
}
.provider-desc code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .76rem; padding: 1px 6px;
  background: var(--code-bg); border-radius: 5px;
  color: var(--accent-color);
}

/* ── Related Policies — current page item ────────────────── */
.tpp-current {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 10px;
  font-size: .82rem; font-weight: 600;
  color: var(--accent-color);
  background: var(--accent-light);
  border: 1px solid rgba(232,103,58,.3);
  cursor: default;
}
.tpp-current-tag {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px;
  background: var(--accent-color); color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE

   ═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .priv-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .priv-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .contact-nudge { grid-column: 1 / -1; }
  .rights-grid   { grid-template-columns: repeat(2, 1fr); }
  .legal-cards   { grid-template-columns: 1fr 1fr; }
  .purpose-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .priv-sidebar  { grid-template-columns: 1fr; }
  .rights-grid   { grid-template-columns: 1fr; }
  .legal-cards   { grid-template-columns: 1fr; }
  .purpose-grid  { grid-template-columns: 1fr; }
  .ph-title      { font-size: 2.4rem; }
}