/* ==========================================================================
   meshar.io — pagina contatti
   ========================================================================== */

.ma-contact {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 56px;
    align-items: start;
}

.ma-form { display: grid; gap: 20px; max-width: 620px; }

.ma-field { display: grid; gap: .45rem; }
.ma-field label {
    font-family: var(--ma-font-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ma-fg-dim);
}
.ma-field-opt {
    text-transform: none;
    letter-spacing: 0;
    color: var(--ma-muted);
    font-size: .78rem;
}

.ma-field input,
.ma-field select,
.ma-field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ma-fg);
    background: var(--ma-surface);
    border: 1px solid var(--ma-border-strong);
    border-radius: var(--ma-radius-sm);
    padding: .75em .9em;
}
.ma-field textarea { resize: vertical; min-height: 150px; }
.ma-field input::placeholder,
.ma-field textarea::placeholder { color: var(--ma-muted); }
.ma-field input:focus,
.ma-field select:focus,
.ma-field textarea:focus { border-color: var(--ma-accent); }

/* La freccia nativa della select su fondo scuro resta illeggibile in alcuni browser:
   la sostituiamo con una disegnata in background. */
.ma-field select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ma-fg-dim) 50%),
        linear-gradient(135deg, var(--ma-fg-dim) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}
.ma-field select option { background: var(--ma-surface); color: var(--ma-fg); }

/* Segnalazione degli errori solo dopo il primo invio (classe messa da contacts.js),
   così i campi non diventano rossi mentre li stai ancora compilando. */
.ma-form.ma-validated input:invalid,
.ma-form.ma-validated textarea:invalid { border-color: #e2725b; }

.ma-form-submit { justify-self: start; margin-top: .4rem; }

.ma-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ma-spin .7s linear infinite;
}
@keyframes ma-spin { to { transform: rotate(360deg); } }

.ma-result-box {
    display: none;
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: var(--ma-radius-sm);
    border: 1px solid var(--ma-border-strong);
    font-size: .95rem;
    max-width: 620px;
}
.ma-result-box.is-ok { display: block; border-color: var(--ma-b); color: var(--ma-b); }
.ma-result-box.is-err { display: block; border-color: #e2725b; color: #e2725b; }

/* --- Colonna laterale --- */
.ma-contact-aside { display: grid; gap: 28px; }
.ma-aside-block {
    border-top: 1px solid var(--ma-border);
    padding-top: 16px;
}
.ma-aside-block h3 {
    font-family: var(--ma-font-mono);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ma-accent);
    margin-bottom: .7rem;
}
.ma-aside-block p { color: var(--ma-fg-dim); font-size: .94rem; margin: 0 0 .6rem; }
.ma-aside-block p:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
    .ma-contact { grid-template-columns: 1fr; gap: 40px; }
}