/*
 * SPEH-X — Layout público do ATLETA (v2.3, 2026-10-09, imagem de referência aprovada).
 * SÓ APRESENTAÇÃO. Toda regra visual exige a marca `body.spx-layout-atleta`, que o
 * servidor (SpehxCorePublicNavMenu) só põe para VISITANTE e ATLETA e NUNCA na página
 * do Administrador Master (ID 444). Sem a marca - Master logado, página 444,
 * administrador, Judge, Coordenador, Box, Professor - este arquivo não altera nada.
 * O menu continua o do Editor do Site (#31); ordem e aparência vêm daqui; destinos e
 * visibilidade por perfil continuam no filtro. Remover este arquivo devolve o visual anterior.
 */

:root {
    --spx-menu-laranja: #ff4d14;
    --spx-menu-fundo: #0b0b0d;
    --spx-menu-linha: rgba(255, 255, 255, 0.12);
    --spx-menu-texto: #ffffff;
    --spx-menu-sub: #a9a9b0;
    --spx-ico-acesso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
    --spx-ico-competicoes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4z'/%3E%3Cpath d='M7 6H4v1a3 3 0 0 0 3 3M17 6h3v1a3 3 0 0 1-3 3'/%3E%3C/svg%3E");
    --spx-ico-ranking: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='13' width='3' height='7'/%3E%3Crect x='10.5' y='9' width='3' height='11'/%3E%3Crect x='17' y='4' width='3' height='16'/%3E%3C/svg%3E");
    --spx-ico-como-funciona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E");
    --spx-ico-atletas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 14.2c2.9.4 5 2.7 5 5.8'/%3E%3C/svg%3E");
    --spx-ico-boxes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7z'/%3E%3Cpath d='M3 7l9 5 9-5M12 12v10'/%3E%3C/svg%3E");
    --spx-ico-arena: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 9.5v4l2.5 2M9.5 2.5h5M12 2.5v3.5M18.5 6.5l1.5-1.5'/%3E%3C/svg%3E");
    --spx-ico-admin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E");
    --spx-ico-sair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}

/* ---------- Cabeçalho ---------- */

/* Linha de destaque sob o cabeçalho e logo sem a moldura branca (arquivo da logo intocado). */
body.spx-layout-atleta header.site-header {
    border-bottom: 2px solid var(--spx-menu-laranja);
}

body.spx-layout-atleta header.site-header .wp-block-site-logo img {
    border: 0 !important;
}

/* Conta e carrinho fora do cabeçalho do atleta (só visual: login no painel, "Sair" no
 * painel; WooCommerce, checkout e pagamentos seguem ativos). */
body.spx-layout-atleta header.site-header .wc-block-customer-account__link,
body.spx-layout-atleta header.site-header .wc-block-customer-account,
body.spx-layout-atleta header.site-header .wp-block-woocommerce-customer-account,
body.spx-layout-atleta header.site-header .wp-block-woocommerce-mini-cart {
    display: none !important;
}

/* Grupo da navegação: "Início" à esquerda, ☰ à direita (como na imagem). */
body.spx-layout-atleta header.site-header .hostinger-ai-site-navigation-wrapper {
    justify-content: space-between !important;
    flex-grow: 1;
}

body.spx-layout-atleta header.site-header nav.wp-block-navigation {
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center;
    gap: 24px;
}

/* Botão ☰ circular laranja, em todas as larguras (abre o painel nativo do WordPress). */
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open {
    order: 2;
    display: flex !important;
    width: 46px;
    height: 46px;
    border: 2px solid var(--spx-menu-laranja) !important;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--spx-menu-texto) !important;
    background: transparent !important;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open svg {
    width: 24px;
    height: 24px;
}

/* Painel FECHADO: só o item "Início" fica à mostra no cabeçalho. */
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    order: 1;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: auto !important;
    overflow: visible !important;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
    display: none !important;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content,
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    gap: 0 !important;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:not(.spx-nav--inicio) {
    display: none !important;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--inicio > .wp-block-navigation-item__content {
    color: var(--spx-menu-texto) !important;
    font-weight: 600;
    padding: 6px 2px !important;
    border-bottom: 2px solid transparent;
    text-decoration: none !important;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--inicio > .wp-block-navigation-item__content[aria-current="page"],
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--inicio > .wp-block-navigation-item__content:hover,
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--inicio > .wp-block-navigation-item__content:focus-visible {
    border-bottom-color: var(--spx-menu-laranja);
}

/* ---------- Painel lateral (aberto) ---------- */

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open {
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(400px, 100vw) !important;
    box-sizing: border-box;
    background: var(--spx-menu-fundo) !important;
    color: var(--spx-menu-texto) !important;
    border-left: 3px solid var(--spx-menu-laranja);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
    padding: 22px 22px 28px !important;
    overflow-y: auto;
    animation: spx-menu-entrar 0.22s ease-out;
}

@keyframes spx-menu-entrar {
    from {
        transform: translateX(40px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: 18px !important;
    right: 18px !important;
    color: var(--spx-menu-texto) !important;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    width: 28px;
    height: 28px;
}

/* Contêineres internos do painel nativo ocupam a altura toda (assim "Sair" fica na base). */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: stretch !important;
    padding-top: 52px !important;
    gap: 0 !important;
    flex: 1 1 auto;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100%;
    flex: 1 1 auto;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    margin: 0 !important;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: grid !important;
    grid-template-columns: 38px 1fr 14px;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    width: 100%;
    padding: 16px 6px !important;
    color: var(--spx-menu-texto) !important;
    text-decoration: none !important;
    box-sizing: border-box;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
    grid-column: 2;
    grid-row: 1;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__description {
    grid-column: 2;
    grid-row: 2;
    display: block;
    margin-top: 3px;
    color: var(--spx-menu-sub);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    line-height: 1.3;
}

/* Ícone e seta: itens reconhecidos pelo filtro e o submenu ARENA (acesso existente à Arena). */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav-item > .wp-block-navigation-item__content::before,
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    background: var(--spx-ico, none) no-repeat center / contain;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::before {
    background-image: var(--spx-ico-arena);
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav-item > .wp-block-navigation-item__content::after,
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
    content: "";
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.8;
}

.spx-nav--acesso { --spx-ico: var(--spx-ico-acesso); }
.spx-nav--competicoes { --spx-ico: var(--spx-ico-competicoes); }
.spx-nav--ranking { --spx-ico: var(--spx-ico-ranking); }
.spx-nav--como-funciona { --spx-ico: var(--spx-ico-como-funciona); }
.spx-nav--atletas { --spx-ico: var(--spx-ico-atletas); }
.spx-nav--boxes { --spx-ico: var(--spx-ico-boxes); }
.spx-nav--admin { --spx-ico: var(--spx-ico-admin); }
.spx-nav--sair { --spx-ico: var(--spx-ico-sair); }

/* Ordem da imagem (sem mexer no menu #31): Entrar/Cadastrar, Competições, Ranking,
 * Como Funciona | Atletas, Boxes | ARENA (acesso existente) | administrativos | Sair. */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--inicio { display: none !important; }
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--acesso { order: -1; }
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--competicoes { order: 1; }
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--ranking { order: 2; }
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--como-funciona { order: 3; }
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--atletas { order: 4; }
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--boxes { order: 5; }
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu { order: 6; }
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--admin { order: 7; }
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--sair { order: 9; }

/* ENTRAR / CADASTRAR (ou MINHA ÁREA) em destaque no topo do painel. */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--acesso {
    margin-bottom: 18px !important;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--acesso > .wp-block-navigation-item__content {
    grid-template-columns: 46px 1fr 14px;
    background: var(--spx-menu-laranja);
    border-radius: 4px;
    padding: 16px 14px !important;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--acesso > .wp-block-navigation-item__content::before {
    width: 42px;
    height: 42px;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--acesso .wp-block-navigation-item__description {
    color: rgba(255, 255, 255, 0.9);
}

/* Separador antes de ATLETAS (como na imagem). */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--atletas {
    border-top: 1px solid var(--spx-menu-linha);
    margin-top: 10px !important;
    padding-top: 10px;
}

/* "Como Funciona": só visual nesta fase (sem link). */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav-visual > .wp-block-navigation-item__content {
    cursor: default;
}

/* Submenu ARENA mantido: sem o botão de expandir e sem o recuo do desktop. */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    display: none !important;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 22px !important;
    gap: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* "Arena Demonstração": o tema pinta `.spx-arena-tv-submenu-item` de #161616 (feito para o
 * submenu branco do desktop); no painel escuro volta à cor do grupo administrativo. */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-arena-tv-submenu-item .wp-block-navigation-item__content,
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-arena-tv-submenu-item .wp-block-navigation-item__label {
    color: var(--spx-menu-sub) !important;
}

/* Grupo administrativo (só para quem tem permissão): separado e discreto. */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav-item:not(.spx-nav--admin) + .spx-nav--admin,
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu + .spx-nav--admin {
    border-top: 1px solid var(--spx-menu-linha);
    margin-top: 10px !important;
    padding-top: 10px;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--admin .wp-block-navigation-item__label {
    font-size: 13px;
    color: var(--spx-menu-sub);
}

/* "Sair" (atleta logado) na base do painel. */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--sair {
    margin-top: auto !important;
    border-top: 1px solid var(--spx-menu-linha);
    padding-top: 10px;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--sair .wp-block-navigation-item__label {
    color: var(--spx-menu-sub);
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
    color: var(--spx-menu-laranja);
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav-visual > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--acesso > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
    color: var(--spx-menu-texto);
}

/* ---------- Celular ---------- */

/*
 * O bloco Logo do tema tem 450px e a grade do cabeçalho usa colunas de no mínimo 450px; no
 * celular isso empurrava o cabeçalho para fora da tela. Só no layout do atleta: logo menor e
 * grade em duas colunas (logo | Início · ☰). O título "PERFORMANCE" do Elementor (Home) é
 * mais largo que a tela e esticava a área de layout do celular: corta-se só a sobra do
 * conteúdo Elementor da Home (Ranking, Arena e demais páginas mantêm a rolagem lateral).
 */
@media (max-width: 600px) {
    body.spx-layout-atleta header.site-header .hostinger-ai-menu-wrapper {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center;
        column-gap: 12px;
    }

    body.spx-layout-atleta header.site-header .hostinger-ai-menu-wrapper > * {
        grid-column: auto !important;
        min-width: 0;
    }

    body.spx-layout-atleta header.site-header .hostinger-ai-menu-wrapper > .wp-block-group:has(.wp-block-site-logo) {
        flex-basis: auto !important;
    }

    body.spx-layout-atleta header.site-header .wp-block-site-logo,
    body.spx-layout-atleta header.site-header .wp-block-site-logo .custom-logo-link {
        width: auto !important;
        min-width: 0;
    }

    body.spx-layout-atleta header.site-header .wp-block-site-logo img {
        width: 130px !important;
        max-width: 100%;
        height: auto !important;
    }

    body.spx-layout-atleta header.site-header nav.wp-block-navigation {
        gap: 14px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--inicio > .wp-block-navigation-item__content {
        font-size: 14px;
    }

    body.spx-layout-atleta.home .elementor[data-elementor-type="wp-page"] {
        overflow-x: hidden;
        overflow-x: clip;
    }

    body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open {
        left: 0 !important;
        right: auto !important;
        width: 100vw !important;
        border-left: 0;
        padding: 18px 16px 24px !important;
    }
}

/* v2.3.1 — Setas à esquerda do texto (ícone → seta → texto). Só reposiciona colunas da grade;
 * ícones, cores, textos, ordem e destinos ficam como na v2.3. */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    grid-template-columns: 38px 10px 1fr;
    column-gap: 14px;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--acesso > .wp-block-navigation-item__content {
    grid-template-columns: 46px 10px 1fr;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label,
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__description {
    grid-column: 3;
}

body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav-item > .wp-block-navigation-item__content::after,
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
    grid-column: 2;
}

/* v2.5 — Acesso permanente com UM só elemento: o próprio botão laranja do painel
 * (li.spx-nav--acesso) fica à mostra no cabeçalho com o painel fechado; com o painel
 * aberto, é o mesmo elemento no topo do painel. 1º clique (fechado) abre o menu; com o
 * menu aberto, navega (script do filtro). */
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    align-items: center !important;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li.spx-nav--acesso {
    display: flex !important;
    margin-left: 18px !important;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 9px 14px !important;
    background: var(--spx-menu-laranja);
    border-radius: 4px;
    color: var(--spx-menu-texto) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-transform: uppercase;
    white-space: nowrap;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content::before {
    content: "";
    order: 0;
    flex: none;
    width: 18px;
    height: 18px;
    background: var(--spx-ico-acesso) no-repeat center / contain;
}

/* Seta entre o ícone e o texto, com o mesmo desenho do painel. */
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content::after {
    content: "";
    order: 1;
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.8;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso .wp-block-navigation-item__label {
    order: 2;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso .wp-block-navigation-item__description {
    display: none !important;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content:hover,
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content:focus-visible {
    filter: brightness(1.1);
}

@media (max-width: 600px) {
    body.spx-layout-atleta header.site-header .wp-block-site-logo img {
        width: 100px !important;
    }

    body.spx-layout-atleta header.site-header nav.wp-block-navigation {
        gap: 8px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li.spx-nav--acesso {
        margin-left: 8px !important;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content {
        gap: 5px;
        padding: 5px 7px !important;
        font-size: 10px;
        letter-spacing: 0;
        white-space: normal;
        max-width: 100px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content::before {
        width: 14px;
        height: 14px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content::after {
        width: 5px;
        height: 5px;
        border-width: 1.5px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open {
        width: 40px;
        height: 40px;
    }
}

/* Celulares estreitos (até 360px): tudo numa linha sem encostar. */
@media (max-width: 360px) {
    body.spx-layout-atleta header.site-header .wp-block-site-logo img {
        width: 70px !important;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--inicio > .wp-block-navigation-item__content {
        font-size: 13px;
    }

    body.spx-layout-atleta header.site-header nav.wp-block-navigation {
        gap: 6px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li.spx-nav--acesso {
        margin-left: 6px !important;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content {
        gap: 3px;
        padding: 4px 4px !important;
        font-size: 9.5px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content::before {
        width: 12px;
        height: 12px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open {
        width: 36px;
        height: 36px;
    }
}

/* Tablet (601px a 1024px): botão compacto, logo proporcional e a grade do celular (o tema
 * reserva 450px fixos ao logo e empurrava o resto para fora da tela entre 601 e ~780px). */
@media (min-width: 601px) and (max-width: 1024px) {
    body.spx-layout-atleta header.site-header .hostinger-ai-menu-wrapper {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center;
        column-gap: 12px;
    }

    body.spx-layout-atleta header.site-header .hostinger-ai-menu-wrapper > * {
        grid-column: auto !important;
        min-width: 0;
    }

    body.spx-layout-atleta header.site-header .hostinger-ai-menu-wrapper > .wp-block-group:has(.wp-block-site-logo) {
        flex-basis: auto !important;
    }

    body.spx-layout-atleta header.site-header .wp-block-site-logo,
    body.spx-layout-atleta header.site-header .wp-block-site-logo .custom-logo-link {
        width: auto !important;
        min-width: 0;
    }

    body.spx-layout-atleta header.site-header .wp-block-site-logo img {
        width: min(430px, 42vw) !important;
        height: auto !important;
    }

    body.spx-layout-atleta header.site-header nav.wp-block-navigation {
        gap: 14px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content {
        padding: 7px 10px !important;
        font-size: 11px;
        white-space: normal;
        max-width: 140px;
    }
}

/* v2.6 — Janela de login do visitante (ENTRAR / CRIAR CONTA) na própria página pública.
 * Só existe no HTML com o layout do atleta e visitante (filtro); preto e laranja. */
body.spx-layout-atleta .spx-lm {
    position: fixed;
    inset: 0;
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.spx-layout-atleta .spx-lm[hidden] {
    display: none !important;
}

body.spx-layout-atleta .spx-lm__fundo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

body.spx-layout-atleta .spx-lm__janela {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 28px 24px 24px;
    box-sizing: border-box;
    background: var(--spx-menu-fundo);
    border: 1px solid #1f1f24;
    border-top: 3px solid var(--spx-menu-laranja);
    border-radius: 6px;
    color: var(--spx-menu-texto);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

body.spx-layout-atleta .spx-lm__fechar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--spx-menu-texto);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.spx-layout-atleta .spx-lm__titulo {
    margin: 0 36px 18px 0;
    color: var(--spx-menu-texto);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

body.spx-layout-atleta .spx-lm__marca {
    white-space: nowrap;
}

body.spx-layout-atleta .spx-lm__abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

body.spx-layout-atleta .spx-lm__aba {
    padding: 10px 8px;
    border: 1px solid var(--spx-menu-laranja);
    border-radius: 4px;
    background: transparent;
    color: var(--spx-menu-texto);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

body.spx-layout-atleta .spx-lm__aba.is-ativa {
    background: var(--spx-menu-laranja);
}

body.spx-layout-atleta .spx-lm__painel[hidden] {
    display: none !important;
}

body.spx-layout-atleta .spx-lm__form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.spx-layout-atleta .spx-lm__rotulo {
    margin-top: 8px;
    color: var(--spx-menu-sub);
    font-size: 13px;
}

body.spx-layout-atleta .spx-lm__campo {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #2c2c33;
    border-radius: 4px;
    background: #141418;
    color: var(--spx-menu-texto);
    font-size: 16px;
}

body.spx-layout-atleta .spx-lm__campo:focus {
    outline: 2px solid var(--spx-menu-laranja);
    outline-offset: 1px;
}

body.spx-layout-atleta .spx-lm__senha {
    display: flex;
    gap: 8px;
}

body.spx-layout-atleta .spx-lm__ver {
    flex: none;
    padding: 0 12px;
    border: 1px solid #2c2c33;
    border-radius: 4px;
    background: transparent;
    color: var(--spx-menu-texto);
    font-size: 13px;
    cursor: pointer;
}

body.spx-layout-atleta .spx-lm__lembrar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--spx-menu-sub);
    font-size: 14px;
}

body.spx-layout-atleta .spx-lm__erro {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--spx-menu-laranja);
    background: rgba(255, 77, 20, 0.12);
    color: var(--spx-menu-texto);
    font-size: 14px;
}

body.spx-layout-atleta .spx-lm__erro[hidden] {
    display: none !important;
}

body.spx-layout-atleta .spx-lm__enviar {
    display: block;
    margin-top: 16px;
    padding: 14px;
    border: 0;
    border-radius: 4px;
    background: var(--spx-menu-laranja);
    color: var(--spx-menu-texto) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
}

body.spx-layout-atleta .spx-lm__enviar:disabled {
    opacity: 0.6;
    cursor: wait;
}

body.spx-layout-atleta .spx-lm__link {
    margin-top: 12px;
    color: var(--spx-menu-texto) !important;
    font-size: 14px;
    text-align: center;
    text-decoration: underline !important;
}

body.spx-layout-atleta .spx-lm__texto {
    margin: 0;
    color: var(--spx-menu-sub);
    font-size: 15px;
    line-height: 1.5;
}

body.spx-layout-atleta .spx-lm__aba:focus-visible,
body.spx-layout-atleta .spx-lm__fechar:focus-visible,
body.spx-layout-atleta .spx-lm__ver:focus-visible,
body.spx-layout-atleta .spx-lm__enviar:focus-visible,
body.spx-layout-atleta .spx-lm__link:focus-visible {
    outline: 2px solid var(--spx-menu-texto);
    outline-offset: 2px;
}

@media (max-width: 360px) {
    body.spx-layout-atleta .spx-lm {
        padding: 8px;
    }

    body.spx-layout-atleta .spx-lm__janela {
        padding: 24px 16px 18px;
    }
}

/* v2.7 — Cabeçalho em três partes: MENU (o mesmo botão ☰ nativo) à esquerda, logo original
 * centralizada na tela e o MESMO item de acesso (ENTRAR / CADASTRAR ou MINHA ÁREA) à direita.
 * Só posicionamento: nenhum elemento novo, a logo (arquivo e proporção) intocada. A grade
 * simétrica 1fr | auto | 1fr centraliza a logo em relação à largura do cabeçalho. */
body.spx-layout-atleta header.site-header .hostinger-ai-menu-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center;
    column-gap: 12px;
}

body.spx-layout-atleta header.site-header .hostinger-ai-menu-wrapper > .wp-block-group:has(.wp-block-site-logo) {
    grid-column: 2 !important;
    grid-row: 1;
    justify-self: center;
    position: relative;
    z-index: 2;
}

body.spx-layout-atleta header.site-header .hostinger-ai-menu-wrapper > .hostinger-ai-site-navigation-wrapper {
    grid-column: 1 / -1 !important;
    grid-row: 1;
    min-width: 0;
    justify-content: stretch !important;
}

body.spx-layout-atleta header.site-header nav.wp-block-navigation {
    width: 100%;
    justify-content: space-between !important;
}

/* MENU: o botão ☰ nativo (mesmo elemento, mesmo comportamento), com o texto ao lado. */
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open {
    order: 1;
    width: auto !important;
    height: 44px !important;
    gap: 8px;
    padding: 0 16px 0 12px !important;
    border-radius: 22px;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open::after {
    content: "MENU";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
}

/* Acesso à direita; "Início" sai da linha do cabeçalho (a logo já leva à página inicial). */
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    order: 2;
    margin-left: auto;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li.spx-nav--inicio {
    display: none !important;
}

body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li.spx-nav--acesso {
    margin-left: 0 !important;
}

@media (max-width: 600px) {
    body.spx-layout-atleta header.site-header .hostinger-ai-menu-wrapper {
        column-gap: 8px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open {
        height: 40px !important;
        gap: 5px;
        padding: 0 10px 0 8px !important;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open svg {
        width: 20px;
        height: 20px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open::after {
        font-size: 11px;
        letter-spacing: 0.03em;
    }

    /* O acesso cabe na sua metade da grade (largura máxima conta o padding). */
    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content {
        box-sizing: border-box;
        max-width: 98px;
    }
}

@media (max-width: 360px) {
    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open {
        gap: 3px;
        padding: 0 7px 0 5px !important;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open svg {
        width: 18px;
        height: 18px;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container-open::after {
        font-size: 10px;
        letter-spacing: 0;
    }

    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso > .wp-block-navigation-item__content {
        max-width: 86px;
    }
}

/* v2.8 — Dois painéis: MENU (o painel nativo) à ESQUERDA, só com a navegação pública;
 * MINHA ÁREA (painel do atleta logado, SpehxPublicAccountPanel) à DIREITA. O item de
 * acesso continua sendo o botão do cabeçalho e não aparece dentro do MENU. */
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--acesso,
body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open .spx-nav--sair {
    display: none !important;
}
/* v2.8.1: para o atleta logado, o MESMO item MINHA ÁREA continua visível no topo do MENU
 * aberto (o botão laranja da v2.5); o clique troca para o painel MINHA ÁREA. */

@media (min-width: 601px) {
    body.spx-layout-atleta .wp-block-navigation__responsive-container.is-menu-open {
        left: 0 !important;
        right: auto !important;
        border-left: 0;
        border-right: 3px solid var(--spx-menu-laranja);
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.6);
        animation-name: spx-menu-entrar-esquerda;
    }
}

@keyframes spx-menu-entrar-esquerda {
    from {
        transform: translateX(-40px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

/* v2.8.1: o painel começa abaixo do cabeçalho fixo (base lida ao abrir, em --spx-ap-topo),
 * em todas as larguras: ☰ MENU, logo e MINHA ÁREA ficam sempre visíveis e clicáveis. */
body.spx-layout-atleta .spx-ap {
    position: fixed;
    top: var(--spx-ap-topo, 0px);
    right: 0;
    bottom: 0;
    z-index: 100005;
    width: min(400px, 100vw);
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--spx-menu-fundo);
    color: var(--spx-menu-texto);
    border-left: 3px solid var(--spx-menu-laranja);
    border-top: 3px solid var(--spx-menu-laranja);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
    animation: spx-menu-entrar 0.22s ease-out;
}

body.spx-layout-atleta .spx-ap[hidden] {
    display: none !important;
}

body.spx-layout-atleta .spx-ap__janela {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-sizing: border-box;
    padding: 22px 22px 28px;
}

body.spx-layout-atleta .spx-ap__fechar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--spx-menu-texto);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

body.spx-layout-atleta .spx-ap__titulo {
    margin: 30px 0 18px;
    padding: 16px 14px;
    border-radius: 4px;
    background: var(--spx-menu-laranja);
    color: var(--spx-menu-texto);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body.spx-layout-atleta .spx-ap__lista {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0;
    /* 2026-10-19: sem o título repetido, a lista começa logo abaixo do X */
    margin-top: 40px;
    padding: 0;
    list-style: none;
}

body.spx-layout-atleta .spx-ap__link {
    display: grid;
    grid-template-columns: 38px 10px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    padding: 16px 6px;
    color: var(--spx-menu-texto) !important;
    text-decoration: none !important;
}

body.spx-layout-atleta .spx-ap__link::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    background: var(--spx-ico, none) no-repeat center / contain;
}

body.spx-layout-atleta .spx-ap__link::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.8;
}

body.spx-layout-atleta .spx-ap__rotulo {
    grid-column: 3;
    grid-row: 1;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.spx-layout-atleta .spx-ap__desc {
    grid-column: 3;
    grid-row: 2;
    margin-top: 3px;
    color: var(--spx-menu-sub);
    font-size: 13px;
    line-height: 1.3;
}

body.spx-layout-atleta .spx-ap__link:hover .spx-ap__rotulo,
body.spx-layout-atleta .spx-ap__link:focus-visible .spx-ap__rotulo {
    color: var(--spx-menu-laranja);
}

body.spx-layout-atleta .spx-ap__link:focus-visible,
body.spx-layout-atleta .spx-ap__fechar:focus-visible {
    outline: 2px solid var(--spx-menu-texto);
    outline-offset: 2px;
}

body.spx-layout-atleta .spx-ap--perfil { --spx-ico: var(--spx-ico-acesso); }
body.spx-layout-atleta .spx-ap--inscricoes { --spx-ico: var(--spx-ico-competicoes); }
body.spx-layout-atleta .spx-ap--conta { --spx-ico: var(--spx-ico-admin); }
body.spx-layout-atleta .spx-ap--credenciamentos { --spx-ico: var(--spx-ico-como-funciona); }
body.spx-layout-atleta .spx-ap--sair { --spx-ico: var(--spx-ico-sair); }

body.spx-layout-atleta .spx-ap--sair {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #22222a;
}

body.spx-layout-atleta .spx-ap--sair .spx-ap__rotulo {
    color: var(--spx-menu-sub);
}

/* Âncoras da Minha Área (Meu perfil, Minhas inscrições, Credenciamentos). */
body.spx-layout-atleta #spx-meu-perfil,
body.spx-layout-atleta #spx-minhas-inscricoes,
body.spx-layout-atleta #spx-credenciamentos {
    scroll-margin-top: 24px;
}

@media (max-width: 600px) {
    body.spx-layout-atleta .spx-ap {
        width: 100vw;
        border-left: 0;
    }

    body.spx-layout-atleta .spx-ap__janela {
        padding: 18px 16px 24px;
    }
}

/* 2026-10-19 — Nome do usuário logado ao lado de MINHA ÁREA ("MINHA ÁREA / NOME").
 * Nomes longos terminam em reticências (limite em linha no PHP, que vale também no cabeçalho
 * original dos outros perfis); até 1024 px o nome vai para a segunda linha do
 * botão, sem alargar o cabeçalho nem criar rolagem lateral. */
body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso .wp-block-navigation-item__label {
    min-width: 0;
}

@media (max-width: 1024px) {
    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso .spx-nav-usuario__nome {
        display: block !important;
        max-width: 100% !important;
    }
}

/* 1025–1279 px: o logotipo ainda tem largura fixa (430 px); o nome fica mais curto para não encostar nele. */
@media (min-width: 1025px) and (max-width: 1279px) {
    body.spx-layout-atleta header.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .spx-nav--acesso .spx-nav-usuario__nome {
        max-width: 90px !important;
    }
}