/* Menu da Cabanas da Serra, igual em todas as paginas (o HTML sai de lib/cds-chrome.js).

   A base do nav (barra fixa, logo, botao Reservar) mora na home e em cds-blog.css. Aqui entra so o
   que o menu acrescenta: a lista de links, o botao sanduiche e o painel do celular.

   Ordem de leitura: logo, botao do menu, links, Reservar. No celular a vista e outra, de
   proposito: logo, Reservar (a acao principal, sempre a vista), botao do menu.

   Abaixo de 1000 px os cinco links nao cabem ao lado do logo (o lockup pede 214 px, medido), entao
   viram painel. Sem JavaScript o botao nem aparece e os links ficam em uma faixa que rola de lado:
   nada fica escondido por falta de script. */

.nav-toggle{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:10px;background:transparent;color:var(--cream-50);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.nav-bars,.nav-bars::before,.nav-bars::after{display:block;width:22px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .2s ease,opacity .2s ease,background-color .2s ease}
.nav-bars{position:relative}
.nav-bars::before,.nav-bars::after{content:'';position:absolute;left:0}
.nav-bars::before{top:-7px}
.nav-bars::after{top:7px}
#navbar[data-open] .nav-bars{background:transparent}
#navbar[data-open] .nav-bars::before{top:0;transform:rotate(45deg)}
#navbar[data-open] .nav-bars::after{top:0;transform:rotate(-45deg)}

.nav-menu{list-style:none;margin:0;padding:0}
.nav-menu a{color:var(--cream-50);text-decoration:none;font-weight:500}
/* A pagina atual leva sublinhado ambar, nao cor ambar: o ambar-400 sobre o verde da barra mede
   3,6:1, abaixo dos 4,5:1 que texto pequeno pede. Creme sobre verde passa com folga. */
.nav-menu a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-color:var(--ambar-400);
  text-decoration-thickness:2px;text-underline-offset:7px}

.nav-toggle:focus-visible,.nav-menu a:focus-visible,#navbar .nav-cta:focus-visible,#navbar .nav-logo:focus-visible{
  outline:2px solid var(--ambar-400);outline-offset:3px}

/* ── celular e tablet: painel abaixo da barra ──
   999.98 e nao 999: com 999 px exatos mais uma fracao (zoom, DPR, janela redimensionada) o
   navegador nao casava nem esta regra nem a de min-width:1000px, e o nav ficava sem estilo. */
@media(max-width:999.98px){
  #navbar{gap:10px}
  #navbar .nav-logo{margin-right:auto;flex:none;order:0}
  #navbar .nav-cta{order:1}
  .nav-toggle{order:2}
  html.js .nav-toggle{display:inline-flex}
  html.js .nav-menu{position:absolute;top:100%;left:0;right:0;order:3;
    background:var(--serra-800);border-top:1px solid rgba(243,237,225,.14);
    box-shadow:0 18px 30px rgba(0,0,0,.28);padding:6px 24px 14px;
    max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
  html.js #navbar[data-open] .nav-menu{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  html.js .nav-menu li+li{border-top:1px solid rgba(243,237,225,.12)}
  html.js .nav-menu a{display:flex;align-items:center;min-height:54px;font-size:1.0625rem}
  /* Sem JavaScript: faixa de links que rola de lado, sob a barra. */
  html:not(.js) #navbar{flex-wrap:wrap}
  html:not(.js) .nav-menu{order:3;flex-basis:100%;display:flex;gap:22px;overflow-x:auto;white-space:nowrap;padding:2px 0 4px}
  html:not(.js) .nav-menu a{font-size:.875rem;padding:8px 0;display:inline-block}
  /* A faixa de links desce a barra para ~130 px; o titulo da pagina nao pode ficar por baixo dela. */
  html:not(.js) .pg-head,html:not(.js) .post-head,html:not(.js) .hub-head{margin-top:44px}
}
@media(max-width:359px){
  #navbar{padding-left:16px;padding-right:16px;gap:8px}
}

/* ── desktop: links em linha entre o logo e o Reservar ── */
@media(min-width:1000px){
  .nav-menu{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:28px}
  .nav-menu a{font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:rgba(243,237,225,.92);padding:6px 0;
    text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:7px;
    transition:text-decoration-color .2s ease,color .2s ease}
  .nav-menu a:hover{color:#fff;text-decoration-color:var(--ambar-400)}
  .nav-menu a[aria-current="page"]{color:#fff;font-weight:700;text-decoration-color:var(--ambar-400)}
}

@media(prefers-reduced-motion:reduce){
  .nav-bars,.nav-bars::before,.nav-bars::after,html.js .nav-menu,.nav-menu a{transition:none!important}
}