/* ============================================================
   POLICY PAGES - page skin for the shared policy bodies
   ============================================================

   Loaded only by /legal/privacy.php and /legal/terms.php.

   The policy body markup in includes/policies/<key>.php is shared with the
   footer modal, so its classes are context-neutral (policy-intro,
   policy-section, policy-statement) and each context skins them under its own
   ancestor. The modal skin lives in css/footer.css under .privacy-modal; this
   file is the page skin under .policy-page. Both selectors carry the same
   specificity and never appear in the same subtree, so neither can leak into
   the other.

   DO NOT style bare .policy-* here. Dropping the .policy-page ancestor would
   reach into the modal that footer.php renders lower down on this very page,
   and restyle it wherever this stylesheet happens to be loaded.

   The page runs a little larger than the modal on purpose: this is a document
   being read, not a panel being skimmed.
   ============================================================ */

/* ---------- Document header (page, not modal) ---------- */

.policy-updated {
  margin: 20px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ---------- Document body ---------- */

.policy-page {
  max-width: 860px;
}

.policy-page .policy-intro {
  margin: 0 0 34px;
  padding: 26px 28px;
  border: 1px solid rgba(0, 230, 255, 0.14);
  border-left: 3px solid rgba(57, 255, 20, 0.64);
  border-radius: var(--radius-lg);
  background: rgba(6, 18, 40, 0.68);
  color: rgba(245, 247, 250, 0.86);
  font-size: 1.06rem;
  line-height: 1.8;
}

.policy-page .policy-section {
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.policy-page .policy-section h3 {
  margin: 0 0 14px;
  color: var(--cyan);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.policy-page .policy-section p {
  margin: 0 0 14px;
  color: rgba(245, 247, 250, 0.78);
  font-size: 1rem;
  line-height: 1.85;
}

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

.policy-page .policy-section a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.policy-page .policy-section a:hover,
.policy-page .policy-section a:focus-visible {
  color: var(--green);
}

.policy-page .policy-statement {
  margin: 12px 0;
  padding: 28px;
  border: 1px solid rgba(0, 230, 255, 0.16);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.14), rgba(6, 18, 40, 0.72));
  box-shadow: inset 3px 0 0 rgba(57, 255, 20, 0.56);
}

/* The statement block carries its own frame, so the section rule's top border
   would draw a line straight across it. */
.policy-page .policy-section.policy-statement {
  border-top: 0;
}

@media (max-width: 768px) {
  .policy-page .policy-intro {
    padding: 20px;
    font-size: 1rem;
  }

  .policy-page .policy-section {
    padding: 26px 0;
  }

  .policy-page .policy-statement {
    padding: 22px;
  }
}

/* ---------- Print ----------
   Policies get printed and filed. Drop the dark ground, keep the structure. */

@media print {
  .policy-page,
  .policy-page .policy-section p,
  .policy-page .policy-intro {
    color: #000;
    background: none;
  }

  .policy-page .policy-section h3 {
    color: #000;
  }

  .policy-page .policy-intro,
  .policy-page .policy-statement {
    border: 1px solid #999;
    box-shadow: none;
    background: none;
  }

  .policy-page .policy-section {
    break-inside: avoid;
  }
}