/*
 * Stili per la Pagina Contatti v2.1 (Completo di Responsive e WCAG)
 */

/* Header e Sezione Opzioni */
.contact-header { text-align: center; margin-bottom: var(--space-xl); }
.contact-header .subtitle { margin: 1rem auto 0; color: var(--color-gray-500); font-size: var(--font-size-lg); }

.contact-options {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first: una colonna */
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.contact-option-card {
    border: 1px solid var(--color-gray-200);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    text-align: center;
    background-color: var(--color-white);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-option-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.07);
}

.contact-option-card .icon-wrapper { /* Stile per l'icona */ }
.contact-option-card h2 { font-size: var(--font-size-xl); color: var(--color-primary); }
.contact-option-card .cta-button { margin-top: var(--space-md); }

/* Layout principale (Form + Sidebar) */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first: una colonna */
    gap: var(--space-xl);
}

/* Sidebar */
.contact-sidebar { display: flex; flex-direction: column; gap: var(--space-md); }
.sidebar-title { text-align: left; margin-top: 0; }
.contact-info-card { background: var(--color-gray-50); padding: var(--space-md); border-radius: var(--radius-md); min-height: 120px; }
.contact-info-card h3 { margin-top: 0; color: var(--color-primary); font-size: var(--font-size-md); }
.contact-info-card a { color: var(--color-accent); text-decoration: none; }
.contact-info-card a:hover { text-decoration: underline; }

/* Stili del Form (Contact Form 7) */
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-weight: 500; margin-bottom: 0.5rem; }
.form-input, .form-textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-lighter); }
.form-row { display: flex; flex-direction: column; gap: 1.5rem; }

.wpcf7-form p { margin: 0; } /* Reset per CF7 */
.wpcf7-list-item { margin-left: 0; } /* Reset per CF7 */
.wpcf7-acceptance .wpcf7-list-item-label { font-size: var(--font-size-sm); color: var(--color-gray-500); }

/* Stile per la nota "Campi Obbligatori" */
.wpcf7-form > div:last-of-type {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: 1rem;
    font-style: italic;
}

/* Bottone di Invio */
.submit-button {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; background: var(--color-primary); color: white;
    border: none; border-radius: var(--radius-sm); cursor: pointer;
    font-weight: 600;
    transition: background-color var(--transition-normal);
}
.submit-button:hover { background: var(--color-primary-dark); }
.submit-button .button-icon { transition: transform 0.2s ease; }
.submit-button:hover .button-icon { transform: translateX(3px); }

/* ----- MEDIA QUERIES E WCAG ----- */

/* Tablet e schermi medi */
@media (min-width: 768px) {
    .contact-options { grid-template-columns: 1fr 1fr; }
    .form-row { flex-direction: row; gap: 1rem; }
}

/* Desktop */
@media (min-width: 1024px) {
    .contact-layout { grid-template-columns: 2fr 1fr; }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .contact-option-card {
        background-color: var(--color-gray-700);
        border-color: var(--color-gray-600);
    }
    .contact-info-card {
        background: var(--color-gray-600);
    }
    .form-input, .form-textarea {
        background-color: var(--color-gray-600);
        border-color: var(--color-gray-500);
        color: var(--color-gray-100);
    }
}

/* Accessibilità: Movimento Ridotto */
@media (prefers-reduced-motion: reduce) {
    .contact-option-card, .submit-button .button-icon {
        transition: none !important;
        transform: none !important;
    }
}

/* Accessibilità: Contrasto Elevato */
@media (forced-colors: active) {
    .contact-option-card, .contact-info-card, .form-input, .form-textarea {
        border: 1px solid ButtonText;
    }
    .submit-button {
        border: 2px solid ButtonText;
    }
}