/* RP Talentos e Estágios — ajustes próprios.
   styles.css traz o sistema de utilitários (cores, tipografia, espaçamento).
   Este arquivo é o lugar de qualquer ajuste feito daqui pra frente:
   editar aqui nunca quebra o layout base. */

/* --- Header fixo: transparente sobre o topo escuro, sólido ao rolar ------ */
header {
  transition: background-color .3s ease, box-shadow .3s ease;
}

header.is-scrolled,
header.menu-aberto {
  background-color: var(--pure);
  box-shadow: 0 1px 0 var(--border), 0 8px 24px -16px rgb(0 0 0 / .25);
}

/* o logo é desenhado com currentColor — muda junto com o texto */
header.is-scrolled svg,
header.menu-aberto svg {
  color: var(--ink);
}

header.is-scrolled nav a:not([class*="bg-"]),
header.menu-aberto nav a:not([class*="bg-"]) {
  color: color-mix(in oklab, var(--ink) 70%, transparent);
}

header.is-scrolled nav a:not([class*="bg-"]):hover,
header.menu-aberto nav a:not([class*="bg-"]):hover {
  color: var(--ink);
}

/* o botão "Falar com a RP" é branco sobre o hero; ao rolar, inverte */
header.is-scrolled nav a[class*="bg-pure"] {
  background-color: var(--ink);
  color: var(--pure);
}

/* botão do menu mobile */
header.is-scrolled [data-menu-toggle],
header.menu-aberto [data-menu-toggle] {
  border-color: color-mix(in oklab, var(--ink) 25%, transparent);
  color: var(--ink);
}

/* --- Menu mobile --------------------------------------------------------
   Escrito à mão de propósito. styles.css é o CSS já compilado do site
   original: só contém as classes que aquele site usava. Classe utilitária
   nova (z-40, pt-24, py-3.5…) não existe lá e falha em silêncio.
   Regra da casa: elemento novo = estilo neste arquivo. Ver COMO-EDITAR.md. */
#menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 45;              /* acima das seções, abaixo do header (z-50) */
  background-color: var(--warm);
  padding: 6rem 1.25rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#menu-mobile nav {
  display: flex;
  flex-direction: column;
  max-width: 80rem;
  margin-inline: auto;
}

#menu-mobile [data-menu-link] {
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  padding-block: 1rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  transition: color .2s ease;
}

#menu-mobile [data-menu-link]:hover {
  color: var(--gray-mid);
}

#menu-mobile [data-menu-cta] {
  margin-top: 2rem;
  border-radius: .125rem;
  background-color: var(--ink);
  padding: .875rem 1.25rem;
  text-align: center;
  font-size: .875rem;
  font-weight: 600;
  color: var(--pure);
  transition: opacity .2s ease;
}

#menu-mobile [data-menu-cta]:hover {
  opacity: .85;
}

@media (min-width: 1024px) {
  #menu-mobile { display: none !important; }
}

/* --- Página da área restrita -------------------------------------------- */
[data-acoes] {
  justify-content: center;
}

/* o botão sólido não tem borda; sem isto fica 2px mais baixo que o vazado */
[data-acoes] a {
  border: 1px solid transparent;
}

/* --- Âncoras: o header fixo não pode cobrir o título da seção ------------ */
html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Carrossel ---------------------------------------------------------- */
[data-carousel-track] {
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-carousel-track] { transition: none; }
}

[data-carousel-track] > [aria-hidden="true"] {
  /* continua ocupando espaço no trilho, mas sai da leitura de tela */
  visibility: visible;
}

[data-carousel-prev][disabled],
[data-carousel-next][disabled] {
  opacity: .4;
  cursor: not-allowed;
}

/* --- "Ver detalhes": o ícone + vira × quando o card está aberto --------- */
button[aria-controls^="detalhes-"] svg {
  transition: transform .25s ease;
}

button[aria-controls^="detalhes-"].esta-aberto svg {
  transform: rotate(45deg);
}

/* --- Foco visível (acessibilidade) -------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* --- Impressão ---------------------------------------------------------- */
@media print {
  .no-print { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* no papel os detalhes dos serviços saem abertos */
  .print-open { display: block !important; }
  header { position: static; }
}