/**
 * La Cura — Header público (barra branca fixa, logo real, PT/JA sempre visíveis)
 * Escopo: só as classes .lc-header-* abaixo — não toca em .as_* (tema antigo).
 * Paleta amostrada do logo real (public/assets/images/logo/logo-pt.png):
 *   azul #0040A4, dourado #D88400.
 */
:root{
  --lc-bg:#FFFFFF;
  --lc-blue:#0040A4;
  --lc-blue-deep:#002C70;
  --lc-gold:#C97A00;
  --lc-gold-soft:rgba(201,122,0,.12);
  --lc-graphite:#43474F;
  --lc-graphite-soft:#6C717A;
  --lc-hairline:rgba(0,64,164,.14);
}

/* position:fixed em vez de sticky: um ancestral (#app, .as_main_wrapper) tem
   overflow-x:clip, que quebra sticky — fixed não depende do overflow dos
   ancestrais (só de transform/filter, que não existem aqui). O padding-top
   logo abaixo compensa o espaço que o header deixa de ocupar no fluxo. */
.lc-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  width:100%;
  background:var(--lc-bg);
  border-bottom:1px solid var(--lc-hairline);
  transition:box-shadow .35s ease;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body.lcr-public-theme{
  padding-top:70px;
}
.lc-header.is-scrolled{
  box-shadow:0 6px 20px -14px rgba(0,44,112,.35);
}
.lc-header-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  height:70px;
  display:flex;
  align-items:center;
  gap:28px;
  transition:height .35s cubic-bezier(.4,0,.2,1);
}
.lc-header.is-scrolled .lc-header-inner{
  height:54px;
}

.lc-brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  line-height:0;
}
.lc-brand img{
  height:42px;
  width:auto;
  transition:height .35s cubic-bezier(.4,0,.2,1);
}
.lc-header.is-scrolled .lc-brand img{
  height:32px;
}

.lc-nav{
  flex:1 1 auto;
  min-width:0;
}
.lc-nav > ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
}
.lc-nav > ul > li{
  position:relative;
}
.lc-nav > ul > li > a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:10px 2px;
  font-size:14.5px;
  font-weight:500;
  color:var(--lc-blue);
  letter-spacing:.01em;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
html[lang="ja"] .lc-nav > ul > li > a{ font-size:14px; }
.lc-nav > ul > li > a:hover,
.lc-nav > ul > li > a:focus-visible{
  color:var(--lc-blue-deep);
  border-bottom-color:var(--lc-gold);
}
.lc-chevron{
  width:8px;height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
  opacity:.6;
  flex:0 0 auto;
}
.lc-nav li.lc-has-sub:hover .lc-chevron,
.lc-nav li.lc-has-sub:focus-within .lc-chevron,
.lc-nav li.lc-has-sub.lc-open .lc-chevron{
  transform:rotate(-135deg) translateY(1px);
}

.lc-subnav{
  list-style:none;
  margin:0;
  padding:8px;
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,6px);
  min-width:230px;
  background:var(--lc-bg);
  border:1px solid var(--lc-hairline);
  border-top:2px solid var(--lc-gold);
  box-shadow:0 18px 40px -20px rgba(0,44,112,.3);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:5;
}
.lc-nav li.lc-has-sub:hover .lc-subnav,
.lc-nav li.lc-has-sub:focus-within .lc-subnav,
.lc-nav li.lc-has-sub.lc-open .lc-subnav{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.lc-subnav a{
  display:block;
  padding:9px 14px;
  font-size:13.5px;
  color:var(--lc-blue);
  border-radius:3px;
  text-decoration:none;
}
.lc-subnav a:hover,
.lc-subnav a:focus-visible{
  background:var(--lc-gold-soft);
  color:var(--lc-blue-deep);
}

.lc-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:16px;
}

.lc-lang{
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--lc-hairline);
  border-radius:20px;
}
.lc-lang-option{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:none;
  background:transparent;
  border-radius:50%;
  cursor:pointer;
  opacity:.55;
  transition:opacity .2s ease, box-shadow .2s ease;
  text-decoration:none;
}
.lc-lang-option svg{
  width:19px;
  height:14px;
  display:block;
  border-radius:2px;
}
.lc-lang-option:hover{ opacity:.8; }
.lc-lang-option.is-active{
  opacity:1;
  box-shadow:0 0 0 1.5px var(--lc-gold);
  cursor:default;
}

.lc-divider{
  width:1px;
  height:22px;
  background:var(--lc-hairline);
}

.lc-account{
  display:flex;
  align-items:center;
  gap:14px;
}
.lc-account a{
  text-decoration:none;
  font-size:13.5px;
  font-weight:500;
  white-space:nowrap;
}
.lc-login{
  color:var(--lc-graphite);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.lc-login:hover{ color:var(--lc-blue); }
.lc-login svg{ width:17px;height:17px;flex:0 0 auto; }
.lc-register{
  color:#fff !important;
  background:var(--lc-blue);
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  border-radius:0;
  transition:background .2s ease;
}
.lc-register svg{ width:16px;height:16px;flex:0 0 auto; }
.lc-register:hover{ background:var(--lc-blue-deep); }

.lc-nav-toggle{
  display:none;
  border:none;
  background:transparent;
  color:var(--lc-blue);
  padding:6px;
  cursor:pointer;
}

/* ============ mobile ============ */
@media (max-width:900px){
  .lc-header-inner{ gap:10px; padding:0 14px; }
  /* .lc-nav vira um painel fixed fora do fluxo nesse breakpoint, então só
     sobram 3 itens na barra (logo, hambúrguer, ações) — sem isso eles
     ficam todos colados à esquerda, perto da logo, com um vão vazio à
     direita. margin-left:auto (sozinho, sem justify-content:space-between
     — os dois juntos dobram o espaço empurrado) empurra hambúrguer+ações
     pro canto direito, deixando a logo isolada no canto esquerdo. */
  .lc-nav-toggle{ margin-left:auto; padding:6px 4px; }

  /* A logo em tamanho de desktop (42px de altura) mais o seletor de
     idioma, divisor e os dois botões de conta não cabem lado a lado numa
     tela de ~375px com respiro — reduzimos cada elemento um pouco em vez
     de empilhar tudo colado. */
  .lc-brand img{ height:30px; }
  .lc-actions{ gap:8px; }
  .lc-lang{ padding:2px; gap:1px; }
  .lc-lang-option{ width:26px; height:26px; }
  .lc-lang-option svg{ width:16px; height:12px; }
  .lc-divider{ display:none; }
  .lc-nav{
    position:fixed;
    inset:70px 0 0 0;
    background:var(--lc-bg);
    padding:18px 20px 28px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s ease;
    border-top:1px solid var(--lc-hairline);
  }
  .lc-nav.lc-open{ transform:translateX(0); }
  .lc-nav > ul{
    flex-direction:column;
    align-items:stretch;
    gap:2px;
  }
  .lc-nav > ul > li > a{
    padding:13px 4px;
    border-bottom:1px solid var(--lc-hairline);
    width:100%;
    justify-content:space-between;
  }
  .lc-subnav,
  .lc-nav li.lc-has-sub:hover .lc-subnav,
  .lc-nav li.lc-has-sub:focus-within .lc-subnav,
  .lc-nav li.lc-has-sub.lc-open .lc-subnav{
    /* A regra de desktop ("aberto/hover") tem mais especificidade e
       continua aplicando translate(-50%,0) mesmo com position:static,
       porque transform não liga pra position — isso empurrava o
       submenu ~160px pra fora da tela à esquerda (ficava "em branco"
       porque o texto saía do viewport, não porque a cor estava errada). */
    position:static;
    left:auto;
    top:auto;
    transform:none;
    opacity:1;
    visibility:visible;
    box-shadow:none;
    border:none;
    border-left:2px solid var(--lc-gold-soft);
    margin:4px 0 4px 10px;
    width:auto;
    min-width:0;
  }
  .lc-subnav{ display:none; }
  .lc-nav li.lc-has-sub.lc-open .lc-subnav{ display:block; }
  .lc-nav-toggle{ display:inline-flex; }

  .lc-actions{ gap:10px; }
  .lc-account{ gap:8px; }
  .lc-login,
  .lc-register{
    width:38px;
    height:38px;
    padding:0;
    justify-content:center;
    border-radius:50%;
  }
  .lc-account .lc-label{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
  }
}