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


/* --------------------------------------------------------------------------
   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 — altura e borda inferior
   -------------------------------------------------------------------------- */
.header-wrap {
   min-height: 112px !important; /* aumenta base para o bloco esquerdo ocupar ~95% da altura */
   padding: 14px 0 !important;
   align-items: center !important;
   border-bottom: 0;
   position: relative;
   overflow: hidden;
   background-color: transparent;
}

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

.header-nav {
   flex: 1 1 auto !important;
}

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

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


/* --------------------------------------------------------------------------
   Branding — âncora + bloco de texto
   -------------------------------------------------------------------------- */
.site-branding {
   display: flex;
   align-items: center;
   gap: 2px;
   text-decoration: none;
   color: inherit;
}

/* Ícone da âncora — versão monocromática para harmonizar com o fundo */
.logo-anchor {
   width: auto;
   height: 106px;
   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));
   opacity: 1;
   transition: filter 0.2s ease, opacity 0.2s ease;
}

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

/* Logo unificada (âncora + texto) */
.site-logo {
   display: block;
   width: auto;
   height: 106px;
   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));
   opacity: 1;
   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));
   opacity: 1;
}

/* Bloco de texto ao lado da âncora */
.site-title-block {
   display: flex;
   flex-direction: column;
   justify-content: center;
   line-height: 0.9;
   white-space: nowrap;
}

.site-title-main {
   font-family: var(--font-family-special);
   font-size: 7.1rem;
   font-weight: 700;
   color: #bbb7b5;
   line-height: 0.82;
   letter-spacing: 0.03em;
   text-transform: lowercase;
   -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.65);
   text-shadow:
      0 1px 0 rgba(0, 0, 0, 0.55),
      0 0 7px rgba(0, 0, 0, 0.32);
}

.site-title-subline {
   font-family: var(--font-family-special);
   font-size: 4.8rem;
   font-weight: 700;
   color: #747370;
   line-height: 0.88;
   margin-top: 0px;
   text-transform: lowercase;
   white-space: nowrap;
   -webkit-text-stroke: 0.85px rgba(0, 0, 0, 0.6);
   text-shadow:
      0 1px 0 rgba(0, 0, 0, 0.80),
      0 0 6px rgba(0, 0, 0, 0.46);
}


/* --------------------------------------------------------------------------
   Navegação — links
   -------------------------------------------------------------------------- */
.header-nav .nav-link {
   font-family: var(--font-family-header);
   color: var(--si-text-nav-silver);
   font-size: 2.5rem;
   font-weight: 700;
   letter-spacing: 0.02em;
   padding: 8px 12px;
   -webkit-text-stroke: 0.65px rgba(0, 0, 0, 0.92);
   text-shadow:
      0 1px 0 rgba(0, 0, 0, 0.95),
      0 0 8px rgba(0, 0, 0, 0.8),
      0 0 16px rgba(0, 0, 0, 0.55);
   transition: color 0.15s ease, text-shadow 0.15s ease;
}

.header-nav .nav-link:hover {
   color: var(--si-gold);
   text-shadow:
      0 1px 0 rgba(0, 0, 0, 0.96),
      0 0 9px rgba(0, 0, 0, 0.85),
      0 0 18px rgba(0, 0, 0, 0.6);
}

.header-nav .search-open span {
   font-family: var(--font-family-header);
}


/* --------------------------------------------------------------------------
   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-left: 12px !important;
}

.members-account,
.members-signout {
   font-family: var(--font-family-button) !important;
   font-size: 2.02rem !important;
   color: var(--si-text-nav-silver) !important;
   font-weight: 700 !important;
   letter-spacing: 0.02em;
   -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.92);
   text-shadow:
      0 1px 0 rgba(0, 0, 0, 0.95),
      0 0 8px rgba(0, 0, 0, 0.75);
   background-color: transparent !important;
   border: 1px solid rgba(240, 236, 228, 0.3) !important;
   border-radius: 6px !important;
   padding: 6px 14px !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;
}

@media (min-width: 1025px) {
   .header-logo {
      padding-left: clamp(22px, 4vw, 48px) !important;
   }

   .header-nav .nav-list-item.search-open {
      margin-left: 10px;
      padding-right: 10px;
   }

   .header-nav .search-open svg {
      width: 22px;
      height: 22px;
      margin: 0 0 -5px 0;
   }
}


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


/* --------------------------------------------------------------------------
   RWD — Header
   -------------------------------------------------------------------------- */
/*
   O header usa .section-header.wrap. O .wrap global em screen.css encolhe a
   largura em viewports abaixo de 1024px (margens laterais). No desktop já existe
   exceção para .section-header.wrap — replicamos aqui para mobile/tablet.
*/
@media (max-width: 1024px) {
   /*
      Menu mobile: o .header-wrap tinha overflow:hidden (recorta o ul absoluto).
      Na home, .section-content-wrap > * usa z-index:1 — header e body empatam e
      o conteúdo seguinte pode tapar o menu; o header fica acima do fluxo.
   */
   .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;
   }

   .header-wrap {
      min-height: 78px !important;
      overflow: visible !important;
   }

   .header-nav {
      position: relative;
      z-index: 2;
   }

   .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 {
      padding-left: 10px !important;
      flex: 0 0 300px !important;
      max-width: 300px;
   }

   .logo-anchor {
      height: 74px;
   }

   .site-logo {
      height: 74px;
   }

   .site-title-main {
      font-size: 3.1rem;
   }

   .site-title-subline {
      font-size: 1.86rem;
      letter-spacing: 0.1em;
   }

   /* Menu sanduíche: sign in/up vêm só de button.css; só encaixe no drawer */
   .nav-wrap > .nav-list .section-members-login-panel .members-signin,
   .nav-wrap > .nav-list .section-members-login-panel .members-signup {
      white-space: nowrap !important;
      max-width: 100%;
      box-sizing: border-box;
   }

   .nav-wrap > .nav-list .section-members-login-panel .members-account,
   .nav-wrap > .nav-list .section-members-login-panel .members-signout {
      white-space: nowrap !important;
      max-width: 100%;
      box-sizing: border-box;
      letter-spacing: 0.01em !important;
      -webkit-text-stroke-width: 0.35px !important;
      font-size: clamp(0.75rem, 3.5vw, 1.55rem) !important;
      padding-left: clamp(4px, 1.2vw, 14px) !important;
      padding-right: clamp(4px, 1.2vw, 14px) !important;
   }
}

@supports (font-size: 1cqi) {
   @media (max-width: 1024px) {
      .nav-wrap > .nav-list {
         container-type: inline-size;
         container-name: nav-drawer;
      }

      .nav-wrap > .nav-list .section-members-login-panel .members-account,
      .nav-wrap > .nav-list .section-members-login-panel .members-signout {
         font-size: clamp(0.7rem, 12cqi, 2.02rem) !important;
         padding-left: clamp(4px, 2.5cqi, 14px) !important;
         padding-right: clamp(4px, 2.5cqi, 14px) !important;
      }
   }
}

/* Telemóvel / retrato estreito: “senso incomum” numa só linha (não só ≤479px) */
@media (max-width: 767px) {
   .header-logo {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      max-width: calc(100% - 58px) !important;
      padding-left: 8px !important;
      padding-right: 4px !important;
   }

   .site-branding {
      flex-wrap: nowrap;
      min-width: 0;
   }

   .site-branding .site-title-block {
      flex-direction: row !important;
      align-items: baseline;
      flex-wrap: nowrap !important;
      white-space: nowrap !important;
      gap: 0.22em;
      /* min-content: largura mínima = frase inteira; evita encolher e partir “senso”/“incomum” */
      min-width: min-content;
      line-height: 1;
   }

   .site-branding .site-title-main,
   .site-branding .site-title-subline {
      white-space: nowrap !important;
      flex-shrink: 0;
   }

   .logo-anchor {
      height: 52px;
      flex-shrink: 0;
   }

   .site-logo {
      height: 52px;
      flex-shrink: 0;
   }

   .site-title-main {
      font-size: clamp(1.85rem, 5.2vw, 3.05rem);
      line-height: 1;
   }

   .site-title-subline {
      font-size: clamp(1.55rem, 4.5vw, 2.55rem);
      line-height: 1;
      margin-top: 0 !important;
      letter-spacing: 0.03em;
   }
}

@media (max-width: 479px) {
   .header-wrap {
      min-height: 66px !important;
   }
}