/**
 * UniAdvisor -- Página "Cidades" (/cidades/), hub de SEO
 * Transplantado do mockup cidades.html (2026-08-11), mesmo ajuste de
 * cor de destaque já usado em faculdades.css/cursos.css: #5B4FE0 do
 * mockup -> #2f6fed (azul já em produção). Folha PRÓPRIA (mesmo padrão
 * de isolamento por página do resto do tema) -- não referencia
 * faculdades.css/cursos.css.
 *
 * Diferença de layout desta página em relação às outras duas: o
 * breadcrumb mora DENTRO do hero (texto branco translúcido sobre o
 * fundo sólido), não acima dele em cinza -- assim que o mockup
 * cidades.html descreve, pedido explícito do usuário.
 *
 * Lição aprendida no CSS de /universidades/: o tema Kadence define
 * `button{color:#fff}` global -- todo <button> aqui embaixo declara sua
 * PRÓPRIA cor de texto, nunca depende da herdada.
 */

.uaf-page{
    --uaf-accent:#2f6fed;
    --uaf-accent-dark:#1d4ed8;
    --uaf-ink:#1F2430;
    --uaf-ink-soft:#6B7280;
    --uaf-ink-faint:#9298A5;
    --uaf-paper:#F7F7FB;
    --uaf-card:#FFFFFF;
    --uaf-line:#E5E7EB;
    --uaf-radius:14px;

    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color:var(--uaf-ink);
    background:var(--uaf-paper);
    line-height:1.5;
}

.uaf-page *{ box-sizing:border-box; }
.uaf-page h1,
.uaf-page h2,
.uaf-page h3{ font-family:'Sora', 'Inter', sans-serif; margin:0; }
.uaf-page a{ color:inherit; text-decoration:none; }
.uaf-page img{ display:block; max-width:100%; }
.uaf-page button{ font-family:inherit; }

.uaf-wrap{ max-width:960px; margin:0 auto; padding:0 24px; }

/* Hero -- breadcrumb translúcido DENTRO da faixa colorida (diferente
   de /universidades/ e /cursos/, onde o breadcrumb fica acima, em
   cinza -- pedido explícito do usuário pra esta página). */
.uaf-hero--cidades{ background:var(--uaf-accent); padding:44px 0; }
.uaf-hero--cidades .uaf-hero-inner{ max-width:960px; margin:0 auto; padding:0 24px; }

.uaf-hero--cidades .breadcrumb{ font-size:12.5px; color:rgba(255,255,255,.7); padding:0 0 14px; }
.uaf-hero--cidades .breadcrumb a{ color:rgba(255,255,255,.85); }
.uaf-hero--cidades .breadcrumb a:hover{ color:#fff; }
.uaf-hero--cidades .breadcrumb .sep{ margin:0 6px; }
.uaf-hero--cidades .breadcrumb .current{ color:rgba(255,255,255,.7); }

.uaf-hero--cidades h1{ font-size:30px; font-weight:600; margin-bottom:8px; color:#fff; }
.uaf-hero--cidades .uaf-hero-sub{ color:rgba(255,255,255,.82); font-size:15px; max-width:600px; margin:0; }

.uaf-searchbar--cidades{
    margin-top:20px; background:var(--uaf-card); border-radius:14px;
    padding:10px; display:flex; gap:8px; max-width:440px; position:relative;
}
.uaf-searchbar--cidades .uaf-field{ flex:1; position:relative; }
.uaf-searchbar--cidades input{
    width:100%; border:none; background:transparent; font-family:'Inter',sans-serif;
    font-size:14.5px; padding:10px 12px; color:var(--uaf-ink); outline:none;
}
.uaf-searchbar--cidades button{
    border:none; cursor:pointer; font-weight:600; font-size:14px;
    color:#fff; background:var(--uaf-ink); border-radius:10px; padding:0 18px; white-space:nowrap;
}
.uaf-searchbar--cidades button:hover{ background:#000; }

/* Autocomplete (busca de cidade no hero) */
.uaf-ac-panel{
    display:none; position:absolute; top:calc(100% + 6px); left:10px; right:10px;
    background:var(--uaf-card); border:1px solid var(--uaf-line); border-radius:10px;
    overflow:hidden; z-index:30; text-align:left; max-height:260px; overflow-y:auto;
    box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.uaf-ac-panel.open{ display:block; }
.uaf-ac-item{ padding:11px 14px; font-size:14px; cursor:pointer; display:flex; justify-content:space-between; gap:10px; }
.uaf-ac-item .uaf-ac-item-n{ color:var(--uaf-ink-faint); font-size:12.5px; white-space:nowrap; }
.uaf-ac-item:hover{ background:var(--uaf-paper); }
.uaf-ac-empty{ padding:11px 14px; font-size:13px; color:var(--uaf-ink-faint); }

/* Seções */
.uaf-section{ padding:30px 0 6px; }
.uaf-section-head{ margin-bottom:14px; }
.uaf-section-head h2{ font-size:19px; font-weight:600; }
.uaf-count{ font-size:13.5px; color:var(--uaf-ink-faint); font-weight:400; }

/* Linha de cidade (nome · UF ......... N universidades) -- reaproveitada
   nas duas seções, só o wrapper por fora muda (lista simples vs. grid
   de 2 colunas). */
.uaf-cidade-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 18px; border-bottom:1px solid var(--uaf-line); font-size:14px;
}
.uaf-cidade-row:hover{ background:var(--uaf-paper); }
.uaf-cidade-row-name{ font-weight:500; color:var(--uaf-ink); }
.uaf-cidade-row-uf{ color:var(--uaf-ink-faint); font-weight:400; }
.uaf-cidade-row-n{ color:var(--uaf-ink-soft); font-size:13px; white-space:nowrap; }

.uaf-cidade-list{
    border:1px solid var(--uaf-line); border-radius:var(--uaf-radius); background:var(--uaf-card); overflow:hidden;
}
.uaf-cidade-list .uaf-cidade-row:last-child{ border-bottom:none; }

.uaf-cidade-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:0;
    border:1px solid var(--uaf-line); border-radius:var(--uaf-radius); background:var(--uaf-card); overflow:hidden;
}
.uaf-cidade-grid .uaf-cidade-row:nth-child(odd){ border-right:1px solid var(--uaf-line); }

.uaf-empty{
    background:var(--uaf-card); border:1px solid var(--uaf-line);
    border-radius:var(--uaf-radius); padding:32px; text-align:center;
}

/* Bloco de texto final */
.uaf-about-block{
    background:var(--uaf-card); border:1px solid var(--uaf-line); border-radius:var(--uaf-radius);
    padding:22px; margin-top:28px; font-size:14px; color:var(--uaf-ink-soft); line-height:1.7;
}
.uaf-about-block h2{ font-size:17px; color:var(--uaf-ink); margin-bottom:10px; }
.uaf-about-block p + p{ margin-top:10px; }

@media (max-width: 700px){

    .uaf-hero--cidades h1{ font-size:24px; }

    .uaf-cidade-grid{ grid-template-columns:1fr; }
    .uaf-cidade-grid .uaf-cidade-row:nth-child(odd){ border-right:none; }
}