/**
 * Header Component — v3.5
 *
 * Fix principal: backdrop-filter movido para ::before pseudo-element.
 * Quando backdrop-filter fica no elemento pai, ele cria um "containing block"
 * em Safari/WebKit, fazendo o position:fixed do nav-panel ficar preso dentro
 * do header. Com ::before, o efeito visual é idêntico mas o header não
 * interfere no posicionamento dos filhos fixed.
 *
 * Fix bounce: min-height e padding vertical removidos do header-grid.
 *
 * @package FocofyFactory
 * @version 3.5
 */

/* ══════════════════════════════════════════════════════════════════════════
   VARIÁVEIS LOCAIS DO HEADER
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --header-h:                 80px;
  --header-h-compact:         64px;
  --header-h-desktop:         82px;
  --header-h-desktop-compact: 60px;

  --header-bg:         color-mix(in srgb, var(--color-surface-dark) 55%, transparent);
  --header-bg-compact: color-mix(in srgb, var(--color-surface-dark) 78%, transparent);
  --header-border:     color-mix(in srgb, white 6%, transparent);
  --header-shadow:     var(--shadow-xl);
}

/* ══════════════════════════════════════════════════════════════════════════
   SITE HEADER
   backdrop-filter aplicado no ::before para NÃO criar containing block
   que aprisionaria o position:fixed do nav-panel mobile.
   ══════════════════════════════════════════════════════════════════════════ */

.site-header {
  position:   sticky;
  top:        0;
  z-index:    1000;
  height:     var(--header-h);
  display:    flex;
  align-items: center;
  /* SEM backdrop-filter aqui — vai no ::before */
  border-bottom: 1px solid var(--header-border);
  transition:
    height           0.22s ease,
    background-color 0.22s ease,
    box-shadow       0.22s ease;
}

/* Camada de fundo com blur — pseudo-elemento para não criar containing block */
.site-header::before {
  content:              '';
  position:             absolute;
  inset:                0;
  z-index:              -1;
  background:           var(--header-bg);
  backdrop-filter:      blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:           background 0.22s ease;
}

.site-header.is-compact::before {
  background: var(--header-bg-compact);
}

/* Container interno */
.site-header .focofy-container {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     0 !important;
  padding-bottom:  0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGO
   ══════════════════════════════════════════════════════════════════════════ */

.site-header .site-logo img,
.site-header .custom-logo {
  max-height: 60px;
  width:      auto;
  transition: max-height 0.22s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   GRID INTERNO
   min-height e padding vertical REMOVIDOS — causavam bounce no scroll
   ══════════════════════════════════════════════════════════════════════════ */

.header-grid {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  width:           100%;
}

.site-brand {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.brand-text {
  font-weight:    var(--fw-extrabold);
  font-size:      var(--font-size-xl);
  letter-spacing: -0.01em;
  color:          var(--color-text-inverse);
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVEGAÇÃO DESKTOP
   ══════════════════════════════════════════════════════════════════════════ */

.site-header nav ul,
.main-nav ul,
.primary-menu {
  display:     flex;
  gap:         var(--space-6);
  list-style:  none;
  padding:     0;
  margin:      0;
  align-items: center;
}

.site-header a { text-decoration: none; }

.site-header nav a,
.main-nav a {
  opacity:       0.9;
  font-weight:   var(--fw-medium);
  padding:       var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color:         var(--color-text-inverse);
  transition:
    opacity   var(--transition-fast),
    transform var(--transition-fast),
    background var(--transition-fast);
}

.site-header nav a:hover,
.main-nav a:hover {
  opacity:    1;
  transform:  translateY(-1px);
  background: color-mix(in srgb, white 5%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .site-header {
    height: var(--header-h-desktop);
  }

  .site-header .site-logo img,
  .site-header .custom-logo {
    max-height: 74px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ESTADO COMPACTO (scroll)
   ══════════════════════════════════════════════════════════════════════════ */

.site-header.is-compact {
  box-shadow: var(--header-shadow);
  height:     var(--header-h-compact);
}

@media (min-width: 1024px) {
  .site-header.is-compact {
    height: var(--header-h-desktop-compact);
  }

  .site-header.is-compact .site-logo img,
  .site-header.is-compact .custom-logo {
    max-height: 36px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — compensação da altura do header sticky
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-hero {
  padding-top: calc(var(--header-h) + var(--space-16));
}

@media (min-width: 1024px) {
  .focofy-hero {
    padding-top: calc(var(--header-h-desktop) + var(--space-12));
  }
}