/*
 * Le conversazioni sotto l'articolo (dalla 1.2.0).
 *
 * Proposta approvata da Andreas il 23 ottobre 2026. Spigoli vivi come tutto
 * il giornale, avatar quadrati, risposte rientrate con un filetto, modulo su
 * fondo nocciola con il filetto rosso della testata.
 *
 * I nomi delle classi del modulo (comment-form-*, iao-privacy) sono quelli di
 * WordPress e di Access & Operations: il tema li veste, non li inventa.
 */

.in-conversazione {
    max-width: var(--in-larghezza-contenuto);
    margin: var(--in-s8) auto var(--in-s7);
    padding: var(--in-s5) var(--in-margine-laterale) 0;
    border-top: 3px solid var(--in-testo);
    box-sizing: content-box;
}

/* ------------------------------------------------------------ l'occhiello */

.in-fascetta {
    display: flex;
    align-items: center;
    gap: var(--in-s3);
    margin: 0 0 var(--in-s1);
    font: 700 0.6875rem/1.2 var(--in-interfaccia);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--in-marchio);
}

.in-fascetta::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--in-marchio);
}

/* --------------------------------------------------------------- la testa */

.in-conversazione-testa {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--in-s4);
    flex-wrap: wrap;
}

.in-conversazione-titolo {
    margin: 2px 0 0;
    font: 500 var(--in-t-grande)/var(--in-riga-stretta) var(--in-titoli);
    color: var(--in-testo);
}

.in-conversazione-titolo em {
    font-style: normal;
    color: var(--in-marchio);
}

.in-conversazione-nota {
    margin: 0;
    max-width: 32ch;
    font: 400 0.8125rem/1.5 var(--in-interfaccia);
    color: var(--in-testo-tenue);
    text-align: right;
}

.in-conversazione-precedenti {
    display: block;
    margin: var(--in-s5) 0 0;
    padding: var(--in-s3);
    font: 600 var(--in-t-piccolo) var(--in-interfaccia);
    color: var(--in-testo);
    text-align: center;
    text-decoration: none;
    background: var(--in-fondo-tenue);
    border: 1px solid var(--in-bordo);
}

.in-conversazione-precedenti:hover {
    border-color: var(--in-bordo-forte);
    color: var(--in-marchio);
}

/* ---------------------------------------------------------------- l'elenco */

.in-conversazione-lista,
.in-conversazione-lista .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.in-conversazione-lista {
    margin-top: var(--in-s5);
}

.in-conversazione-lista .children {
    padding-left: 22px;
    border-left: 2px solid var(--in-bordo);
}

.in-commento {
    margin: 0;
}

.in-commento-corpo {
    padding: var(--in-s5) 0;
    border-top: 1px solid var(--in-bordo);
}

.in-conversazione-lista .children .in-commento-corpo {
    padding: var(--in-s4) 0 var(--in-s1) 18px;
    border-top: 0;
}

.in-commento-testa {
    display: flex;
    align-items: center;
    gap: var(--in-s3);
    margin-bottom: var(--in-s3);
}

.in-commento-avatar,
.in-commento-testa .avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 0;
    display: block;
}

.in-commento-nome {
    font: 700 0.9375rem/1.3 var(--in-interfaccia);
    color: var(--in-testo);
}

.in-commento-distintivo {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 6px;
    font: 700 0.625rem/1 var(--in-interfaccia);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--in-marchio);
    vertical-align: 2px;
}

.in-commento-data {
    display: block;
    margin-top: 2px;
    font: 400 0.78rem var(--in-interfaccia);
    color: var(--in-testo-tenue);
    text-decoration: none;
}

.in-commento-data:hover {
    color: var(--in-marchio);
}

.in-commento-testo {
    max-width: var(--in-misura);
    font: 300 1rem/var(--in-riga-larga) var(--in-corpo);
    color: var(--in-testo);
    overflow-wrap: anywhere;
}

.in-commento-testo p {
    margin: 0 0 0.8em;
}

.in-commento-rispondi {
    margin: 0;
}

.in-commento-rispondi a {
    font: 600 0.8125rem var(--in-interfaccia);
    color: var(--in-marchio);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* Il proprio commento in attesa: lo vede solo chi l'ha scritto. */
.in-commento--attesa > .in-commento-corpo {
    margin-top: var(--in-s2);
    padding: var(--in-s4) var(--in-s4) var(--in-s3);
    background: #fbf4e6;
    border-top: 0;
    border-left: 3px solid #b45309;
}

.in-commento-stato {
    margin: 0 0 var(--in-s2);
    font: 700 0.6875rem var(--in-interfaccia);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a4204;
}

.in-commento-grazie {
    margin: 0;
    font: 400 var(--in-t-piccolo)/1.6 var(--in-interfaccia);
    color: var(--in-testo-tenue);
}

/* ---------------------------------------------------------------- il modulo */

.in-modulo {
    margin-top: var(--in-s7);
}

.in-modulo .comment-respond {
    background: var(--in-fondo-tenue);
    border-top: 3px solid var(--in-marchio);
    padding: var(--in-s6) clamp(1.1rem, 4vw, 2.1rem);
}

/* Quando si risponde, WordPress sposta il modulo sotto il commento. */
.in-conversazione-lista .comment-respond {
    margin: var(--in-s3) 0 var(--in-s4);
}

.in-modulo-titolo {
    margin: 4px 0 var(--in-s2);
    font: 500 1.625rem/1.15 var(--in-titoli);
    color: var(--in-testo);
}

.in-modulo-annulla a {
    margin-left: var(--in-s3);
    font: 600 var(--in-t-piccolo) var(--in-interfaccia);
    color: var(--in-marchio);
}

.in-modulo-intro {
    margin: 0 0 var(--in-s5);
    max-width: 62ch;
    font: 400 0.9rem/1.6 var(--in-interfaccia);
    color: var(--in-testo-tenue);
}

.in-modulo-campi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--in-s4);
}

.in-modulo-campi > p,
.in-modulo-campi > .in-modulo-intro {
    grid-column: 1 / -1;
    margin: 0 0 var(--in-s4);
}

.in-modulo-campi > .comment-form-author { grid-column: 1; }
.in-modulo-campi > .comment-form-email { grid-column: 2; }

.in-modulo-campi label {
    display: block;
    margin-bottom: 6px;
    font: 600 0.8125rem var(--in-interfaccia);
    color: var(--in-testo);
}

.in-modulo-campi label span {
    font-weight: 400;
    color: var(--in-testo-tenue);
}

.in-modulo-campi input[type="text"],
.in-modulo-campi input[type="email"],
.in-modulo-campi textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font: 400 1rem/1.5 var(--in-interfaccia);
    color: var(--in-testo);
    background: #fff;
    border: 1px solid var(--in-bordo-forte);
    border-radius: 0;
}

.in-modulo-campi textarea {
    min-height: 9.5rem;
    font: 300 1rem/1.7 var(--in-corpo);
    resize: vertical;
}

.in-modulo-campi input:focus,
.in-modulo-campi textarea:focus {
    outline: 3px solid var(--in-fuoco);
    outline-offset: 1px;
    border-color: var(--in-testo);
}

/* Le due spunte: quella sull'informativa in un riquadro, perche' e'
 * obbligatoria; quella del cookie libera, perche' non lo e'. */
.in-modulo-campi .iao-privacy,
.in-modulo-campi .comment-form-cookies-consent {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: start;
    font: 400 0.875rem/1.55 var(--in-interfaccia);
}

.in-modulo-campi .iao-privacy {
    margin-bottom: var(--in-s3);
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--in-bordo-forte);
}

.in-modulo-campi .iao-privacy label,
.in-modulo-campi .comment-form-cookies-consent label {
    margin: 0;
    font: inherit;
}

.in-modulo-campi .iao-privacy strong {
    font-weight: 700;
}

.in-modulo-campi .iao-privacy a {
    color: var(--in-marchio);
    font-weight: 600;
}

.iao-privacy-obbligatorio {
    color: var(--in-testo-tenue);
}

.in-modulo-campi input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--in-marchio);
}

/* Spunta mancante: lo dice Access & Operations, il tema lo mostra. */
.in-modulo-campi .iao-privacy--errore {
    border-color: #b42318;
    box-shadow: inset 3px 0 0 #b42318;
}

.in-modulo-campi .iao-privacy-messaggio {
    margin: -4px 0 var(--in-s4);
    font: 600 0.84rem/1.5 var(--in-interfaccia);
    color: #b42318;
}

.iao-commenti-avviso {
    grid-column: 1 / -1;
    margin: 0 0 var(--in-s4);
    font: 600 0.84rem/1.5 var(--in-interfaccia);
    color: #b42318;
}

.in-modulo-piede {
    display: flex;
    align-items: center;
    gap: var(--in-s4);
    flex-wrap: wrap;
    margin-top: var(--in-s2) !important;
}

.in-modulo-invia {
    padding: 14px 26px;
    font: 700 0.9375rem var(--in-interfaccia);
    color: #fff;
    background: var(--in-marchio);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.in-modulo-invia:hover {
    background: var(--in-marchio-vivo);
}

.in-modulo-invia:focus-visible {
    outline: 3px solid var(--in-fuoco);
    outline-offset: 2px;
}

.in-modulo-invia:disabled {
    opacity: 0.7;
    cursor: wait;
}

.in-modulo-piede small {
    font: 400 0.8125rem var(--in-interfaccia);
    color: var(--in-testo-tenue);
}

/* ------------------------------------------------------------ chiusa */

.in-conversazione-chiusa {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--in-s4);
    align-items: center;
    margin-top: var(--in-s6);
    padding: var(--in-s4) var(--in-s5);
    border: 1px solid var(--in-bordo);
}

.in-conversazione-chiusa > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 2px solid var(--in-testo-tenue);
    font: 700 1rem var(--in-interfaccia);
    color: var(--in-testo-tenue);
}

.in-conversazione-chiusa p {
    margin: 0;
    font: 400 0.9rem/1.55 var(--in-interfaccia);
    color: var(--in-testo-tenue);
}

.in-conversazione-chiusa strong {
    color: var(--in-testo);
}

/* ------------------------------------------------------------ telefono */

@media (max-width: 640px) {
    .in-conversazione-nota { text-align: left; }
    .in-modulo-campi { grid-template-columns: 1fr; }
    .in-modulo-campi > .comment-form-author,
    .in-modulo-campi > .comment-form-email { grid-column: 1; }
    .in-conversazione-lista .children { padding-left: 12px; }
    .in-conversazione-lista .children .in-commento-corpo { padding-left: 10px; }
}