/* =====================================================================
   Portal Adventist Health — melhorias de UX compartilhadas
   Aplica contorno azul, feedback de hover/foco e acessibilidade nos
   hexágonos das páginas internas (estrutura original do template).
   Incluir após css/templatemo_style.css.
   ===================================================================== */

/* Contorno azul suave acompanhando a silhueta do hexágono, mantendo a
   sombra original. O !important vence o "filter" inline de cada .hex. */
.hex {
    filter:
        drop-shadow(0 0 1px rgba(111, 155, 209, 0.65))
        drop-shadow(0 0 1px rgba(111, 155, 209, 0.65))
        drop-shadow(0 0 1px rgba(111, 155, 209, 0.5))
        drop-shadow(0px 20px 10px #3d6f76) !important;
    cursor: pointer; /* toda a peça sinaliza que é clicável */
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Hover e foco por teclado: eleva a peça e reforça o contorno azul.
   :focus-within faz o mesmo destaque ao navegar por Tab. */
.hex:hover,
.hex:focus-within {
    transform: translateY(-5px);
    filter:
        drop-shadow(0 0 2px rgba(46, 109, 164, 0.95))
        drop-shadow(0 0 2px rgba(46, 109, 164, 0.95))
        drop-shadow(0 0 3px rgba(46, 109, 164, 0.7))
        drop-shadow(0px 24px 14px #3d6f76) !important;
}

/* Suaviza o escurecimento padrão do template no hover (era preto 50%),
   deixando um leve tom azul da marca. */
.gallery-item .hexagon-in2:hover {
    box-shadow: inset 0 0 0 100px rgba(12, 44, 66, 0.12);
}

/* Mantém a área clicável sempre presente e acessível por teclado
   (o template esconde .overlay via JS e só mostra no hover do mouse). */
.gallery-item .overlay {
    display: block !important;
}

/* Oculta o ícone "expandir" da galeria — a peça inteira segue clicável. */
.gallery-item .overlay a {
    color: transparent;
}

/* O destaque de foco vem do :focus-within (o outline retangular giraria
   junto com o hexágono e ficaria torto). */
.gallery-item .overlay a:focus {
    outline: none;
}