/* ==========================================================================
   Data Privacy Guide — /data-privacy-guide
   ==========================================================================
   Page-specific styles for the teaching page "מה קורה למידע?".

   Rules this file follows (see CLAUDE.md):
     - Design tokens only. Every size, radius, colour and weight comes from
       the `:root` scale in css/style.css. No one-off hex values.
     - RTL logical properties everywhere (margin-inline-*, inset-inline-*,
       border-inline-*, text-align: start). The page is dir="rtl".
     - Mobile-first: base rules target the narrow viewport, the single
       media query at the bottom scales type/space up from 768px.
   ========================================================================== */

/* ── Page shell ─────────────────────────────────────────────────────── */

.dpg {
  padding-bottom: var(--space-7);
}

.dpg-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.dpg-hero {
  background: linear-gradient(180deg, var(--blue-light), var(--bg));
  padding: 110px 0 var(--space-7);
  text-align: start;
}

.dpg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--blue);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
}

.dpg-hero h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--dark);
  margin-bottom: var(--space-3);
}

/* --blue-dark, not --blue: at --fs-md the subtitle is normal-size text, and
   plain --blue only reaches ~4.5:1 against the pale end of the hero
   gradient. --blue-dark clears it with room to spare. Same reasoning for
   .dpg-callout-title below. */
.dpg-subtitle {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--blue-dark);
  margin-bottom: var(--space-5);
}

/* ── Sections ───────────────────────────────────────────────────────── */

.dpg-section {
  margin-top: var(--space-7);
}

.dpg-section > h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--dark);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dpg-section h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--dark);
  margin-bottom: var(--space-2);
}

.dpg p,
.dpg li {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--dark-2);
}

.dpg p {
  margin-bottom: var(--space-4);
}

.dpg strong {
  color: var(--dark);
  font-weight: var(--fw-bold);
}

.dpg-lead {
  font-size: var(--fs-md);
}

/* Icon tile sitting beside an h2. Icons come from Icons.get(). */
.dpg-h2-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--blue-light);
  color: var(--blue);
}

/* ── Generic bullet list ────────────────────────────────────────────── */

.dpg-list {
  margin: 0 0 var(--space-4);
  padding: 0;
}

.dpg-list li {
  position: relative;
  padding-inline-start: var(--space-5);
  margin-bottom: var(--space-2);
}

.dpg-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--blue);
}

/* ── Callouts ───────────────────────────────────────────────────────── */

.dpg-callout {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--blue-light);
  border-inline-start: 4px solid var(--blue);
}

.dpg-callout p:last-child,
.dpg-note p:last-child {
  margin-bottom: 0;
}

.dpg-callout-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--blue-dark);
  margin-bottom: var(--space-2);
}

/* Softer variant — used to mark "this is a working principle, not a
   statutory duty" and to mark draft/positional sources. */
.dpg-note {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--bg-light);
  border-inline-start: 4px solid var(--gray-light);
}

.dpg-note-draft {
  border-inline-start-color: var(--gold-dark);
}

.dpg-note-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--dark);
  margin-bottom: var(--space-2);
}

/* The gold accent stays on the border only. As TEXT, --gold-dark against
   --bg-light is ~3.1:1 — fine for a 4px rule, not enough for a 0.85rem
   label. The title keeps --dark. */

/* ── The five questions (visual centrepiece) ────────────────────────── */

.dpg-five {
  background: var(--dark-hero);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
  margin-top: var(--space-7);
}

.dpg-five > h2 {
  color: var(--bg);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
}

.dpg-five-list {
  counter-reset: dpg-q;
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}

/* Inset cards are DARKER than the panel, not lighter. A lighter overlay
   pushed the blue numeral down to ~2.9:1 against its own card; on this
   darker surface it clears the 3:1 large-text threshold (WCAG 1.4.3)
   while the white question text sits far above it. */
.dpg-five-list li {
  counter-increment: dpg-q;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--bg);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

.dpg-five-list li::before {
  content: counter(dpg-q);
  flex: none;
  font-family: var(--font-sub);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--blue);
  min-width: 1.2em;
  text-align: center;
}

/* ── Card grid (cookies / vibe-coding) ──────────────────────────────── */

.dpg-cards {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.dpg-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.dpg-card p:last-child {
  margin-bottom: 0;
}

.dpg-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dpg-card-head h3 {
  margin-bottom: 0;
}

.dpg-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--blue-light);
  color: var(--blue);
}

/* A quoted user request ("תוסיף לי Google Login") */
.dpg-request {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--dark);
  background: var(--bg-light);
  border-radius: var(--radius-btn);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.dpg-qa {
  margin: 0;
}

.dpg-qa dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--gray);
  margin-bottom: var(--space-1);
}

.dpg-qa dd {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--dark-2);
}

.dpg-qa dd:last-child {
  margin-bottom: 0;
}

/* ── Checklist ──────────────────────────────────────────────────────── */

.dpg-checklist {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}

.dpg-check-list {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-4);
}

.dpg-check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition);
}

.dpg-check-item:focus-within {
  border-color: var(--blue);
}

.dpg-check-input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.dpg-check-item label {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--dark);
  cursor: pointer;
}

.dpg-check-item:has(.dpg-check-input:checked) {
  border-color: var(--green);
}

.dpg-check-item:has(.dpg-check-input:checked) label {
  color: var(--gray);
}

.dpg-check-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--gray);
}

/* Live region — empty until the list is complete. */
.dpg-check-result:empty {
  display: none;
}

.dpg-check-result {
  margin-top: var(--space-4);
  background: var(--green-light);
  border-inline-start: 4px solid var(--green);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.dpg-check-result p {
  margin-bottom: 0;
}

/* ── Copyable prompt ────────────────────────────────────────────────── */

.dpg-prompt-box {
  background: var(--dark-hero);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.dpg-prompt {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--bg);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  text-align: start;
}

.dpg-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.dpg-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-btn);
  background: var(--blue);
  color: var(--bg);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--transition);
}

.dpg-copy-btn:hover {
  background: var(--blue-dark);
}

.dpg-copy-btn.is-copied {
  background: var(--green);
}

/* Not --green: #00b894 on white is only ~2.5:1. The confirmation is
   carried by the wording, not by the colour. */
.dpg-copy-status {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--dark);
}

/* ── Closing disclosure — deliberately quiet ────────────────────────── */

.dpg-disclosure {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.dpg-disclosure p {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--gray-light);
  margin-bottom: 0;
}

/* NOTE: the quiet cross-link banner at the top of privacy-policy.html
   lives in css/style.css (`.legal-guide-banner`), not here — that page
   does not load this stylesheet. */

/* ── From tablet up ─────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .dpg-wrap {
    padding: 0 var(--space-6);
  }

  .dpg-hero {
    padding: 140px 0 var(--space-7);
  }

  .dpg-hero h1 {
    font-size: var(--fs-hero);
  }

  .dpg-subtitle {
    font-size: var(--fs-lg);
  }

  .dpg-section > h2 {
    font-size: var(--fs-2xl);
  }

  .dpg-five {
    padding: var(--space-7) var(--space-6);
  }

  .dpg-five > h2 {
    font-size: var(--fs-2xl);
  }

  .dpg-five-list li {
    font-size: var(--fs-lg);
    padding: var(--space-5);
  }

  .dpg-cards-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Motion is already minimal; honour the user's preference anyway. */
@media (prefers-reduced-motion: reduce) {
  .dpg-check-item,
  .dpg-copy-btn {
    transition: none;
  }
}