/**
 * COOKIE POLICY PAGE - styles unique to public/cookie-policy.html (the
 * public policy page explaining what VigiWorks actually stores in your
 * browser, linked from the footer's cookie icon). The nav bar, footer,
 * and cookie banner on this page reuse nav.css/footer.css/
 * cookie-banner.css, same as index.html and partner-program.html; this
 * file only covers the policy content in between.
 *
 * This is a plain, readable article layout, not a card-heavy landing
 * page: a narrow reading column, small section labels, and one factual
 * table (.cp-table) listing every cookie/localStorage entry the policy
 * covers, so they're all scannable in the same shape.
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - change the intro heading/subtext or the "last updated" line:
 *     .cp-hero / .cp-updated;
 *   - change the reading-column width or paragraph spacing: .cp-section;
 *   - change the cookies/storage table: .cp-table (the name column, and
 *     the inline cookie-name mentions in the running text, both use the
 *     monospace .cp-table-name style);
 *   - change the "manage preferences" call-to-action box: .cp-manage.
 *
 * Requires base.css to be linked first.
 */

.cp-hero { padding-top: 168px; padding-bottom: 32px; }
.cp-hero .wrap { max-width: 760px; }
.cp-hero h1 {
  font-family: var(--display); font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
  margin: 14px 0 16px;
}
.cp-updated { font-size: .8rem !important; color: var(--text-4) !important; margin: 0 0 18px !important; letter-spacing: .02em; }
.cp-hero p { font-size: 1rem; color: var(--text-3); line-height: 1.75; max-width: 620px; }

/* ── POLICY CONTENT ──────────────────────────────────
   A single narrow reading column for every section, kept well under
   the .wrap's full width so paragraphs stay comfortable to read. */
.cp-section { max-width: 760px; margin: 0 auto; padding-block: 24px; }
/* Every .cp-section's own .wrap used to repeat this same inline
   style="max-width:760px;margin:0 auto;" by hand (it needs to override
   .wrap's site-wide 1160px max-width from base.css). One rule here does
   the same job for all of them. */
.cp-section .wrap { max-width: 760px; margin: 0 auto; }
.cp-section + .cp-section { border-top: 1px solid var(--border); }
.cp-section h2 { margin-bottom: 14px; }
.cp-section h3 {
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
  margin: 26px 0 10px;
}
.cp-section h3:first-of-type { margin-top: 6px; }
.cp-section p { font-size: .92rem; color: var(--text-3); line-height: 1.75; margin-bottom: 14px; }
.cp-section p:last-child { margin-bottom: 0; }
.cp-section strong { color: var(--text); font-weight: 600; }
.cp-section a { color: var(--accent-lt); text-decoration: underline; text-decoration-color: var(--border-mid); text-underline-offset: 3px; }
.cp-section a:hover { color: var(--accent); }
.cp-section ul { margin: 0 0 14px 20px; color: var(--text-3); font-size: .92rem; line-height: 1.75; }
.cp-section li::marker { color: var(--accent); }

/* ── COOKIES / STORAGE TABLE ─────────────────────────
   The scannable list of every cookie and localStorage key this site
   uses (section 3). Wrapped in .cp-table-wrap so a very narrow phone
   screen can scroll the table horizontally instead of squeezing or
   overflowing the page. */
.cp-table-wrap { overflow-x: auto; margin-top: 4px; }
.cp-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: .85rem; }
.cp-table th, .cp-table td { text-align: left; padding: 12px 16px 12px 0; vertical-align: top; }
.cp-table th {
  font-size: .7rem; color: var(--text-4); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; border-bottom: 1px solid var(--border);
}
.cp-table td { color: var(--text-3); border-bottom: 1px solid var(--border); line-height: 1.5; }
.cp-table tr:last-child td { border-bottom: none; }
.cp-table-name {
  font-family: 'Fira Code', 'Cascadia Code', monospace; font-size: .82rem;
  font-weight: 600; color: var(--accent-lt); white-space: nowrap;
}

/* ── MANAGE PREFERENCES CALLOUT ──────────────────────
   The button inside just re-triggers the footer's existing cookie-icon
   button (see cookie-policy.html's inline comment next to it) rather
   than reimplementing any consent logic here. */
.cp-manage {
  border: 1px solid rgba(0,255,140,.3); border-radius: var(--r-lg);
  background: var(--accent-dim); padding: 22px 24px; margin-top: 8px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.cp-manage p { margin: 0; color: var(--text-2); font-size: .9rem; max-width: 46ch; }
.cp-manage p strong { color: var(--text); }

@media (max-width: 640px) {
  .cp-hero { padding-top: 140px; }
  .cp-manage { flex-direction: column; align-items: stretch; text-align: center; }
}