/* =============================================================================
   static/css/legal.css
   Estils compartits per a les pàgines de text legal (Política de privacitat,
   Avís legal). Prioritat number 1: llegibilitat — mesura de línia curta,
   contrast alt, jerarquia clara. L'estètica (targeta, capçalera de marca,
   índex de continguts) és secundària i no ha d'interferir amb això.

   Índex:
     1. Capçalera (banner curt amb el títol de la pàgina)
     2. Targeta de contingut + índex de continguts (TOC)
     3. Tipografia del text legal
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Capçalera
   --------------------------------------------------------------------------- */
.legal-header {
	background: var(--color-fog, #C9D1C8);
	border-bottom: 1px solid color-mix(in srgb, var(--color-pine) 25%, transparent);
	padding: 2.25rem 0 2.75rem;
	/* Igual que als <h2> de l'article: `scrollIntoView` (legal.js, "Tornar a
	   dalt") alinea l'element amb la vora real del viewport, ignorant que el
	   navbar fix el tapa visualment — cal el mateix marge que `.pt-navbar`. */
	scroll-margin-top: calc(var(--navbar-search-h, 2.5rem) + 24px + 16px);
}
.legal-header h1 { font-weight: 700; margin-bottom: 0.35rem; color: var(--color-evergreen, #304040); }
.legal-header p { color: #5b6660; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   2. Targeta de contingut + índex de continguts
   --------------------------------------------------------------------------- */
.legal-page { margin-top: -1.75rem; } /* la targeta puja lleugerament sobre la capçalera */

.legal-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 28px rgba(16, 24, 32, 0.1);
	padding: 1.75rem 1.5rem;
}
@media (min-width: 768px) {
	.legal-card { padding: 2.5rem 3rem; }
}

/* Índex de continguts: generat per legal.js a partir dels <h2> de la pàgina */
.legal-toc { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e5e9e5; }
.legal-toc-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-pine); margin-bottom: 0.75rem; }
.legal-toc-list { list-style: none; margin: 0; padding: 0; columns: 1; }
@media (min-width: 576px) {
	.legal-toc-list { columns: 2; column-gap: 1.5rem; }
}
.legal-toc-list li { break-inside: avoid; margin-bottom: 0.4rem; }
.legal-toc-list a {
	color: var(--color-evergreen, #304040);
	text-decoration: none;
	font-size: 0.92rem;
}
.legal-toc-list a:hover { color: var(--color-pine); text-decoration: underline; }

.legal-back-to-top { display: inline-block; margin-top: 2.5rem; font-size: 0.9rem; color: var(--color-pine); text-decoration: none; }
.legal-back-to-top:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   3. Tipografia del text legal
   --------------------------------------------------------------------------- */
.legal-page h1 { font-size: clamp(1.6rem, 3vw, 2rem); }

.legal-page article {
	max-width: 720px; /* mesura de línia còmoda per a la lectura */
	color: #2b332f;
	font-size: 1.02rem;
	line-height: 1.75;
}
.legal-page article h2 {
	/* Neutralitza `main h2 { padding-inline: 12px }` de styles.css (regla
	   global per a altres pàgines), que desalineava el títol respecte als
	   paràgrafs de sota. */
	padding-inline: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-evergreen, #304040);
	padding-bottom: 0.5rem;
	margin: 2.5rem 0 1rem;
	border-bottom: 2px solid color-mix(in srgb, var(--color-pine) 25%, transparent);
	/* El navbar fix (`#mainNavbar`, veure navbar.css) tapa la part superior
	   del viewport; cal el mateix desplaçament que `.pt-navbar` més una mica
	   d'aire, perquè el títol de la secció no quedi amagat sota el navbar
	   en fer scroll des de l'índex (legal.js). */
	scroll-margin-top: calc(var(--navbar-search-h, 2.5rem) + 24px + 16px);
}
.legal-page article h2:first-of-type { margin-top: 0; }
.legal-page article p { margin-bottom: 1rem; }
.legal-page article ul { margin-bottom: 1rem; padding-left: 1.25rem; }
.legal-page article li { margin-bottom: 0.35rem; }
.legal-page article li::marker { color: var(--color-pine); }
.legal-page article a { color: var(--color-pine); font-weight: 600; }
.legal-page article strong { color: var(--color-evergreen, #304040); }