/* assets/marketing/tendine.css — path comune delle tendine FAQ
   TF-TENDINE-2026-11-02. Un solo aspetto per tutte le tendine FAQ del sito, quello della
   variante B della FAQ approvata dal proprietario il 02/11/2026: scheda hairline, domanda in
   grassetto, freccia nel cerchio a destra, la tendina aperta si accende in ambra.

   Due meccanismi, lo stesso aspetto:
   A) l'accordion del bundle tema (index, prezzi, faq): gruppi .accordion, item .accordion-item,
      click su .accordion-action. Il bundle scrive data-state="true|false" sull'item e ruota la
      freccia; accordion-aria.js ne rispecchia lo stato su aria-expanded.
   B) il <details> nativo: .tfa-q (guide, blog, strumenti, generate da
      tools/articolo-da-guscio.py), .tvd-q (tutorial), .lpa-faq (landing lp/). La freccia e'
      l'<svg> primo figlio del <summary>, lo stesso chevron dell'accordion, spostato a destra.
   Le pagine che lo collegano non si elencano: test_marketing_css_condivisi.cjs le ricava dal
   markup. Fuori di qui nessuna regola di aspetto per queste classi (niente doppioni).

   Nessun transform all'hover (iPhone, #1761): all'hover cambiano solo bordo e colori. L'unica
   rotazione e' quella della freccia di una tendina aperta, su una foglia. */

/* ═══ A) accordion del tema ═══ */
.accordion.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 10px; }

.accordion .accordion-item {
border-color: rgba(15,23,42,.08);
border-radius: 14px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
transition: border-color .2s ease, box-shadow .2s ease;
}
.accordion .accordion-item:hover { border-color: rgba(245,158,11,.35); }

.accordion .accordion-action { gap: 12px; padding: 18px 20px; }
.accordion .accordion-action:focus-visible { outline: 2px solid #b45309; outline-offset: -2px; border-radius: 14px; }
.accordion .accordion-action > span:first-child {
padding-right: 0;
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: #0f172a;
}
.accordion .accordion-arrow {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 30px;
height: 30px;
margin-left: auto;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.10);
transition: background-color .2s ease, border-color .2s ease;
}

.accordion .accordion-content > div { padding: 0 20px 20px; }
.accordion .accordion-content p { font-size: 14.5px; line-height: 1.7; color: rgba(15,23,42,.64); }
.accordion .accordion-content a { color: #b45309; font-weight: 500; }

.accordion .accordion-item[data-state="true"] { border-color: rgba(245,158,11,.45); box-shadow: 0 14px 34px -16px rgba(180,83,9,.30); }
.accordion .accordion-item[data-state="true"] .accordion-arrow { background-color: #f59e0b; border-color: #f59e0b; }
.accordion .accordion-item[data-state="true"] .accordion-arrow path { stroke: #fff; stroke-opacity: 1; }

/* ═══ B) <details> nativo ═══ */
.tfa-q, .tvd-q, .lpa-faq {
border: 1px solid rgba(15,23,42,.08);
border-radius: 14px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
overflow: hidden;
transition: border-color .2s ease, box-shadow .2s ease;
}
.tfa-q:hover, .tvd-q:hover, .lpa-faq:hover { border-color: rgba(245,158,11,.35); }
/* .tvd-q sta nella griglia .tvd-qs, che ha il suo gap */
.tfa-q + .tfa-q, .lpa-faq + .lpa-faq { margin-top: 10px; }

.tfa-q summary, .tvd-q summary, .lpa-faq summary {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
cursor: pointer;
list-style: none;
font-size: 15.5px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.005em;
color: #0f172a;
}
.tfa-q summary::-webkit-details-marker, .tvd-q summary::-webkit-details-marker, .lpa-faq summary::-webkit-details-marker { display: none; }
.tfa-q summary:focus-visible, .tvd-q summary:focus-visible, .lpa-faq summary:focus-visible { outline: 2px solid #b45309; outline-offset: -2px; border-radius: 14px; }
.tfa-q summary > svg, .tvd-q summary > svg, .lpa-faq summary > svg {
order: 2;
flex: none;
box-sizing: border-box;
width: 30px;
height: 30px;
margin-left: auto;
padding: 7px;
border: 1px solid rgba(15,23,42,.10);
border-radius: 999px;
color: rgba(15,23,42,.8);
stroke-width: 1.5;
transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.tfa-q > div, .tvd-q > div, .lpa-faq > p { padding: 0 20px 20px; }
.tfa-q p, .tvd-q p, .lpa-faq p { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(15,23,42,.64); }
.tfa-q a, .tvd-q a, .lpa-faq a { color: #b45309; font-weight: 500; }

.tfa-q[open], .tvd-q[open], .lpa-faq[open] { border-color: rgba(245,158,11,.45); box-shadow: 0 14px 34px -16px rgba(180,83,9,.30); }
.tfa-q[open] summary > svg, .tvd-q[open] summary > svg, .lpa-faq[open] summary > svg {
transform: rotate(180deg);
background-color: #f59e0b;
border-color: #f59e0b;
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
.tfa-q summary > svg, .tvd-q summary > svg, .lpa-faq summary > svg { transition: none; }
}

@media (max-width: 639px) {
.accordion .accordion-action { padding: 16px; }
.accordion .accordion-content > div { padding: 0 16px 18px; }
.tfa-q summary, .tvd-q summary, .lpa-faq summary { padding: 16px; }
.tfa-q > div, .tvd-q > div, .lpa-faq > p { padding: 0 16px 18px; }
}