/* welvaart.io — complementos ao CSS do Webflow */

/* Carrossel de testemunhos (substitui o .w-slider do Webflow; ver site.js) */
[data-wv-carousel] { position: relative; text-align: center; clear: both; -webkit-tap-highlight-color: transparent; }
[data-wv-carousel] .wv-track { display: block; white-space: nowrap; will-change: transform; touch-action: pan-y; }
[data-wv-carousel] .wv-track.is-dragging { transition: none !important; cursor: grabbing; }
[data-wv-carousel] .w-slider-arrow-left,
[data-wv-carousel] .w-slider-arrow-right { cursor: pointer; }
[data-wv-carousel] .w-slider-arrow-left:focus-visible,
[data-wv-carousel] .w-slider-arrow-right:focus-visible { outline: 2px solid #141414; outline-offset: 2px; opacity: 1; }

/* Link "saltar para o conteúdo" (só aparece com o teclado) */
.wv-skip { position: absolute; left: 16px; top: -100px; z-index: 10000; padding: 12px 18px; background: #121212; color: #fff; border-radius: 8px; font: 600 14px/1 Montserrat, sans-serif; text-decoration: none; }
.wv-skip:focus { top: 16px; }

/* Foco visível consistente */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }

/* Mapa de Contactos: o iframe do Google só carrega com um clique */
iframe[data-wv-map]:not(.is-loaded) { display: none; }
.wv-map-facade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; min-height: 240px; box-sizing: border-box; border: 0; border-radius: inherit; cursor: pointer; padding: 16px; text-align: center; font-family: Montserrat, sans-serif; color: #121212;
  background-color: #eef1ee;
  background-image: linear-gradient(rgba(18,18,18,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(18,18,18,.06) 1px, transparent 1px);
  background-size: 32px 32px; }
.wv-map-facade:hover .wv-map-cta { background: #333; }
.wv-map-pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #121212; box-shadow: 0 0 0 6px rgba(18,18,18,.12); margin-bottom: 6px; }
.wv-map-title { font-size: 15px; font-weight: 600; }
.wv-map-cta { display: inline-block; padding: 12px 22px; border-radius: 999px; background: #121212; color: #fff; font-size: 14px; font-weight: 600; }
.wv-map-note { font-size: 12px; color: #555; }

/* Hero em mobile: visível de imediato, no estado final, sem a animação de entrada do Webflow.
   O Webflow esconde-o (visibility:hidden) até o evento "load" e só depois anima; em 4G isso são 4–5 s.
   A especificidade (html.w-mod-js:not(.wv) [data-wv-hero] …) e o !important ganham à regra do Webflow
   no <head> e aos estilos inline que o GSAP aplica. Em desktop fica tudo como estava. */
@media (max-width: 767px) {
  html.w-mod-js:not(.wv-x) [data-wv-hero] .heading-wrapper .text-heading,
  html.w-mod-js:not(.wv-x) [data-wv-hero] .text-heading,
  html.w-mod-js:not(.wv-x) [data-wv-hero] .text-heading *,
  html.w-mod-js:not(.wv-x) [data-wv-hero] .text-body,
  html.w-mod-js:not(.wv-x) [data-wv-hero] .hero-image-cutout,
  html.w-mod-js:not(.wv-x) [data-wv-hero] .hero-block,
  html.w-mod-js:not(.wv-x) [data-wv-hero] .hero-block-image-front,
  html.w-mod-js:not(.wv-x) [data-wv-hero] .line-gradient {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* triângulo decorativo: aparece logo, mantém o brilho animado */
  html.w-mod-js:not(.wv-x) [data-wv-hero] .hero-triangle { visibility: visible !important; }
}

/* Vagas abertas (Carreiras): cartões todos da mesma altura (título numa linha, tecnologias numa linha),
   para a caixa do carrossel ter altura fixa e «Ver todas as vagas» não mexer. O «Saber mais» é pequeno
   e fica na linha do título. */
a.opportunity.wv-job { display: block; color: inherit; text-decoration: none; }
a.opportunity.wv-job:hover .wv-job-title { text-decoration: underline; text-underline-offset: 3px; }
.wv-job-head { display: flex; align-items: center; gap: 10px; }
.wv-job-title { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wv-job-badge { flex: none; display: inline-block; padding: 3px 10px; border-radius: 999px; background: #121212; color: #fff; font: 600 11px/1.4 Montserrat, sans-serif; letter-spacing: .02em; }
.wv-job-more { flex: none; margin-left: auto; padding: .4em 1em; border-radius: .8em; background: var(--_mapped---background--alternative, #f4f4f4);
  color: var(--_mapped---background--dark, #121212); font: 500 13px/1.4 Montserrat, sans-serif; white-space: nowrap; transition: background-color .2s, color .2s; }
.wv-job:hover .wv-job-more, .wv-job:focus-visible .wv-job-more { background: var(--_mapped---background--dark, #121212); color: #fff; }
.wv-job-meta { display: flex; flex-wrap: nowrap; height: 1.5em; line-height: 1.5; overflow: hidden; white-space: nowrap; }
.wv-job-meta span + span::before { content: "·"; margin: 0 8px; color: #999; }
/* uma só linha de tecnologias: as que não cabem passam para uma 2.ª linha que fica escondida */
.wv-job-tags { display: flex; flex-wrap: wrap; gap: 6px; height: calc(12px * 1.4 + 6px); margin-top: 8px; overflow: hidden; }
.wv-job-tags span { max-width: 100%; padding: 3px 9px; border-radius: 6px; background: #f1f1f1; color: #333; font: 500 12px/1.4 Montserrat, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Carrossel: altura fixa (site.js), pontas a desvanecer */
.wv-vc-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.wv-vc-viewport.wv-vc-scroll { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
.wv-vc-track { will-change: transform; }
/* Por baixo: «Ver todas as vagas» à esquerda, setas ↑/↓ à direita */
.wv-jobs-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.wv-vc-arrows { display: flex; gap: 8px; }
.wv-vc-arrows[hidden] { display: none; }
.wv-vc-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--_mapped---border--light, #dfe2e4);
  border-radius: 999px; background: #fff; color: #121212; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.wv-vc-arrow:hover, .wv-vc-arrow:focus-visible { background: #121212; border-color: #121212; color: #fff; }
/* Secção das vagas: 1/3 título e mascote, 2/3 vagas (computador e tablet); no telemóvel, sem mascote */
[data-wv-jobs] .div-content { flex-flow: row; align-items: flex-start; }
[data-wv-jobs] .column.welcome-kit { flex: 0 0 calc((100% - 40px) / 3); width: auto; min-width: 0; grid-row-gap: 2rem; align-items: flex-start; container-type: inline-size; }
/* «OPORTUNIDADES» (13 letras numa só palavra) tem de caber na coluna estreita do tablet: encolhe só quando
   a coluna é mais estreita do que a palavra (no computador e no telemóvel fica o tamanho normal) */
[data-wv-jobs] .column.welcome-kit .text-heading.h2 { font-size: min(var(--_typography---size-heading--h2), 10.5cqw); }
[data-wv-jobs] .column.welcome-kit img { width: 100%; max-width: 240px; height: auto; }
[data-wv-jobs] .div-content > .column:not(.welcome-kit) { flex: 1 1 0; width: auto; min-width: 0; }
[data-wv-jobs] .opportunities-collection { width: 100%; }
@media (max-width: 767px) {
  [data-wv-jobs] .div-content { flex-flow: column; align-items: stretch; }
  [data-wv-jobs] .column.welcome-kit { flex: none; width: 100%; position: static; }
  [data-wv-jobs] .column.welcome-kit img { display: none; }
}
/* Equipa (Sobre): fila contínua a toda a largura, a desvanecer nas margens do ecrã (site.js). Os cartões têm a
   largura da fotografia, para a fila andar a um ritmo certo. O efeito ao passar o rato é o mesmo do Webflow
   (fotografia a cores, cartão inclinado), mas em CSS, para valer também para as cópias da fila. */
[data-wv-hcarousel] { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); padding-top: 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
[data-wv-hcarousel].wv-hc-scroll { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
[data-wv-hcarousel] .slider-list { flex-wrap: nowrap; padding: 0 0 0 64px; will-change: transform; }
[data-wv-hcarousel] .slider-item { flex: none; width: 18rem; }
[data-wv-hcarousel] .team-image-wrapper { transition: transform .3s ease; }
[data-wv-hcarousel] .team-image-bottom.top { transition: opacity .3s ease; }
[data-wv-hcarousel] .slider-item:hover .team-image-wrapper { transform: translate3d(-20px, -20px, 0) scale(1.02) rotate(-5deg) !important; }
[data-wv-hcarousel] .slider-item:hover .team-image-bottom.top { opacity: 1 !important; }
@media (max-width: 991px) { [data-wv-hcarousel] .slider-item { width: 14rem; } }
@media (max-width: 767px) {
  [data-wv-hcarousel] { padding-top: 0; }
  [data-wv-hcarousel] .slider-item { width: 12rem; }
  [data-wv-hcarousel] .slider-list { padding: 40px 0 0 32px; }
}
/* Filtros rápidos por cima das vagas: cada um abre o portal do Halike já filtrado (nova aba) */
.wv-job-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 1rem 12px; }
.wv-job-filter { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border: 1px solid var(--_mapped---border--light, #e5e5e5);
  border-radius: 999px; color: #121212; text-decoration: none; font: 600 12px/1.4 Montserrat, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .2s, border-color .2s, color .2s; }
.wv-job-filter:hover, .wv-job-filter:focus-visible { background: #121212; border-color: #121212; color: #fff; }
.wv-job-filter-n { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #f1f1f1; color: #333; text-align: center; letter-spacing: 0; }
.wv-job-filter:hover .wv-job-filter-n, .wv-job-filter:focus-visible .wv-job-filter-n { background: #fff; color: #121212; }
@media (max-width: 767px) { .wv-job-filters { padding: 0 var(--_layout---padding--16, 16px) 12px; } }

/* Barra «esta página também existe no seu idioma» (site.js) */
.wv-langbar { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 96px)); padding: 10px 10px 10px 16px; border-radius: 12px; background: #121212; color: #fff;
  font: 500 14px/1.35 Montserrat, sans-serif; box-shadow: 0 8px 28px rgba(0,0,0,.22); animation: wv-langbar-in .35s ease both; }
.wv-langbar span { flex: 1 1 auto; }
.wv-langbar-go { flex: none; padding: 8px 14px; border-radius: 8px; background: #fff; color: #121212; text-decoration: none; font-weight: 600; white-space: nowrap; }
.wv-langbar-go:hover { background: #e9e9e9; }
.wv-langbar-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.wv-langbar-x:hover { background: rgba(255,255,255,.12); }
.wv-langbar a:focus-visible, .wv-langbar button:focus-visible { outline: 2px solid #9fd39f; outline-offset: 2px; }
@media (max-width: 600px) { .wv-langbar { left: 12px; bottom: 12px; max-width: calc(100vw - 80px); flex-wrap: wrap; font-size: 13px; } .wv-langbar span { flex-basis: calc(100% - 44px); } .wv-langbar-x { order: 2; } .wv-langbar-go { order: 3; } }
@keyframes wv-langbar-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wv-langbar { animation: none; } }

/* Alemão e neerlandês: palavras compostas longas (Kompetenzanalyse, merkpersoonlijkheid…) não podem
   sair das caixas estreitas em mobile. Hifenização automática no texto corrido (o browser usa as regras
   do idioma do <html lang>); nos títulos só parte a palavra se não houver alternativa. */
html:is([lang="de"], [lang="nl"]) .text-body,
html:is([lang="de"], [lang="nl"]) p,
html:is([lang="de"], [lang="nl"]) li { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
html:is([lang="de"], [lang="nl"]) .text-heading { overflow-wrap: break-word; }

/* Contraste (WCAG AA, 20-10-2026). Botões verde/azul/roxo médios: texto no preto do site em vez de branco
   (branco dava 2,5–3,6:1; fica 7,5:1 verde, 7,2:1 azul, 5,2:1 roxo; 6,2:1 com o rato por cima).
   As cores dos botões não mudam: é o padrão que o site já usa nos botões claros. */
.button-color:is([data-wf--button_color--variant="green-dark"], [data-wf--button_color--variant="blue-dark"], [data-wf--button_color--variant="purple-dark"]),
.button-form.w-button { color: #121212; }
/* Etiquetas: texto no tom mais escuro da mesma cor (era 3,4–3,6:1; fica 6,6–8,2:1). */
.tag[data-wf--tag--variant="green"] { color: var(--variations--green-darkest); }
.tag.w-variant-2655bca6-1ade-469a-db63-b5457c2b757c { color: var(--variations--blue-darkest); }
.tag.w-variant-ee502ce0-24ca-9b1f-adcb-3f0a6b9c3b93 { color: var(--variations--purple-darkest); }

/* Banner de consentimento (site.js, "Consentimento"). «Recusar» e «Aceitar» com o mesmo peso, como pede a CNPD. */
.wv-consent { position: fixed; left: 16px; bottom: 16px; z-index: 10000; max-width: 520px; padding: 16px 18px; border-radius: 12px;
  background: #121212; color: #fff; font: 500 14px/1.45 Montserrat, sans-serif; box-shadow: 0 8px 28px rgba(0,0,0,.22);
  animation: wv-langbar-in .35s ease both; }
.wv-consent p { margin: 0 0 12px; }
.wv-consent-actions { display: flex; gap: 10px; justify-content: flex-end; }
.wv-consent-btn { flex: 0 0 auto; min-width: 112px; padding: 9px 16px; border: 0; border-radius: 8px; background: #fff; color: #121212;
  font: 600 14px/1.2 Montserrat, sans-serif; cursor: pointer; }
.wv-consent-btn:hover { background: #e9e9e9; }
.wv-consent-btn:focus-visible { outline: 2px solid #9fd39f; outline-offset: 2px; }
.footer-bottom-left .wv-consent-link { cursor: pointer; }
@media (max-width: 600px) { .wv-consent { left: 12px; right: 12px; bottom: 12px; max-width: none; font-size: 13px; }
  .wv-consent-btn { flex: 1 1 0; min-width: 0; } }