/* Policies pages (Privacy & Terms) styles
   Scope only to policy pages to avoid collisions. */

/*
  High-contrast palette with full dark-mode support using CSS variables.
  We set sensible defaults, then override under common dark-mode selectors.
*/
.policy-page {
  /* Light defaults */
  --policy-bg: #ffffff;
  --policy-bg-alt: #f9fbff;
  --policy-border: #e6eaf0;
  --policy-text: #111827;      /* gray-900 */
  --policy-muted: #475467;     /* slate-600 */
  --policy-link: #0d6efd;      /* primary */
  --policy-shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

/* Dark theme support (cover multiple strategies) */
html[data-theme="dark"] .policy-page,
body[data-theme="dark"] .policy-page,
html.dark .policy-page,
body.dark .policy-page,
[data-bs-theme="dark"] .policy-page {
  --policy-bg: #0b1220;        /* near-navy */
  --policy-bg-alt: #121a2a;    /* slightly lighter */
  --policy-border: #1e293b;    /* slate-800 border */
  --policy-text: #e5e7eb;      /* gray-200 */
  --policy-muted: #cbd5e1;     /* slate-300 */
  --policy-link: #06b6d4;      /* cyan-500 */
  --policy-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Root wrapper for policy pages */
.policy-page { 
  display: block; /* ensure block wrapper */
}

/* Hero sections */
.privacy-hero, .terms-hero {
  /* Add generous top padding to avoid overlap with fixed navbar */
  padding: 140px 0 80px; /* top, right/left, bottom */
  background: linear-gradient(135deg, #0d6efd 0%, #6c63ff 100%);
  color: #fff;
}

/* Ensure hero headings look prominent and centered by default */
.privacy-hero h1, .terms-hero h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.privacy-hero p.lead, .terms-hero p.lead {
  font-size: 1.125rem;
  opacity: 0.95;
}

/* Main content blocks wrapped by seeder inside a section>container */
.privacy-content, .terms-content {
  background: var(--policy-bg);
  border: 1px solid var(--policy-border);
  border-radius: 14px;
  box-shadow: var(--policy-shadow);
  padding: 32px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Content typography */
.privacy-content h2, .terms-content h2 { color: var(--policy-text); font-size: 1.5rem; margin: 1.5rem 0 0.75rem; font-weight: 700; }
.privacy-content h3, .terms-content h3 { color: var(--policy-text); font-size: 1.25rem; margin: 1.25rem 0 0.5rem; font-weight: 600; }
.privacy-content p, .terms-content p { color: var(--policy-muted); line-height: 1.9; margin-bottom: 1rem; }
.privacy-content ul, .terms-content ul { padding-inline-start: 1.25rem; margin: 0.75rem 0 1rem; }
.privacy-content li, .terms-content li { color: var(--policy-muted); margin-bottom: 0.5rem; }

/* Sections inside content */
.privacy-section, .terms-section {
  border: 1px solid var(--policy-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  background: var(--policy-bg-alt);
  transition: background-color .25s ease, border-color .25s ease;
}

/* Links */
.privacy-content a, .terms-content a { color: var(--policy-link); text-decoration: none; }
.privacy-content a:hover, .terms-content a:hover { text-decoration: underline; }

/* RTL adjustments (Bootstrap handles a lot; keep minimal here) */
html[dir="rtl"] .privacy-content, html[dir="rtl"] .terms-content { text-align: right; }

/* Spacing between hero and content section injected by seeder */
.privacy-hero + .section, .terms-hero + .section { padding-top: 40px; padding-bottom: 40px; }

/* Improve visibility of the "last updated" badge across themes */
.last-updated {
  color: var(--policy-text);
  background: transparent;
  border: 1px dashed var(--policy-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.last-updated strong { color: var(--policy-text); }

/* Subtle hover on sections for modern feel */
.privacy-section:hover, .terms-section:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}