/* ==============================================
   PRIVACY POLICY PAGE — css/privacy.css
   Builds on css/style.css (shared page-hero,
   header, footer, container, breadcrumb)
   ============================================== */

/* ── Intro Band ─────────────────────────────── */
.pp-intro-band {
  background: linear-gradient(135deg, #C9A03C 0%, #b8882e 100%);
  padding: 1.8rem 0;
}

.pp-intro-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.pp-intro-icon {
  font-size: 2rem;
  color: #fff;
  flex-shrink: 0;
  opacity: 0.9;
}

.pp-intro-inner p {
  font-size: 0.98rem;
  color: #fff;
  margin: 0;
  line-height: 1.7;
}

.pp-intro-inner strong {
  font-weight: 700;
}

/* ── Layout ─────────────────────────────────── */
.pp-layout {
  background: #F8F9FB;
  padding: 3.5rem 0 5rem;
}

.pp-layout-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  align-items: start;
}

/* ── Sidebar TOC ────────────────────────────── */
.pp-toc {
  position: sticky;
  top: 90px;
}

.pp-toc-inner {
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.pp-toc-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9CA3AF;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pp-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}

.pp-toc-list li {
  counter-increment: toc-counter;
  border-bottom: 1px solid #F3F4F6;
}

.pp-toc-list li:last-child {
  border-bottom: none;
}

.pp-toc-list a {
  display: block;
  padding: 0.5rem 0.4rem;
  font-size: 0.82rem;
  color: #6B7280;
  text-decoration: none;
  transition: color 0.18s;
  line-height: 1.4;
}

.pp-toc-list a::before {
  content: counter(toc-counter) ". ";
  font-weight: 700;
  color: #C9A03C;
  font-size: 0.72rem;
}

.pp-toc-list a:hover {
  color: #C9A03C;
}

.pp-toc-list a.active {
  color: #1B2B3A;
  font-weight: 600;
}

/* ── Main Content ───────────────────────────── */
.pp-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Section ────────────────────────────────── */
.pp-section {
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 14px;
  padding: 2.2rem 2.5rem;
  margin-bottom: 1.25rem;
  scroll-margin-top: 100px;
}

.pp-section:last-child {
  margin-bottom: 0;
}

.pp-section h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1B2B3A;
  margin: 0 0 1.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #F3F4F6;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pp-sec-icon {
  color: #C9A03C;
  font-size: 1rem;
  flex-shrink: 0;
}

.pp-section p {
  font-size: 0.94rem;
  color: #4B5563;
  line-height: 1.85;
  margin: 0 0 0.9rem;
}

.pp-section p:last-child {
  margin-bottom: 0;
}

.pp-section em {
  font-style: italic;
  color: #374151;
}

/* Sub-headings inside sections */
.pp-sub-heading {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1B2B3A;
  margin: 1.4rem 0 0.8rem;
}

/* ── Quote ──────────────────────────────────── */
.pp-quote {
  background: #F8F9FB;
  border-left: 4px solid #C9A03C;
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.4rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  color: #6B7280;
  font-style: italic;
  line-height: 1.85;
}

/* ── Lists ──────────────────────────────────── */
.pp-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pp-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.93rem;
  color: #4B5563;
  line-height: 1.65;
}

.pp-list li i {
  color: #C9A03C;
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 0.8rem;
}

.pp-list a {
  color: #C9A03C !important;
  text-decoration: underline;
}

/* Inline (2-col) list variant */
.pp-list--inline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

/* ── Role Grid ──────────────────────────────── */
.pp-role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0.8rem 0 0.5rem;
}

.pp-role-card {
  background: #F8F9FB;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  padding: 1.3rem 1.2rem;
  text-align: center;
}

.pp-role-icon {
  width: 44px;
  height: 44px;
  background: rgba(201,160,60,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.8rem;
  font-size: 1.1rem;
  color: #C9A03C;
}

.pp-role-card h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1B2B3A;
  margin: 0 0 0.4rem;
}

.pp-role-card p {
  font-size: 0.85rem;
  color: #6B7280;
  margin: 0;
  line-height: 1.6;
}

/* ── POPIA Conditions ───────────────────────── */
.pp-conditions-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pp-condition {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  background: #F8F9FB;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border-left: 3px solid #C9A03C;
}

.pp-condition-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1B2B3A;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 200px;
}

.pp-condition p {
  font-size: 0.88rem;
  color: #6B7280;
  margin: 0;
  line-height: 1.6;
}

/* ── Rights Grid ────────────────────────────── */
.pp-rights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin: 0.8rem 0 1.2rem;
}

.pp-right-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #F8F9FB;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  padding: 1rem 1.1rem;
}

.pp-right-item > i {
  color: #C9A03C;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.pp-right-item p {
  font-size: 0.87rem;
  color: #4B5563;
  margin: 0;
  line-height: 1.65;
}

.pp-right-item strong {
  color: #1B2B3A;
}

/* ── Notices ────────────────────────────────── */
.pp-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-top: 1rem;
}

.pp-notice > i {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.pp-notice p {
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.7;
}

.pp-notice a {
  color: inherit !important;
  text-decoration: underline;
}

.pp-notice--warning {
  background: #FFF7ED;
  border: 1.5px solid #FED7AA;
}

.pp-notice--warning > i {
  color: #EA580C;
}

.pp-notice--warning p {
  color: #9A3412;
}

.pp-notice--info {
  background: #EFF6FF;
  border: 1.5px solid #BFDBFE;
}

.pp-notice--info > i {
  color: #2563EB;
}

.pp-notice--info p {
  color: #1E40AF;
}

/* ── Contact Box ────────────────────────────── */
.pp-contact-box {
  background: #F8F9FB;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  padding: 1.3rem 1.5rem;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.pp-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.93rem;
  color: #374151;
  line-height: 1.6;
}

.pp-contact-row > i {
  color: #C9A03C;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.pp-contact-row a {
  color: #C9A03C !important;
  text-decoration: underline;
}

/* ── Disclaimer Section ─────────────────────── */
.pp-section--disclaimer {
  border-color: #FED7AA;
  background: #FFFBF5;
}

.pp-section--disclaimer h2 {
  color: #92400E;
  border-color: #FED7AA;
}

.pp-section--disclaimer .pp-sec-icon {
  color: #EA580C;
}

.pp-section--disclaimer .pp-list li {
  color: #78350F;
}

.pp-section--disclaimer .pp-list li i {
  color: #EA580C;
}

/* ── CTA Band ────────────────────────────────── */
.pp-cta-band {
  background: linear-gradient(135deg, #1B2B3A 0%, #162231 100%);
  padding: 4rem 0;
}

.pp-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.pp-cta-text h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem;
}

.pp-cta-text p {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.65);
  margin: 0;
  max-width: 520px;
  line-height: 1.7;
}

.pp-cta-actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── CTA Buttons ─────────────────────────────── */
.pp-btn-primary,
.pp-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.75rem 1.6rem;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

.pp-btn-primary {
  background: #C9A03C !important;
  color: #fff !important;
  border: 2px solid #C9A03C;
}

.pp-btn-primary:hover {
  background: #b8882e !important;
  border-color: #b8882e;
  color: #fff !important;
}

.pp-btn-outline {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.4);
}

.pp-btn-outline:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.7);
  color: #fff !important;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 1100px) {
  .pp-layout-inner {
    grid-template-columns: 220px 1fr;
    gap: 2rem;
  }

  .pp-condition {
    flex-direction: column;
    gap: 0.3rem;
  }

  .pp-condition-label {
    min-width: unset;
  }
}

@media (max-width: 900px) {
  .pp-layout-inner {
    grid-template-columns: 1fr;
  }

  .pp-toc {
    position: static;
  }

  .pp-role-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pp-rights-grid {
    grid-template-columns: 1fr;
  }

  .pp-cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .pp-cta-actions {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .pp-section {
    padding: 1.5rem 1.2rem;
  }

  .pp-role-grid {
    grid-template-columns: 1fr;
  }

  .pp-list--inline {
    grid-template-columns: 1fr;
  }

  .pp-intro-inner {
    flex-direction: column;
    text-align: center;
  }

  .pp-cta-band {
    padding: 2.5rem 0;
  }
}