/*wwwroot/css/layout.css */

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&family=Caveat:wght@400;700&family=Architects+Daughter&family=Indie+Flower&family=Handlee&family=Reenie+Beanie&family=Shadows+Into+Light&family=Chewy&family=Permanent+Marker&family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Schoolbell&family=Patrick+Hand&family=Gloria+Hallelujah&family=Short+Stack&family=Freckle+Face&display=swap');

html {
  height: 99%;
  width: 99%;
  padding: 0;
  margin : 2px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Tamanho compacto no mobile */
@media (max-width: 767.98px) {
  #btnFaleConoscoDock {
    width: 100% !important;
    text-align: left;
    display: block;
  }
}

/* ≥ md: fica inline como os demais itens */
@media (min-width: 768px) {
  
  #btnFaleConoscoDock {
    width: auto !important;
    display: inline-block;

  }
}

/* Responsivo: ocupa a largura em telas muito estreitas */
@media (max-width: 420px) {
  .contact-dock {
    left: 8px;
    right: 8px;
    width: auto;
  }
}

/* Layout principal – ocupa a altura da viewport sem limitar o máximo */
body {
  display: flex;
  flex-direction: column;
  height: 99%;  /* antes tinha max-height: 98vh, isso podia “cortar” a página */
  width: 98vw;
  font-family: 'Baloo 2', Arial, sans-serif;
  color: rgb(65, 77, 76);
  font-weight: 400;
  font-style: italic;
}

/* Header sempre visível no topo, independentemente da rolagem da página */
header {
  width: 100%;
  height: 25%;
  position: sticky;   /* gruda no topo ao rolar a página */
  top: 0;
  bottom: 0;
  padding: 2px;
  margin: 2px;
  z-index: 3000;      /* acima de qualquer modal/overlay */
}


img { 
  max-width: 99%;
  height: 99%;
  display: block;
}

body.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* Conteúdo da página ocupa o espaço restante */
main {
  flex: 1;
  width: 100%;
}

/* Estilo de foco para botões e inputs */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Placeholder alinhado */
.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
  text-align: start;
}

/* Rodapé fixado no fim da página com imagem centralizada */
.footer {
  padding: 20px 0 10px;
  text-align: center;
  opacity: 0.8;
  /* ou 0.1, bem leve */

}

.formbold-form-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 98%;
  background-image: url('');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 300px auto;
  /* ajuste conforme necessário */
  opacity: 0.2;
  /* ou 0.1, bem leve */
  z-index: -1;
  /* fica atrás do conteúdo */
  pointer-events: none;
  /* impede clique */
}

/* Logo dentro do rodapé (não mais fixo na tela) */
.logo-bottom {
  max-width: 150px;
  height: auto;
  margin-bottom: 10px;
  opacity: 0.9;
}

/* Estilo do botão Login usado no menu */
.btn-login {
  background-color: #002b5c;
  color: white;
  padding: 8px 20px;
  border-radius: 25px;
  border: none;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

.btn-login:hover {
  background-color: #004080;
  color: white;
}

.dropdown-menu .btn-login {
  padding: 0.25rem 0.75rem;
  /* menos espaço interno */
  font-size: 0.875rem;
  /* 87.5% do tamanho base (14px se base for 16px) */
  line-height: 2;
  /* controla altura de linha */
}

/* define largura fixa para o dropdown do usuário */
.dropdown-menu.user-menu {
  min-width: 6rem;
  /* 8 × font-size */
  max-width: 10rem;
  /* evita menus muito largos */
}

/* largura fixa nos botões internos */
.dropdown-menu.user-menu .btn-login {
  width: 120px;
}

/* ====== Contato ====== */
/* ====== Visual dos cards dentro do modal de contato ====== */
/* Dock fixo no canto inferior esquerdo */
.contact-dock {
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: min(380px, calc(100vw - 32px));
  z-index: 1050;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

.contact-dock.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Caixa interna */
.contact-dock .dock-box {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 16px;
  overflow: hidden;
}

/* Reuso de estilo dos “cards” */
.contact-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .06);
}

.container-fluid{
    width: 95%;
}


/* Botões (reuso) */
/* .btn-contact {
  background: #011f3b2d;
  color: #1a0bc0;
  border-radius: 999px;
  padding: .5rem 1rem;
  border: none;
}

.btn-contact:hover {
  filter: brightness(1.05);
  color: #fff;
}

.btn-outline-contact {
  border-radius: 999px;
  padding: .5rem 1rem;
  border: 2px solid #1f7fd6;
  color: #1f7fd6;
  background: #fff;
}

.btn-outline-contact:hover {
  background: #1f7fd6;
  color: #fff;
} */

/* Empilha e centraliza os itens do copyright */
#footer-copyright {
  display: flex;
  flex-direction: column;
  /* um abaixo do outro */
  align-items: center;
  /* centraliza horizontal */
  justify-content: center;
  gap: 0.115rem;
  /* espaço entre linhas */
  text-align: center;
  font-size: .8rem;
}

/* Esconde o separador • dessa área */
#footer-copyright span.text-muted.mx-2 {
  display: none;
}