/* Palette Colori SI-MA SRL */
:root {
    --sima-primary: #18202d;          /* Blu antracite scuro - brand/CTA */
    --sima-secondary: #9ea7b9;        /* Blu grigio chiaro - hover/link secondari */
    --sima-accent: #a4adbc;           /* Grigio freddo neutro - bordi/linee */
    --sima-bg-main: #ffffff;          /* Bianco puro - background principale */
    --sima-bg-alt: #f6f9fd;           /* Azzurro chiarissimo - sezioni alternate */
    --sima-text-main: #101722;        /* Blu notte profondo - titoli/testi scuri */
    --sima-text-secondary: #7c808f;   /* Grigio grafite - testi lunghi */
    --sima-borders: #a4adbc;          /* Grigio tecnico chiaro - bordi/ombre */
    --sima-footer: #101722;           /* Blu notte - footer/background scuro */
    --sima-hover: #003b73;            /* Blu industriale - hover/microaccenti */
}

/* Stili specifici per Contatti (fluidi) */

.main-container-contatti {
    width: 100%;
    min-height: auto;
    position: relative;
    background: #e6ebf1;
    padding-top: 100px;
    margin: 0;
    padding-bottom: clamp(40px, 6vh, 100px);
}

.pagina-contatti {
    position: relative;
    max-width: 1728px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 60px);
    height: auto;
    min-height: auto;
    background: transparent;
}

/* h1-contatti */
.h1-contatti {
    position: relative;
    max-width: clamp(480px, 55%, 820px);
    width: 100%;
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(52px, 6.8vw, 90px);
    line-height: 1.08;
    text-align: left;
    color: var(--sima-primary);
    margin: 0 0 clamp(30px, 6vh, 60px) 0;
    padding-left: clamp(10px, 2vw, 160px);
}

/* Container principale per form e info */
.contatti-container {
    position: relative;
    max-width: 1400px;
    width: 100%;
    margin: clamp(20px, 4vh, 60px) auto 0;
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(32px, 4vw, 70px);
    align-items: flex-start;
    padding: 0 clamp(10px, 2vw, 40px);
    box-sizing: border-box;
}

/* Sezione form a sinistra */
.form-section {
    flex: 1;
    max-width: clamp(520px, 50%, 720px);
}

/* Form di contatto */
.contact-form {
    width: 100%;
    background: transparent;
}

.form-group {
    margin-bottom: clamp(16px, 2vh, 28px);
}

.form-group label {
    display: block;
    font-family: 'Outfit';
    font-weight: 400;
    font-size: clamp(12px, 1.15vw, 14px);
    color: #7c808f;
    margin-bottom: clamp(6px, 0.8vw, 10px);
}

/* Bottoni dipartimento */
.department-buttons {
    display: flex;
    gap: clamp(8px, 1vw, 14px);
    flex-wrap: wrap;
}

.dept-btn {
    flex: 1;
    min-width: clamp(100px, 18%, 160px);
    padding: clamp(10px, 1.1vw, 14px) clamp(14px, 2vw, 20px);
    background: #e6ebf1;
    color: #1e2a3a;
    border: clamp(1px, 0.18vw, 2px) solid var(--sima-primary);
    border-radius: clamp(6px, 0.9vw, 10px);
    font-family: 'Outfit';
    font-weight: 500;
    font-size: clamp(13px, 1.15vw, 15px);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dept-btn:hover {
    background: #d4dce6;
    border-color: var(--sima-primary);
}

.dept-btn.active {
    background: var(--sima-primary);
    color: #ffffff;
    border-color: var(--sima-primary);
}

/* Input fields */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: clamp(10px, 1vw, 14px) clamp(14px, 2vw, 20px);
    background: transparent;
    border: clamp(1px, 0.15vw, 2px) solid var(--sima-primary);
    border-radius: clamp(6px, 0.9vw, 10px);
    font-family: 'Outfit';
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--sima-text-main);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ea7b9;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--sima-primary);
    background: transparent;
}

/* Form row per email e telefono */
.form-row {
    display: flex;
    gap: clamp(12px, 1.5vw, 22px);
    margin-bottom: clamp(16px, 2vh, 28px);
}

.form-group.half {
    flex: 1;
    margin-bottom: 0;
}

/* Textarea */
.form-group textarea {
    resize: vertical;
    min-height: clamp(110px, 24vh, 220px);
}

/* Submit button */
.submit-btn {
    width: 100%;
    padding: clamp(14px, 1.2vw, 18px);
    background: var(--sima-primary);
    color: #ffffff;
    border: none;
    border-radius: clamp(6px, 0.9vw, 10px);
    font-family: 'Outfit';
    font-weight: 600;
    font-size: clamp(15px, 1.3vw, 18px);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: clamp(8px, 1vh, 16px);
}

/* Linea divisoria menu sotto il bottone submit (20px di distanza) */
.menu-divider-after-submit {
    display: none !important;
}

.submit-btn:hover {
    background: #0d1419;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 32, 45, 0.3);
}

/* Sezione info a destra */
.info-section {
    flex: 1;
    max-width: clamp(420px, 40%, 640px);
    margin-top: clamp(10px, 2vh, 24px);
}

/* Info contatti laterali */
.contact-info-side {
    background: transparent;
    padding: 0 0 clamp(24px, 4vh, 40px) 0;
    margin-bottom: clamp(24px, 4vh, 40px);
}

.contact-info-side h3 {
    font-family: 'Outfit';
    font-weight: 600;
    font-size: clamp(20px, 2.2vw, 28px);
    color: var(--sima-text-main);
    margin: 0 0 clamp(16px, 2vh, 26px) 0;
}

.contact-info-side .info-item {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 1.4vw, 18px);
    font-family: 'Outfit';
    font-weight: 400;
    font-size: clamp(14px, 1.3vw, 18px);
    color: var(--sima-text-main);
    margin-bottom: clamp(12px, 2vh, 20px);
    line-height: 1.5;
}

.contact-info-side .info-item i {
    font-size: clamp(18px, 2vw, 24px);
    color: #82ADE1;
    margin-top: clamp(0px, 0.4vw, 4px);
    min-width: clamp(18px, 2vw, 24px);
}

/* Container mappa */
.map-container {
    width: 100%;
    height: clamp(280px, 42vh, 420px);
    border-radius: clamp(8px, 1.2vw, 16px);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: clamp(-30px, -4vh, 10px);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Footer per contatti */
.main-container-contatti .footer {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    min-height: clamp(300px, 40vh, 460px);
    margin: clamp(60px, 8vh, 120px) 0 0 0;
    padding: clamp(40px, 6vh, 80px) 0 clamp(50px, 8vh, 110px) 0;
    background: #e6ebf1;
    z-index: 10;
}

/* ===== MEDIA QUERIES RESPONSIVE CONTATTI ===== */

/* Desktop (821px - 1440px) - padding fisso per menu consistente */
@media (min-width: 821px) and (max-width: 1440px) {
    .pagina-contatti {
        padding: 0 40px !important;
    }
}

/* Desktop (1025px - 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .pagina-contatti {
        padding: 0 40px !important;
    }
}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
    .pagina-contatti {
        padding: 0 clamp(20px, 3vw, 40px);
    }
    .contatti-container {
        flex-direction: column;
        max-width: 100%;
        gap: clamp(28px, 5vw, 50px);
    }
    .info-section, .form-section {
        max-width: 100%;
    }
    .map-container {
        height: clamp(300px, 38vh, 400px);
        margin-top: clamp(20px, 4vh, 40px);
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .main-container-contatti {
        padding-top: clamp(60px, 12vh, 100px);
        min-height: auto;
    }
    .pagina-contatti {
        padding: 0 15px;
    }
    .h1-contatti {
        padding-left: 0;
        font-size: clamp(42px, 9vw, 60px);
    }
    .contatti-container {
        margin-top: clamp(10px, 3vh, 30px);
        padding: 0 10px;
        gap: clamp(24px, 6vw, 40px);
        flex-direction: column;
    }
    .form-row {
        flex-direction: column;
        gap: clamp(14px, 3vh, 24px);
    }
    .contact-info-side {
        margin-bottom: -50px !important;
    }
    .map-container {
        height: clamp(250px, 40vh, 360px);
        margin-top: clamp(30px, 6vh, 50px);
    }
    .main-container-contatti .footer {
        margin-top: clamp(40px, 10vh, 80px);
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .pagina-contatti {
        padding: 0 10px;
    }
    .h1-contatti {
        font-size: clamp(36px, 10vw, 48px);
    }
    .dept-btn {
        min-width: 100%;
    }
    .map-container {
        height: clamp(220px, 42vh, 320px);
    }
}

/* Safari Desktop Responsive Fix */
@supports (-webkit-touch-callout: none) or (-webkit-backdrop-filter: blur(1px)) {
    @media (min-width: 1025px) and (max-width: 1727px) {
        body {
            overflow-x: clip !important;
            width: 100vw !important;
        }
        .main-container-contatti {
            zoom: calc(100vw / 1728) !important;
        }
    }
}

/* Desktop: rendi il titolo CONTATTI in bold per uniformità con le altre pagine */
@media screen and (min-width: 821px) {
    .h1-contatti {
        font-weight: 700;
    }
}