/* Ofício — o que não pode ser inline: media queries, foco visível, o traço,
   a entrada escalonada e a brasa. Decisões visuais moram na direcao-visual-v2.md. */

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ofc-accent);
  outline-offset: 3px;
  border-radius: var(--ofc-radius-sm);
}

/* ============================ entrada =====================================
   Escalonamento dos filhos, não do bloco. 12px, curva com overshoot curto. */

[data-entra] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms cubic-bezier(0.22, 1.08, 0.36, 1),
              transform 520ms cubic-bezier(0.22, 1.08, 0.36, 1);
}
[data-escalonar].is-in > [data-entra] { opacity: 1; transform: none; }

/* ============================ acessibilidade ============================== */

@media (prefers-reduced-motion: reduce) {
  [data-entra] { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ---- telefone: o desktop não é comprimido, é redesenhado ---- */
@media (max-width: 900px) {
  .ofc-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* grade própria da prova: sem isso o celular do mockup é espremido a 115px */
  [data-grade-prova] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--ofc-space-8) !important;
  }
  .ofc-grid > * { grid-column: auto / span 1 !important; }
  .ofc-section-header { flex-direction: column; align-items: flex-start; }
  .ofc-footer__top { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 760px) {
  :root, .ofc-root {
    --ofc-size-display: 2.5rem;
    --ofc-size-xl: 1.875rem;
    --ofc-size-lg: 1.5rem;
    --ofc-size-md: 1.1875rem;
    --ofc-space-9: 56px;
    --ofc-space-10: 72px;
    --ofc-container-lg: 100%;
  }
  .ofc-container { padding-inline: var(--ofc-space-4); }
  .ofc-hero__title, .ofc-hero--center .ofc-hero__title { max-width: 100%; }
  .ofc-hero { padding-block: var(--ofc-space-7); }
  .ofc-hero__actions { width: 100%; }
  .ofc-hero__actions > a { width: 100%; justify-content: center; }
  .ofc-button--lg { padding: 15px 20px; }

  /* cápsula do topo: no telefone ela guarda só o botão; a navegação vira painel */
  [data-site-header] { flex-wrap: wrap; row-gap: var(--ofc-space-3); border-radius: var(--ofc-radius-lg) !important; padding: var(--ofc-space-2) var(--ofc-space-3) !important; }
  [data-site-header] > nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: var(--ofc-space-5) !important;
    padding-top: var(--ofc-space-3);
    border-top: var(--ofc-hairline) solid var(--ofc-border);
    scrollbar-width: none;
    font-family: var(--ofc-font-mono);
    font-size: var(--ofc-size-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  [data-site-header] > nav::-webkit-scrollbar { display: none; }

  [data-media] { min-height: 260px !important; }
  /* sem o CTA, a cápsula caiu para 70px numa linha só — a folga de 200px que
     ela exigia deixava a linha fina fora da primeira dobra */
  /* sem o CTA, a cápsula caiu para 70px numa linha só — a folga de 200px que
     ela exigia deixava a linha fina fora da primeira dobra */
  [data-hero-shell] {
    min-height: 88vh !important;
    padding-top: 112px !important;
  }
  [data-mono-row] { row-gap: var(--ofc-space-2) !important; }

  /* prova e retrato: o slot manda na altura, não uma altura fixa de desktop */
  [data-slot-conversa] { max-width: 280px; }
  [data-slot-retrato] { max-width: 100%; }
}

@media (max-width: 520px) {
  [data-mono-row] > span[aria-hidden="true"] { display: none; }
}

/* ---- alvos de toque: 44px é o mínimo confortável no dedo ----
   Medido antes: navegação 24px, botões 29px, links de rodapé 18px. */
@media (max-width: 900px) {
  [data-site-header] > nav a,
  [data-site-header] > a,
  .ofc-footer a,
  .ofc-footer__link,
  [class*="ofc-footer"] a,
  [data-pular] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .ofc-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* rodapé: com 44px por link a coluna fica alta demais se ficar espremida */
  .ofc-footer a { padding-block: 2px; }

  /* e-mail e telefone são sempre alvo de toque, nunca link no meio de frase —
     achado em 26/08: o do corpo da Contato media 30px, porque a regra de cima
     só alcançava os do rodapé */
  a[href^="mailto:"],
  a[href^="tel:"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}