/* ── Fons del modal (backdrop) ───────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--backdrop-rgb), var(--opacity-40));
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999;
}

/* ── Shell del modal ─────────────────────────────────────────────── */
.modal {
  position: relative;
  width: min(720px, 100%);
  background: var(--card);
  border-radius: var(--radius-xl);
  border: 3px solid var(--modal-border);
  overflow: hidden;
}

/* Mateix patró que el drawer: tancament dins la targeta, cantó superior dret (sense sortir del modal) */
.modal .modal-close-sticky {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 5;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  pointer-events: none;
}

.modal .modal-close-sticky .sidebar-close {
  pointer-events: auto;
  position: relative;
  margin: 0;
  display: inline-flex;
}

/* ── Cap del modal (només diàlegs amb títol; text legal sense fila de capçalera) ── */
.modal-head {
  padding: 14px 5.5rem 14px 16px;
  border-bottom: 3px solid var(--line);
  background: var(--actionable-hover);
}
.modal-head strong {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 0.2px;
}

/* ── Cos del modal ───────────────────────────────────────────────── */
.modal-body {
  padding: 16px;
  color: var(--text-strong);
}

/* Text legal llarg (p. ex. privadesa des del formulari de contacte) */
.modal-legal-scroll {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding-right: 6px;
  text-align: left;
}

/* Modal de text legal: marge petit i simètric respecte la finestra */
.modal-backdrop:has(.modal-legal-scroll) {
  padding: max(var(--space-3), env(safe-area-inset-top))
    max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-3), env(safe-area-inset-bottom))
    max(var(--space-3), env(safe-area-inset-left));
}

.modal-backdrop:has(.modal-legal-scroll) .modal {
  width: min(960px, 100%);
  max-height: calc(
    100vh - max(var(--space-3), env(safe-area-inset-top)) - max(var(--space-3), env(safe-area-inset-bottom))
  );
  max-height: calc(
    100dvh - max(var(--space-3), env(safe-area-inset-top)) - max(var(--space-3), env(safe-area-inset-bottom))
  );
  display: flex;
  flex-direction: column;
}

.modal-backdrop:has(.modal-legal-scroll) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

.modal-backdrop:has(.modal-legal-scroll) .modal-legal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-right: var(--space-2);
  box-sizing: border-box;
  width: 100%;
}

/* El cos ja fa el marge; evitem el padding-top extra del markdown fora del modal */
.modal-backdrop:has(.modal-legal-scroll) .modal-legal-scroll.content-page-body {
  padding-top: 0;
}

/* Tipografia més compacta només al modal (la pàgina #coneix-nos/privadesa manté mides de .content-page-body) */
.modal-backdrop:has(.modal-legal-scroll) .content-page-body--modal-compact {
  font-size: var(--font-xs);
  line-height: 1.5;
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body.content-page-body--modal-compact h1 {
  font-size: var(--font-sm);
  margin-bottom: var(--space-2);
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body.content-page-body--modal-compact h2 {
  font-size: var(--font-xs);
  font-weight: 800;
  margin: var(--space-2) 0 var(--space-1);
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body.content-page-body--modal-compact h3 {
  font-size: var(--font-xs);
  font-weight: 700;
  margin: var(--space-2) 0 var(--space-1);
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body--modal-compact .content-page-loading,
.modal-backdrop:has(.modal-legal-scroll) .content-page-body--modal-compact .content-page-error {
  font-size: var(--font-xs);
  line-height: 1.4;
}

/* ── Lletra de sardana ─────────────────────────────────────────────── */
.modal-body .lletra-text {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  white-space: pre-line;
  line-height: 1.65;
  font-size: var(--font-base);
  max-height: min(60vh, 480px);
  overflow-y: auto;
}

.modal-body .lletra-loading {
  color: var(--muted);
  font-style: italic;
}

/* ── Taula de biblioteques (modal "On trobar-lo"): nom + accés «Visitar» (enllaç extern) ─ */
.biblioteques-table-wrap {
  margin: 0 calc(-1 * var(--space-2)) 0 0;
  max-height: min(55vh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.biblioteques-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-base);
  line-height: 1.45;
}

.biblioteques-table th,
.biblioteques-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.biblioteques-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  font-weight: 800;
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  color: var(--text-strong);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}

.biblioteques-table tbody tr:last-child td {
  border-bottom: none;
}

.biblioteques-table__url {
  min-width: 6rem;
}

/* Subratllat amb border només en hover (`text-decoration` no és fiable amb fill `inline-flex`). */
a.biblioteques-table__ext-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15em;
}

a.biblioteques-table__ext-link:hover {
  color: var(--color-primary);
  border-bottom: 1px dotted currentColor;
}

.biblioteques-table__ext-link-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.biblioteques-table__ext-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
}

.biblioteques-table__ext-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Toast ─────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  background: var(--text-strong);
  color: var(--card);
  padding: 12px 14px;
  border-radius: var(--radius-xl);
  font-weight: 900;
  font-family: var(--font-ui);
  display: none;
  z-index: 1000;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}