/* ── content-page.css ──────────────────────────────────────────────────────
   Layout i tipografia per a pàgines de contingut renderitzades en markdown
   (Sobre Boig per la sardana, Avís legal, Privadesa, etc.)
   Es mostren dins #coneix-nosContentPage quan hi ha un subSlug markdown actiu.
   ──────────────────────────────────────────────────────────────────────────── */

/* Card contenidora — replica .card.results; omple la columna .content del grid */
.content-page.card {
  background: var(--card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  padding: clamp(var(--space-4), 4vw, 40px) clamp(var(--space-4), 5vw, 52px);
}

/* ── Tipografia ─────────────────────────────────────────────────────────── */

.content-page-body {
  color: var(--text-strong);
  font-size: 0.9375rem; /* 15 px */
  line-height: 1.7;
  padding-top: 0;
}

.content-page-body h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
  line-height: 1.25;
}

.content-page-body h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-max);
  margin: var(--space-5) 0 var(--space-2);
}

.content-page-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-strong);
  margin: var(--space-4) 0 var(--space-1);
}

.content-page-body p {
  margin: 0 0 var(--space-3);
  text-align: justify;
}

.content-page-body ul {
  margin: 0 0 var(--space-3);
  padding-left: 1.5em;
}

.content-page-body li {
  margin-bottom: var(--space-1);
  text-align: justify;
}

.content-page-body hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-5) 0;
}

.content-page-body strong {
  font-weight: 700;
}

.content-page-body em {
  font-style: italic;
}

.content-page-body a {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content-page-body a:hover {
  color: var(--color-primary);
}

/* ── Missatges d'estat ──────────────────────────────────────────────────── */

.content-page-loading,
.content-page-error {
  font-size: 0.875rem;
  color: var(--text-strong);
  opacity: 0.6;
  padding: var(--space-5) 0;
}

.content-page-error {
  color: #c0392b;
  opacity: 1;
}

.content-page-placeholder {
  font-size: 0.875rem;
  color: var(--muted);
  padding: var(--space-5) 0;
  font-style: italic;
}

/* ── Formulari de contacte (#coneix-nos/formulari-de-contacte) ─────────── */

.contact-form {
  position: relative;
}

.contact-form-intro {
  margin: 0 0 var(--space-4);
  text-align: left;
  color: var(--text-strong);
}

.contact-form-required {
  color: var(--color-primary);
}

.contact-form-intro .contact-form-required {
  font-weight: 700;
}

.contact-form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form-grid-2 {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 1401px) {
  .contact-form-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.contact-form-consent .field-error {
  margin-top: var(--space-2);
}

.contact-form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.45;
  cursor: pointer;
  color: var(--text-strong);
}

.contact-form-checkbox-label input {
  margin-top: 0.25em;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

.contact-form-privacy-trigger {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.contact-form-privacy-trigger:hover {
  color: var(--color-primary);
}

.contact-form-actions {
  margin-top: var(--space-4);
}

.contact-form-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.contact-form-status {
  margin-top: var(--space-4);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

.contact-form-status--ok {
  color: var(--color-primary-strong);
}

.contact-form-status--error {
  color: #c0392b;
}

/* ── Sidebar de navegació de contingut (només escriptori) ─────────────── */

/*
 * .sidebar.content-nav hereta el comportament sticky d'escriptori de layout.css
 * (.sidebar: sticky top:84px, align-self:start; .sidebar-panel sense límit d'alçària).
 * No calen regles de posicionament extra aquí per a escriptori.
 *
 * En mòbil el .sidebar passa a position:fixed / pointer-events:none (shell del
 * drawer). Forcem display:none perquè cap element fantasma ocupi espai de z-index
 * i mai es renderitzi el botó «Filtres» a les seccions de contingut.
 */

@media (max-width: 1400px) {
  .sidebar.content-nav,
  body.filters-open .sidebar.content-nav {
    display: none !important;
    position: static !important;
  }
}

/* ── Embolcall de card — caixa blanca (replica .card.filters dels panells de filtres) ─── */

.content-nav-card {
  padding: var(--space-2) var(--space-2);
}

/* Segona card al sidebar: mateixa separació que .main-layout gap (var(--space-4)) */
.content-nav-panel > .content-nav-card + .content-nav-search-card {
  margin-top: var(--space-4);
}

.content-nav-search-card {
  padding: var(--space-2) var(--space-2);
}

.content-page-body .content-search-hidden {
  display: none !important;
}

/* ── Capçaleres de secció ───────────────────────────────────────────────── */

.content-nav-section {
  margin-bottom: 2px;
}

.content-nav-section-header {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Botó de toggle (fletxa) */
.content-nav-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.12s, background 0.12s;
  font-size: 0.9rem;
  line-height: 1;
}

.content-nav-toggle:hover {
  background: var(--actionable-hover);
  color: var(--ink);
}

/* Xevron només amb CSS usant el pseudo-element ::before */
.content-nav-toggle::before {
  content: '›';
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s ease;
  transform-origin: center;
}

.content-nav-section[data-open] > .content-nav-section-header .content-nav-toggle::before {
  transform: rotate(90deg);
}

/* Enllaç del títol de secció */
.content-nav-section-link {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 4px var(--space-1);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s;
}

.content-nav-section-link:hover,
.content-nav-section--active > .content-nav-section-header > .content-nav-section-link {
  color: var(--color-primary-strong);
}

/* ── Acordió: sub-enllaços amagats fins a [data-open] ─────────────────── */

.content-nav-items {
  list-style: none;
  margin: 2px 0 var(--space-2);
  padding: 0;
  display: none; /* col·lapsat per defecte */
  flex-direction: column;
  gap: 1px;
}

.content-nav-section[data-open] > .content-nav-items {
  display: flex;
}

/* ── Títol de grup dins una secció (p. ex. «Legal», «Sardanes · Música…») ─ */

.content-nav-group-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-2) var(--space-2) 2px;
  opacity: 0.75;
  margin-top: var(--space-1);
}

/* ── Sub-enllaços individuals ───────────────────────────────────────────── */

.content-nav-link {
  display: block;
  padding: 5px var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.content-nav-link:hover {
  background: var(--actionable-hover);
  color: var(--color-primary-strong);
}

.content-nav-link--active {
  background: var(--actionable-wash);
  color: var(--color-primary-strong);
  font-weight: 600;
}

/* ── Fil d'Ariadna dins la card (Estadístiques, Coneix-nos): flux de text ─── */

.content-page.card > .content-page-breadcrumb {
  flex: none;
  width: 100%;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-results-card-title);
  line-height: 1.35;
}

/* Estadístiques: breadcrumb a la mateixa fila que comptador + Excel (com .db-section) */
#section-estadistiques .results-header .content-page-breadcrumb {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--font-results-card-title);
  line-height: 1.35;
}

.content-page.content-page--estadistiques {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  max-width: none;
}

#section-estadistiques .content-page-body--estadistiques {
  margin: 0;
  padding: 0;
  min-height: 0;
}

/* ── Indicador de fitxer absent al peu ─────────────────────────────────── */

/* ✖ vermell + text tatxat als enllaços del peu que apunten a un fitxer absent.
   Comportament visual idèntic als mòduls inhibits (module-states.css). */
.footer-link[data-missing="1"] {
  text-decoration: line-through;
}

.footer-link[data-missing="1"]::before {
  content: "✖";
  display: inline-block; /* Evita que el text-decoration del pare travessi la ✖ */
  color: #d32f2f;
  font-weight: 900;
  margin-right: 5px;
  font-size: 0.8em;
  vertical-align: middle;
  text-decoration: none;
  transform: translateY(-2px); /* Centrat òptic amb el text */
}

/* Sidebar de contingut: rem fix (80% del disseny base; la resta hereda tokens de .sidebar) */
.sidebar.content-nav .content-nav-toggle {
  width: 18px;
  height: 18px;
  font-size: 0.72rem;
}

.sidebar.content-nav .content-nav-toggle::before {
  font-size: 0.8rem;
}

.sidebar.content-nav .content-nav-section-link {
  font-size: 0.64rem;
  padding: 3px 3px;
}

.sidebar.content-nav .content-nav-group-title {
  font-size: 0.544rem;
}

.sidebar.content-nav .content-nav-link {
  font-size: 0.7rem;
  padding: 4px 10px;
}

/*
 * Estadístiques: la sidebar d’escriptori amaga la resta de mòduls (taules BD, Coneix-nos,
 * cerca global) i deixa només els cercadors per columna del muntatge JS.
 */
#coneixNosContentNav.content-nav--estadistiques-active .content-nav-section:not([data-section="estadistiques"]),
#coneixNosContentNav.content-nav--estadistiques-active .content-nav-search-card {
  display: none;
}

#coneixNosContentNav.content-nav--estadistiques-active .content-nav-section[data-section='estadistiques'] .content-nav-section-header {
  display: none;
}

#coneixNosContentNav.content-nav--estadistiques-active
  .content-nav-section[data-section="estadistiques"]
  > .content-nav-items.estadistiques-sidebar-filters {
  display: flex;
  margin: 0;
  padding: 0;
}