/* ================= NAV — Overlay Sólido =================
   Paleta: #FFFFFF #95C93D #212C65 #3D76BB
   - Header FIXO, sólido (sem vidro)
   - Desktop: hambúrguer escondido, menu horizontal
   - Mobile: hambúrguer visível, menu overlay ABAIXO do header
             (altura AUTO), ITENS CENTRALIZADOS
   - Carrinho à direita (fora do hambúrguer)
   - Badge no topo/direita do ícone, multi-dígitos sem quebra
========================================================== */

:root{
  --z-nav: 1000;
  --nav-h: 64px;
  --container-max: 1200px;
  --container-pad: clamp(16px, 4vw, 32px);

  /* Paleta */
  --white: #FFFFFF;
  --green: #95C93D;
  --nav-base: #212C65; /* cor sólida do header/menu */
  --blue: #3D76BB;

  /* Ajustes rápidos da "bolinha" do carrinho */
  --cart-badge-h: 18px;
  --cart-badge-minw: 20px;
  --cart-badge-padx: 6px;
  --cart-badge-fs: 11px;
  --cart-badge-offset: -12px;
}

/* Header FIXO (overlay sólido) */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  background: var(--nav-base);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
}
.site-header.is-scrolled{
  background: var(--nav-base);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.15); /* opcional */
}

/* Layout: brand | menu | ações (hambúrguer + carrinho) */
.nav{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
  height: var(--nav-h);
  padding-inline: var(--container-pad);
  margin-inline: auto;
  max-width: var(--container-max);
}

/* ===== BRAND ===== */
.nav__brand{
  display:flex; align-items:center; gap:.65rem;
  text-decoration:none; color:var(--white);
  min-width: 0; /* permite o texto quebrar corretamente */
}
.nav__brand:hover,
.nav__brand:focus{ color:var(--white); text-decoration:none; }
.nav__logo{ height: 32px; width:auto; border-radius: 6px }

.brand{ display:flex; flex-direction:column; line-height:1; min-width:0; }
.brand__line{ display:block; text-transform: uppercase; color:var(--white); }
.nav__brand:hover .brand__line{ color:var(--white); }
.brand__line--1{ font-weight:800; letter-spacing:.06em; font-size: clamp(18px, 3.2vw, 24px); }
.brand__line--2{ font-weight:300; letter-spacing:.18em; font-size: clamp(11px, 1.6vw, 14px); opacity:.95; }
.brand__line--3{ font-weight:300; letter-spacing:.24em; font-size: clamp(9px, .5vw, 12px); opacity:.85; margin-top:2px; }

/* ===== AÇÕES à direita (hambúrguer + carrinho) ===== */
.nav__actions{ display:flex; align-items:center; gap:10px; }

/* Botão hamburguer: escondido no DESKTOP, visível no MOBILE */
.nav__toggle{
  appearance:none; border:0; background:transparent;
  width: 42px; height: 42px; display:none; /* desktop: some */
  place-items:center;
  border-radius: 12px; cursor:pointer; position: relative;
  color: var(--white);
}
.nav__toggle:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }

/* Barras do hambúrguer / ícone X quando aberto */
.nav__bar{
  position:absolute; left:50%; top:50%;
  width:20px; height:2px; background: currentColor; border-radius: 999px;
  transform: translate(-50%,-50%); transition: transform .25s ease, opacity .2s ease, width .2s ease;
}
.nav__bar:nth-child(1){ transform: translate(-50%, calc(-50% - 6px)); }
.nav__bar:nth-child(2){ transform: translate(-50%, -50%); }
.nav__bar:nth-child(3){ transform: translate(-50%, calc(-50% + 6px)); }
.nav.is-open .nav__bar:nth-child(1){ transform: translate(-50%,-50%) rotate(45deg); width:18px; }
.nav.is-open .nav__bar:nth-child(3){ transform: translate(-50%,-50%) rotate(-45deg); width:18px; }
.nav.is-open .nav__bar:nth-child(2){ opacity:0; transform: translate(-50%,-50%) scaleX(.5); }

/* ===== MENU (desktop padrão) ===== */
.nav__menu{
  list-style:none; margin:0; padding:0 10px;
  display:flex; gap:8px; justify-content:center; align-items:center;
}
.nav__link{
  position: relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.85rem 1rem; text-decoration:none; color:var(--white);
  font-weight:600; border-radius:12px; transition: color .2s ease;
}
.nav__link:hover{ color: var(--green); }

.nav__link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:8px;
  height:2px; border-radius:2px; background: var(--green);
  transform: scaleX(0); transform-origin:right; opacity:.95; transition: transform .28s ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after{ transform: scaleX(1); transform-origin:left; }
.nav__link[aria-current="page"]{ color: var(--green) }
.nav__link[aria-current="page"]::after{ transform: scaleX(1) }
.nav__link:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }

/* ===== MOBILE: hambúrguer visível, menu overlay ABAIXO do header ===== */
@media (max-width: 959.98px){
  .nav__toggle{ display:grid; }

  .nav__menu{
    position: fixed;
    z-index: 900;                 /* abaixo do header (1000) */
    top: var(--nav-h);            /* começa abaixo do header fixo */
    left: 0; right: 0;

    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;

    /* CENTRALIZAÇÃO dos itens */
    display: grid;
    justify-items: center;
    align-content: start;
    text-align: center;
    gap: 14px;
    padding: 12px 10px 16px;

    background: var(--nav-base);
    opacity: 0;
    transform: scaleY(0.96);
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 36px rgba(0,0,0,.18);
  }
  .nav.is-open .nav__menu{
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ===== Ícone do carrinho + BADGE ===== */
.nav__link--icon{ padding: .85rem .6rem; }
.nav__cart .icon{ width:22px; height:22px; display:block; fill:currentColor; }
.cart-icon-wrap{
  position: relative; display:inline-grid; place-items:center;
  width:22px; height:22px;
}

/* Badge NO CANTO SUPERIOR DIREITO (fora, sem cobrir o ícone) */
.cart-count{
  position:absolute;
  top: var(--cart-badge-offset);
  right: var(--cart-badge-offset);
  transform: none;

  display: inline-flex; align-items:center; justify-content:center;
  padding: 0 var(--cart-badge-padx);
  min-width: var(--cart-badge-minw);
  height: var(--cart-badge-h);
  border-radius:999px;

  background: var(--green);
  color: var(--nav-base);
  font-size: var(--cart-badge-fs);
  font-weight:800; line-height:1; letter-spacing:.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  box-shadow: 0 0 0 2px var(--nav-base);
  pointer-events:none;
}
.cart-count.is-zero{ display:none; }

/* ====== AJUSTES PARA GANHAR ESPAÇO NO BRAND (≤ 540px) ======
   - Some a coluna “menu” do grid (fica brand | ações)
   - Reduz padding lateral
   - Aperta um pouco as ações
*/
@media (max-width: 540px){
  .nav{
    grid-template-columns: 1fr auto;       /* brand expande; ações ficam à direita */
    padding-inline: clamp(10px, 3.8vw, 14px);
  }
  .nav__actions{ gap: 8px; margin-right: -2px; } /* empurra um tiquinho mais à borda */
  .nav__toggle{ width: 40px; height: 40px; }
}

/* ====== AJUSTE FINO (≤ 420px) ======
   - Mantém “ENGLISH TEACHER” visível (não escondemos)
   - Tipografia um pouco menor
   - Ações ainda mais à direita
*/
@media (max-width: 420px){
  .brand__line--1{ font-size: 17px; letter-spacing:.06em; }
  .brand__line--2{ font-size: 10px; letter-spacing:.16em; }
  .brand__line--3{ font-size: 9px;  letter-spacing:.18em; display:block; opacity:.9; }

  .nav{
    grid-template-columns: 1fr auto;       /* brand ocupa o que precisar */
    padding-inline: clamp(8px, 3.5vw, 12px);
  }
  .nav__actions{
    gap: 6px;
    margin-right: -4px;                     /* cola mais na borda direita */
  }
  .nav__toggle{ width: 38px; height: 38px; }
  .cart-icon-wrap{ width:20px; height:20px; }
  .nav__cart .icon{ width:20px; height:20px; }

  /* badge do carrinho levemente menor */
  :root{
    --cart-badge-h: 16px;
    --cart-badge-minw: 18px;
    --cart-badge-padx: 5px;
    --cart-badge-fs: 10px;
    --cart-badge-offset: -8px;
  }
}


/* ≤240px — compacta brand e ícones sem “espremer” */
@media (max-width: 240px){
  .nav{
    grid-template-columns: 1fr auto; /* brand ganha o máximo de espaço */
    column-gap: 8px;
    padding-inline: 6px;
  }

  .nav__brand{ gap: .45rem; }
  .nav__logo{ height: 24px; }              /* SVG menor */

  /* Tipografia do brand mais compacta */
  .brand__line--1{ font-size: 15px; letter-spacing: .05em; }
  .brand__line--2{ font-size: 9px;  letter-spacing: .14em; }
  .brand__line--3{ font-size: 8px;  letter-spacing: .14em; }

  .nav__actions{ gap: 4px; margin-right: -2px; }
  .nav__toggle{ width: 32px; height: 32px; }  /* hambúrguer menor */

  /* Ícone e badge do carrinho menores */
  .cart-icon-wrap{ width: 18px; height: 18px; }
  .nav__cart .icon{ width: 18px; height: 18px; }

  :root{
    --cart-badge-h: 14px;
    --cart-badge-minw: 16px;
    --cart-badge-padx: 4px;
    --cart-badge-fs: 9px;
    --cart-badge-offset: -7px;
  }
}

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce){
  .nav__bar, .nav__link::after, .nav__menu{ transition:none !important; }
}