/* ===========================================================
   MENU DO SITE — cópia do menu de weblyrh.com.br
   ===========================================================
   As páginas públicas do candidato (vagas, candidatura, cadastro de currículo)
   usam o mesmo menu do site institucional para parecerem o mesmo site. O bloco
   a partir de "MENU — barra flutuante + painel" é copiado sem alteração do
   style.css do site (zip weblyrh-site-vN, fora do git): ao mudar lá, copiar
   de novo. Marcação em templates/_menu_site.html; comportamento em
   static/js/pages/menu_site.js. */

/* O site tem reset e base globais de que o menu depende; aqui eles valem só
   dentro do menu, para não mexer no resto da página. Em :where(), com o mesmo
   peso das regras do site (*, a, img, ul): um ".wm a" passaria por cima das
   cores dos botões e subitens copiados abaixo. */
:where(.wm, .wm *, .wm *::before, .wm *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.wm) { font-family: 'Inter', system-ui, sans-serif; line-height: 1.6; }
:where(.wm) a { text-decoration: none; color: inherit; }
:where(.wm) img { max-width: 100%; height: auto; display: block; }
:where(.wm) ul { list-style: none; }

/* ===========================
   MENU — barra flutuante + painel
=========================== */
/* Barra compacta, centralizada e sempre visível, em ameixa translúcida com
   desfoque. O painel abre DENTRO da barra: a altura anima pelo
   grid-template-rows (0fr → 1fr), sem medir nada em JS. O véu (.wm__veil)
   escurece e desfoca a página por trás. Estado aberto: .is-open (script.js). */
.wm {
  position: fixed;
  top: 14px; left: 50%;
  translate: -50% 0;
  z-index: 1000;
  width: min(560px, calc(100% - 28px));
  border-radius: 14px;
  color: #fff;
  background: rgba(42,10,63,.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(20,0,40,.28);
  transition: background .5s ease, box-shadow .5s ease;
}
.wm.is-open { background: rgba(30,6,48,.86); box-shadow: 0 26px 70px rgba(10,0,25,.45); }

.wm__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 8px 0 16px;
}
.wm__logo { display: flex; align-items: center; }
/* o logo é roxo escuro: sobre a barra escura ele vira branco */
.wm__logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.wm__tag {
  justify-self: center;
  min-width: 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A frase acompanha a seção à vista (script.js): a antiga sobe e some, a
   nova entra de baixo. O overflow:hidden da .wm__tag serve de máscara. */
.wm__tag-txt {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .26s ease, translate .34s cubic-bezier(.22,1,.36,1);
}
.wm__tag-txt.is-out { opacity: 0; translate: 0 -9px; }
.wm__tag-txt.is-in { opacity: 0; translate: 0 9px; transition: none; }
.wm__toggle {
  width: 44px; height: 44px;
  display: grid; place-content: center; gap: 6px;
  border: 0; border-radius: 10px;
  background: transparent; color: #fff; cursor: pointer;
  transition: background .25s ease;
}
.wm__toggle:hover { background: rgba(255,255,255,.1); }
.wm__toggle:focus-visible { outline: 2px solid #ff9ad8; outline-offset: 2px; }
.wm__toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: translate .45s cubic-bezier(.22,1,.36,1);
}
/* aberto, os dois traços se encontram num só (—) */
.wm.is-open .wm__toggle span:nth-child(1) { translate: 0 4px; }
.wm.is-open .wm__toggle span:nth-child(2) { translate: 0 -4px; }

.wm__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.22,1,.36,1); }
.wm.is-open .wm__panel { grid-template-rows: 1fr; }
.wm__panel-inner { min-height: 0; overflow: hidden; }
.wm.is-open .wm__panel-inner { max-height: calc(100svh - 96px); }
/* a rolagem só liga quando o painel termina de abrir (.is-rolavel, script.js):
   durante a animação da altura o conteúdo ainda não cabe e a barra piscava */
.wm.is-rolavel .wm__panel-inner { overflow-y: auto; }

.wm__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.1); }
.wm__list > li { border-bottom: 1px solid rgba(255,255,255,.08); }
.wm__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 16px 24px;
  font: inherit; font-size: 18px; font-weight: 600; text-align: left;
  color: #fff; background: none; border: 0; cursor: pointer;
  transition: color .25s ease, padding-left .35s cubic-bezier(.22,1,.36,1);
}
.wm__link:hover, .wm__link:focus-visible, .wm__link.active { color: #ff9ad8; padding-left: 30px; }
.wm__link:focus-visible, .wm__sublink:focus-visible, .wm__btn:focus-visible { outline: 2px solid #ff9ad8; outline-offset: -2px; }
.wm__caret { width: 18px; height: 18px; opacity: .75; transition: rotate .35s ease; }
.wm__group.is-open .wm__caret { rotate: 180deg; }

.wm__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1); }
.wm__group.is-open .wm__sub { grid-template-rows: 1fr; }
.wm__sub-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.wm__group.is-open .wm__sub-inner { padding-bottom: 10px; }
.wm__sublink {
  padding: 9px 24px 9px 42px;
  font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,.72);
  transition: color .22s ease, padding-left .3s cubic-bezier(.22,1,.36,1);
}
.wm__sublink:hover, .wm__sublink.active { color: #fff; padding-left: 48px; }

.wm__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 16px 12px; }
.wm__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 12px;
  border-radius: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-align: center;
  color: #3a0f4d; background: #f6eef9;
  transition: background .25s ease, color .25s ease;
}
.wm__btn:hover { background: #fff; color: #3a0f4d; }
.wm__btn--line { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.28); }
.wm__btn--line:hover { color: #fff; background: rgba(255,255,255,.1); }
.wm__social { display: flex; justify-content: center; gap: 10px; padding: 4px 16px 16px; }
.wm__social .social-icon { width: 38px; height: 38px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.wm__social .social-icon:hover { background: rgba(255,255,255,.2); box-shadow: none; }

/* cascata suave na abertura; ao fechar some tudo junto (sem atraso) */
.wm__list > li, .wm__cta, .wm__social {
  opacity: 0; translate: 0 10px;
  transition: opacity .35s ease, translate .5s cubic-bezier(.22,1,.36,1);
}
.wm.is-open .wm__list > li, .wm.is-open .wm__cta, .wm.is-open .wm__social { opacity: 1; translate: 0 0; }
.wm.is-open .wm__list > li:nth-child(1) { transition-delay: .10s; }
.wm.is-open .wm__list > li:nth-child(2) { transition-delay: .14s; }
.wm.is-open .wm__list > li:nth-child(3) { transition-delay: .18s; }
.wm.is-open .wm__list > li:nth-child(4) { transition-delay: .22s; }
.wm.is-open .wm__list > li:nth-child(5) { transition-delay: .26s; }
.wm.is-open .wm__cta { transition-delay: .30s; }
.wm.is-open .wm__social { transition-delay: .34s; }

.wm__veil {
  position: fixed; inset: 0; z-index: 990;
  background: rgba(20,5,32,.38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility .55s;
}
.wm__veil.is-on { opacity: 1; visibility: visible; }

@media (max-width: 560px) {
  .wm { top: 10px; width: calc(100% - 20px); }
  .wm__bar { padding: 0 6px 0 14px; gap: 8px; }
  .wm__logo img { height: 30px; }
  .wm__tag { font-size: 8.5px; letter-spacing: .14em; }
  .wm__link { padding: 14px 20px; font-size: 17px; }
  .wm__link:hover, .wm__link:focus-visible, .wm__link.active { padding-left: 26px; }
  .wm__btn { font-size: 11px; letter-spacing: .08em; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm__panel, .wm__sub, .wm__tag-txt { transition: none; }
  .wm__list > li, .wm__cta, .wm__social { translate: none; transition: opacity .2s ease; }
  .wm.is-open .wm__list > li, .wm.is-open .wm__cta, .wm.is-open .wm__social { transition-delay: 0s; }
}

/* .social-icon do site, com os valores das variáveis dele */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7B2D8B 0%, #E91E8C 100%);
  color: #ffffff;
  transition: all .25s ease;
}
.social-icon:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(123,45,139,.25); }

/* página atual: o site não precisa (lá os dois botões levam para fora dele) */
.wm__btn[aria-current="page"] { box-shadow: inset 0 0 0 2px #ff9ad8; }