/* =========================================================
   HEADER.CSS
   Associação Jardins Berlim

   Responsabilidades deste arquivo:
   - Cabeçalho principal
   - Logo no desktop
   - Efeito de redução da logo no scroll
   - Navegação desktop
   - Estrutura visual do topo

   O menu mobile fica em:
   assets/css/menu.css
========================================================= */

/* =========================================================
   VARIÁVEIS DO CABEÇALHO
========================================================= */

:root {
  --header-height: 82px;
  --header-height-scrolled: 68px;

  --header-bg: rgba(6, 22, 12, 0.88);
  --header-bg-scrolled: rgba(6, 22, 12, 0.97);

  --header-border: rgba(255, 255, 255, 0.08);
  --header-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);

  --header-text: #ffffff;
  --header-text-muted: rgba(255, 255, 255, 0.78);

  --header-accent: #d4af37;
  --header-accent-soft: rgba(212, 175, 55, 0.16);

  --header-container-width: 1180px;
  --header-side-padding: 24px;

  --logo-width-desktop: 148px;
  --logo-width-scrolled: 92px;

  --header-transition:
    height 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* =========================================================
   RESET ESPECÍFICO DO CABEÇALHO
========================================================= */

.topo,
.topo *,
.topo *::before,
.topo *::after {
  box-sizing: border-box;
}

.topo a {
  text-decoration: none;
}

.topo button {
  font: inherit;
}

/* =========================================================
   CABEÇALHO PRINCIPAL
========================================================= */

.topo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 100%;
  height: var(--header-height);

  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  transition: var(--header-transition);
}

/* Estado aplicado pelo JavaScript ao rolar a página */

.topo.scrolled,
.topo.topo-reduzido,
body.header-scrolled .topo {
  height: var(--header-height-scrolled);

  background: var(--header-bg-scrolled);
  border-bottom-color: rgba(255, 255, 255, 0.1);

  box-shadow: var(--header-shadow);
}

/* =========================================================
   CONTAINER INTERNO
========================================================= */

.topo-container,
.header-container {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: min(calc(100% - (var(--header-side-padding) * 2)), var(--header-container-width));

  height: 100%;
  margin: 0 auto;
}

/* Compatibilidade caso o HTML use .container dentro do header */

.topo > .container {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: min(calc(100% - (var(--header-side-padding) * 2)), var(--header-container-width));

  height: 100%;
  margin: 0 auto;
}

/* =========================================================
   ÁREA DA LOGO
========================================================= */

.logo-link,
.marca-link {
  position: relative;
  z-index: 1003;

  display: inline-flex;
  align-items: flex-start;
  justify-content: center;

  flex-shrink: 0;

  width: var(--logo-width-desktop);
  min-width: var(--logo-width-desktop);
  height: 100%;

  color: inherit;

  transition:
    width 0.28s ease,
    min-width 0.28s ease,
    transform 0.28s ease;
}

/*
   A logo vertical fica parcialmente para fora do cabeçalho
   no desktop, criando o efeito visual definido no projeto.
*/

.logo,
.logo-principal {
  position: absolute;
  top: 10px;
  left: 50%;

  display: block;

  width: var(--logo-width-desktop);
  max-width: none;
  height: auto;

  object-fit: contain;

  transform: translateX(-50%);
  transform-origin: top center;

  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));

  transition:
    width 0.28s ease,
    top 0.28s ease,
    transform 0.28s ease,
    filter 0.28s ease;
}

/* Estado reduzido da logo */

.topo.scrolled .logo-link,
.topo.scrolled .marca-link,
.topo.topo-reduzido .logo-link,
.topo.topo-reduzido .marca-link,
body.header-scrolled .topo .logo-link,
body.header-scrolled .topo .marca-link {
  width: var(--logo-width-scrolled);
  min-width: var(--logo-width-scrolled);
}

.topo.scrolled .logo,
.topo.scrolled .logo-principal,
.topo.topo-reduzido .logo,
.topo.topo-reduzido .logo-principal,
body.header-scrolled .topo .logo,
body.header-scrolled .topo .logo-principal {
  top: 5px;

  width: var(--logo-width-scrolled);

  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
}

/* Interação suave */

.logo-link:hover .logo,
.logo-link:focus-visible .logo,
.marca-link:hover .logo-principal,
.marca-link:focus-visible .logo-principal {
  transform: translateX(-50%) scale(1.025);
}

/* Foco acessível */

.logo-link:focus-visible,
.marca-link:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: 5px;
  border-radius: 8px;
}

/* =========================================================
   NAVEGAÇÃO DESKTOP
========================================================= */

.topo nav,
.nav-desktop,
.menu-desktop {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin-left: auto;
}

.topo nav ul,
.nav-desktop ul,
.menu-desktop ul,
.menu-principal {
  display: flex;
  align-items: center;

  gap: 8px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.topo nav li,
.nav-desktop li,
.menu-desktop li,
.menu-principal li {
  position: relative;

  margin: 0;
  padding: 0;
}

/* Links principais */

.topo nav a,
.nav-desktop a,
.menu-desktop a,
.menu-principal a {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 10px 14px;

  border: 1px solid transparent;
  border-radius: 999px;

  color: var(--header-text-muted);

  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;

  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}

/* Hover */

.topo nav a:hover,
.nav-desktop a:hover,
.menu-desktop a:hover,
.menu-principal a:hover {
  color: var(--header-text);

  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.08);

  transform: translateY(-1px);
}

/* Link ativo */

.topo nav a.active,
.topo nav a[aria-current='page'],
.nav-desktop a.active,
.nav-desktop a[aria-current='page'],
.menu-desktop a.active,
.menu-desktop a[aria-current='page'],
.menu-principal a.active,
.menu-principal a[aria-current='page'] {
  color: var(--header-accent);

  background: var(--header-accent-soft);
  border-color: rgba(212, 175, 55, 0.26);
}

/* Linha decorativa do link ativo */

.topo nav a.active::after,
.topo nav a[aria-current='page']::after,
.nav-desktop a.active::after,
.nav-desktop a[aria-current='page']::after,
.menu-desktop a.active::after,
.menu-desktop a[aria-current='page']::after,
.menu-principal a.active::after,
.menu-principal a[aria-current='page']::after {
  content: '';

  position: absolute;
  right: 18px;
  bottom: 5px;
  left: 18px;

  height: 2px;

  border-radius: 999px;
  background: var(--header-accent);
}

/* Foco por teclado */

.topo nav a:focus-visible,
.nav-desktop a:focus-visible,
.menu-desktop a:focus-visible,
.menu-principal a:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: 3px;

  color: var(--header-text);
}

/* =========================================================
   BOTÃO DE DESTAQUE OPCIONAL
========================================================= */

.topo nav a.nav-destaque,
.nav-desktop a.nav-destaque,
.menu-desktop a.nav-destaque,
.menu-principal a.nav-destaque {
  margin-left: 4px;

  color: #07160c;
  background: var(--header-accent);
  border-color: var(--header-accent);

  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.2);
}

.topo nav a.nav-destaque:hover,
.nav-desktop a.nav-destaque:hover,
.menu-desktop a.nav-destaque:hover,
.menu-principal a.nav-destaque:hover {
  color: #07160c;
  background: #e2c158;
  border-color: #e2c158;

  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.28);
}

/* =========================================================
   ESPAÇAMENTO PARA O CONTEÚDO DA PÁGINA
========================================================= */

/*
   Use esta classe no body apenas se a primeira seção não tiver
   espaçamento próprio para compensar o header fixo.
*/

body.tem-header-fixo {
  padding-top: var(--header-height);
}

/*
   Links com âncora não ficam escondidos atrás do cabeçalho.
*/

html {
  scroll-padding-top: calc(var(--header-height-scrolled) + 24px);
}

section[id],
main [id] {
  scroll-margin-top: calc(var(--header-height-scrolled) + 24px);
}

/* =========================================================
   BOTÃO HAMBÚRGUER
   No desktop fica sempre oculto.
   A exibição mobile será controlada por menu.css.
========================================================= */

.menu-toggle,
.nav-toggle,
.hamburger {
  display: none;
}

/* =========================================================
   OVERLAY
   No desktop fica oculto.
   O comportamento mobile será controlado por menu.css.
========================================================= */

.menu-overlay,
.nav-overlay {
  display: none;
}

/* =========================================================
   AJUSTES PARA TELAS DESKTOP MENORES
========================================================= */

@media (max-width: 1100px) {
  :root {
    --header-side-padding: 20px;
    --logo-width-desktop: 132px;
    --logo-width-scrolled: 86px;
  }

  .topo nav ul,
  .nav-desktop ul,
  .menu-desktop ul,
  .menu-principal {
    gap: 4px;
  }

  .topo nav a,
  .nav-desktop a,
  .menu-desktop a,
  .menu-principal a {
    padding-right: 11px;
    padding-left: 11px;

    font-size: 0.88rem;
  }
}

/* =========================================================
   PONTO DE TRANSIÇÃO PARA MOBILE
========================================================= */

@media (max-width: 900px) {
  :root {
    --header-height: 72px;
    --header-height-scrolled: 72px;
    --header-side-padding: 18px;
  }

  .topo,
  .topo.scrolled,
  .topo.topo-reduzido,
  body.header-scrolled .topo {
    height: var(--header-height);

    background: rgba(6, 22, 12, 0.97);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  }

  /*
       No mobile a logo deixa de ficar pendurada.
       Ela fica estática dentro da barra.
    */

  .logo-link,
  .marca-link,
  .topo.scrolled .logo-link,
  .topo.scrolled .marca-link,
  .topo.topo-reduzido .logo-link,
  .topo.topo-reduzido .marca-link,
  body.header-scrolled .topo .logo-link,
  body.header-scrolled .topo .marca-link {
    align-items: center;

    width: auto;
    min-width: 0;
    height: 100%;
  }

  .logo,
  .logo-principal,
  .topo.scrolled .logo,
  .topo.scrolled .logo-principal,
  .topo.topo-reduzido .logo,
  .topo.topo-reduzido .logo-principal,
  body.header-scrolled .topo .logo,
  body.header-scrolled .topo .logo-principal {
    position: static;

    width: auto;
    max-width: 112px;
    max-height: 58px;

    transform: none;

    filter: none;
  }

  .logo-link:hover .logo,
  .logo-link:focus-visible .logo,
  .marca-link:hover .logo-principal,
  .marca-link:focus-visible .logo-principal {
    transform: none;
  }

  /*
       A navegação desktop é ocultada.
       menu.css definirá a navegação aberta no celular.
    */

  .topo nav,
  .nav-desktop,
  .menu-desktop {
    display: none;
  }

  body.tem-header-fixo {
    padding-top: var(--header-height);
  }

  html {
    scroll-padding-top: calc(var(--header-height) + 18px);
  }

  section[id],
  main [id] {
    scroll-margin-top: calc(var(--header-height) + 18px);
  }

  .menu-overlay {
    display: block;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .topo nav {
    display: none;
  }
}

/* =========================================================
   CELULARES MENORES
========================================================= */

@media (max-width: 480px) {
  :root {
    --header-side-padding: 14px;
  }

  .logo,
  .logo-principal,
  .topo.scrolled .logo,
  .topo.scrolled .logo-principal,
  .topo.topo-reduzido .logo,
  .topo.topo-reduzido .logo-principal {
    max-width: 102px;
    max-height: 54px;
  }
}

/* =========================================================
   PREFERÊNCIA POR MENOS ANIMAÇÃO
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .topo,
  .logo-link,
  .marca-link,
  .logo,
  .logo-principal,
  .topo nav a,
  .nav-desktop a,
  .menu-desktop a,
  .menu-principal a {
    transition: none !important;
  }
}