/*
 * Zikes Theme
 * Camada leve de branding complementar ao `styles.css`.
 * O layout base, navegação e comportamento responsivo ficam em `styles.css`.
 * Aqui entram só refinamentos visuais reaproveitáveis.
 */

/* Variante outline para CTAs onde o tema precisar de uma 3a hierarquia visual. */
.btn-outline-primary {
  background: rgba(255, 255, 255, 0.72);
  color: var(--sky-500);
  border: 1px solid rgba(16, 52, 166, 0.22);
  box-shadow: 0 10px 24px rgba(8, 17, 31, 0.06);
  font-weight: 800;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-900);
  border-color: rgba(16, 52, 166, 0.38);
  box-shadow: 0 16px 30px rgba(16, 52, 166, 0.12);
}

/* O header usa o mesmo layout do sistema base, com botões em pílula como assinatura visual. */
.site-header .nav-actions {
  gap: 14px;
}

/* Aplica o estilo de pílula a todos os botões no header, exceto o botão de menu mobile. */
.site-header .nav-actions > .btn:not(.menu-btn) {
  min-width: 112px;
  border-radius: 999px;
}

@media (max-width: 1180px) {
  .site-header .nav-actions > .btn-ghost:not(.menu-btn) {
    display: none;
  }

  .site-header .nav-actions > .btn:not(.menu-btn) {
    min-width: 98px;
  }
}

.site-header .btn-ghost,
.site-header .btn-outline-primary {
  background: rgba(255, 255, 255, 0.88);
  color: var(--sky-500);
  border-color: rgba(16, 52, 166, 0.12);
}

.site-header .btn-ghost:hover,
.site-header .btn-ghost:focus-visible,
.site-header .btn-outline-primary:hover,
.site-header .btn-outline-primary:focus-visible {
  background: white;
  border-color: rgba(16, 52, 166, 0.22);
}

@media (max-width: 860px) {
  .site-header .nav-actions {
    gap: 10px;
  }

  /* Remove a largura mínima em telas menores para os botões se ajustarem. */
  .site-header .nav-actions > .btn:not(.menu-btn) {
    min-width: auto;
  }
}