/*
 * Studio Legale Saltelli & Partners — Components
 * Estratto da .claude/knowledge/design/sessione-1/tokens.css (Sessione 1).
 *
 * Components: .sl-mono, .sl-btn, .sl-link, .sl-area, .sl-acc.
 * Tutti scopati implicitamente dall'uso dentro .sl-root (vedi tokens.css).
 */

/* Mono utility */
.sl-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}

/*
 * Dark-context override per .sl-mono — footer scuro o future dark CTA banner.
 * Fix Impeccable Step C: contrast 2.6:1 → ~9.4:1 (AAA).
 */
.sl-footer .sl-mono,
.sl-footer .sl-mono a {
  color: rgba(255, 255, 255, 0.72);
}

/*
 * Footer copy: stringa lunga (49 char "© 2026 …"), NON è un'etichetta corta.
 * De-uppercased per leggibilità (anti-pattern all-caps-body fix).
 */
.sl-footer__copy.sl-mono {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 11px;
}

/* Editorial button: text + underline, NOT filled */
.sl-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  position: relative;
  letter-spacing: 0.01em;
}
.sl-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--text);
  transform-origin: left;
  transition:
    transform var(--dur-base) var(--ease-editorial),
    background var(--dur-base) var(--ease-editorial);
}
.sl-btn:hover::after {
  background: var(--accent);
  transform: scaleX(1);
}
.sl-btn .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-editorial);
}
.sl-btn:hover .arrow { transform: translateX(6px); }

.sl-btn--primary { color: var(--primary); }
.sl-btn--primary::after { background: var(--primary); }

/* Editorial link */
.sl-link {
  color: var(--text);
  position: relative;
  transition: color var(--dur-fast) var(--ease-editorial);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.sl-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* List item — area di pratica */
.sl-area {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: baseline;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-editorial),
    padding-left var(--dur-fast) var(--ease-editorial);
  position: relative;
}
.sl-area::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-editorial);
}
.sl-area:hover {
  transform: translateX(8px);
}
.sl-area:hover::before { transform: scaleX(1); }
.sl-area:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.sl-area__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  /* FIX P1.1: nascosto mobile (la numerazione 01/19 mescola tier-1 e tier-2). */
  display: none;
}

@media (min-width: 1024px) {
  .sl-area__num {
    display: inline-block;
    opacity: 0.4;
    font-feature-settings: "tnum" 1;
  }
  .sl-area--tier1 .sl-area__num {
    opacity: 1;
    color: var(--accent);
  }
}

.sl-area__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  color: var(--primary);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* FIX P1.2: drop-cap oro SOLO su tier-1 (reset esplicito sugli altri).
   Reset paranoia: garantiamo che le 16 non-tier-1 ereditino var(--primary). */
.sl-area:not(.sl-area--tier1) .sl-area__title::first-letter {
  color: inherit;
  font-size: inherit;
}
.sl-area--tier1 .sl-area__title::first-letter {
  color: var(--accent);
}
.sl-area__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-editorial);
}
.sl-area:hover .sl-area__meta,
.sl-area:focus-visible .sl-area__meta { opacity: 1; }

/* Touch device: niente :hover, mostra meta sempre per dare l'indicatore Tier 1/2 */
@media (hover: none), (max-width: 767px) {
  .sl-area__meta { opacity: 1; }
}

/* Accordion */
.sl-acc {
  border-top: 1px solid var(--border);
}
.sl-acc__item {
  border-bottom: 1px solid var(--border);
}
.sl-acc__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  padding: 24px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 400;
  color: var(--primary);
  letter-spacing: -0.01em;
}
.sl-acc__icon {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-editorial);
}
.sl-acc__item[data-open="true"] .sl-acc__icon { transform: rotate(45deg); }
/*
 * Accordion panel — grid-template-rows 0fr/1fr per evitare layout-thrash
 * (animare max-height triggera reflow ogni frame). Tecnica grid-rows è GPU-friendly
 * e supporta auto-height senza JS measure.
 * Fix Impeccable Step C: anti-pattern "layout-transition" risolto.
 */
.sl-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-editorial);
}
.sl-acc__item[data-open="true"] .sl-acc__panel {
  grid-template-rows: 1fr;
}
.sl-acc__inner {
  min-height: 0;
  padding: 0 0 28px 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  max-width: 60ch;
}

/* ═══════════════════════════════════════════════════════════════
   FIX P1.3 — FAQ accordion editoriale unificato
   Markup details/summary nativi:
     a. /costi/         → <details class="sl-acc"><summary class="sl-acc__summary">
     b. /competenze/    → <details class="sl-faq__item"><summary class="sl-faq__question">
   Stesso pattern visuale (no triangle browser, +/− editoriale a destra).
   ═══════════════════════════════════════════════════════════════ */

/* Container */
.sl-faq {
  border-top: 1px solid var(--border);
  margin-top: 32px;
}
.sl-faq__item {
  border-bottom: 1px solid var(--border);
  list-style: none;
}

/* Summary (la "domanda") */
.sl-faq__question,
details.sl-acc > summary,
.sl-acc__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  padding: 24px 0;
  padding-right: 8px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--primary);
  letter-spacing: -0.01em;
  position: relative;
  transition: color var(--dur-fast) var(--ease-editorial);
}
.sl-faq__question:hover,
details.sl-acc > summary:hover,
.sl-acc__summary:hover {
  color: var(--accent);
}

/* Rimuove triangle browser default (Webkit + Firefox) */
.sl-faq__question::-webkit-details-marker,
details.sl-acc > summary::-webkit-details-marker,
.sl-acc__summary::-webkit-details-marker {
  display: none;
}
.sl-faq__question::marker,
details.sl-acc > summary::marker,
.sl-acc__summary::marker {
  content: "";
  display: none;
}

/* Icona +/− editoriale a destra */
.sl-faq__question::after,
details.sl-acc > summary::after,
.sl-acc__summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-editorial);
}
details[open] > .sl-faq__question::after,
details.sl-acc[open] > summary::after,
details.sl-faq__item[open] > .sl-faq__question::after {
  content: "−";
}

/* Answer panel */
.sl-faq__answer,
details.sl-acc > div,
.sl-acc__panel {
  padding: 0 0 24px 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  max-width: 60ch;
}
.sl-faq__answer p,
.sl-acc__panel p {
  margin: 0 0 12px 0;
}
.sl-faq__answer p:last-child,
.sl-acc__panel p:last-child {
  margin-bottom: 0;
}