/* ============================================================================
 * page-sidebar-dark.css — sidebar editorial CLARA + inversão de coluna (frente4).
 * ----------------------------------------------------------------------------
 * Histórico (frente4, 2026-05-28):
 *   v1: dark (fundo preto). Desaprovado visualmente.
 *   v2: card claro inferido a partir de mock. Heading/links/botão divergiam
 *       do v2 real — corrigido na v3 abaixo.
 *   v3 (atual): valores LITERAIS de portalv2.0/css/processo-seletivo-medicina.css
 *       (regras .psm-page .side / .side h4 / .side ul li a / .side .back-top
 *       das linhas 145-192 do CSS do v2). Nome "dark" preservado só pra não
 *       trocar o <link> no header.php.
 *
 * Markup da view Toolset 'sidebar-da-pagina' (NÃO mexer):
 *   <div class="col-lg-3 sidebar">
 *     <h2 class="nesta-pagina-titulo">Nesta página</h2>   [adicionado em sidebar-pagina.php]
 *     <div class="js-wpv-view-layout ...">
 *       <a class="tagueamento btn btn-default menu-lateral [ativo]">…</a>
 *       …
 *     </div>
 *     <a href="#conteudo" class="editorial-back-to-top">↑ Voltar ao topo</a>
 *   </div>
 *
 * Adaptação ao markup: como a view emite <a> solto (sem <ul><li>), o estilo
 * .side ul li a do v2 é re-mira em .menu-lateral; o padding 9px 0 do <li>
 * vira margin 9px 0 no <a>; o wrapper [class*="wpv-view-layout"] vira flex
 * column align-items:flex-start pra cada <a> quebrar linha mantendo largura
 * natural do texto (replicando <li> block).
 *
 * Specificity #conteudo.editorial-page = (0,1,3,1) — vence legado SEM !important
 * (legado foi escopado em style.css com :not(.editorial-page) na frente4).
 * ============================================================================ */

/* 1) Inversão de coluna no desktop (sidebar à esquerda) + gap extra.
      Escopado via :has(> .col-lg-9) pra afetar SÓ pagina-default (que tem
      o par col-lg-9 + col-lg-3). Pagina-modelo1 (frente5) usa 3 cols
      col-lg-4/5 + col-lg-5/7 + col-lg-3 — fica com layout Bootstrap default
      nessas rows, sem inversão.
      Fallback browsers sem :has() (Chrome <105, Safari <15.4, Firefox <121):
      o seletor inteiro é descartado como inválido → row-reverse e flex-basis
      customizados NÃO aplicam → sidebar volta ao Bootstrap default (lado
      direito, larguras 25%/75%, gap natural 30px). Página fica USÁVEL,
      só perde a inversão visual editorial. Não quebra. */
@media (min-width: 992px) {
    .editorial-page .row:has(> .col-lg-9) {
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        gap: 48px;
    }
    .editorial-page .row:has(> .col-lg-9) > .col-lg-3.sidebar {
        flex: 0 0 calc(25% - 24px);
        max-width: calc(25% - 24px);
    }
    .editorial-page .row:has(> .col-lg-9) > .col-lg-9 {
        flex: 0 0 calc(75% - 24px);
        max-width: calc(75% - 24px);
    }
}

/* 2) CARD — valores LITERAIS de .psm-page .side (v2 linhas 145-151). */
.editorial-page .sidebar {
    background: #fff;
    border: 1px solid #e5e2dc;       /* var(--line) do v2 */
    border-radius: 0;                /* v2 não tem radius */
    padding: 36px 36px 32px;         /* v2 exato */
    color: #000;
    font-family: 'Inter', sans-serif;
    align-self: flex-start;
}
@media (min-width: 992px) {
    .editorial-page .sidebar {
        position: sticky;
        top: 100px;                  /* abaixo do header editorial */
    }
}

/* 3) HEADING "Nesta página" — valores LITERAIS de .psm-page .side h4 (v2 linhas 152-158).
      <h2> adicionado via sidebar-pagina.php. Oculto fora do editorial.
      Specificity #conteudo.editorial-page.pagina-institucional .sidebar .nesta-pagina-titulo
      = (0,1,4,0) vence style.css #conteudo.pagina-institucional h2 = (0,1,1,1) que pintava
      qualquer h2 dentro do conteúdo com color:#145480 (azul). Sem !important. */
.nesta-pagina-titulo { display: none; }
#conteudo.editorial-page.pagina-institucional .sidebar .nesta-pagina-titulo,
.editorial-page .sidebar .nesta-pagina-titulo {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0 0 22px;
    text-transform: none;
}

/* 4) Wrapper interno da view — flex column, align-items flex-start pra cada <a>
      ocupar só sua largura natural (replica <li> block do v2). gap 0 porque
      o espaçamento vertical de 18px vem do margin 9px 0 nos <a> abaixo. */
.editorial-page .sidebar > div[class*="wpv-view-layout"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
}

/* 5) LINKS — valores LITERAIS de .psm-page .side ul li a (v2 linhas 159-167)
      + padding 9px 0 do <li> v2 transformado em margin 9px 0 no <a>.
      Specificity (0,1,3,1) vence legado #conteudo .menu-lateral. */
#conteudo.editorial-page .sidebar a.menu-lateral,
#conteudo.editorial-page .sidebar .btn.menu-lateral {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #000;   /* v2 exato */
    border-radius: 0;
    color: #000;                     /* v2 exato */
    font-family: 'Inter', sans-serif;
    font-size: 15px;                 /* v2 exato */
    font-weight: 400;                /* v2 default (não 600) */
    letter-spacing: 0;
    line-height: 1.3;
    padding: 0 0 2px 0;              /* padding-bottom 2px do v2 */
    margin: 9px 0;                   /* replica padding 9px 0 do <li> v2 */
    text-align: left;
    text-decoration: none;           /* v2 usa border-bottom, não text-decoration */
    text-transform: none;
    display: inline-block;           /* largura natural; flex column quebra linha */
    transition: color .15s ease, border-color .15s ease;
    box-shadow: none;
}

/* 6) HOVER — valores LITERAIS de .psm-page .side ul li a:hover (v2 linhas 168-171). */
#conteudo.editorial-page .sidebar a.menu-lateral:hover,
#conteudo.editorial-page .sidebar .btn.menu-lateral:hover {
    background: transparent;
    color: #C49A20;                  /* var(--gold) do v2 */
    border-color: #C49A20;
}

/* 7) ATIVO — valores LITERAIS de .psm-page .side ul li a.active (v2 linhas 172-176).
      .menu-lateral.ativo é o equivalente da view Toolset ao a.active do v2. */
#conteudo.editorial-page .sidebar a.menu-lateral.ativo,
#conteudo.editorial-page .sidebar .menu-lateral.ativo,
#conteudo.editorial-page .sidebar a.ativo {
    color: #C49A20;
    border-color: #C49A20;
    font-weight: 500;                /* v2 exato */
}

/* 8) Banner lateral opcional (campo Toolset imagem-banner-lateral). */
.editorial-page .sidebar a img,
.editorial-page .sidebar > img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 24px;
    border-radius: 0;
}

/* 9) Mobile. */
@media (max-width: 991px) {
    .editorial-page .sidebar {
        margin-top: 32px;
        padding: 28px 24px;
    }
}

/* =============================================================================
   10. BOTÃO "VOLTAR AO TOPO" — valores LITERAIS de .psm-page .side .back-top
       (v2 linhas 177-192). <a> adicionado em sidebar-pagina.php.
       Por default OCULTO (pra não vazar em pagina-modelo1.php e templates legados
       que ainda usam sidebar-pagina.php sem editorial).
   ============================================================================= */
.editorial-back-to-top { display: none; }

.editorial-page .editorial-back-to-top {
    display: inline-block;
    margin-top: 28px;
    background: #C49A20;             /* gold */
    color: #000;                     /* preto pro contraste */
    border: 0;
    border-radius: 999px;
    padding: 9px 20px;               /* menor (era 12x26) */
    font-family: 'Inter', sans-serif;
    font-size: 11px;                 /* menor (era 12px) */
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease;
}
.editorial-page .editorial-back-to-top:hover {
    background: #a07d18;             /* gold escurecido — sem ir pra preto */
    color: #000;
}