/*
Theme Name: Escort GPS
Description: Diretorio de banners por estado. O estado e a unidade de venda: cada banner pertence a um estado, a home junta todos.
Version: 1.3
Author: Escort GPS
Text Domain: escortgps
Tags: directory, custom-logo, custom-menu, two-columns
*/

/* ==========================================================================
   O site inteiro gira em torno de uma coisa so: o banner. Por isso nao existe
   sidebar, nem widget, nem bloco de texto disputando espaco - o que paga a
   conta tem que ser a primeira coisa que a pessoa ve.
   Prefixo .eg-.
   ========================================================================== */
:root{
  --fundo:#0b0a12; --superficie:#15131f; --superficie-2:#1f1c2e; --linha:#2d2942;
  --texto:#fff; --fraco:#a79fc4; --apagado:#6f6888;
  --roxo:#7c3aed; --roxo-claro:#9a63ff; --rosa:#e879f9;
  --largura:1080px; --raio:10px; --pill:999px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);
  font:400 15px/1.6 Outfit,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2{line-height:1.2;margin:0 0 .4em;font-weight:700;letter-spacing:-.015em}
.eg-wrap{max-width:var(--largura);margin:0 auto;padding:0 20px}

.eg-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}
.eg-pula{position:absolute;left:-9999px;top:0;background:var(--roxo);color:#fff;padding:10px 16px;z-index:99}
.eg-pula:focus{left:0}

/* ---------------------------------------------------------------- topo */
.eg-topo{background:var(--superficie);border-bottom:1px solid var(--linha);
  padding:22px 0;text-align:center}
.eg-marca{display:inline-block}
.eg-marca__nome{font:800 34px/1 Outfit,sans-serif;letter-spacing:-.02em;
  background:linear-gradient(92deg,var(--rosa),var(--roxo-claro));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.eg-marca__sub{display:block;font:400 11px/1 Outfit,sans-serif;letter-spacing:.32em;
  text-transform:uppercase;color:var(--apagado);margin-top:9px}
.eg-marca--img img{max-height:70px;width:auto;margin:0 auto}

/* -------------------------------------------------------------- estados */
/* Sem JavaScript a lista inteira fica visivel, como uma lista comum - e o que
   o buscador le. Com JavaScript (html.eg-js), ela vira o conteudo do modal e
   quem aparece e o botao. A classe eg-js e posta antes da pintura, para a
   lista nao piscar na tela antes de sumir. */
.eg-estados{background:var(--fundo);border-bottom:1px solid var(--linha);padding:14px 0}
.eg-estados .eg-wrap{display:flex;justify-content:center}

.eg-abre{display:none}
.eg-js .eg-abre{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--superficie-2);border:1px solid var(--linha);color:var(--texto);
  padding:10px 20px;border-radius:var(--pill);font:600 14.5px Outfit,sans-serif;
  transition:background .16s,border-color .16s;
}
.eg-js .eg-abre:hover{background:var(--roxo);border-color:var(--roxo)}
.eg-abre:focus-visible{outline:3px solid var(--rosa);outline-offset:2px}
.eg-abre__atual{font-style:normal;color:var(--rosa);font-weight:600}
.eg-abre__atual::before{content:'·';margin-right:8px;color:var(--apagado)}
.eg-abre__seta{opacity:.55}

/* a caixa: lista crua sem JS, modal com JS */
.eg-caixa{width:100%}
.eg-js .eg-caixa{
  position:fixed;inset:0;z-index:200;background:rgba(6,5,12,.82);
  display:none;align-items:flex-start;justify-content:center;padding:6vh 18px 18px;
  backdrop-filter:blur(3px);
}
.eg-js .eg-caixa.aberto{display:flex}

.eg-caixa__painel{width:100%}
.eg-js .eg-caixa__painel{
  max-width:680px;background:var(--superficie);border:1px solid var(--linha);
  border-radius:16px;padding:20px;max-height:86vh;overflow-y:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}

.eg-caixa__topo{display:none}
.eg-js .eg-caixa__topo{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.eg-caixa__topo h2{font-size:19px;margin:0}
.eg-fecha{background:var(--superficie-2);border:1px solid var(--linha);color:var(--fraco);
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:21px;line-height:1;
  display:grid;place-items:center;flex:0 0 auto}
.eg-fecha:hover{background:var(--roxo);border-color:var(--roxo);color:#fff}
.eg-fecha:focus-visible{outline:3px solid var(--rosa);outline-offset:2px}

.eg-filtro{display:none}
.eg-js .eg-filtro{
  display:block;width:100%;background:var(--fundo);border:1px solid var(--linha);
  color:var(--texto);border-radius:10px;padding:12px 15px;margin-bottom:12px;
  font:400 15px Outfit,sans-serif;
}
.eg-filtro::placeholder{color:var(--apagado)}
.eg-filtro:focus{outline:2px solid var(--roxo);outline-offset:1px;border-color:transparent}

/* a lista: uma linha por estado, sigla alinhada na esquerda.
   Em duas colunas no computador - 27 linhas numa coluna so viram rolagem. */
.eg-estados__lista{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:1px 14px}
.eg-estados__lista li[hidden]{display:none}

.eg-uf{display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 11px;border-radius:9px;color:var(--fraco);font-size:14.5px;
  border:1px solid transparent;transition:background .13s,color .13s}
.eg-uf b{flex:0 0 auto;display:grid;place-items:center;width:33px;height:25px;
  border-radius:6px;background:var(--superficie-2);border:1px solid var(--linha);
  font:700 10.5px/1 Outfit,sans-serif;letter-spacing:.05em;color:var(--apagado);
  transition:background .13s,border-color .13s,color .13s}
.eg-uf__n{margin-left:auto;flex:0 0 auto;font-size:11.5px;color:var(--apagado);
  background:var(--superficie-2);padding:2px 9px;border-radius:var(--pill)}

.eg-uf:hover{background:var(--superficie-2);color:#fff}
.eg-uf:hover b{background:var(--roxo);border-color:var(--roxo);color:#fff}
.eg-uf.atual{background:var(--roxo);color:#fff}
.eg-uf.atual b{background:rgba(255,255,255,.2);border-color:transparent;color:#fff}
.eg-uf.atual .eg-uf__n{background:rgba(255,255,255,.2);color:#fff}
.eg-uf:focus-visible{outline:3px solid var(--rosa);outline-offset:-1px}

.eg-caixa__nada{color:var(--apagado);font-size:14px;text-align:center;margin:18px 0 6px}

/* ---------------------------------------------------------------- links */
/* faixa de texto entre os estados e os banners. Dez vagas, nada de rodape
   repetido em pagina nenhuma. */
.eg-links{background:var(--superficie);border-bottom:1px solid var(--linha);padding:15px 0}
.eg-links__lista{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;
  justify-content:center;align-items:center}
.eg-links__t{font:600 11px Outfit,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--apagado);margin:0 6px 0 0}
.eg-links a{color:var(--fraco);font-size:13.5px;padding:5px 11px;border-radius:7px;
  border:1px solid transparent}
.eg-links a:hover{color:#fff;border-color:var(--linha);background:var(--superficie-2)}

/* --------------------------------------------------------------- secao */
.eg-secao{max-width:var(--largura);margin:30px auto 14px;padding:0 20px}
.eg-secao h1,.eg-secao h2{font-size:25px;margin-bottom:5px}
.eg-migalha{color:var(--apagado);font-size:13px;margin:0}
.eg-migalha a:hover{color:var(--rosa)}

/* -------------------------------------------------------------- banners */
/* SEMPRE duas colunas no computador e no tablet, uma so no celular.
   A arte e 760x240: em tres colunas cada banner caia para ~336 px e o texto
   dentro da imagem (que e o que vende) ficava pequeno demais para ler.
   A imagem sai inteira, na proporcao em que foi enviada - banner de cliente
   cortado pela metade e reclamacao na certa. */
.eg-banners{max-width:var(--largura);margin:0 auto;padding:0 20px 40px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.eg-ban{display:block;border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;background:var(--superficie-2);position:relative;
  transition:border-color .18s,transform .18s}
.eg-ban:hover{border-color:var(--roxo);transform:translateY(-2px)}
.eg-ban img{width:100%;height:auto}
.eg-ban__uf{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.72);
  color:#fff;font:700 10px Outfit,sans-serif;letter-spacing:.1em;
  padding:4px 8px;border-radius:5px;backdrop-filter:blur(3px)}
.eg-ban__sem{display:grid;place-items:center;aspect-ratio:19/6;color:var(--apagado);
  font-size:13px;text-align:center;padding:16px}

/* ---------------------------------------------------------------- vazio */
.eg-vazio{max-width:680px;margin:30px auto 50px;text-align:center;padding:48px 24px;
  background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio)}
.eg-vazio h2{font-size:21px;margin-bottom:8px}
.eg-vazio p{color:var(--fraco);margin:0 auto 20px;max-width:48ch;font-size:14.5px}
.eg-bt{display:inline-flex;align-items:center;gap:7px;background:var(--roxo);color:#fff;
  padding:11px 22px;border-radius:var(--pill);font:600 14px Outfit,sans-serif}
.eg-bt:hover{background:var(--roxo-claro)}

/* -------------------------------------------------------------- pagina */
.eg-pagina{max-width:760px;margin:30px auto 46px;padding:0 20px}
.eg-pagina h1{font-size:28px;margin-bottom:16px}
.eg-pagina__corpo{color:var(--fraco);font-size:15.5px}
.eg-pagina__corpo h2{font-size:19px;color:var(--texto);margin:1.6em 0 .5em}
.eg-pagina__corpo p{margin:0 0 1.1em}
.eg-pagina__corpo ul,.eg-pagina__corpo ol{margin:0 0 1.1em;padding-left:1.3em}
.eg-pagina__corpo a{color:var(--rosa);text-decoration:underline}

/* -------------------------------------------------------------- rodape */
.eg-rodape{border-top:1px solid var(--linha);background:var(--superficie);
  padding:24px 0;margin-top:14px}
.eg-rodape .eg-wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  color:var(--apagado);font-size:13px}
.eg-rodape ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.eg-rodape a:hover{color:var(--rosa)}
.eg-aviso{max-width:var(--largura);margin:14px auto 0;padding:0 20px;
  color:var(--apagado);font-size:12px;line-height:1.55}

/* ---------------------------------------------------------- responsivo */
@media (max-width:720px){
  .eg-banners{grid-template-columns:1fr;gap:12px}
  .eg-marca__nome{font-size:27px}
  .eg-secao h1,.eg-secao h2{font-size:21px}
  .eg-estados__lista{grid-template-columns:1fr}
  .eg-uf{font-size:15px;padding:11px 10px}
  .eg-js .eg-caixa{padding:0}
  .eg-js .eg-caixa__painel{max-width:none;max-height:100vh;height:100%;
    border:0;border-radius:0;padding:18px}
}