/* ==========================================================================
   Header institucional (página de Programação) — barra roxa de largura total.
   Não é a pílula flutuante da landing (css/sections/header.css continua intocado).
   Logo clara à esquerda; links de volta à landing + CTA --sm à direita.
   Fixo; ao rolar fica mais baixo e ganha sombra. Mobile: logo + CTA + menu em painel roxo.
   ========================================================================== */

.cn-ih {
  position: fixed; z-index: var(--z-header); inset: 0 0 auto;
  background: var(--purple-950); color: var(--white); /* um tom abaixo do topo da página (--purple-900) */
  transition: box-shadow var(--dur-slow) var(--ease-out);
}
.cn-ih.is-scrolled { box-shadow: 0 10px 30px rgba(10, 2, 24, .28); }

.cn-ih__bar {
  width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-24);
  min-height: var(--ih-h);
  transition: min-height .4s var(--ease-out);
}
.cn-ih.is-scrolled .cn-ih__bar { min-height: var(--ih-h-compact); }

.cn-ih__logo { flex: none; display: block; border-radius: var(--radius-xs); }
.cn-ih__logo img { width: 150px; height: auto; transition: transform var(--dur-base) var(--ease-out); }
.cn-ih__logo:hover img { transform: scale(1.03); }

.cn-ih__menu { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
.cn-ih__links { display: flex; gap: var(--space-4); }
.cn-ih__link {
  position: relative; display: block;
  padding: var(--space-10) var(--space-14); border-radius: var(--radius-pill);
  font: var(--fw-regular) var(--fs-nav)/var(--lh-nav) var(--font-sans);
  color: color-mix(in srgb, var(--white) 78%, transparent);
  transition: color var(--dur-base), background-color var(--dur-base);
}
.cn-ih__link:hover { color: var(--white); background: color-mix(in srgb, var(--white) 8%, transparent); }
.cn-ih__link[aria-current="page"] { color: var(--white); font-weight: var(--fw-semibold); background: color-mix(in srgb, var(--white) 12%, transparent); }
/* ponto lima sob o link atual */
.cn-ih__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; translate: -50% 0;
  border-radius: 50%; background: var(--lime-500);
}
.cn-ih :focus-visible { outline-color: var(--lime-500); }

.cn-ih__cta { flex: none; }
.cn-ih__cta-full, .cn-ih__toggle { display: none; }

/* ---------- ≤1023: barra compacta + painel roxo ---------- */
@media (max-width: 1023px) {
  .cn-ih__bar { gap: var(--space-8); min-height: var(--header-h-m); }
  .cn-ih.is-scrolled .cn-ih__bar { min-height: var(--header-h-m); }
  .cn-ih__logo { margin-right: auto; min-width: 0; flex: 1 1 0; display: flex; } /* ocupa só o que sobra (nunca quebra a linha) */
  .cn-ih__logo img { width: 124px; max-width: 100%; }
  /* CTA igual ao do header da landing no mobile: 44px, texto 13px, seta 28px */
  .cn-ih__cta { order: 1; flex: none; min-height: 44px; gap: 6px; padding: 0 6px 0 var(--space-12); font-size: 13px; letter-spacing: .01em; }
  .cn-ih__cta .cn-btn__arrow { width: 28px; height: 28px; }
  .cn-ih__cta .cn-btn__arrow svg { width: 14px; height: 14px; }
  .cn-ih__toggle {
    order: 2; display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    background: color-mix(in srgb, var(--white) 10%, transparent); color: var(--white);
    transition: background-color var(--dur-base);
  }
  .cn-ih__toggle:hover { background: color-mix(in srgb, var(--white) 18%, transparent); }
  .cn-ih__toggle svg { width: 24px; height: 24px; }
  .cn-ih__icon-close, .cn-ih.is-open .cn-ih__icon-open { display: none; }
  .cn-ih.is-open .cn-ih__icon-close { display: block; }

  .cn-ih__menu {
    position: absolute; inset: 100% 0 auto; z-index: -1;
    display: none; flex-direction: column; gap: var(--space-16);
    max-height: calc(100dvh - var(--header-h-m)); overflow-y: auto;
    padding: var(--space-8) var(--gutter) var(--space-24);
    background: var(--purple-950);
    border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    box-shadow: 0 24px 40px rgba(10, 2, 24, .35);
  }
  .cn-ih.is-open .cn-ih__menu { display: flex; }
  .no-js .cn-ih__menu { position: static; display: flex; box-shadow: none; }
  .no-js .cn-ih__toggle { display: none; }
  .cn-ih__links { flex-direction: column; gap: 0; }
  .cn-ih__links li + li { border-top: 1px solid color-mix(in srgb, var(--white) 8%, transparent); }
  .cn-ih__link { display: flex; align-items: center; min-height: 52px; padding: var(--space-12) var(--space-4); border-radius: 0; font-size: var(--fs-body-l); background: none; }
  .cn-ih__link:hover { background: none; }
  .cn-ih__link[aria-current="page"] { background: none; color: var(--lime-500); }
  .cn-ih__link[aria-current="page"]::after { left: auto; right: var(--space-4); top: 50%; bottom: auto; translate: 0 -50%; width: 6px; height: 6px; }
  .cn-ih__cta-full { display: flex; width: 100%; }
}

html.cn-scroll-lock { overflow: hidden; }