/* ==========================================================================
   Componente: header — todos os seletores começam por .c-header
   Medidas do Figma: altura 88, padding vertical 12, padding lateral 32 (mobile/tablet)
   e 60 (≥ 1440), conteúdo travado em 1792 (> 1991), itens de navegação com gap 33.
   ========================================================================== */

/* ---------- mobile (base, Figma 390) ---------- */
.c-header {
  --header-padding-x: 2rem;          /* 32px */
  --header-content-max: 112rem;      /* 1792px */
  --header-actions-gap: 2rem;        /* 32px */
  --header-nav-gap: 2.0625rem;       /* 33px */
  --header-logo-size: 2.5rem;        /* 40px */
  --header-panel-padding: 2rem;

  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--tp-ds-z-header);
  background-color: var(--tp-ds-header-bg);
  transition: background-color var(--tp-ds-duration-base) var(--tp-ds-ease-standard);
}

.c-header.is-scrolled,
.c-header.is-open {
  background-color: var(--tp-ds-header-bg-scrolled);
}

.c-header__bar {
  display: flex;
  align-items: center;
  height: var(--tp-ds-header-height);
  padding: var(--tp-ds-space-3) var(--header-padding-x);
}

.c-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--header-content-max);
  margin-inline: auto;
}

.c-header__logo {
  display: inline-flex;
  flex: none;
  width: var(--header-logo-size);
  height: var(--header-logo-size);
}

.c-header__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.c-header__actions {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--header-actions-gap);
  min-width: 0;
}

.c-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tp-ds-icon-inverse);
  cursor: pointer;
}

.c-header__toggle-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.c-header__toggle-icon--close,
.c-header.is-open .c-header__toggle-icon--open {
  display: none;
}

.c-header.is-open .c-header__toggle-icon--close {
  display: block;
}

/* Navegação como painel (< 992px) — PROVISÓRIO: não há layout do menu aberto no Figma */
.c-header__nav {
  position: fixed;
  top: var(--tp-ds-header-height);
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--header-panel-padding) var(--header-padding-x);
  overflow-y: auto;
  background-color: var(--tp-ds-header-bg-scrolled);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--tp-ds-duration-base) var(--tp-ds-ease-standard),
    visibility 0s linear var(--tp-ds-duration-base);
}

.c-header.is-open .c-header__nav {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--tp-ds-duration-base) var(--tp-ds-ease-standard),
    visibility 0s;
}

.c-header__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tp-ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-header__link {
  --btn-padding-x: 0;
  justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .c-header,
  .c-header__nav {
    transition: none;
  }
}

/* ---------- ≥ 992px (breakpoint eventual): navegação na linha ---------- */
@media (min-width: 992px) {
  .c-header__nav {
    position: static;
    padding: 0;
    overflow: visible;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .c-header__list {
    flex-direction: row;
    align-items: center;
    gap: var(--header-nav-gap);
  }

  .c-header__link {
    --btn-padding-x: var(--tp-ds-space-4);
    justify-content: center;
  }

  .c-header__actions {
    flex: none;
  }

  .c-header__toggle {
    display: none;
  }
}

/* ---------- desktop (Figma 1440) ---------- */
@media (min-width: 1440px) {
  .c-header {
    --header-padding-x: 3.75rem;      /* 60px */
  }
}