/**
 * Menu superior (topbar roxa) ÚNICO pro site inteiro - Início (Raiz), Loja
 * Maker, Cursos, STLs e Precifica 3D.
 *
 * Antes existiam 3 cópias quase iguais desse CSS (uma dentro de cada
 * <style> de index.php da raiz, cursos/includes/header.php e
 * loja/includes/header.php), cada uma com sua PRÓPRIA versão da estrutura
 * do menu (nomes de classe diferentes na Loja: .site-topbar/.site-nav em
 * vez de .cs-topbar/.cs-nav) - foram divergindo aos poucos (um padding
 * aqui, um espaçamento ali) cada vez que uma mudava e as outras não
 * acompanhavam, deixando o menu com um "tamanho" ligeiramente diferente
 * dependendo da página. Agora existe UM arquivo só, com a estrutura E a
 * cor/fonte do menu - qualquer ajuste vale pro site inteiro de uma vez.
 *
 * Carregado por toda página que usa includes/hub_menu.php (Raiz, Loja e
 * Cursos/STLs/Precifica 3D). Não depende de mais nada (é por isso que a
 * Loja não precisa linkar cursos/assets/cursos.css inteiro só por causa
 * do menu - cursos.css tem regras globais de página, tipo cor de fundo
 * do body, que bagunçariam o resto do site da Loja).
 */
@font-face {
  font-family: 'Clarika Pro Geometric Heavy';
  src: url('../fonts/clarika-pro-geometric-heavy.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --hub-purple-menu: #402062;
  --hub-lilac: #E8D2FB;
  --hub-lilac-hover: #EED7E9;
  --hub-lilac-hover-text: #402061;
}

/* ============ ESTRUTURA (layout/tamanho - igual em toda página) ============ */
/* position:fixed (não "sticky"): em Cursos, html/body têm overflow-x:hidden
   pra travar rolagem horizontal, o que faz sticky parar de acompanhar a
   rolagem de verdade. position:fixed não depende disso, sempre trava
   certo - por isso todas as páginas usam fixed, não só Cursos. O
   padding-top no body (logo abaixo) reserva o espaço que o menu deixou de
   ocupar no fluxo normal da página. */
.cs-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  background: var(--hub-purple-menu); border-bottom: none;
}
body { padding-top: var(--cs-header-h, 72px); }
.cs-topbar-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 28px;
}
.cs-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.cs-brand-logo { height: 44px; width: 44px; object-fit: contain; }
.cs-nav { display: flex; gap: 10px; flex-shrink: 0; }
.cs-topbar-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
.cs-hamburger {
  display: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 17px; width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
}
.cs-mobile-menu { display: none; background: var(--hub-purple-menu); }

@media (max-width: 1200px) {
  .cs-nav { display: none; }
  .cs-hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .cs-mobile-menu.open {
    display: flex; flex-direction: column; gap: 4px;
    max-width: 1240px; margin: 0 auto; padding: 4px 20px 18px;
    /* Com o menu de topo fixo, esse painel também fica fixo na tela - em
       celulares baixos ele pode passar da altura da tela, então ganha
       rolagem própria em vez de cortar os últimos links. */
    max-height: calc(100vh - var(--cs-header-h, 72px));
    overflow-y: auto;
  }
  .cs-nav-mobile { display: flex; flex-direction: column; }
  .cs-nav-mobile a {
    text-decoration: none; color: var(--hub-lilac); font-size: 15px; font-weight: 700;
    font-family: 'Clarika Pro Geometric Heavy', 'Poppins', sans-serif;
    padding: 12px 4px; border-top: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; gap: 8px;
  }
}

/* ============ COR/FONTE (pele roxa do hub) ============ */
#hubNavDesktop { gap: 10px; }
#hubNavDesktop a, .cs-nav-mobile a {
  color: var(--hub-lilac); text-transform: none; text-decoration: none; font-family: 'Clarika Pro Geometric Heavy', 'Poppins', sans-serif;
  font-weight: 800; font-size: 16px; letter-spacing: 0; padding: 8px 16px;
  border: none; background: none !important; border-radius: 10px; transition: background .15s, color .15s;
}
#hubNavDesktop a:hover, #hubNavDesktop a:active, #hubNavDesktop a.active {
  color: var(--hub-lilac-hover-text) !important; background: var(--hub-lilac-hover) !important; border-color: transparent !important;
}
.cs-nav-mobile a.active { color: var(--hub-lilac-hover-text) !important; background: var(--hub-lilac-hover) !important; }

.hub-cart-link {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--hub-lilac); text-decoration: none; font-size: 17px;
  transition: color .15s;
}
.hub-cart-link:hover { color: #fff; }
.hub-cart-badge {
  position: absolute; top: -2px; right: -2px; background: #fff; color: var(--hub-purple-menu);
  font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.hub-aluno-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--hub-lilac); color: var(--hub-purple-menu);
  font-family: 'Clarika Pro Geometric Heavy', 'Poppins', sans-serif; font-weight: 800; font-size: 16px;
  text-decoration: none; white-space: nowrap;
  padding: 8px 16px; border-radius: 10px;
  transition: background .15s, transform .15s;
}
.hub-aluno-btn:hover { background: var(--hub-lilac-hover); transform: translateY(-1px); }
.hub-aluno-btn-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hub-aluno-btn-icon img { width: 100%; height: 100%; object-fit: contain; }

.hub-social { display: flex; align-items: center; gap: 12px; margin-left: 6px; }
.hub-social a { display: flex; align-items: center; justify-content: center; text-decoration: none; opacity: .95; transition: opacity .15s, transform .15s; }
.hub-social a:hover { opacity: 1; transform: translateY(-1px); }
.hub-social a img { width: 22px; height: 22px; object-fit: contain; }

/* ---- Celular: encolhe as ações do topo pra caber ao lado do hambúrguer.
   (Só é relevante pra Raiz, que mostra os rótulos de texto no botão de
   conta - Loja/Cursos já usam um botão compacto o tempo todo.) ---- */
@media (max-width: 640px) {
  .hub-social { display: none; }
  .hub-aluno-btn-label { display: none; }
  .hub-aluno-btn { padding: 8px; }
  .hub-aluno-btn-icon { width: 20px; height: 20px; }
}