/* ======================================================================
   Politermica blog — modulo Form (seccao Contacto) e estados de sucesso/erro.
   ----------------------------------------------------------------------
   O formulario e desenhado pelo proprio modulo: views/Form/view.tpl, inserido
   com component('/form/view/id/4').

   Esse template define no topo um conjunto de variaveis CSS (--fv-*) sobre
   #form_view. Aqui apenas se redefinem essas variaveis com a paleta
   Politermica, em vez de duplicar centenas de linhas so para mudar cores e
   cantos.

   O que NAO se toca: estrutura, validacao, mensagens de erro, upload de
   ficheiros, reCAPTCHA. Continua tudo a ser do modulo — e o backoffice
   continua a poder acrescentar e reordenar campos sem partir nada aqui.

   Referencia visual: _design_reference/Landing Page.dc.html, seccao #contacto
   ====================================================================== */

/* ======================================================================
   PORQUE `body #form_view` E NAO `#form_view`
   ----------------------------------------------------------------------
   O view.tpl traz um <style> proprio que e impresso no CORPO da pagina, junto
   com o formulario — ou seja, DEPOIS desta folha de estilos, que vem no
   <head>. Com a mesma especificidade (#form_view contra #form_view), quem
   ganha e o ultimo a aparecer: o do modulo.

   `body #form_view` tem especificidade 0,1,1 contra 0,1,0 e ganha
   independentemente da ordem. Evita espalhar !important pelo ficheiro.
   ====================================================================== */

body #form_view {
    /* --- paleta ------------------------------------------------------- */
    --fv-primary:        var(--pt-lima);
    --fv-primary-hover:  var(--pt-lima-hover);
    --fv-primary-active:  #9BA300;
    --fv-border-focus:   var(--pt-lima);
    --fv-focus-ring:     rgba(180, 189, 0, .20);

    --fv-text:           var(--pt-texto);
    --fv-label:          var(--pt-texto);
    --fv-muted:          var(--pt-texto-tenue);
    --fv-border:         var(--pt-borda-forte);
    --fv-border-hover:   #D9DCE0;

    /* --- forma e tipografia ------------------------------------------- */
    --fv-font:           var(--pt-corpo);
    --fv-radius:         var(--pt-raio);
    --fv-radius-sm:      var(--pt-raio);

    /* O cartao branco, o contorno e o espacamento vem da seccao
       (.ptContacto__cartao), nao do modulo. */
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

/* O modulo repete o titulo do formulario e o aviso de campos obrigatorios;
   na landing quem manda e o cabecalho da seccao ("Tem um projeto de
   engenharia ou construcao?"), por isso escondem-se. Os asteriscos nos
   rotulos continuam la, que e o que o design mostra. */
body #form_view .form-header,
body #form_view .name_form,
body #form_view .required_msg {
    display: none;
}

/* Rotulos como no design: pequenos, medios, cor de texto normal. */
body #form_view label {
    font-family: var(--pt-corpo);
    font-weight: 500;
    font-size: 14px;
    color: var(--pt-texto);
}

/* Asterisco dos obrigatorios em lima, como no design. */
body #form_view .form-field label.required::after,
body #form_view .form-field .label-wrapper label.required::after {
    color: var(--pt-lima);
}

/* Rotulo vazio de campo obrigatorio — esconder.
   -----------------------------------------------------------------------
   O consentimento RGPD tem `label` vazio de proposito: o texto vai na
   OPCAO, para sair ao lado da caixa e nao por cima dela. Mas o modulo emite
   na mesma <label for="element_107" class="required"></label>, e o
   ::after acima punha-lhe um asterisco. Resultado: uma linha solta so com
   um "*" por cima da checkbox.

   :empty so casa quando o elemento nao tem NADA la dentro, que e
   exactamente este caso — os rotulos com texto continuam a mostrar o
   asterisco normalmente. */
body #form_view .form-field > label.required:empty,
body #form_view .form-field > .label-wrapper > label.required:empty {
    display: none;
}

/* Campos. O modulo ja os desenha; aqui so a altura e o tipo de letra. */
body #form_view input[type="text"],
body #form_view input[type="email"],
body #form_view input[type="tel"],
body #form_view input[type="number"],
body #form_view input[type="date"],
body #form_view select,
body #form_view textarea {
    font-family: var(--pt-corpo);
    font-size: 15px;
}

body #form_view input::placeholder,
body #form_view textarea::placeholder {
    color: var(--pt-texto-tenue);
}

/* Botao de submissao — "Solicitar analise do projeto".
   O design da-lhe a largura toda do cartao. */
body #form_view .submit-container button,
body #form_view #enviarform,
body #form_view .submit_button {
    width: 100%;
    justify-content: center;
    background: var(--pt-lima);
    border-color: var(--pt-lima);
    color: #FFFFFF;
    font-family: var(--pt-titulos);
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--pt-raio);
    padding: 15px 24px;
}

body #form_view .submit-container button:hover,
body #form_view #enviarform:hover,
body #form_view .submit_button:hover {
    background: var(--pt-lima-hover);
    border-color: var(--pt-lima-hover);
    color: #FFFFFF;
}

/* Checkbox da politica de privacidade: no design fica em linha com o texto,
   pequeno e discreto. */
body #form_view .input-container:has(input[type="checkbox"]) label {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: var(--pt-texto-fraco);
}

body #form_view input[type="checkbox"]:checked {
    background: var(--pt-lima);
    border-color: var(--pt-lima);
}

/* Aviso do reCAPTCHA — o design nao o previa; fica pequeno e a cinzento. */
body #form_view .recaptcha-disclosure {
    font-size: 12px;
    color: var(--pt-texto-tenue);
}

body #form_view .recaptcha-disclosure a { color: var(--pt-texto-fraco); }

/* ======================================================================
   ESTADO DE SUCESSO / ERRO

   O design nao tem artboard de agradecimento — ao contrario do socequi e do
   clean blog, que tinham um ThankYouPage no Figma e por isso ganharam uma
   pagina propria (views/obrigado.tpl + uma accao no Index_Controller).

   Aqui aproveita-se o fluxo do proprio modulo: ao gravar, o
   Form_GenericController rende o views/Form/success.tpl dentro do canal
   ($_canal = 'politermica') e poe a mensagem em $message, que o
   views/politermica.tpl imprime dentro de .ptContentor > .messages.

   Menos uma pagina para manter, e a mensagem continua a ser a que o cliente
   escreve no backoffice (form_form_pt.mensagem_sucesso).
   ====================================================================== */

body.politermica main .messages {
    max-width: 760px;
    margin: 0 auto;
    padding: 180px 0 120px;
    text-align: center;
}

body.politermica main .messages .message,
body.politermica main .messages .error {
    border-radius: var(--pt-raio-cartao);
    padding: 34px 38px;
    font-size: 17px;
    line-height: 29px;
    text-wrap: pretty;
}

body.politermica main .messages .message {
    border: 1px solid var(--pt-lima);
    background: #FBFCF2;
    color: #5F6600;
}

body.politermica main .messages .error {
    border: 1px solid #FECACA;
    background: #FEF2F2;
    color: #DC2626;
}

/* O success.tpl do modulo e so um <div id="messages">&nbsp;</div>; sem isto
   ficava um bloco vazio por baixo da mensagem verdadeira. */
body.politermica main #messages:empty,
body.politermica main #messages { display: none; }

@media (max-width: 680px) {
    body.politermica main .messages { padding: 140px 0 80px; }
    body.politermica main .messages .message,
    body.politermica main .messages .error { padding: 26px; font-size: 16px; }
}