/* ==========================================================================
   BARBEARIA - MASTER STYLESHEET
   Design System Dark Slate & Glassmorphism com Header & CTA Inkore Fitness Style
   ========================================================================== */

@import url('css/variables.css');
@import url('css/base.css');
@import url('css/components.css');
@import url('css/layout.css');
@import url('css/modal.css');

/* --------------------------------------------------------------------------
   1. BARRA EXTERNA DO HEADER (GEOMETRIA & PROPORÇÕES INKORE FITNESS)
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 48px) !important;
  max-width: 1240px !important;
  z-index: 1000 !important;
  
  /* Curvatura pronunciada e elegante de 24px (sem virar pílula total) */
  border-radius: 24px !important;
  
  /* Vidro Translúcido Fosco Escuro de Alta Fidelidade */
  background: rgba(14, 14, 16, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
  
  /* Esguio verticalmente com padding preciso */
  padding: 10px 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: all var(--transition-base) !important;
}

.site-header.scrolled {
  background: rgba(10, 10, 13, 0.92) !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 20px rgba(212, 175, 55, 0.08) !important;
}

/* --------------------------------------------------------------------------
   2. LINKS DE NAVEGAÇÃO CENTRAIS
   -------------------------------------------------------------------------- */
.site-header .nav-menu {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

.site-header .nav-link {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 4px !important;
  position: relative !important;
  transition: color var(--transition-fast) !important;
}

.site-header .nav-link:hover {
  color: var(--text-pure) !important;
}

/* --------------------------------------------------------------------------
   3. BOTÃO DE AÇÃO DA DIREITA (CTA)
   Formato retangular com cantos arredondados de 12px em harmonia com o container
   -------------------------------------------------------------------------- */
.site-header .btn-header-cta,
.btn-header-cta,
.nav-mobile-cta .btn {
  border-radius: 12px !important;
  padding: 10px 22px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   4. ADAPTAÇÃO RESPONSIVA MOBILE & TABLET
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .site-header {
    top: 14px !important;
    width: calc(100% - 24px) !important;
    border-radius: 18px !important;
    padding: 10px 18px !important;
  }

  .site-header .nav-menu {
    border-radius: 18px !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .site-header {
    top: 10px !important;
    width: calc(100% - 16px) !important;
    border-radius: 16px !important;
    padding: 8px 14px !important;
  }
}