/* ==========================================================================
   Senso Incomum — Header
   Arquivo exclusivo para estilos do header.hbs
   Complementa o screen.css (Nurui base) sem conflitar com estilos globais.

   Estrutura (v4 — nav com 8 itens):
   .header-wrap
     .header-top    → logo (esquerda) + Entrar/Inscreva-se/busca (direita)
     .header-nav    → linha própria, largura total, com o menu de navegação
                       (no mobile: só o hamburguer + drawer dos links; login
                       e busca ficam sempre visíveis em .header-top)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Variáveis locais do header
   -------------------------------------------------------------------------- */
:root {
   --si-gold:        #b59f76;
   --si-gold-light:  #cdb890;
   --si-dark:        #0f1113;
   --si-border:      rgba(181, 159, 118, 0.5);
   --si-text-nav:    #f0ece4;
   --si-text-nav-silver: #d8dde3;
   --si-text-sub:    #a89a7c;
}


/* --------------------------------------------------------------------------
   Wrapper do header
   -------------------------------------------------------------------------- */
.header-wrap {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: 32px;
   min-height: 0 !important;
   padding: 16px 0 !important;
   border-bottom: 0;
   position: relative;
   overflow: visible;
   background-color: transparent;
}

.header-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 100%;
}

.header-logo {
   flex: 0 0 auto !important;
   padding-left: 26px;
   max-width: 60%;
}

.header-nav {
   width: 100%;
}

.header-wrap::before {
   content: '';
   position: absolute;
   inset: -16px;
   z-index: 0;
   display: none;
}

.header-wrap > * {
   position: relative;
   z-index: 1;
}


/* --------------------------------------------------------------------------
   Branding
   -------------------------------------------------------------------------- */
.site-branding {
   display: flex;
   align-items: center;
   gap: 2px;
   text-decoration: none;
   color: inherit;
}

.site-logo {
   display: block;
   width: auto;
   height: 88px;
   max-width: 100%;
   flex-shrink: 0;
   filter:
      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.75))
      drop-shadow(0 4px 6px rgba(0, 0, 0, 0.82));
   transition: filter 0.2s ease, opacity 0.2s ease;
}

.site-branding:hover .site-logo {
   filter:
      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.78))
      drop-shadow(0 4px 6px rgba(0, 0, 0, 0.86));
}


/* --------------------------------------------------------------------------
   Ações do header (Entrar/Inscreva-se + busca) — sempre visíveis,
   independentes do menu de navegação e do seu hamburguer.
   -------------------------------------------------------------------------- */
.header-actions-list {
   display: flex;
   align-items: center;
   gap: 4px;
   margin: 0;
   padding: 0;
   list-style: none;
   flex: 0 0 auto;
}

.header-actions-list .nav-list-item,
.header-actions-list .search-open {
   position: static;
   display: inline-flex;
   align-items: center;
   background: none;
}

.header-actions-list .section-members-login-panel {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 4px;
   flex: 0 0 auto;
   white-space: nowrap;
   margin: 0;
}

.header-actions-list .search-open {
   margin-left: 8px;
   padding: 4px;
}

.header-actions-list .search-open svg {
   width: 20px;
   height: 20px;
   margin: 0;
}

.header-actions-list .search-open span {
   display: none !important;
}


/* --------------------------------------------------------------------------
   Navegação — links
   -------------------------------------------------------------------------- */
.header-nav .nav-link {
   font-family: var(--font-family-header);
   color: var(--si-text-nav-silver);
   font-size: 1.7rem;
   font-weight: 700;
   letter-spacing: 0.02em;
   padding: 6px 10px;
   -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.85);
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.4);
   transition: color 0.15s ease, text-shadow 0.15s ease;
}

.header-nav .nav-link:hover {
   color: var(--si-gold);
}

@media (min-width: 1025px) {
   /* Gap entre a linha dourada e as opções do nav (só a de cima existe) */
   .header-nav .nav-wrap {
      border-top: 1px solid var(--si-border);
      padding-top: 18px;
   }

   .header-nav .nav-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px 6px;
      width: 100%;
      min-width: 0;
   }

   /* .nav-list agora vive dentro de .nav-drawer (não é mais filho direto de
      .nav-wrap), então a proteção antiga do tema base
      (.nav-wrap > .nav-list > .nav-list-item) não bate mais e os itens
      caíam de volta pro position:absolute genérico do screen.css. */
   .header-nav .nav-list-item {
      position: relative;
      display: inline-block;
      border-radius: 0;
      background-color: transparent;
   }

   .header-nav .nav-link {
      font-size: clamp(1.6rem, 0.5vw + 1.3rem, 2.1rem);
   }
}


/* --------------------------------------------------------------------------
   Painel de members no header
   Sign in / Sign up: só tokens em button.css (.si-btn-red / .si-btn-dark).
   Aqui: posicionamento do painel + conta / sign out (sem .si-btn-* no template).
   -------------------------------------------------------------------------- */
.section-members-login-panel {
   padding: 0;
}

.members-account,
.members-signout {
   font-family: var(--font-family-button) !important;
   font-size: 1.5rem !important;
   color: var(--si-text-nav-silver) !important;
   font-weight: 700 !important;
   letter-spacing: 0.02em;
   -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.9);
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
   background-color: transparent !important;
   border: 1px solid rgba(240, 236, 228, 0.3) !important;
   border-radius: 6px !important;
   padding: 6px 12px !important;
   transition: border-color 0.15s ease, color 0.15s ease !important;
}

.members-account:hover,
.members-signout:hover {
   color: var(--si-gold) !important;
   border-color: var(--si-gold) !important;
   background-color: transparent !important;
}


/* --------------------------------------------------------------------------
   blog-description — ocultar (substituído pelo site-subtitle)
   -------------------------------------------------------------------------- */
.blog-description {
   display: none !important;
}


/* --------------------------------------------------------------------------
   RWD — Header
   -------------------------------------------------------------------------- */
.nav-drawer-top,
.nav-drawer-close {
   display: none;
}

@media (min-width: 1025px) {
   .section-header.wrap {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
   }

   /* Régua da navbar = borda da moldura dourada da home (index.css,
      --home-frame-width: 67.5vw * 1.1 = 74.25vw), não a régua de 60vw do
      corpo de texto (.wrap). (100vw - 74.25vw) / 2 = 12.875vw por lado. */
   .section-header.wrap .header-wrap {
      padding-left: 12.875vw !important;
      padding-right: 12.875vw !important;
   }

   .header-logo {
      padding-left: 0;
   }
}

@media (max-width: 1024px) {
   .section-header.wrap {
      width: 100% !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      box-sizing: border-box;
      position: relative;
      z-index: 50;
   }

   /* Mobile: tudo numa linha só — Logo | Entrar | Inscreva-se | Lupa | ☰
      gap maior aqui = mais respiro antes do hamburguinho, que continua
      ancorado na borda direita (space-between) sem mudar de posição. */
   .header-wrap {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 10px 12px !important;
   }

   .header-top {
      flex: 1 1 auto;
      min-width: 0;
      gap: 6px;
   }

   .header-nav {
      width: auto;
      flex: 0 0 auto;
      position: relative;
      z-index: 2;
   }

   .header-nav .nav-wrap {
      display: flex;
      align-items: center;
   }

   .hamburger {
      padding: 6px 0 0 0 !important;
   }

   /* Drawer full-screen (inspirado em newcriterion.com/mobile): entra da
      direita, ocupa a tela toda, linhas grandes com divisor, X pra fechar. */
   .nav-drawer {
      position: fixed;
      inset: 0;
      z-index: 999;
      display: flex;
      flex-direction: column;
      background-color: #15120e;
      background-image: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), url('../images/subtle-grunge.png');
      background-repeat: repeat;
      transform: translateX(100%);
      transition: transform 0.32s ease;
      overflow-y: auto;
   }

   [id^='toggle']:checked + .nav-drawer {
      transform: translateX(0);
   }

   .nav-drawer-top {
      display: flex;
      justify-content: flex-end;
      flex: 0 0 auto;
      padding: 16px 20px;
   }

   .nav-drawer-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      cursor: pointer;
   }

   .nav-drawer-close svg {
      width: 22px;
      height: 22px;
      fill: var(--si-text-nav-silver);
   }

   .header-nav .nav-list {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0 0 40px;
      list-style: none;
   }

   .header-nav .nav-list-item {
      position: relative;
      display: block;
      width: 100%;
      border-radius: 0;
      background-color: transparent;
      border-bottom: 1px solid rgba(240, 236, 228, 0.14);
   }

   .header-nav .nav-link {
      display: block;
      padding: 20px 28px;
      font-size: 1.25rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      -webkit-text-stroke: 0;
      text-shadow: none;
   }

   .header-nav .nav-dot {
      right: 28px;
      top: 50%;
      transform: translateY(-50%);
   }

   .header-wrap .hamburger-inner,
   .header-wrap .hamburger-inner::before,
   .header-wrap .hamburger-inner::after {
      background-color: rgba(240, 236, 228, 0.92) !important;
   }

   .header-logo {
      min-width: 0;
      max-width: 130px;
   }

   .site-logo {
      height: 42px;
   }

   .header-actions-list {
      gap: 18px;
   }

   /* Entrar/Inscreva-se: fonte +20% e ~10% mais baixos (estavam alinhados
      mais acima que a lupa/hamburguinho) */
   .header-actions-list .section-members-login-panel {
      margin-top: 9px;
   }

   .header-actions-list .members-signin,
   .header-actions-list .members-signup,
   .header-actions-list .members-account,
   .header-actions-list .members-signout {
      font-size: clamp(1rem, 3.5vw, 1.58rem) !important;
      padding: 5px 8px !important;
      white-space: nowrap;
   }

   .header-actions-list .search-open {
      margin-left: 6px;
      padding: 4px 2px;
   }
}

@media (max-width: 479px) {
   .header-wrap {
      padding: 8px 10px !important;
      gap: 4px;
   }

   .header-top {
      gap: 4px;
   }

   .header-logo {
      max-width: 88px;
   }

   .site-logo {
      height: 34px;
   }

   .header-actions-list {
      gap: 2px;
   }

   .header-actions-list .members-signin,
   .header-actions-list .members-signup,
   .header-actions-list .members-account,
   .header-actions-list .members-signout {
      padding: 4px 6px !important;
   }
}