/* ============================================================
   TAKEAWAY — Content Page
   Template generico per pagine di contenuto testuale.
   Privacy, Cookie, Termini, Note Legali, ecc.
   ============================================================ */

.content-page {
  background: var(--c-bg);
  min-height: 100svh;
  display: flex;
  justify-content: center;
  /* spazio per l'header fisso */
  padding-top: clamp(120px, 14vh, 180px);
  padding-bottom: var(--sp-7xl);
}

.content-page-inner {
  width: min(720px, 90vw);
}

/* ── Header pagina ── */
.content-page-header {
  margin-bottom: clamp(48px, 6vw, 80px);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--c-border);
}

.content-page-label {
  font-family: var(--font);
  font-size: var(--text-body-md);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-label);
  margin: 0 0 var(--sp-md) 0;
}

.content-page-title {
  font-family: var(--font);
  font-size: clamp(36px, 5vw, var(--text-h2));
  font-weight: var(--fw-regular);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin: 0;
}

/* ── Body — contenuto WP ── */
.content-page-body {
  font-family: var(--font);
  color: var(--c-text);
}

/* Primo paragrafo — date, sottotitoli piccoli */
.content-page-body > p:first-child {
  font-size: var(--text-body-sm);
  color: var(--c-text-30);
  margin: 0 0 var(--sp-3xl) 0;
}

/* Headings da Gutenberg */
.content-page-body h2,
.content-page-body h2.wp-block-heading {
  font-family: var(--font);
  font-size: var(--text-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  margin: var(--sp-4xl) 0 var(--sp-md) 0;
}

.content-page-body h3,
.content-page-body h3.wp-block-heading {
  font-family: var(--font);
  font-size: var(--text-body-md);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-label);
  margin: var(--sp-xl) 0 var(--sp-sm) 0;
}

/* Paragrafi */
.content-page-body p {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body);
  color: rgba(255,255,255,0.6);
  margin: 0 0 var(--sp-md) 0;
}

/* Bold */
.content-page-body strong {
  color: rgba(255,255,255,0.85);
  font-weight: var(--fw-regular);
}

/* Link */
.content-page-body a {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 0.2s;
}
.content-page-body a:hover { opacity: 0.5; }

/* Liste */
.content-page-body ul,
.content-page-body ol {
  padding-left: var(--sp-lg);
  margin: 0 0 var(--sp-md) 0;
}
.content-page-body li {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--sp-xs);
}

/* Separatori */
.content-page-body hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-xl) 0;
}

/* Tabelle (es. cookie table) */
.content-page-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-lg) 0;
  font-size: var(--text-body-sm);
}
.content-page-body th {
  font-family: var(--font);
  font-size: var(--text-body-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-label);
  font-weight: var(--fw-regular);
  text-align: left;
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--c-border);
}
.content-page-body td {
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.6);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
  line-height: 1.6;
}
.content-page-body code {
  font-family: monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .content-page {
    padding-top: clamp(100px, 12vh, 140px);
    padding-bottom: var(--sp-5xl);
  }
  .content-page-body h2,
  .content-page-body h2.wp-block-heading {
    font-size: var(--text-h4);
  }
  .content-page-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}