/* =================================================================
   CONTATTI - Hito
   Layout ereditato da css/components/contact-section.css: qui vivono
   solo palette e ritocchi presi dal frame Figma "Hito - Contatti"
   (1440x1937). Il componente e' condiviso con gli altri brand, quindi
   non va modificato: tutto cio' che non passa da una custom property
   viene sovrascritto piu' sotto, sempre sotto body.hito-contacts-page.
================================================================== */

@import url('../../../css/components/contact-section.css');

body.hito-contacts-page {
  --contact-page-bg: var(--hito-bg, #F5F0E7);

  /* Titolo "Mettiamoci in contatto" */
  --contact-accent: #A12B2A;
  --contact-accent-rgb: 161, 43, 42;

  /* Rectangle 43: card esterna bianca piena, senza ombra */
  --contact-card-bg: #FFFFFF;
  --contact-card-shadow: none;

  /* Colonna sinistra: testi e recapiti in blu */
  --contact-text: #003B71;
  --contact-muted: rgba(0, 59, 113, 0.5);

  /* Rectangle 44: pannello del form blu pieno */
  --contact-panel-bg: #003B71;
  --contact-panel-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
  --contact-panel-text: #F5F0E7;

  /* Campi: bianco al 50%, testo e placeholder crema */
  --contact-input-bg: rgba(255, 255, 255, 0.5);
  --contact-input-text: #F5F0E7;
  --contact-input-placeholder: rgba(245, 240, 231, 0.85);
  --contact-focus-border: #F5F0E7;
  --contact-focus-shadow: 0 0 5px rgba(245, 240, 231, 0.6);

  /* Bottone invio: pillola crema con testo bordeaux */
  --contact-submit-bg: #FAF8F4;
  --contact-submit-text: #571A29;
  --contact-submit-radius: 100px;
  --contact-submit-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  --contact-submit-padding: 16px 24px;
  --contact-submit-padding-800: 14px 22px;
  --contact-submit-padding-480: 12px 20px;
}

/* ---- Ritocchi non coperti dalle custom property ---- */

/* Figma: paragrafi 20/23, non giustificati */
body.hito-contacts-page .contact-left p {
  max-width: 556px;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 23px;
  text-align: left;
}

/* Etichette "E-mail" / "Telefono": 16/19; recapiti: 20/23 */
body.hito-contacts-page .label {
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 19px;
}

body.hito-contacts-page .value {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 23px;
}

/* Rectangle 44: raggio 39px (il componente condiviso usa 50px) */
body.hito-contacts-page .contact-right {
  border-radius: 39px;
}

/* Etichette del form: Roboto 400 20/23 */
body.hito-contacts-page .contact-form label {
  font-weight: 400;
  line-height: 23px;
}

/* Campi: raggio 10px e nessuna ombra interna */
body.hito-contacts-page .contact-form input,
body.hito-contacts-page .contact-form select,
body.hito-contacts-page .contact-form textarea {
  border-radius: 10px;
  box-shadow: none;
}

/* Rectangle 53: l'area messaggio e' piu' bassa che nel componente */
body.hito-contacts-page .contact-form textarea {
  min-height: 127px;
}

/* Button: 202x56, label Poppins 400 16/24 */
body.hito-contacts-page .submit-btn {
  min-width: 202px;
  min-height: 56px;
  font-family: 'Poppins', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
}

body.hito-contacts-page .submit-btn:hover {
  background: #FFFFFF;
  text-decoration: none;
}

/* =================================================================
   RESPONSIVE
   Tutte le media query del file, raggruppate per soglia e in ordine
   decrescente. Dentro ogni blocco le regole sono nell'ordine in cui
   comparivano prima, cosi' la cascata resta identica.
================================================================== */

@media (max-width: 800px) {
  body.hito-contacts-page .contact-right {
    border-radius: 30px;
  }

  body.hito-contacts-page .submit-btn {
    min-width: 0;
    min-height: 48px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  body.hito-contacts-page .contact-right {
    border-radius: 20px;
  }
}