/* ============================================================
   NECtech Child — contato.css (Fase 5)
   Página Contato (/contato). Enfileirado por is_page('contato').
   Depende de: colors_and_type.css (tokens) + components.css
   (primitivos .nec-* + componentes .rep-card--foto / .address-card--flat
   / .nec-placeholder).

   Este arquivo contém APENAS o que é específico do Contato:
     - Hero (grid 2 col: coluna esquerda + card de contato escuro)
     - Card de contato do hero (.contato-hero-card — tile #12283F)
     - Cobertura Nacional (lead + caixa de nota border-left laranja)
     - Grades das seções de rep-cards e address-cards
     - Ilha do formulário: estiliza a saída do WPForms (.contato-form)
       e o placeholder que a imita (mesmas classes .wpforms-*)
     - Faixa social laranja (.contato-social) + ícones 52px

   Rep-cards, address-cards e o placeholder do mapa vêm do global
   (.rep-card--foto, .address-card--flat, .nec-placeholder).
   Sem alterações em CSS global → sem bump de $ver.
   ============================================================ */


/* ----------- 1. Hero -------------------------------------- */
.contato-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.contato-hero__title {
  margin: 6px 0 24px;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--branco);
}
.contato-hero__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contato-hero__list li {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
.contato-hero__list li::before {
  content: "\2192";                    /* seta → */
  flex: 0 0 auto;
  color: var(--laranja-prime);
  font-weight: 800;
}
.contato-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* Ícone WhatsApp dentro do .nec-btn (o global não dimensiona .nec-btn svg). */
.contato-hero .nec-btn svg { width: 17px; height: 17px; flex: 0 0 auto; display: block; }


/* ----------- 2. Card de contato do hero (tile escuro) ----- */
.contato-hero-card {
  background: #12283F;                  /* literal — Fase 10 (mesmo tile da Empresa) */
  border: 1px solid var(--azul-prime);
  padding: 36px 34px;
}
.contato-hero-card__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--laranja-prime);
}
.contato-hero-card__email {
  display: block;
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 700;
  color: var(--branco);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.contato-hero-card__email:hover { color: var(--laranja-light); }
.contato-hero-card__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contato-hero-card__list li {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}
.contato-hero-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  margin-right: 10px;
  flex: 0 0 auto;
}
.contato-hero-card__who {
  margin-left: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.contato-hero-card__hours {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}


/* ----------- 3. Cobertura Nacional + mapa ----------------- */
.contato-coverage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.contato-coverage__lead {
  margin: 0 0 24px;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  font-weight: 500;
  color: var(--azul-secund);
}
.contato-note {
  background: #F5F7F9;                  /* literal — Fase 10 */
  border-left: 4px solid var(--laranja-prime);
  padding: 24px 28px;
}
.contato-note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cinza-letter);
}
/* Mapa = .nec-placeholder (global); só ajusta a altura mínima ao export. */
.contato-map { min-height: clamp(300px, 32vw, 420px); }


/* ----------- 4. Com quem você vai falar (rep-cards) ------- */
.contato-reps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}


/* ----------- 5. Nossas unidades (address-cards) ----------- */
.contato-units {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}


/* ----------- 6. Formulário (ilha WPForms) ----------------- */
/* Âncora #formulario: compensa a altura do header fixo ao rolar. */
.contato-formsec { scroll-margin-top: 96px; }
.contato-formsec__inner { max-width: 780px; }

.contato-form-card {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--border);
  padding: clamp(28px, 4vw, 44px);
}
.contato-form-card__tag {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--azul-secund);
  color: var(--branco);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
}

/* Estiliza a SAÍDA do WPForms (e o placeholder, que usa as mesmas classes).
   Se as classes de largura do WPForms vencerem por especificidade, definir
   o tamanho dos campos como "Grande" no editor do WPForms. */
.contato-form .wpforms-form { margin: 0; }
.contato-form .wpforms-field-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.contato-form .wpforms-field { padding: 0; margin: 0; }
.contato-form .wpforms-field-textarea { grid-column: 1 / -1; }
.contato-form .wpforms-field-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--azul-secund);
}
.contato-form .wpforms-field input[type="text"],
.contato-form .wpforms-field input[type="email"],
.contato-form .wpforms-field input[type="tel"],
.contato-form .wpforms-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--azul-secund);
  background: var(--branco);
  transition: border-color var(--transition-fast);
}
.contato-form .wpforms-field textarea { resize: vertical; min-height: 120px; }
.contato-form .wpforms-field input:focus,
.contato-form .wpforms-field textarea:focus {
  border-color: var(--laranja-prime);
  outline: 2px solid rgba(231, 79, 28, 0.25);   /* laranja-prime translúcido */
  outline-offset: 0;
}
.contato-form ::placeholder { color: #9AA9B8; }   /* literal — Fase 10 */

.contato-form .wpforms-submit-container { margin-top: 24px; }
.contato-form .wpforms-submit {
  border: none;
  background: var(--laranja-prime);
  color: var(--branco);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.contato-form .wpforms-submit:hover { background: var(--laranja-dark); }

/* Placeholder desabilitado — sinaliza que a config do WPForms está pendente. */
.contato-form__mock input[disabled],
.contato-form__mock textarea[disabled] { background: #FBFCFD; cursor: default; }
.contato-form__mock .wpforms-submit[disabled] { opacity: 0.55; cursor: default; }
.contato-form__mock .wpforms-submit[disabled]:hover { background: var(--laranja-prime); }


/* ----------- 7. Acompanhe a Nectech (faixa social) -------- */
.contato-social {
  background: var(--laranja-prime);
  color: var(--branco);
}
.contato-social__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-top: clamp(44px, 5vw, 72px);
  padding-bottom: clamp(44px, 5vw, 72px);
}
.contato-social__text { flex: 1 1 360px; }
.contato-social__title {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--branco);
}
.contato-social__sub {
  margin: 0;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.6;
  color: #FFE3D6;                       /* literal (tint sobre laranja) — Fase 10 */
}
.contato-social__icons {
  flex: 0 0 auto;
  display: flex;
  gap: 14px;
}
.contato-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--branco);
  color: var(--branco);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.contato-social__icon:hover { background: var(--branco); color: var(--laranja-prime); }
.contato-social__icon:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; }
.contato-social__icon svg { width: 24px; height: 24px; display: block; }