/* ==========================================================================
   Cabeçalho — Intermedical IVF

   Os tokens repetem os do catálogo em vez de importá-los: o CSS do plugin só
   é carregado nas páginas de produto, e o cabeçalho existe em todas.

   Há também correções de tema. O Hello/Elementor aplica ao <button> uma borda
   rosa, um fundo rosa no foco e o anel nativo do sistema — que é vermelho em
   boa parte dos aparelhos e permanece na tela depois de qualquer toque. Por
   isso todos os estados dos nossos botões são declarados explicitamente.
   ========================================================================== */

/* Altura que o cabeçalho ocupa quando está grudado no topo. Quem tem barras
   próprias que também grudam — a barra de busca do catálogo, por exemplo —
   lê esta variável para parar logo abaixo em vez de sumir por trás. */
:root {
    --intermed-offset-fixo: 63px;
    --im-cabecalho-altura: 85px;
}

.admin-bar { --intermed-offset-fixo: 95px; }

@media (max-width: 1024px) {
    :root {
        --intermed-offset-fixo: 59px;
        --im-cabecalho-altura: 71px;
    }

    .admin-bar { --intermed-offset-fixo: 91px; }
}

/* --------------------------------------------------------------------------
   Encaixe com as páginas do construtor

   Toda página do site puxa o primeiro bloco 179px para cima — a altura exata
   do cabeçalho que o construtor montava. Não é enfeite: é assim que o topo de
   cada página encosta na borda superior da tela e o cabeçalho flutua sobre
   ele. Trocado o cabeçalho, a conta ficou errada por 100px e o conteúdo subia
   demais.

   Em vez de mexer em dezenas de páginas no construtor, a compensação passa a
   valer a altura do nosso cabeçalho — a composição de antes, agora correta em
   qualquer altura. No celular ela é anulada: lá o primeiro bloco começa com
   texto, e deslizar texto para baixo de uma barra opaca só o esconde.
   -------------------------------------------------------------------------- */

#content .page-content > .elementor > .elementor-element:first-child,
#content > .elementor > .elementor-element:first-child {
    margin-top: calc(-1 * var(--im-cabecalho-altura)) !important;
    margin-block-start: calc(-1 * var(--im-cabecalho-altura)) !important;
}

@media (max-width: 1024px) {
    #content .page-content > .elementor > .elementor-element:first-child,
    #content > .elementor > .elementor-element:first-child {
        margin-top: 0 !important;
        margin-block-start: 0 !important;
    }
}

@media (max-width: 782px) {
    .admin-bar { --intermed-offset-fixo: 105px; }
}

.intermed-cabecalho {
    --im-petroleo: #0a5877;
    --im-azul: #3d98d0;
    --im-ciano: #67cce7;
    --im-ciano-claro: #bee9f6;
    --im-texto: #31394a;
    --im-texto-suave: #5a6478;
    --im-verde: #3b9446;
    --im-verde-escuro: #327d3b;
    --im-branco: #fff;
    --im-borda: rgba(10, 88, 119, 0.12);
    --im-largura: 1200px;
    --im-altura: 84px;
    --im-altura-reduzida: 62px;
    --im-topo: 0px;

    /* Quem gruda é o cabeçalho inteiro, e não só a barra: um elemento
       aderente só adere dentro do próprio pai, então prender apenas a barra
       a soltaria assim que o cabeçalho saísse da tela. */
    position: sticky;
    top: var(--im-topo);
    z-index: 100;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.admin-bar .intermed-cabecalho { --im-topo: 32px; }

@media (max-width: 782px) {
    .admin-bar .intermed-cabecalho { --im-topo: 46px; }
}

.intermed-cabecalho *,
.intermed-cabecalho *::before,
.intermed-cabecalho *::after { box-sizing: border-box; }

.intermed-cabecalho__interno {
    width: 100%;
    max-width: var(--im-largura);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Foco: o anel do sistema sai, e volta apenas para quem navega por teclado. */
.intermed-cabecalho :focus { outline: none; }

.intermed-cabecalho :focus-visible {
    outline: 2px solid var(--im-petroleo);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Barra principal

   Fica no fluxo e gruda ao chegar no topo: nada de posicionamento fixo, que
   obrigaria a compensar a altura no corpo da página e desalinharia o fundo
   decorativo das páginas do catálogo.
   -------------------------------------------------------------------------- */

.intermed-cabecalho__barra {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.intermed-cabecalho__barra .intermed-cabecalho__interno {
    min-height: var(--im-altura);
    justify-content: space-between;
    transition: min-height 0.25s ease;
}

.intermed-cabecalho.is-rolado .intermed-cabecalho__barra {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: var(--im-borda);
    box-shadow: 0 6px 24px rgba(10, 88, 119, 0.08);
}

.intermed-cabecalho.is-rolado .intermed-cabecalho__barra .intermed-cabecalho__interno {
    min-height: var(--im-altura-reduzida);
}

/* Marca */

.intermed-cabecalho__marca {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
    color: var(--im-petroleo);
}

.intermed-cabecalho__marca img {
    display: block;
    width: auto;
    height: 48px;
    max-width: 220px;
    transition: height 0.25s ease;
}

.intermed-cabecalho.is-rolado .intermed-cabecalho__marca img { height: 38px; }

.intermed-cabecalho__nome {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Navegação
   -------------------------------------------------------------------------- */

.intermed-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.intermed-nav__lista {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.intermed-nav__item--raiz { position: relative; }

.intermed-cabecalho a.intermed-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
    color: var(--im-texto);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

/* O sublinhado cresce a partir do centro: dá a resposta do estado sem mexer
   na largura do item, que faria o menu inteiro tremer a cada passagem. */
.intermed-nav__link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--im-azul);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.intermed-cabecalho a.intermed-nav__link:hover,
.intermed-cabecalho a.intermed-nav__link:focus-visible { color: var(--im-petroleo); }

.intermed-cabecalho a.intermed-nav__link:hover::after,
.intermed-cabecalho a.intermed-nav__link:focus-visible::after { transform: scaleX(1); }

.intermed-cabecalho .intermed-nav__item--raiz.current-menu-item > a.intermed-nav__link,
.intermed-cabecalho .intermed-nav__item--raiz.current-menu-ancestor > a.intermed-nav__link,
.intermed-cabecalho .intermed-nav__item--raiz.current-menu-parent > a.intermed-nav__link,
.intermed-cabecalho .intermed-nav__item--raiz.current_page_item > a.intermed-nav__link {
    color: var(--im-petroleo);
}

.intermed-cabecalho .intermed-nav__item--raiz.current-menu-item > a.intermed-nav__link::after,
.intermed-cabecalho .intermed-nav__item--raiz.current-menu-ancestor > a.intermed-nav__link::after,
.intermed-cabecalho .intermed-nav__item--raiz.current-menu-parent > a.intermed-nav__link::after,
.intermed-cabecalho .intermed-nav__item--raiz.current_page_item > a.intermed-nav__link::after {
    transform: scaleX(1);
    background: var(--im-petroleo);
}

/* Botão do submenu */

.intermed-cabecalho button.intermed-nav__abrir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: -8px;
    padding: 0;
    color: var(--im-texto-suave);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.15s ease, background-color 0.15s ease;
}

.intermed-cabecalho button.intermed-nav__abrir:hover,
.intermed-cabecalho button.intermed-nav__abrir:focus,
.intermed-cabecalho button.intermed-nav__abrir:active {
    color: var(--im-petroleo);
    background: rgba(10, 88, 119, 0.07);
    border-color: transparent;
}

.intermed-cabecalho button.intermed-nav__abrir[aria-expanded="true"] { transform: rotate(180deg); }

/* Submenu no computador */

.intermed-nav__submenu {
    margin: 0;
    padding: 10px;
    list-style: none;
}

@media (min-width: 1025px) {
    .intermed-nav__submenu {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translate(-50%, 6px);
        min-width: 320px;
        background: var(--im-branco);
        border: 1px solid var(--im-borda);
        border-radius: 16px;
        box-shadow: 0 18px 44px rgba(10, 88, 119, 0.16);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }

    /* Ponte invisível até o painel: sem ela o menu fecharia no vão de 10px
       entre o item e o submenu, no meio do movimento do mouse. */
    .intermed-nav__item--tem-filhos::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 14px;
    }

    .intermed-nav__item--tem-filhos:hover > .intermed-nav__submenu,
    .intermed-nav__item--tem-filhos.is-aberto > .intermed-nav__submenu,
    .intermed-nav__item--tem-filhos:focus-within > .intermed-nav__submenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
}

.intermed-cabecalho a.intermed-nav__sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    color: var(--im-texto);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.intermed-cabecalho a.intermed-nav__sublink:hover,
.intermed-cabecalho a.intermed-nav__sublink:focus-visible {
    background: #f2f7fa;
    color: var(--im-petroleo);
}

.intermed-cabecalho .intermed-nav__item--filho.current-menu-item > a.intermed-nav__sublink {
    background: #f2f7fa;
    color: var(--im-petroleo);
    font-weight: 600;
}

.intermed-nav__contagem {
    flex: none;
    min-width: 26px;
    padding: 2px 8px;
    color: var(--im-petroleo);
    background: var(--im-ciano-claro);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Ação principal
   -------------------------------------------------------------------------- */

.intermed-nav__extras {
    display: flex;
    align-items: center;
    gap: 16px;
}

.intermed-cabecalho a.intermed-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 20px;
    color: var(--im-branco);
    background: var(--im-verde);
    border: 1px solid var(--im-verde);
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.intermed-cabecalho a.intermed-cta:hover,
.intermed-cabecalho a.intermed-cta:focus-visible {
    color: var(--im-branco);
    background: var(--im-verde-escuro);
    border-color: var(--im-verde-escuro);
    box-shadow: 0 8px 20px rgba(59, 148, 70, 0.28);
}

.intermed-cabecalho a.intermed-cta:active { transform: translateY(1px); }

.intermed-nav__contatos { display: none; }

/* --------------------------------------------------------------------------
   Botão da gaveta
   -------------------------------------------------------------------------- */

.intermed-cabecalho button.intermed-menu-alternar {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    padding: 0;
    color: var(--im-petroleo);
    background: rgba(10, 88, 119, 0.06);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.intermed-cabecalho button.intermed-menu-alternar:hover,
.intermed-cabecalho button.intermed-menu-alternar:focus,
.intermed-cabecalho button.intermed-menu-alternar:active {
    background: rgba(10, 88, 119, 0.12);
    border-color: transparent;
}

.intermed-menu-alternar__barras,
.intermed-menu-alternar__barras::before,
.intermed-menu-alternar__barras::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.15s ease;
}

.intermed-menu-alternar__barras { position: relative; }

.intermed-menu-alternar__barras::before,
.intermed-menu-alternar__barras::after {
    content: "";
    position: absolute;
    left: 0;
}

.intermed-menu-alternar__barras::before { top: -6px; }
.intermed-menu-alternar__barras::after { top: 6px; }

.intermed-menu-alternar[aria-expanded="true"] .intermed-menu-alternar__barras { background: transparent; }
.intermed-menu-alternar[aria-expanded="true"] .intermed-menu-alternar__barras::before { transform: translateY(6px) rotate(45deg); }
.intermed-menu-alternar[aria-expanded="true"] .intermed-menu-alternar__barras::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Gaveta do celular
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .intermed-cabecalho button.intermed-menu-alternar { display: inline-flex; }

    /* O desfoque de fundo faz da barra o bloco de referência de tudo que é
       fixo lá dentro — e a gaveta, que é fixa, ficaria presa à altura da
       barra em vez de ocupar a tela. No celular a barra fica opaca. */
    .intermed-cabecalho__barra {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.96);
    }

    /* A gaveta vive dentro da barra, e a barra é uma camada só: de nada
       adianta a gaveta pedir para ficar acima do véu se a camada inteira
       está abaixo dele. Quem sobe é a barra. */
    .intermed-cabecalho.is-menu-aberto .intermed-cabecalho__barra { z-index: 120; }

    /* O botão continua acessível por cima da gaveta, agora como um X. */
    .intermed-cabecalho button.intermed-menu-alternar {
        position: relative;
        z-index: 130;
    }

    .intermed-cabecalho__interno { padding: 0 18px; }

    .intermed-cabecalho {
        --im-altura: 70px;
        --im-altura-reduzida: 58px;
    }

    .intermed-cabecalho__marca img { height: 40px; }
    .intermed-cabecalho.is-rolado .intermed-cabecalho__marca img { height: 34px; }

    /* O deslocamento da barra do painel entra pelo `top`, não somado ao
       recuo interno. Um minificador pode reduzir `0px` a `0` dentro de uma
       variável — otimização legítima para uma medida, ruinosa dentro de
       `calc()`, onde `20px + 0` é conta inválida e faz o navegador descartar
       a declaração inteira. Foi o que aconteceu em produção: a gaveta perdeu
       todo o recuo e o texto encostou na borda. Sem aritmética sobre a
       variável, não há o que quebrar. */
    .intermed-nav {
        position: fixed;
        top: var(--im-topo);
        right: 0;
        bottom: 0;
        z-index: 120;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(360px, 88vw);
        margin: 0;
        padding: 20px 20px 28px;
        background: var(--im-branco);
        box-shadow: -18px 0 48px rgba(10, 88, 119, 0.18);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        /* A visibilidade troca de uma vez, e não ao longo da transição: se ela
           fosse interpolada, no primeiro quadro a gaveta ainda estaria
           invisível — e um elemento invisível recusa o foco. Ao fechar, a
           troca espera o fim do movimento. */
        transition: transform 0.28s ease, visibility 0s linear 0.28s;
    }

    .intermed-cabecalho.is-menu-aberto .intermed-nav {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.28s ease, visibility 0s;
    }

    .intermed-nav__lista {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin-top: 44px;
    }

    .intermed-nav__item--raiz {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid var(--im-borda);
    }

    .intermed-cabecalho a.intermed-nav__link {
        flex: 1;
        padding: 15px 4px;
        font-size: 16.5px;
    }

    .intermed-cabecalho a.intermed-nav__link::after { display: none; }

    .intermed-cabecalho .intermed-nav__item--raiz.current-menu-item > a.intermed-nav__link,
    .intermed-cabecalho .intermed-nav__item--raiz.current-menu-ancestor > a.intermed-nav__link,
    .intermed-cabecalho .intermed-nav__item--raiz.current_page_item > a.intermed-nav__link {
        color: var(--im-petroleo);
        font-weight: 700;
    }

    .intermed-cabecalho button.intermed-nav__abrir {
        width: 40px;
        height: 40px;
        margin: 0;
    }

    /* Sanfona: o submenu ocupa a largura toda da gaveta e só existe aberto. */
    .intermed-nav__submenu {
        flex-basis: 100%;
        padding: 0 0 12px;
        display: none;
    }

    .intermed-nav__item--tem-filhos.is-aberto > .intermed-nav__submenu { display: block; }

    .intermed-cabecalho a.intermed-nav__sublink {
        padding: 11px 14px;
        font-size: 15px;
        background: #f6fafc;
        margin-bottom: 4px;
    }

    .intermed-nav__extras {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 24px;
    }

    .intermed-cabecalho a.intermed-cta {
        width: 100%;
        min-height: 50px;
        font-size: 15.5px;
    }

    .intermed-nav__contatos {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding: 16px 0 0;
        border-top: 1px solid var(--im-borda);
        list-style: none;
    }

    .intermed-cabecalho .intermed-nav__contatos a {
        color: var(--im-texto-suave);
        font-size: 14.5px;
        font-weight: 500;
        text-decoration: none;
    }

    .intermed-cabecalho .intermed-nav__contatos a:hover { color: var(--im-petroleo); }

    .intermed-cabecalho__veu {
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgba(10, 30, 45, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0s linear 0.28s;
    }

    .intermed-cabecalho.is-menu-aberto .intermed-cabecalho__veu {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.28s ease, visibility 0s;
    }
}

/* Trava a rolagem do fundo enquanto a gaveta está aberta. */
body.intermed-menu-travado { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .intermed-cabecalho *,
    .intermed-cabecalho *::before,
    .intermed-cabecalho *::after {
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   "Todos os produtos"

   Primeiro item do submenu, separado do resto por uma linha: ele não é uma
   linha de produto, é o caminho para o catálogo inteiro. Sem a separação,
   leria como se "Todos os produtos" fosse mais uma categoria.
   -------------------------------------------------------------------------- */

.intermed-nav__item--filho.intermed-nav__todos {
    border-bottom: 1px solid var(--im-borda);
    margin-bottom: 6px;
    padding-bottom: 6px;
}

.intermed-cabecalho .intermed-nav__todos > a.intermed-nav__sublink {
    color: var(--im-petroleo);
    font-weight: 600;
}