/**
 * Smart Fit - Header da nova marca (rebranding)
 * -----------------------------------------------------------------------------
 * Depende de assets/css/brand.css (tokens da marca).
 * Escrito mobile-first: a base reproduz o frame Home-Mobile (360) e o
 * @media (min-width: 768px) reproduz o header do frame "Sugestao 01" (1440).
 *
 * Medidas do Figma "Blog | Header e Footer" (file F1igg93kIZMgvtnmUylTlF),
 * lidas via API e conferidas no render PNG do frame.
 *
 * MOBILE - Home-Mobile em viewport de 360:
 *   barra preta ......................... 360x75
 *   recuo lateral ....................... 24px a esquerda / 15px a direita
 *   logo ................................ 120x14, a 24px da borda
 *   icone de busca ...................... 24x24, branco, sem pilula
 *   botao de menu ....................... circulo branco de 40x40 com duas
 *                                         barras pretas, a 15px da borda
 *   (no mobile o Figma nao mostra o CTA amarelo nem os links: a navegacao vive
 *    dentro do menu lateral)
 *
 * DESKTOP - header do frame 1:2 em viewport de 1440:
 *   barra preta ......................... 1440x141
 *   recuo lateral ....................... 40px
 *   logo ................................ 202x24, alinhado a esquerda
 *   links ............................... 14px / 700 / branco 100%
 *                                         (o Figma traz caixa alta; ver desvio 1)
 *   busca ............................... pilula de 301x72, fundo #1A1A1A
 *     texto do placeholder .............. italico, #707070, recuo interno 35px
 *     botao circular .................... 56x56, fundo #313131, 8px da borda
 *   CTA ................................. pilula de 190x56, fundo #FFC409,
 *                                         rotulo preto 14px / 700 / caixa alta
 *   ordem ............................... logo | (links, busca, CTA) a direita
 *
 * A fonte do header e a Smart Fit Muscle Display, via var(--sf-font-display).
 * Os arquivos web chegaram do kit da marca e a @font-face esta em brand.css.
 *
 * ATENCAO: AS MEDIDAS DO FIGMA ACIMA NAO SAO MAIS A REFERENCIA
 * O time informou que o Figma foi feito sem acompanhar o site, e que o padrao a
 * seguir e o que ja esta no ar em smartfit.com.br. As medidas do Figma ficam
 * registradas acima como historico do que foi implementado antes.
 *
 * Medido no header do institucional (ver o comentario dos tokens em brand.css):
 *   barra ....... 91px no desktop (era 141) / 73px no mobile (era 75)
 *   recuo ....... 32px no desktop (era 40)  / 24px no mobile (igual)
 *   CTA ......... 44px de altura, corpo de 12px, recuo de 24px (era 190x56/14px)
 *   busca ....... nao existe no institucional; aqui ficou em 44px, a altura do
 *                 CTA, para os dois controles da direita casarem
 *
 * DESVIOS REGISTRADOS
 *   3. Placeholder da busca: o Figma desenha em italico. Saiu por pedido - ver a
 *      regra de .sf-header__search-input::placeholder.
 *   1. Caixa do texto: o Figma desenha os links e o rotulo do CTA em caixa alta.
 *      Aqui os dois saem com so a inicial em maiuscula ("Trilhas de conteudo",
 *      "Quero ser Smart"), por decisao de produto - a referencia e o site
 *      institucional, que nao usa caixa alta nesses elementos. Vale para o menu
 *      do mobile tambem.
 *   2. Espacamento entre os itens da direita: as medidas do Figma variam entre
 *      21px e 25px, porque os elementos foram posicionados a mao, sem
 *      auto-layout. Padronizamos em 24px (escala de 8px do projeto). A folga de
 *      208px entre o logo e o primeiro link absorve a diferenca, entao nada
 *      transborda em 1440.
 */

/* ==================================================== Utilitario de a11y */

/**
 * Texto disponivel para leitor de tela e escondido visualmente. O tema nao
 * define .screen-reader-text, entao a classe vive aqui.
 */
.sf-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ========================================================== Barra / mobile */

.sf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--sf-header-height-mobile, 75px);
  padding: 0 15px 0 var(--sf-header-gutter-mobile, 24px);
  background-color: var(--sf-black, #000);
  font-family: var(--sf-font-text, sans-serif);
}

/* ------------------------------------------------------------------- Logo */

.sf-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}

/**
 * Logo um pouco menor que o desenho original, a pedido: 104px no mobile (era
 * 120) e 176px no desktop (era 202), uma reducao de ~13% nos dois.
 *
 * A altura segue automatica: o <img> declara width="202" height="24", entao o
 * navegador preserva a proporcao a partir desses atributos. Nao mexa neles para
 * "acertar" o tamanho - eles descrevem o tamanho intrinseco do SVG e sao o que
 * evita salto de layout enquanto a imagem carrega. O tamanho visual e so aqui.
 */
.sf-header__logo img {
  display: block;
  width: 104px;
  height: auto;
}

/* ------------------------------------------------- Acoes (busca + menu) */

.sf-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/**
 * Botao que abre a busca no mobile. E o mesmo formulario do desktop: no mobile
 * ele comeca recolhido e o botao alterna a visibilidade, sem trocar a marcacao.
 */
.sf-header__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sf-white, #fff);
  cursor: pointer;
}

.sf-header__search-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Botao de menu: circulo branco com duas barras pretas. */
.sf-header__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--sf-white, #fff);
  color: var(--sf-black, #000);
  cursor: pointer;
  transition: background-color var(--sf-transition, 0.2s ease);
}

.sf-header__menu:hover,
.sf-header__menu:focus-visible {
  background-color: var(--sf-yellow, #ffc409);
}

.sf-header__menu svg {
  display: block;
  width: 18px;
  height: 12px;
}

/* -------------------------------------------------------------- Navegacao */

/**
 * No mobile os links nao aparecem na barra: eles vivem no menu lateral. O
 * bloco fica escondido aqui e volta no @media do desktop.
 */
.sf-header__nav {
  display: none;
}

.sf-header__nav-list {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/**
 * Os rotulos da navegacao saem como estao escritos em library/header-nav.php, ou
 * seja, so a inicial em maiuscula: "Trilhas de conteudo", "Fitness", "Nutricao",
 * "Saude".
 *
 * O Figma desenha esses itens em caixa alta e o CSS aplicava text-transform:
 * uppercase. A caixa alta saiu a pedido. O botao amarelo do CTA continua em
 * caixa alta, porque ali a caixa faz parte do desenho do botao, nao do texto de
 * navegacao.
 */
.sf-header__nav-list a,
.sf-header__nav-list .sf-header__pending {
  font-family: var(--sf-font-display, sans-serif);
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  color: var(--sf-on-dark-strong, #fff);
  transition: color var(--sf-transition, 0.2s ease);
}

.sf-header__nav-list a:hover,
.sf-header__nav-list a:focus-visible {
  color: var(--sf-yellow, #ffc409);
}

/* Item sem URL definida: mesmo desenho, sem afordancia de clique. */
.sf-header__pending {
  cursor: default;
}

/* ------------------------------------------------------------------ Busca */

/**
 * PROPORCAO DA BUSCA E DO CTA
 *
 * Era uma pilula de 301x72 (Figma). Com a barra em 91px, 72px de altura deixava
 * 9px de folga em cima e embaixo - a busca virava quase a barra inteira. Passou a
 * 44px, a mesma altura do CTA, que e o valor medido no institucional.
 *
 * O institucional NAO TEM campo de busca no header, entao nao havia o que copiar
 * para este elemento. O que foi seguido do site e a escala: os dois controles da
 * direita passam a ter a mesma altura, e essa altura e a do CTA de la (44px). Se
 * o time de design definir outro valor para a busca, e so mexer aqui.
 */
.sf-header__search {
  display: none;
  position: relative;
  align-items: center;
  flex: 0 0 auto;
  width: 301px;
  height: 44px;
  /* 20px de recuo para o texto, 6px de folga para o botao circular. */
  padding: 0 6px 0 20px;
  border-radius: var(--sf-radius-pill, 999px);
  background-color: var(--sf-gray-800, #1a1a1a);
}

/* Aberta no mobile pelo botao de lupa: ocupa a largura da barra. */
.sf-header__search.is-open {
  display: flex;
  position: absolute;
  top: var(--sf-header-height-mobile, 75px);
  left: 0;
  z-index: 30;
  width: 100%;
  height: 64px;
  padding: 0 8px 0 24px;
  border-radius: 0;
}

.sf-header__search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: var(--sf-font-text, sans-serif);
  /**
   * Mesmo corpo dos links do menu (--sf-fs-body-sm, 14px, em
   * .sf-header__nav-list a). Era --sf-fs-body (16px), e o "Pesquisar" ficava
   * maior que "Fitness", "Nutricao" e "Saude" ao lado.
   *
   * O tamanho fica no input, e nao no ::placeholder, de proposito: o placeholder
   * herda daqui, entao os dois passam a medir 14px e o campo nao muda de corpo
   * quando a pessoa digita. (A fonte, sim, ainda troca na primeira tecla - isso
   * foi pedido: Muscle no placeholder, DM Sans no texto digitado.)
   */
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: var(--sf-fw-medium, 500);
  color: var(--sf-white, #fff);
}

/**
 * O placeholder era italico, seguindo o Figma (ver a medida anotada no cabecalho
 * deste arquivo). Saiu por pedido: o italico e a unica ocorrencia de texto
 * inclinado no blog e nao se justifica num campo de formulario, onde ele soa como
 * enfase e nao como texto de apoio. Vira o terceiro desvio registrado do design.
 *
 * A FONTE AQUI E A MUSCLE DISPLAY, por pedido - o resto do header ja usa
 * --sf-font-display, e o campo em repouso passa a acompanhar.
 *
 * Só o placeholder troca de fonte: o texto digitado continua na DM Sans
 * (--sf-font-text, na regra de .sf-header__search-input acima), porque conteudo
 * que a pessoa escreve e texto corrente, nao display. O efeito colateral e que a
 * fonte muda na primeira tecla. Se incomodar, o ajuste e alinhar as duas regras.
 */
.sf-header__search-input::placeholder {
  font-family: var(--sf-font-display, sans-serif);
  font-style: normal;
  color: var(--sf-gray-700, #707070);
  opacity: 1;
}

.sf-header__search-input:focus {
  outline: 0;
}

/* 32px cabe nos 44px da pilula com 6px de folga de cada lado. Era 56px. */
.sf-header__search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--sf-gray-750, #313131);
  color: var(--sf-white, #fff);
  cursor: pointer;
  transition: background-color var(--sf-transition, 0.2s ease);
}

.sf-header__search-submit:hover,
.sf-header__search-submit:focus-visible {
  background-color: var(--sf-yellow, #ffc409);
  color: var(--sf-black, #000);
}

.sf-header__search-submit svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* -------------------------------------------------------------------- CTA */

/**
 * CTA medido no institucional: 142x44, corpo de 12px, recuo horizontal de 24px,
 * pilula. Era 190x56 com corpo de 14px (Figma).
 *
 * A largura saiu de fixa para nascer do padding: os 142px de la sao o resultado
 * de "Quero ser Smart" com 24px de cada lado, e nao um valor escolhido. Com
 * largura fixa, mudar o rotulo apertaria ou sobraria espaco.
 */
.sf-header__cta {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--sf-radius-pill, 999px);
  background-color: var(--sf-yellow, #ffc409);
  font-family: var(--sf-font-display, sans-serif);
  font-size: var(--sf-fs-overline, 0.75rem);
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--sf-black, #000);
  transition: background-color var(--sf-transition, 0.2s ease);
}

.sf-header__cta:hover,
.sf-header__cta:focus-visible {
  background-color: var(--sf-yellow-dark, #e0a800);
  color: var(--sf-black, #000);
}

/* Foco visivel consistente em toda a barra. */
.sf-header a:focus-visible,
.sf-header button:focus-visible {
  outline: 2px solid var(--sf-yellow, #ffc409);
  outline-offset: 2px;
}

/* ================================================================ Desktop */

@media (min-width: 768px) {
  /**
   * RECUO LATERAL: o logo acompanha a coluna de conteudo.
   *
   * Antes o recuo era fixo (--sf-header-gutter, 32px), enquanto o conteudo da
   * pagina fica num .container do Bootstrap, que tem largura maxima e e
   * centralizado. Em 1440 isso deixava o logo em 32px e os cards em 72px: o logo
   * colado na margem e desalinhado de tudo abaixo dele.
   *
   * A conta abaixo reproduz o .container: a borda do conteudo dele e
   * (100% - max-width) / 2 + 12px, sendo 12px o --bs-gutter-x/2 do Bootstrap.
   * O --sf-header-content-max espelha os degraus de max-width do .container
   * (720/960/1140/1320), declarados nos @media logo abaixo.
   *
   * O max() garante um piso de 32px: em larguras onde o container ainda nao
   * centraliza, o logo nao volta a encostar na borda.
   *
   * Efeito colateral bem-vindo: essa posicao coincide com a do logo no
   * institucional (72px em 1440, 312px em 1920), que era a referencia do pedido.
   *
   * O footer usa outro container (--sf-container-max 1280 + gutter 80, ver o
   * cabecalho de footer.css) e fica 8px mais afastado. Fica registrado como
   * divergencia conhecida - alinhar os tres exigiria unificar os containers.
   */
  .sf-header {
    --sf-header-content-max: 720px;

    gap: 24px;
    min-height: var(--sf-header-height, 141px);
    padding-block: 0;
    padding-inline: max(
      var(--sf-header-gutter, 32px),
      calc((100% - var(--sf-header-content-max)) / 2 + 12px)
    );
  }

  .sf-header__logo img {
    width: 125px;
  }

  .sf-header__actions {
    gap: 24px;
  }

  /* No desktop a navegacao, a busca e o CTA formam um bloco unico a direita. */
  .sf-header__nav {
    display: block;
  }

  .sf-header__search {
    display: flex;
    position: static;
  }

  .sf-header__cta {
    display: inline-flex;
  }

  /* Busca e menu mobile saem de cena. */
  .sf-header__search-toggle,
  .sf-header__menu {
    display: none;
  }
}

/* ============================================= Menu lateral (mobile) */

/**
 * Conteudo do offcanvas. O Figma nao detalha o interior do menu no mobile, so o
 * botao que o abre, entao seguimos a linguagem da barra: fundo preto e fonte de
 * display. A caixa dos rotulos acompanha a do menu do desktop - so a inicial em
 * maiuscula, como esta escrito em library/header-nav.php.
 */
.sf-header-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.sf-header-menu__list a,
.sf-header-menu__pending {
  display: block;
  padding: 12px 0;
  font-family: var(--sf-font-display, sans-serif);
  font-size: var(--sf-fs-body, 1rem);
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1.2;
  text-decoration: none;
  color: var(--sf-on-dark-strong, #fff);
  border-bottom: 1px solid var(--sf-divider-on-dark-soft, rgba(255, 255, 255, 0.1));
}

.sf-header-menu__list a:hover,
.sf-header-menu__list a:focus-visible {
  color: var(--sf-yellow, #ffc409);
}

.sf-header-menu__pending {
  color: var(--sf-on-dark-muted, rgba(255, 255, 255, 0.5));
}

.sf-header-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  border-radius: var(--sf-radius-pill, 999px);
  background-color: var(--sf-yellow, #ffc409);
  font-family: var(--sf-font-display, sans-serif);
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: var(--sf-fw-bold, 700);
  text-decoration: none;
  color: var(--sf-black, #000);
}

/**
 * Degraus do recuo lateral do header.
 *
 * Espelham os max-width do .container do Bootstrap (assets/css/bootstrap-grid.min.css)
 * para o logo cair exatamente na borda da coluna de conteudo em cada faixa. A
 * conta que consome estes valores esta em .sf-header, no @media de 768px.
 *
 * Se o Bootstrap for atualizado e esses max-width mudarem, atualize aqui tambem -
 * senao o logo desalinha dos cards de novo.
 *
 *   >= 768px  -> .container 720px   (declarado em .sf-header)
 *   >= 992px  -> .container 960px
 *   >= 1200px -> .container 1140px
 *   >= 1400px -> .container 1320px
 */
@media (min-width: 992px) {
  .sf-header {
    --sf-header-content-max: 960px;
  }
}

@media (min-width: 1200px) {
  .sf-header {
    --sf-header-content-max: 1140px;
  }
}

@media (min-width: 1400px) {
  .sf-header {
    --sf-header-content-max: 1320px;
  }
}