/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Child Theme para Hello Elementor
 Author:       Carlos Bonadio
 Author URI:   https://carlos.bonadio.com.br
 Template:     hello-elementor
 Version:      1.0.0
*/

/* Aqui você coloca seu CSS customizado */

/* LAyout estavel ao carregar a pagina - barra de rolagem */
html, body {
  scrollbar-gutter: stable; /* moderno */
}

/* Body com cor universal */
body {
  background: #dbdbdb!important; /* cor sólida - pode ser usado "body.page-id-123" para páginas específicas  */
  /* background: linear-gradient(45deg, #ff0000, #0000ff);  gradiente opcional */
}
/* Remove margin de todos os parágrafos do Text Editor - DESABILITADO POR ENQUANTO */
.menu-margins p {
  margin: 0;
}
.menu-margins a {
  color: var(--e-global-color-secondary);
  padding: 10px 0 8px 0;
  }
.menu-margins .right-link span {
    margin-right: -2px;
}



/************* CONTACT FORM *****************/

/* Botão com 100% de largura */
div.wpforms-container-full, div.wpforms-container-full * {
    width: 100%;
}
/* Redução dos espaços entre os inputs e botão */
.wpforms-container .wpforms-field {
    padding: 5px 0;
}
/* Estilos do placeholder form contato */
div.wpforms-container-full .wpforms-form textarea::placeholder,
div.wpforms-container-full input[type=email]::placeholder,
div.wpforms-container-full input[type=text]::placeholder {
  color: #fff;
  font-family: var(--e-global-typography-cb571bb-font-family), Sans-serif;
  font-weight: 400;
  opacity: .6;
  text-align: center;
}
div.wpforms-container-full button[type=submit]:hover {
    background-color: #000;
    color: #fff;
    border-color: #fff;
}


div.wpforms-container-full button[type=submit] {
    letter-spacing: 0.25rem;
    /*font-size: 0.85rem;*/
}


/* Estilos do texto dos inputs */
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full input[type=email],
div.wpforms-container-full input[type=text] {
    color:#fff;
    font-weight: 400;
    font-family: var(--e-global-typography-cb571bb-font-family), Sans-serif;
    text-align: center;
}


/* Estilos do texto dos inputs */
div.wpforms-container-full .wpforms-form textarea:focus,
div.wpforms-container-full .wpforms-form textarea:focus:invalid,
div.wpforms-container-full input[type=email]:focus,
div.wpforms-container-full input[type=email]:focus:invalid,
div.wpforms-container-full input[type=text]:focus,
div.wpforms-container-full input[type=text]:focus:invalid {
    border: 1px solid #4a4a4a;
}

/* Texto da tela de sucesso - era dentro de um retangulo verde */
div.wpforms-container-full .wpforms-confirmation-container-full {
    /*color: red;*/
    font-family: var(--e-global-typography-cb571bb-font-family), Sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    /*background: red !important;*/
    border: none;
    padding: 40px 0 40px 0;
}



/*input[type=text],
input[type=email],
div.wpforms-container-full textarea {
    background-color: transparent !important;
}*/








/*//////////////////////////////////////*/
/* Tela de login */
/*//////////////////////////////////////*/

.tml-login {
    padding: 30px 0;
}
/* Remove outline e sombra dos inputs do Theme My Login */
.tml-login form input[type="text"],
.tml-login form input[type="password"],
.tml-login form input[type="email"] {
    outline: none !important;
    box-shadow: none !important;
    border-color: #efefef !important; /* opcional: mantém a borda neutra */
    background-color: #efefef;
    position: relative;
}
/* Remove outline do botão de login */
.tml-login form input[type="submit"]:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* Campos de input (usuário + senha) */
.tml-field {
  width: 100%;
  padding: 0 14px;
  margin-bottom: 10px;
  border: 1px solid #efefef; /* cinza suave */
  border-radius: 8px;
  font-size: 14px;
  transition: none;
  font-family: var(--e-global-typography-cb571bb-font-family), Sans-serif;
  text-align: center;
}
.tml-login input[type=text],
.tml-login input[type=password] {
    padding: 4px 9px;
}
.tml.tml-login input:-webkit-autofill {
  background-color: #efefef !important; /* cor de fundo */
  -webkit-box-shadow: 0 0 0 1000px #efefef inset !important; /* força a cor */
  -webkit-text-fill-color: #000 !important; /* cor do texto */
  transition: background-color 5000s ease-in-out 0s; /* truque para manter cor */
  font-weight: 400;
}
/* Firefox */
.tml.tml-login input:autofill {
  background-color: #efefef !important;
  color: #000 !important;
  font-weight: 400;
  border: 1px solid #000;
  /*opacity: .5;*/
}
.tml-login input::placeholder {
  color: var(--e-global-color-secondary);      /* cor do placeholder */
  font-size: 14px;     /* tamanho do texto */
  font-weight: 600;
  opacity: 1;          /* importante para o Firefox */
}
.tml .tml-action-confirmaction .success,
.tml .tml-error,
.tml .tml-message,
.tml .tml-success {
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .1);
    display: block;
    margin: 0 0 1em;
    padding: 2px 10px;
    font-size: 14px;
}
/* Botão principal */
.tml-login button {
  width: 100%;
  padding: 4px 9px;
  border: 1px #efefef solid;
  background: #efefef;;
  color: var(--e-global-color-secondary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: none; /*background 0.2s ease-in-out;*/
  text-transform: uppercase;
  letter-spacing: .18rem;
}
.tml-login button:hover,
.tml-login button:active {
  color: var(--e-global-color-primary);
  background-color: transparent;
  border: 1px var(--e-global-color-primary) solid;
}
/* Links secundários (ex: recuperar senha, registrar-se) */
.tml-links a {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  color: #0073e6;
  text-decoration: none;
}
.tml-field-wrap.tml-rememberme-wrap,
.tml-links,
.tml-errors {
  display: none;
}
.tml .tml-field-wrap {
    margin-bottom: 0;
}
.tml-login label.tml-label {
  display: none; /* esconde a label */
}
.tml-field-wrap [type=button]:focus,
.tml-field-wrap [type=button]:hover,
.tml-field-wrap [type=submit]:focus,
.tml-field-wrap [type=submit]:hover,
.tml-field-wrap button:focus, button:hover {
    background-color: #fff;
    color: #000;
    text-decoration: none;
}

/*//////////////////////////////////////////*/
/* Formulário de contato */
/*//////////////////////////////////////////*/
/* Centralizar mensagens de erro */
div.wpforms-container-full .wpforms-form label.wpforms-error,
div.wpforms-container-full .wpforms-form em.wpforms-error {
    text-align: center;
}
/* Cor do texto da tela de sucesso */
div.wpforms-container-full .wpforms-confirmation-container-full p {
    color: #fff;
}


div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background-color: transparent;
}



/* Remoção dos ícones das mensagens de erro do form */
div.wpforms-container-full .wpforms-form em.wpforms-error:before,
div.wpforms-container-full .wpforms-form label.wpforms-error:before {
    content: none;
}
/* Remoção dos espaços dos ícones do form */
div.wpforms-container-full .wpforms-form em.wpforms-error,
div.wpforms-container-full .wpforms-form label.wpforms-error {
    padding: 0;
    margin: 3px 0 4px 0;
}
/* Chrome, Edge, Safari */
div.wpforms-container-full input:-webkit-autofill {
  background-color: #1a1a1a !important; /* cor de fundo */
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important; /* força a cor */
  -webkit-text-fill-color: #fff !important; /* cor do texto */
  transition: background-color 5000s ease-in-out 0s; /* truque para manter cor */
  font-weight: 400;
}
/* Firefox */
div.wpforms-container-full input:autofill {
  background-color: #000 !important;
  color: #fff !important;
  font-weight: 400;
  border: 1px solid #000;
  /*opacity: .5;*/
}
div.wpforms-container-full button[type=submit]:focus {
    background-color: #000;
    color: #fff !important;
    border-color: #fff;
}
/*//////////////////////////////////////////////////*/
/* Formulário de contato - Botão copiar email  */
/*//////////////////////////////////////////////////*/

#copy-btn {
    cursor: pointer;
    color: #A4A4A4;
    text-decoration: none;
    transition: opacity 0.5s ease;
    font-size: 0.8rem;
    letter-spacing: 0.3rem;
}
#copy-btn:hover {
    color: #000;
}
#copy-btn.fade {
    opacity: 0;
}
#copy-btn.copied {
    color: #000; /* cor do "Copied!" */
    text-decoration: none;
}

/*///////////////////////////////////*/
/* Barra superior - Logout  */
/*///////////////////////////////////*/

.logout-link,
.logout-custom-button {
    display: inline-block;
    padding: 0 2px 2px 2px;
    /*background: #0073e6;*/
    color: var(--e-global-color-secondary);
    text-decoration: none;
    font-size: 0.70rem;
    text-transform: uppercase;
}
.logout-custom-button:hover {
    /*background: #005bb5;*/
    color: #fff;
}

/*///////////////////////////////////*/
/* Containers quadrados  */
/*///////////////////////////////////*/

.square-container {
  width: 100%;
  position: relative;
  aspect-ratio: 1 / 1;
}
.square-container::before {
  content: "";
  display: block;
  padding-bottom: 100%; /* 100% da largura → altura igual → quadrado */
}


/*//////////////////////////////////////////*/
/* Hover projects */
/*//////////////////////////////////////////*/

/* estado padrão (some até hover) */
.square-container.card-wrapper .card-content {
  opacity: 0;
  transition: all 0.2s ease;
}

.square-container.card-wrapper:hover .card-content{
    margin-bottom: 0px;
    height: 100%;
    opacity: 1;
    /*background-color: rgb(255, 255, 255, .85);*/
    background: rgba(76, 76, 76, .6); /*overlay current view*/
    color: rgba(255, 255, 255, 1);
}

/* no ativo, fica sempre visível (sem depender do hover) */
.square-container.card-wrapper .card-content.ativo {
  opacity: 1 !important;
  visibility: visible;
}

/* estado ativo: cobre tudo */
.square-container.card-wrapper .card-content.ativo {
  opacity: 1 !important;
  background: transparent;
  pointer-events: none;
  z-index: 10;
  position: relative;
}

/* esconde os elementos internos (ex: título do projeto) */
.square-container.card-wrapper .card-content.ativo > * {
  display: none !important;
}


/*//////////////////////////////////////////*/
/* Link ativo - overlay */
/*//////////////////////////////////////////*/
.meu-grid-links .elementor-element.ativo {
  position: relative; /* necessário para posicionar o overlay */
}

.meu-grid-links .elementor-element.ativo::after {
  content: "current view";
  font-family: var(--e-global-typography-cb571bb-font-family), Sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  
  background: rgba(76, 76, 76, .6); /*overlay current view*/
  color: rgba(255, 255, 255, 1);
  font-weight: 700;
  font-size: .83rem;
  /*text-transform: uppercase;*/
  letter-spacing: .15rem;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 🔥 animação de pulsar */
  /*animation: pulseOpacity 2s ease-in-out infinite;*/
}

/*@keyframes pulseOpacity {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}*/

.meu-grid-links a.link-ativo {
  pointer-events: none;  
  cursor: default;   
}

/*//////////////////////////////////////*/
/* Titulo back to logos */
/*//////////////////////////////////////*/
.element-off .hide-title {
    display: none;
}
.element-off-project .hide-section {
    display: none;
}