/*
 * "System design" da v3 (laranja + indigo, anguloso) aplicado ao restante
 * do site publico -- menu, rodape, catalogo, recursos, noticias, faq, etc.
 * Carregado globalmente por layouts.landing.layout SO quando
 * data-design="v3" esta ativo (ver routes/web.php e o layout).
 *
 * Nao mexe na home em si (page/index*.blade.php ja tem seu proprio CSS por
 * versao); aqui e so o que e compartilhado entre paginas: cabecalho,
 * rodape, botoes, cards, badges e os poucos tokens de cor repetidos via
 * classes arbitrarias do Tailwind (bg-[#1a202c] etc.), que nao existem
 * como variavel e por isso precisam ser sobrescritas classe a classe.
 *
 * Tratamento deliberadamente mais comedido que o da home v3: paginas como
 * o catalogo mostram nomes de jogos/consoles reais, de tamanho e conteudo
 * imprevisiveis -- por isso a fonte condensada (Anton) so entra em titulos
 * estaticos (.page-heading, .hero-title) e em elementos de interface que
 * controlamos (botoes, badges, cabecalho), nunca em nomes de produto.
 */

[data-design="v3"] {
    --accent: #ff5a1f;
}

/* ---------- Tipografia ---------- */

[data-design="v3"] .page-heading,
[data-design="v3"] .hero-title {
    font-family: 'Anton', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-weight: 400;
}

/* ---------- Cabecalho e rodape (dividem a classe .header-bg -- por isso os
   seletores por elemento, pra nao vazar a borda do header pro footer) ---------- */

[data-design="v3"] .header-bg {
    background-color: #14181f;
}

[data-design="v3"] header.header-bg {
    border-bottom: 2px solid #ff5a1f;
}

[data-design="v3"] .nav-link {
    position: relative;
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

[data-design="v3"] .nav-link:hover,
[data-design="v3"] .nav-link.active {
    color: #ff5a1f;
}

[data-design="v3"] .language-dropdown,
[data-design="v3"] .mobile-menu {
    background-color: #14181f;
}

[data-design="v3"] .hamburger span {
    background-color: #ff5a1f;
}

/* ---------- Rodape ---------- */

[data-design="v3"] .footer-divider {
    position: relative;
    overflow: hidden;
    height: 10px;
    transform: skewY(-1.5deg);
    background: linear-gradient(100deg, #ff5a1f, #6366f1 130%);
}

[data-design="v3"] footer#contact {
    position: relative;
    overflow: hidden;
}

[data-design="v3"] footer#contact::before {
    content: '';
    position: absolute;
    bottom: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 60rem;
    max-width: 140%;
    height: 20rem;
    background: radial-gradient(closest-side, rgba(255, 90, 31, 0.12), transparent 75%);
    pointer-events: none;
    z-index: 0;
}

[data-design="v3"] footer#contact > * {
    position: relative;
    z-index: 1;
}

[data-design="v3"] .footer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Anton', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 1.15rem;
}

[data-design="v3"] .footer-brand-icon {
    display: inline-flex;
    color: #ff5a1f;
    font-size: 1.3rem;
    animation: v3-footer-icon-pulse 3s ease-in-out infinite;
}

@keyframes v3-footer-icon-pulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255, 90, 31, 0);
    }

    50% {
        transform: scale(1.15);
        text-shadow: 0 0 12px rgba(255, 90, 31, 0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-design="v3"] .footer-brand-icon {
        animation: none;
    }
}

[data-design="v3"] footer#contact a {
    display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease;
}

[data-design="v3"] footer#contact li a:hover {
    transform: translateX(3px);
}

[data-design="v3"] .footer-tagline {
    color: #ff8a3d;
    font-weight: 600;
}

/* ---------- Botoes ---------- */

[data-design="v3"] .btn-primary {
    background-color: #ff5a1f;
    color: #0d121c;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%);
}

[data-design="v3"] .btn-primary:hover {
    background-color: #ff8a3d;
}

[data-design="v3"] .btn-secondary {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%);
}

[data-design="v3"] .btn-secondary:hover {
    background-color: transparent;
    border-color: #ff5a1f;
    color: #ff5a1f;
}

/* ---------- Tokens de cor repetidos via classes arbitrarias do Tailwind
   (nao existem como variavel -- sobrescreve classe a classe) ---------- */

[data-design="v3"] .border-\[\#2d3748\] {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-design="v3"] .bg-\[\#1a202c\] {
    background-color: #161c28 !important;
}

[data-design="v3"] .bg-\[\#2d3748\] {
    background-color: #232a38 !important;
}

[data-design="v3"] .border-\[\#6366f1\] {
    border-color: #ff5a1f !important;
}

[data-design="v3"] .bg-\[\#6366f1\] {
    background-color: #ff5a1f !important;
}

[data-design="v3"] .bg-\[\#6366f1\]\/20 {
    background-color: rgba(255, 90, 31, 0.2) !important;
}

[data-design="v3"] .text-\[\#6366f1\] {
    color: #ff5a1f !important;
}

[data-design="v3"] .text-\[\#a5b4fc\] {
    color: #ffb27a !important;
}

[data-design="v3"] .hover\:border-\[\#6366f1\]:hover {
    border-color: #ff5a1f !important;
}

[data-design="v3"] .hover\:text-\[\#6366f1\]:hover {
    color: #ff5a1f !important;
}

[data-design="v3"] .hover\:bg-\[\#1a202c\]:hover {
    background-color: #1c2331 !important;
}

/* ---------- Abas, filtros, paginacao ---------- */

[data-design="v3"] .catalog-pagination a:hover {
    color: #ff5a1f;
}

/* ---------- FAQ (details/summary) ---------- */

[data-design="v3"] details summary::marker {
    color: #ff5a1f;
}

/* PG-287: botoes Registrar/Entrar do menu mobile sao <a>; `.mobile-menu a`
   (landing.css) nao pode sobrescrever as cores do design v3. */
[data-design="v3"] .mobile-menu a.btn-primary,
[data-design="v3"] .mobile-menu a.btn-primary:hover {
    color: #0d121c;
    background-color: #ff5a1f;
}

[data-design="v3"] .mobile-menu a.btn-primary:hover {
    background-color: #ff8a3d;
}

[data-design="v3"] .mobile-menu a.btn-secondary {
    color: #ffffff;
    background-color: transparent;
}

[data-design="v3"] .mobile-menu a.btn-secondary:hover {
    color: #ff5a1f;
    background-color: transparent;
}