/* ===========================================
   site.css - Ajustes e componentes customizados
   (não fazem parte do CSS gerado pelo Angular)
=========================================== */

/* Header sempre visível, sem depender do Angular [class.header-sticky] */
.header__bottom-6 {
  position: relative;
  z-index: 100;
}
.header__bottom-6.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  animation: sticky-header 0.6s;
}
@keyframes sticky-header {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

/* Offcanvas menu (mobile) abre/fecha via classe JS */
.offcanvas__area {
  transition: right 0.4s ease;
}
.offcanvas__area.offcanvas-opened {
  right: 0 !important;
}
.body-overlay.opened {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Estado ativo do filtro de portfólio */
.masonary-menu button {
  cursor: pointer;
  border: none;
  background: transparent;
}

/* Esconder itens filtrados do portfólio */
.tp-portfolio.is-hidden {
  display: none !important;
}

/* Lightbox customizado (substitui ng-gallery) */
.custom-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.custom-lightbox.active {
  display: flex;
}
.custom-lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
}
.custom-lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 40px;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Botão "ver projeto" e thumb do portfólio precisam de cursor pointer */
.portfolio__grid-popup,
.portfolio-link-btn {
  cursor: pointer;
}

/* Mensagens de erro do formulário de contato */
.error-msg {
  display: block;
  font-size: 13px;
  margin-top: 6px;
}

/* Mensagem de sucesso do formulário */
.form-success-msg {
  color: #1c8a4b;
  font-weight: 500;
  margin-top: 15px;
}