/* ==========================================================================
   Cookie Policy page — normal flowing single-column legal-copy layout (no
   scroll-snap), same architecture as post.css/thoughts.css. Shared
   button/nav/footer/cookie styles live in components.css; global
   .pg-col/.pg-title/.pg-body type-scale primitives in base.css.
   ========================================================================== */

.cp-sec {
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: min(56px, 8dvh) 20px min(36px, 5dvh) 20px;
}

.cp-sec--accent {
  background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat;
  padding-bottom: min(56px, 8dvh);
}

/* box-shadow spillover (footer only, see home.css for full rationale):
   paint-only, doesn't add scrollable height, just backstops a possible
   dvh-drift gap below the footer with matching accent colour. */
.cp-sec--accent#the-footer {
  box-shadow: 0 150px 0 0 var(--colour-accent);
}

.cp-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.8rem, 3.6cqw, 2.1dvh);
  letter-spacing: 0.08em;
  color: var(--colour-ink);
  text-transform: uppercase;
}

.cp-back:hover { color: var(--colour-accent); }

.cp-updated {
  margin-top: min(10px, 1.2dvh);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.78rem, 3.4cqw, 2dvh);
  letter-spacing: 0.06em;
  color: #5C646B;
  text-transform: uppercase;
}

.cp-body {
  width: 100%;
  max-width: 72ch;
  margin-top: min(28px, 3.4dvh);
}

.cp-h2 {
  margin: min(30px, 3.4dvh) 0 min(10px, 1.2dvh) 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: min(1.2rem, 5.4cqw, 2.8dvh);
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--colour-ink);
}

.cp-body > .cp-h2:first-child { margin-top: 0; }

.cp-p {
  margin: 0 0 min(14px, 1.6dvh) 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(1rem, 4.4cqw, 2.4dvh);
  line-height: 1.55;
  color: var(--colour-ink);
}

.cp-p a { color: var(--colour-accent); text-decoration: underline; }

.cp-list {
  margin: 0 0 min(16px, 1.8dvh) 0;
  padding-left: 1.2em;
}

.cp-list li {
  margin-bottom: min(8px, 1dvh);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(1rem, 4.4cqw, 2.4dvh);
  line-height: 1.5;
  color: var(--colour-ink);
}

.cp-table-wrap {
  width: 100%;
  margin-bottom: min(18px, 2dvh);
}

.cp-table {
  /* A few px narrower than the wrapper, as a small safety margin against
     sub-pixel rounding at the table's exact container width forcing a
     horizontal scrollbar. */
  width: calc(100% - 10px);
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: min(0.92rem, 4cqw, 2.2dvh);
}

/* Mobile (base): a real 4-column table can't fit "Purpose" (a full
   sentence) alongside 3 other columns without either cutting content off
   or squeezing it into a tall, cramped cell. Instead each row becomes a
   stacked card — Name / Type / Purpose / Duration one under another,
   each preceded by its own label — so the long Purpose text gets the
   full content width to breathe. */
.cp-table thead { display: none; }

.cp-table { display: block; }
.cp-table tbody,
.cp-table tr,
.cp-table td { display: block; width: 100%; }

.cp-table tr {
  padding: min(14px, 1.6dvh) 0;
  border-bottom: 1px solid var(--colour-ink-12);
}

.cp-table tr:first-child { border-top: 1px solid var(--colour-ink-12); }

.cp-table td {
  padding: 4px 0;
  border-bottom: none;
  overflow-wrap: break-word;
  word-break: break-word;
}

.cp-table td::before {
  content: attr(data-label);
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: min(0.78rem, 3.4cqw, 1.9dvh);
  color: var(--colour-accent);
  margin-bottom: 2px;
}

.cp-manage {
  width: auto;
  padding: 10px 22px;
  margin-top: min(6px, 1dvh);
}

@media (min-width: 760px) {
  .cp-sec .pg-col { max-width: min(1200px, calc(100vw - 48px)); }
  .cp-sec .pg-title { font-size: min(16pt, 3dvh); }
  .cp-p, .cp-list li { font-size: min(13pt, 2.4dvh); }

  /* Desktop has plenty of width for a real table, so restore normal table
     display (undoing the mobile stacked-card layout above) and give
     columns a close-to-even split. overflow-x stays as a safety net only
     — with border-box cells below it should never actually be needed. */
  .cp-table-wrap { overflow-x: auto; }
  .cp-table { table-layout: fixed; }
  .cp-table thead { display: table-header-group; }
  .cp-table tbody { display: table-row-group; }
  .cp-table tr { display: table-row; padding: 0; border-bottom: none; }
  .cp-table tr:first-child { border-top: none; }
  .cp-table th,
  .cp-table td {
    display: table-cell;
    /* border-box so each cell's own padding is included inside its
       percentage width instead of adding on top of it — with
       table-layout: fixed, content-box padding otherwise pushes the
       table wider than its container and forces a horizontal scrollbar
       even though the columns already sum to 100%. */
    box-sizing: border-box;
    padding: 10px 12px;
    border-bottom: 1px solid var(--colour-ink-12);
    vertical-align: top;
  }
  .cp-table td::before { content: none; }

  .cp-table th:nth-child(1),
  .cp-table td:nth-child(1) { width: 15%; }
  .cp-table th:nth-child(2),
  .cp-table td:nth-child(2) { width: 18%; }
  .cp-table th:nth-child(3),
  .cp-table td:nth-child(3) { width: 47%; }
  .cp-table th:nth-child(4),
  .cp-table td:nth-child(4) { width: 20%; }
}

/* Mobile-only "< Home" back-link — wide screens use the disabled self-link
   in the nav bar instead, so this is hidden there. */
@media (min-width: 760px) {
  .cp-back { display: none; }
}