/* =====================================================================
   MENU DO BLOG IGUAL AO DO SITE (26/10/2026)
   Entra so quando o menu do plugin esta ligado. Nao altera nenhum arquivo do tema.

   O item "Cases" nao precisa de estilo nenhum: ele e um <li> de menu comum e o tema ja o
   desenha igual aos outros cinco. Esta folha existe por causa do botao "Fale Conosco", que
   no site e um retangulo cheio e no tema do blog seria um link de texto.

   PESO DOS SELETORES, medido nas folhas servidas, nao estimado:
     .logo-search-wrapper #site-navigation a     peso 1,1,1  (cor e espacamento do menu)
     .sidr ul li a                               peso 0,1,3  (cor do menu do celular)
     a:visited  em tres folhas do tema           peso 0,1,1
       ph-groovy-blog/design-files/css/main.css      a:visited{color:#3b3b3b}
       ph-creative-blog/style.css                    a:visited{color:#800080}
       ph-creative-blog/design-files/core/core.css   a:hover,a:visited{color:var(--phcreativeblog-secondary-dark)}
   Como a regra de cor do menu usa um id, classe sozinha nao vence. Por isso cada regra daqui
   parte do id do proprio tema (#site-navigation no computador, #sidr no celular) e soma as
   nossas duas classes: peso 1,3,2. Vence sem !important e sem tocar no tema.
   Se um dia o tema trocar esses ids, o botao volta a parecer um link de menu: perde o desenho,
   nao o destino. Nada quebra.
   ===================================================================== */

:root {
  --ida-mn-fundo: #029fbd;       /* o mesmo .btn-contato do site, assets/css/style.css */
  --ida-mn-fundo-h: #018ea8;     /* 4,59 para 1 com a letra escura */
  --ida-mn-letra: #0d1a1f;       /* 5,65 para 1 sobre #029fbd */
}

/* ------------------------------------------------- botao Fale Conosco, computador e celular */

#site-navigation li.ida-mn-contato > a.ida-mn-btn:link,
#site-navigation li.ida-mn-contato > a.ida-mn-btn:visited,
#site-navigation li.ida-mn-contato > a.ida-mn-btn:hover,
#site-navigation li.ida-mn-contato > a.ida-mn-btn:focus,
#site-navigation li.ida-mn-contato > a.ida-mn-btn:active,
#sidr li.ida-mn-contato > a.ida-mn-btn:link,
#sidr li.ida-mn-contato > a.ida-mn-btn:visited,
#sidr li.ida-mn-contato > a.ida-mn-btn:hover,
#sidr li.ida-mn-contato > a.ida-mn-btn:focus,
#sidr li.ida-mn-contato > a.ida-mn-btn:active {
  color: var(--ida-mn-letra);
  background: var(--ida-mn-fundo);
  border-radius: 6px;
  border-bottom: 0;
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

/* depois do bloco de cima de proposito: mesmo peso, e a ultima regra vence */
#site-navigation li.ida-mn-contato > a.ida-mn-btn:hover,
#site-navigation li.ida-mn-contato > a.ida-mn-btn:focus,
#site-navigation li.ida-mn-contato > a.ida-mn-btn:active,
#sidr li.ida-mn-contato > a.ida-mn-btn:hover,
#sidr li.ida-mn-contato > a.ida-mn-btn:focus,
#sidr li.ida-mn-contato > a.ida-mn-btn:active {
  background: var(--ida-mn-fundo-h);
}

/* Foco de teclado visivel sobre o ciano: o contorno do tema e 1px da propria cor ciano e
   desaparece em cima do botao. Aqui o contorno e escuro, com afastamento. */
#site-navigation li.ida-mn-contato > a.ida-mn-btn:focus-visible,
#sidr li.ida-mn-contato > a.ida-mn-btn:focus-visible {
  outline: 3px solid var(--ida-mn-letra);
  outline-offset: 2px;
}

/* ------------------------------------------------- encaixe no computador

   O menu do blog nao era flexivel: a pagina serve, num <style> proprio no fim do documento
   (CSS adicional do site, nao arquivo do tema), esta regra com CINCO colunas contadas a dedo:

     .menu-desktop-container #primary-menu {
       display: grid; grid-template-columns: auto auto auto auto auto;
       grid-column-gap: 1vw; justify-content: center; justify-items: center; }

   Com cinco itens cabe; com o sexto item e o botao, o sexto e o setimo caem numa segunda
   linha e o cabecalho cresce de 113px para 130px. Medido em 1440, 1366, 1280 e 1024.

   Aquele seletor pesa 1 id + 1 classe e esta DEPOIS da nossa folha no documento, entao empate
   de peso perde. Os dois seletores abaixo pesam 2 ids e vencem com folga, sem !important:
     - a lista passa a ser uma fila flexivel, sem numero fixo de colunas, para aceitar um
       sétimo item hoje e um oitavo amanha sem ninguem mexer em CSS;
     - a celula do menu deixa de ter largura travada em 356px (vem do col-md-8) e passa a
       usar o espaco livre que o cabecalho ja tem: a caixa de busca ao lado esta oculta.
   Com o menu desligado nada disto e carregado e o cabecalho volta a ser o de hoje.         */

#site-navigation .menu-desktop-container ul#primary-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#middle-bar #site-branding .logo-search-wrapper .menu-wrapper {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

#site-navigation li.ida-mn-contato {
  display: inline-block;
  margin-left: 10px;
  flex: 0 0 auto;
}

#site-navigation .menu-desktop-container ul#primary-menu > li {
  flex: 0 0 auto;
}

/* Abaixo de 1100px o espaco do cabecalho fica curto para seis itens e um botao numa linha.
   Ali a fila pode dobrar, de proposito: e melhor duas linhas do que item cortado. */
@media (max-width: 1100px) {
  #site-navigation .menu-desktop-container ul#primary-menu {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
  }
}

/* ------------------------------------------------- encaixe no celular (gaveta do tema) */

#sidr li.ida-mn-contato {
  margin: 14px 15px 4px;
}
#sidr li.ida-mn-contato > a.ida-mn-btn:link,
#sidr li.ida-mn-contato > a.ida-mn-btn:visited,
#sidr li.ida-mn-contato > a.ida-mn-btn:hover,
#sidr li.ida-mn-contato > a.ida-mn-btn:focus,
#sidr li.ida-mn-contato > a.ida-mn-btn:active {
  display: block;
  padding: 12px 18px;
  text-align: center;
  white-space: normal;   /* no celular pode ocupar duas linhas em vez de estourar a largura */
}

/* A gaveta do celular passa a listar os mesmos seis itens do site.

   Hoje quem pinta esses links e ".sidr ul li a" (peso 0,1,3), de uma folha de terceiro
   (lib/sidr/stylesheets/jquery.sidr.light.min.css), que vence "a:visited" (0,1,1) por dois
   pontos. Dois pontos de margem entre duas folhas que nao sao nossas nao e garantia: basta uma
   atualizacao mexer num dos dois lados para o item visitado virar cinza, roxo ou azul-marinho
   (ph-creative-blog/style.css ainda declara a:active{color:rgb(25,25,112)}).

   Como depois desta mudanca TODOS os itens da gaveta sao marcacao nossa, a cor deles e
   declarada aqui, nos cinco estados, com peso 1,2,2. Medido sobre o fundo real da gaveta,
   rgb(248,248,248):  #2c2f33 = 12,66 para 1   |   #00718c = 5,29 para 1.

   No computador o caminho e o contrario, de proposito: la os seis itens convivem com os cinco
   que o tema ja desenhava, e o tema os pinta por ".logo-search-wrapper #site-navigation a"
   (peso 1,1,1), que ja vence a:visited com folga. Declarar cor nossa ali faria o item Cases
   destoar dos outros no dia em que o dono trocar a cor do menu. */

#sidr li.ida-mn-item > a:link,
#sidr li.ida-mn-item > a:visited {
  color: #2c2f33;
}
#sidr li.ida-mn-item > a:hover,
#sidr li.ida-mn-item > a:focus,
#sidr li.ida-mn-item > a:active {
  color: #00718c;
}
#sidr ul li.ida-mn-item > a {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* =====================================================================
   CABECALHO NA LARGURA DO CONTEUDO (26/10/2026)
   Chave cab_largura. Tudo aqui depende da classe ida-cab-larga no <body>, que so sai quando a
   chave esta em 1 ou com a chave de previa. Com a chave em 0 estas regras existem na folha e
   nao alcancam nada: o cabecalho fica exatamente como esta no ar.

   Problema: a fila do cabecalho vive dentro de .container do Bootstrap, com largura e recuo
   proprios, diferentes dos do conteudo. Em 1440 o conteudo ia de 73 a 1353 e a fila nao.

   Medida: a mesma do conteudo, e nao numero solto. .ib-wrap e .ia-wrap sao, as duas,
     max-width:1280px; margin:0 auto; padding:0 24px; box-sizing:border-box
   com recuo de 20px abaixo de 768px e de 16px abaixo de 390px. Os valores estao nas variaveis
   abaixo, com os mesmos pontos de quebra, para a fila acompanhar a tela sozinha. O cabecalho
   do computador so existe a partir de 768px (abaixo disso o tema troca por #masthead-mobile),
   entao na pratica vale sempre o recuo de 24px; os outros dois ficam por coerencia.

   Quem manda hoje na distribuicao da fila, medido com a sonda e nao estimado: o CSS adicional
   do site, servido num <style> da propria pagina, com

     #page #middle-bar #site-branding .container.logo-search-wrapper {
       display: grid; grid-template-columns: auto auto; justify-content: center; }

   Isso pesa 3 ids + 2 classes = 30200, e e o que junta logo e menu no meio da tela: em 1440 o
   logo comecava em 264 e o botao terminava em 1161, um bloco de 897 solto no meio de uma caixa
   de 1320. O seletor abaixo repete aquele caminho e soma a nossa classe de chave: 3 ids +
   3 classes + 1 elemento = 30301. Vence por um fio, sem !important, e so quando a chave esta
   ligada. Nenhum arquivo do tema e nenhum CSS adicional do site foi alterado.
   ===================================================================== */

:root {
  --ida-cab-larg: 1280px;
  --ida-cab-recuo: 24px;
}
@media (max-width: 767px) { :root { --ida-cab-recuo: 20px; } }
@media (max-width: 389px) { :root { --ida-cab-recuo: 16px; } }

body.ida-cab-larga #page #middle-bar #site-branding .container.logo-search-wrapper {
  display: flex;                  /* desfaz a grade de duas colunas do CSS adicional */
  justify-content: space-between; /* logo numa ponta, fila do menu na outra */
  align-items: center;
  width: 100%;
  max-width: var(--ida-cab-larg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ida-cab-recuo);
  padding-right: var(--ida-cab-recuo);
  box-sizing: border-box;
  column-gap: 32px;
}

/* o logo encosta na margem esquerda da caixa: nada de recuo proprio empurrando */
body.ida-cab-larga .logo-search-wrapper .custom-logo-link {
  margin-left: 0;
  padding-left: 0;
  flex: 0 0 auto;
}

/* a fila do menu ocupa o vao inteiro entre o logo e a margem direita, e os itens se
   distribuem nesse vao; o botao e o ultimo, encostado na direita */
body.ida-cab-larga #site-navigation .menu-desktop-container ul#primary-menu {
  width: 100%;
  justify-content: space-between;
}
body.ida-cab-larga #middle-bar #site-branding .logo-search-wrapper .menu-wrapper {
  padding-right: 0;
  margin-right: 0;
}
body.ida-cab-larga #site-navigation li.ida-mn-contato {
  margin-left: 0;
}


/* =====================================================================
   ITEM ATUAL DO MENU (26/10/2026)
   Vale para o item Blog, que e o unico que aponta para dentro deste WordPress. Os outros seis
   levam para o site principal e nunca sao o atual.

   POR QUE NAO DA PARA USAR SO A CLASSE DO TEMA: o site sobrescreve a paleta e serve, na propria
   pagina, --phcreativeblog-primary: #1f2229 e --phcreativeblog-primary-text: #1f2229, iguais
   entre si e iguais ao fundo da barra do cabecalho. As regras do tema
     .logo-search-wrapper #site-navigation .current-menu-item   { background: var(--primary) }
     .logo-search-wrapper #site-navigation .current-menu-item a { color: var(--primary-text) }
   pintariam letra #1f2229 sobre fundo #1f2229: contraste 1,00, o item sumiria. A classe do tema
   continua na marcacao, para nao quebrar quem a use, mas o desenho do atual e nosso.

   Contrastes medidos sobre o fundo real da barra, #1f2229:
     #5fd0ea = 8,87 para 1       (letra do item atual)
     #1f2229 = 1,00 para 1       (o que o tema faria)
   O sublinhado usa a borda de 2px que o tema ja reserva transparente em cada link do menu
   (".logo-search-wrapper #site-navigation a{border-bottom:solid 2px transparent}"), entao
   marcar o atual nao empurra nada: zero mudanca de altura ou de largura.

   Peso: a regra do tema para a letra do atual pesa 1 id + 2 classes + 1 elemento = 10201.
   As regras abaixo pesam 10302. Vencem sem !important.
   ===================================================================== */

.logo-search-wrapper #site-navigation li.ida-mn-atual {
  /* se um dia o dono devolver a paleta original do tema, --primary volta a ser rosa forte e
     apareceria uma pastilha rosa aqui sem ninguem ter pedido. Melhor nao depender disso. */
  background: transparent;
  border-radius: 0;
}

.logo-search-wrapper #site-navigation li.ida-mn-atual > a:link,
.logo-search-wrapper #site-navigation li.ida-mn-atual > a:visited,
.logo-search-wrapper #site-navigation li.ida-mn-atual > a:hover,
.logo-search-wrapper #site-navigation li.ida-mn-atual > a:focus,
.logo-search-wrapper #site-navigation li.ida-mn-atual > a:active {
  color: #5fd0ea;
  border-bottom-color: #5fd0ea;
  font-weight: 600;
}

/* Na gaveta do celular o fundo e claro, entao o tom do atual e o escuro.
   #00718c sobre rgb(248,248,248) = 5,29 para 1. */
#sidr li.ida-mn-atual > a:link,
#sidr li.ida-mn-atual > a:visited,
#sidr li.ida-mn-atual > a:hover,
#sidr li.ida-mn-atual > a:focus,
#sidr li.ida-mn-atual > a:active {
  color: #00718c;
  font-weight: 700;
}


/* =====================================================================
   PROPORCAO DO CABECALHO IGUAL A DO SITE (26/10/2026)
   Chave cab_prop, classe ida-cab-prop no <body>. Com a chave em 0 estas regras existem na
   folha e nao alcancam nada.

   O QUE ESTAVA DIFERENTE, medido no ar em 1440px, nos dois enderecos, e nao estimado:

     elemento            site inovebi.com        blog inovebi.com/blog     proporcao
     logo                100,8 x 48,4 px         185 x 89 px               1,84 vez maior
     link do menu        13,824 px, peso 300     18 px, peso 400           1,30 vez maior
     botao Fale Conosco  13,824 px               15 px                     1,09 vez maior
     altura da barra     76 px                   113 px                    1,49 vez maior

   DE ONDE VINHAM OS NUMEROS DO BLOG (nao do tema; dos dois trechos de CSS adicional que o
   proprio site serve num <style> no fim do documento):
     #masthead #site-branding .custom-logo { max-height: 89px !important }
     @media (min-width: 769px) { .logo-search-wrapper #site-navigation a { font-size: 18px } }
   O botao de 15px era nosso, do bloco no inicio desta folha.

   OS NUMEROS DO SITE, copiados das declaracoes de assets/css/style.css e nao arredondados de
   olho:
     header .logo                        { max-width: 7vw }
     .menuDesktop .nav ul li a           { font-size: clamp(13px, 0.96vw, 18px) }  peso 300
     .container.menuDesktop .btn-contato { padding: 0.3vw 2vw; font-size: clamp(13px,0.96vw,18px) }

   O logo do site e limitado pela LARGURA (7vw), nao pela altura, e por isso aqui tambem e a
   largura que manda. As duas imagens tem a mesma proporcao, 2,08 para 1 (a do site mede
   100,8 x 48,4; a do blog, 300 x 144), entao a mesma largura entrega a mesma altura.

   Os limites do clamp sao o valor que o proprio site teria nas pontas da faixa de computador:
   7vw da 53,8px em 769 e 134,4px em 1920. O piso e o teto so evitam que o logo diminua demais
   no notebook estreito e cresca sem parar em tela larga, como ja fizemos com as fontes do site.

   PESO DOS SELETORES
     logo:  o CSS adicional usa 2 ids + 1 classe COM !important. A regra daqui soma 3 ids +
            2 classes + 1 elemento e tambem leva !important: entre duas declaracoes
            !important vence a de maior peso, e e a nossa. Sem !important nao daria.
     menu:  o CSS adicional usa 1 id + 1 classe e esta DEPOIS desta folha no documento.
            A regra daqui soma 1 id + 2 classes + 1 elemento e vence sem !important.
     botao: o bloco do inicio desta folha pesa 1 id + 3 classes; aqui sao 1 id + 4 classes +
            1 elemento, e ainda vem depois no arquivo.

   O celular nao e tocado: abaixo de 768px o tema troca o cabecalho por #masthead-mobile e a
   gaveta #sidr, e nenhum seletor daqui alcanca os dois.
   ===================================================================== */

body.ida-cab-prop #masthead #middle-bar #site-branding .custom-logo {
  width: clamp(54px, 7vw, 134px);
  max-width: clamp(54px, 7vw, 134px);
  height: auto;
  max-height: none !important;   /* unico !important do bloco: desfaz o 89px do CSS adicional */
  object-fit: contain;
}

body.ida-cab-prop .logo-search-wrapper #site-navigation a {
  font-size: clamp(13px, 0.96vw, 18px);
  font-weight: 300;
  /* no site o recuo lateral do link e zero e o afastamento vem do espaco entre itens; aqui o
     recuo vertical fica, para a area de clique nao encolher, e o sublinhado do item atual
     passa a ter a largura da palavra, como no site */
  padding: 12px 0;
}

body.ida-cab-prop #site-navigation li.ida-mn-contato > a.ida-mn-btn:link,
body.ida-cab-prop #site-navigation li.ida-mn-contato > a.ida-mn-btn:visited,
body.ida-cab-prop #site-navigation li.ida-mn-contato > a.ida-mn-btn:hover,
body.ida-cab-prop #site-navigation li.ida-mn-contato > a.ida-mn-btn:focus,
body.ida-cab-prop #site-navigation li.ida-mn-contato > a.ida-mn-btn:active {
  font-size: clamp(13px, 0.96vw, 18px);
  padding: clamp(4px, 0.3vw, 6px) clamp(14px, 2vw, 38px);
}