/* ============================================
   COMPONENTES COMPARTILHADOS
   Estilos que valem para TODAS as páginas.
   Regra: navbar, botões e seções laterais são
   estilizados AQUI, nunca em pages/index-N.css.
   ============================================ */

/* ---- Navbar (botões de ação) ---- */
.navbar-btn {
    background-color: var(--ct-gray-btn);
}

.navbar-btn:hover {
    background-color: var(--ct-btn-hover);
}

/* Hambúrguer no laranja padrão (#FFCC99) — pág. 1 do PDF */
.navbar-btn.navbar-btn-menu {
    background-color: var(--ct-orange);
    color: #FFFFFF;
}

.navbar-btn.navbar-btn-menu:hover {
    background-color: var(--ct-btn-hover);
}

/* ---- Campo do menu (hambúrguer): coluna à esquerda que
        empurra a aba lateral para a direita — pág. 2 do PDF ---- */
/* A coluna começa abaixo da navbar: a navbar cresce junto e passa a
   cobrir o campo + a aba lateral; só o conteúdo é empurrado */
.menu-field {
    position: fixed;
    top: 62px;
    bottom: 0;
    left: 0;
    width: 240px;
    /* container começa 62px abaixo do topo: compensa a faixa .ct-vertical-brand */
    --ctv-offset: 62px;
    box-sizing: border-box;
    background-color: var(--sidebar-background, #e4e4e4);
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    /* acima da sidebar (1000), abaixo de nada que importe: a navbar fica intacta porque o campo começa em top:62px */
    z-index: 1001;
}

/* Faixa vertical CIDADETUR.COM.BR na borda esquerda da coluna */
/* Faixa vertical CIDADETUR.COM.BR (componente vertical-brand.php) — regra ÚNICA,
   compartilhada pela sidebar e pelo campo do menu hambúrguer. O centro fica no
   mínimo a 250px do fundo do viewport para NUNCA sobrepor o botão "subir ao topo".
   --ctv-offset compensa containers que não começam em top:0 (o menu começa em 62px),
   evitando duas posições divergentes (era o motivo de o bug reaparecer no menu). */
.ct-vertical-brand {
    position: absolute;
    left: -98px;
    top: calc(min(80vh, 100vh - 250px) - var(--ctv-offset, 0px));
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-size: 25px;
    line-height: 1;
    color: #b2b2b2;
    letter-spacing: 0px;
    z-index: 10;
}

.ct-vertical-brand a {
    color: inherit;
    text-decoration: none;
}

/* Conteúdo rolável, recuado da faixa e com folga abaixo da navbar */
.menu-field-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 20px 0 20px 58px;
    box-sizing: border-box;
}

body.menu-field-open .menu-field {
    transform: translateX(0);
}

body.menu-field-open .sidebar {
    width: calc(var(--sidebar-width) + 240px);
}

body.menu-field-open .sidebar-content {
    margin-left: 240px;
}

body.menu-field-open .main-content {
    left: calc(var(--sidebar-width) + 240px);
    width: calc(100% - var(--sidebar-width) - 240px);
}

.sidebar-content {
    transition: margin-left 0.3s ease;
}

.main-content {
    transition: left 0.3s ease, width 0.3s ease;
}

/* (Os acordeões Listar Cidades/Listar Perfis do menu foram excluídos na
   correção de 13/07 — .menu-field-accordion/.menu-field-panel/.menu-field-list
   saíram junto com o markup.) */

.menu-field-block {
    background-color: transparent;
    padding: 12px 15px;
}

.menu-field-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: bold;
    color: #333333;
    text-transform: uppercase;
}

.menu-field-links a {
    display: block;
    padding: 3px 0;
    font-size: 14px;
    color: var(--text-body);
    text-decoration: none;
}

.menu-field-links a:hover,
.menu-field-cities a:hover {
    text-decoration: underline;
}

.menu-field-text {
    font-size: 13px;
    color: var(--text-body);
}

.menu-field-cities a {
    display: block;
    padding: 3px 0;
    font-size: 13px;
    color: var(--text-body);
    text-decoration: none;
}

.menu-field-empty {
    display: block;
    padding: 8px 15px;
    font-size: 13px;
    color: #888888;
}

/* Telas menores (801–1279px, abaixo do desktop cheio): o menu hambúrguer abre
   como OVERLAY sobre a coluna lateral, em vez de "empurrar" o conteúdo e encolher
   o banner. Nessas larguras o empurrão deixava o layout apertado/cortado (o
   cliente relatou o corte por volta de ~1100px). No desktop cheio (>=1280px)
   mantém o empurrão; no mobile (<=800px) já era overlay de tela cheia. */
@media (min-width: 801px) and (max-width: 1279px) {
    /* Não cresce a sidebar, não empurra o conteúdo, não encolhe o banner */
    body.menu-field-open .sidebar {
        width: var(--sidebar-width);
    }
    body.menu-field-open .sidebar-content {
        margin-left: 0;
    }
    body.menu-field-open .main-content {
        left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
    }
    /* O painel cobre a coluna lateral inteira (fica opaco por cima do conteúdo);
       a navbar (com o "X") continua visível no topo porque o painel começa em
       top:62px, logo abaixo dela. */
    .menu-field {
        width: var(--sidebar-width);
    }
    /* A faixa vertical CIDADETUR.COM.BR está oculta até 1279px (responsive.css),
       então o recuo de 58px reservado para ela vira um vão morto que empurra o
       conteúdo do menu para a direita. Sem o recuo, o conteúdo ocupa o painel
       inteiro, com o mesmo enquadramento do desktop/mobile. */
    .menu-field .menu-field-scroll {
        padding-left: 0;
    }
    body.menu-field-open .btn-subir {
        display: none;
    }
}

/* Mobile: o campo abre como OVERLAY cobrindo a tela inteira abaixo da navbar.
   O #menuField é renderizado DENTRO da .sidebar, logo após a navbar (ver
   includes/index-*.php), então herda o contexto de empilhamento da sidebar
   (z-index:1000, que cobre o banner .main-content z-index:1). Dentro desse
   contexto o painel (z-index:1000) fica ACIMA do .sidebar-content e ABAIXO da
   navbar (z-index:1001) — o "X" continua visível/clicável e não há brecha nem
   como ver/rolar a página atrás. A rolagem do fundo é travada com o menu aberto. */
@media (max-width: 800px) {
    .menu-field {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        width: var(--sidebar-width);
        max-width: 100vw;
        transform: translateX(-50%);
        /* dentro do contexto da .sidebar (z-index:1000): fica acima do
           .sidebar-content e abaixo da navbar (z-index:1001) */
        z-index: 1000;
    }

    body.menu-field-open .menu-field {
        display: block;
        transform: translateX(-50%);
    }

    /* Com o menu aberto travamos a rolagem (overflow:hidden abaixo), o que quebraria
       a navbar sticky (ela sairia da tela se a página estivesse rolada). Por isso a
       navbar passa a position:fixed no topo enquanto o menu está aberto, sempre
       visível e por cima do painel, com o "X" clicável. */
    body.menu-field-open .sidebar-navbar {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: var(--sidebar-width);
        max-width: 100vw;
        z-index: 1001;
    }

    /* Conteúdo começa abaixo da navbar (container 60px + botões) e rola por dentro;
       overscroll-behavior evita "vazar" a rolagem para o fundo. Sem recuo lateral
       (a faixa vertical está oculta no mobile) para o conteúdo ocupar a largura
       toda e não ficar "muito à direita" — cada item já tem seu próprio padding. */
    .menu-field .menu-field-scroll {
        padding: 76px 0 20px;
        overscroll-behavior: contain;
    }

    /* A faixa vertical CIDADETUR.COM.BR fica oculta no mobile, igual à da sidebar
       (responsive.css) — o painel usa a largura toda da coluna. */
    .menu-field .ct-vertical-brand {
        display: none;
    }

    /* Menu aberto: trava a rolagem do fundo e esconde o botão "subir ao topo"
       (senão flutuaria por cima do overlay). */
    html:has(body.menu-field-open),
    body.menu-field-open {
        overflow: hidden;
    }

    body.menu-field-open .btn-subir {
        display: none !important;
    }

    body.menu-field-open .sidebar {
        width: var(--sidebar-width);
    }

    body.menu-field-open .sidebar-content {
        margin-left: 0;
    }
}

/* ---- Topo das páginas de cidade (págs. 5/6 do PDF) ---- */
.city-header {
    background-color: #FFFFFF;
    padding: 14px 16px;
    margin-bottom: 3px;
}

.city-header-name {
    display: block;
    /* Azul acinzentado pedido na correção CIDADE/NOTÍCIAS 14/07 (era laranja) */
    color: #799ABC;
    font-size: 16px;
    text-decoration: none;
    margin-bottom: 10px;
}

.city-header-name:hover {
    text-decoration: underline;
}

.city-header-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.city-header-tab {
    background-color: #ededed;
    color: #8a8a8a;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 0;
    text-decoration: none;
    white-space: nowrap;
}

.city-header-tab.active {
    background-color: var(--ct-orange);
    color: #FFFFFF;
}

.city-header-tab:hover {
    color: #333333;
}

.city-header-tab.active:hover {
    color: #FFFFFF;
}

.city-header-search {
    display: flex;
    border: none;
    border-radius: 0;
    overflow: hidden;
    background-color: #f0f0f0;
}

.city-header-search input[type="text"] {
    flex: 1;
    border: none;
    padding: 8px 10px;
    background: transparent;
    font-size: 13px;
    outline: none;
    min-width: 0;
}

.city-header-search button {
    border: none;
    background: transparent;
    padding: 8px 12px;
    color: #888888;
    cursor: pointer;
}

/* Topo das páginas de PERFIL (profile-header.php, 23/07): mesmo desenho do
   city-header; só o nome muda de cor (azul das chamadas de perfil, não o
   #799ABC da cidade). */
.profile-header .profile-header-name {
    color: #003399;
}

/* ---- Abas Últimas Publicações | Revistas Digitais ----
   Faixa cinza (fundo da lateral) com a aba ativa em chip branco */
.news-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 8px;
}

.news-tab {
    color: #8a8a8a;
    text-decoration: none;
    font-size: 14px;
    padding: 5px 10px;
    white-space: nowrap;
}

.news-tab.active {
    background-color: #FFFFFF;
    color: #333333;
}

.news-tab:hover {
    color: #333333;
}

/* ---- Seções laterais com filtro (Listar Perfis / Cidades / Categorias) ---- */
.lateral-section {
    margin-top: 15px;
}

.lateral-section .menu-section-title {
    /* Sem o azul acinzentado antigo (var(--light-blue)/#9db4cd): branco + cinzas
       do layout atual (pedido do cliente). */
    background-color: #FFFFFF;
    color: #444444;
    border: 1px solid #ececec;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}

.lateral-section .menu-section-title:hover {
    background-color: #f7f7f7;
}

.lateral-section .menu-section-content {
    background-color: #FFFFFF;
}

.lateral-filter-wrap {
    padding: 8px 12px;
    background: #f8f8f8;
    border-bottom: 1px solid #ececec;
}

.lateral-filter-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

.lateral-filter-input:focus {
    border-color: var(--ct-orange);
}

/* ============================================
   CARD DO PERFIL (pág. 7 do PDF — cor #FFFFBC)
   components/profile-card.php (index 6/7/8)
   ============================================ */

.ct-profile-card {
    position: relative;
    background-color: var(--ct-suggested, #FFFFBC);
    border-radius: 10px;
    width: 100%;
    margin: 50px 0 3px;
    padding: 50px 20px 16px;
}

/* Logo do perfil "encaixada" na borda superior do card.
   top é sempre metade da altura, para o logo ficar meio dentro/meio fora. */
.ct-profile-card-logo {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
    background-color: #C0C0C0;
}

.ct-profile-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-profile-card-nome {
    margin: 0 0 16px;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
}

.ct-profile-card-nome a {
    color: #666666;
    text-decoration: none;
}

.ct-profile-card-nome a:hover {
    text-decoration: underline;
}

.ct-profile-card-menu,
.ct-profile-card-lista {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ct-profile-card-menu a,
.ct-profile-card-lista a {
    color: #666666;
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
}

.ct-profile-card-menu a:hover,
.ct-profile-card-lista a:hover {
    text-decoration: underline;
}

.ct-profile-card-section {
    margin-top: 24px;
}

.ct-profile-card-section h3 {
    margin: 0 0 10px;
    color: #666666;
    font-size: 17px;
    font-weight: normal;
}

.ct-profile-card-contato p {
    margin: 0 0 3px;
    color: #666666;
    font-size: 15px;
    line-height: 1.5;
}

.ct-profile-card-contato strong {
    color: #666666;
    font-weight: bold;
}

.ct-profile-card-contato a {
    color: #666666;
    text-decoration: none;
}

.ct-profile-card-contato a:hover {
    text-decoration: underline;
}

/* Links Úteis: HTML do campo "Páginas Sugeridas" do painel (pág. 7 do PDF) */
.ct-profile-card-html {
    font-size: 17px;
    color: #666666;
    line-height: 1.5;
}

.ct-profile-card-html p {
    margin: 0 0 8px;
}

.ct-profile-card-html a {
    color: var(--ct-news-title, #003399);
    text-decoration: none;
}

.ct-profile-card-html a:hover {
    text-decoration: underline;
}

.ct-profile-card-footer {
    margin-top: 26px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    text-align: right;
}

.ct-profile-card-footer a {
    color: #FF8C00;
    font-size: 12px;
    text-decoration: none;
}

.ct-profile-card-footer a:hover {
    opacity: 0.8;
}