/*
 * CloudPG - estilos complementares do site estático.
 * O arquivo css/style.css (Tailwind compilado do projeto React) traz o visual
 * principal; aqui ficam apenas os comportamentos que antes dependiam de
 * JavaScript/framer-motion (dropdown, FAQ, ícones de seleção, hover dos cards).
 */

html {
  scroll-behavior: smooth;
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Acessibilidade */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: #0a2540;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* Navbar: dropdown "Mais" (desktop) só com CSS */
.nav-dropdown-menu {
  display: none;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-chevron {
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron {
  transform: rotate(180deg);
}

[data-nav-link][aria-current='page'] {
  color: #38bdf8;
}

/* FAQ com <details>/<summary> */
.faq-item > summary {
  list-style: none;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

/* Cards: efeito de elevação que antes era feito pelo framer-motion */
.plan-card,
article.shadow-lg.overflow-hidden {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-card:hover {
  transform: translateY(-8px);
}

article.shadow-lg.overflow-hidden:hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .plan-card:hover,
  article.shadow-lg.overflow-hidden:hover {
    transform: none;
  }
}

/* Seletor de região do configurador: ícone de "selecionado" */
.check-icon {
  display: none;
}

[aria-pressed='true'] .check-icon {
  display: block;
}

/* Mensagens de formulário */
.form-status {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.form-status[data-state='success'] {
  color: #34d399;
}

.form-status[data-state='error'] {
  color: #f87171;
}

/* =========================================================================
 * TEMA ESCURO: azul-marinho quase preto, botões azul-claro, texto branco.
 * Sobrescreve o style.css (Tailwind compilado) sem mexer nele, então o tema
 * sobrevive a "npm run build:static". Para ajustar a paleta, edite só as
 * variáveis do :root logo abaixo.
 * ========================================================================= */
:root {
  color-scheme: dark;

  --bg: #050b16;
  --bg-band: #07111f;
  --surface: #0b1730;
  --surface-2: #10203b;
  --surface-3: #162a4a;
  --line: rgba(148, 184, 235, 0.16);
  --line-strong: rgba(148, 184, 235, 0.28);
  --text: #f8fafc;
  --text-soft: #cbd5e1;
  --text-muted: #a3b4cb;
  --text-faint: #8da2bf;

  /* Botões: azul-claro com texto branco */
  --btn-bg: #1a8fe3;
  --btn-bg-hover: #2ba3f5;

  /* Variáveis que o style.css já usa (fundos, links, ícones, slider) */
  --color-primary: #050b16;
  --color-primary-light: #0b1c36;
  --color-primary-dark: #02060d;
  --color-accent: #38bdf8;
  --color-accent-light: #7dd3fc;
  --color-accent-dark: #7dd3fc;
}

body {
  background-color: var(--bg);
  color: var(--text);
}

/* Fundos */
.bg-white {
  background-color: var(--surface);
}

.bg-gray-50 {
  background-color: var(--bg-band);
}

.bg-gray-100 {
  background-color: var(--surface-2);
}

.bg-gray-200 {
  background-color: var(--surface-3);
}

.hover\:bg-gray-50:hover {
  background-color: var(--surface-2);
}

.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover {
  background-color: var(--surface-3);
}

.hover\:bg-accent\/5:hover {
  background-color: rgba(56, 189, 248, 0.08);
}

.hover\:border-accent\/50:hover {
  border-color: rgba(56, 189, 248, 0.5);
}

/* Textos */
.text-primary,
.hover\:text-primary:hover {
  color: var(--text) !important;
}

.text-gray-900 {
  color: var(--text);
}

.text-gray-700 {
  color: var(--text-soft);
}

.text-gray-600 {
  color: var(--text-muted);
}

.text-gray-500 {
  color: var(--text-faint);
}

/* Bordas */
.border-gray-100,
.border-gray-200 {
  border-color: var(--line);
}

.border-gray-300,
.border-gray-600,
.border-gray-700 {
  border-color: var(--line-strong);
}

/* Gradientes (o style.css fixa os tons antigos em hexadecimal) */
.from-primary {
  --tw-gradient-from: #050b16 var(--tw-gradient-from-position, );
  --tw-gradient-to: rgb(5 11 22 / 0) var(--tw-gradient-to-position, );
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-primary-light {
  --tw-gradient-to: rgb(11 31 61 / 0) var(--tw-gradient-to-position, );
  --tw-gradient-stops: var(--tw-gradient-from), #0b1f3d var(--tw-gradient-via-position, ), var(--tw-gradient-to);
}

.to-primary {
  --tw-gradient-to: #050b16 var(--tw-gradient-to-position, );
}

.to-primary-light {
  --tw-gradient-to: #0b1f3d var(--tw-gradient-to-position, );
}

/* Selos de status (versões escuras das cores claras) */
.bg-blue-100 {
  background-color: rgba(56, 189, 248, 0.14);
}

.text-blue-700 {
  color: #7dd3fc;
}

.bg-green-100 {
  background-color: rgba(34, 197, 94, 0.14);
}

.text-green-700 {
  color: #86efac;
}

.bg-red-100 {
  background-color: rgba(239, 68, 68, 0.14);
}

.text-red-700 {
  color: #fca5a5;
}

.bg-yellow-100 {
  background-color: rgba(250, 204, 21, 0.14);
}

.text-yellow-700 {
  color: #fde047;
}

/* Botões azul-claro com texto branco */
.btn-primary {
  background-color: var(--btn-bg);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(26, 143, 227, 0.6);
}

.btn-primary:hover {
  background-color: var(--btn-bg-hover);
  box-shadow: 0 10px 30px -8px rgba(56, 189, 248, 0.7);
}

.bg-accent {
  background-color: var(--btn-bg) !important;
}

.bg-accent.hover\:bg-accent-dark:hover {
  background-color: var(--btn-bg-hover) !important;
}

.btn-secondary {
  background-color: var(--surface-2);
  color: #fff;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.btn-secondary:hover {
  background-color: var(--surface-3);
  border-color: rgba(56, 189, 248, 0.6);
}

/* Botão "Ver planos" (antes branco): contorno sobre o fundo escuro */
a.bg-white.font-semibold {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Seletor de região dos planos: o botão ativo (trocado pelo JS) fica azul */
[data-region-btn].bg-white {
  background-color: var(--btn-bg);
  box-shadow: 0 6px 18px -8px rgba(26, 143, 227, 0.7);
}

[data-region-btn].bg-white.text-primary {
  color: #fff !important;
}

/* Cards: o sombreado escuro some no fundo escuro, então vira contorno fino */
.bg-white:is(.rounded-xl, .rounded-2xl):not([class*='border']):not([class*='ring-']) {
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}

/* Navbar */
nav.bg-white {
  background-color: rgba(5, 11, 22, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}

nav .border-t {
  border-color: var(--line);
}

footer.bg-primary {
  border-top: 1px solid var(--line);
}

/* Campos de formulário */
input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='hidden']),
textarea,
select {
  background-color: #07111f;
  color: var(--text);
  border-color: var(--line-strong);
}

input::placeholder,
textarea::placeholder {
  color: #7f93ae;
}

/* Conteúdo dos artigos do blog */
.prose {
  color: var(--text-soft);
}

.prose h2,
.prose h3,
.prose strong,
.prose th {
  color: var(--text);
}

.prose thead {
  border-bottom-color: var(--line-strong);
}

.prose td {
  border-bottom-color: var(--line);
}

.prose pre {
  background-color: #0a1428;
  border: 1px solid var(--line);
}

/* =========================================================================
 * HERO da home: animação de rede de servidores (canvas criado pelo main.js).
 * Servidores com LEDs piscando, ligados por links onde "pacotes de dados"
 * trafegam, sobre uma grade tecnológica e uma varredura de luz.
 * ========================================================================= */
.hero-tech {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image:
    radial-gradient(60% 80% at 85% 10%, rgba(56, 189, 248, 0.14), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(30, 100, 220, 0.16), transparent 65%);
}

.hero-tech > .hero-tech__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Véu de leitura: escurece o lado do texto, deixando a animação aparecer à direita */
.hero-tech::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 11, 22, 0.82) 0%, rgba(5, 11, 22, 0.45) 45%, rgba(5, 11, 22, 0) 78%);
}

@media (max-width: 767px) {
  .hero-tech::after {
    background: linear-gradient(180deg, rgba(5, 11, 22, 0.72) 0%, rgba(5, 11, 22, 0.4) 100%);
  }
}

.hero-tech > .container-custom {
  position: relative;
  z-index: 1;
}