/*
 * Estrutura comum a todos os temas (app/Suporte/tema.php): carregado antes do tema.css de cada um.
 * Só posição e comportamento; cores, fontes e aparência ficam em assets/temas/<nome>/tema.css.
 *
 * Classes usadas pelas partes dos temas (app/views/temas/<nome>/site/*.php):
 *   .jt-wrap            largura máxima do conteúdo (--jt-largura)
 *   .jt-abrir/.jt-fechar  botões do menu do celular (.icon-menu-mobile: metas.js abre e fecha)
 *   .jt-menu-celular    menu do celular (.menu-mobile, .is-opened quando aberto)
 *   .jt-chamada         chamada principal da home: vem antes dos banners
 *   .jt-perfis          chamadas "procura emprego / empresas": depois dos banners
 */
html.jfe-tema { --jt-largura: 1180px; --jt-quebra-menu: 1100px; }

/* ---- largura do conteúdo ------------------------------------------------------------------ */
html.jfe-tema .jt-wrap { max-width: var(--jt-largura); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* ---- o que os temas não usam --------------------------------------------------------------- */
html.jfe-tema .redes-sociais { display: none; }                       /* redes ficam no rodapé */
html.jfe-tema .shadow, html.jfe-tema .shadow-sm, html.jfe-tema .shadow-lg { box-shadow: none !important; }

/* ---- menu do celular ----------------------------------------------------------------------- */
html.jfe-tema .jt-abrir, html.jfe-tema .jt-fechar { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; align-items: center; justify-content: center; cursor: pointer; }
html.jfe-tema .jt-menu-celular { position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; box-sizing: border-box; visibility: hidden; z-index: 1030; padding: 16px 24px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; transition: left 250ms ease, visibility 250ms; }
html.jfe-tema .jt-menu-celular.is-opened { left: 0; visibility: visible; }
html.jfe-tema .jt-menu-celular .jt-fechar { display: flex; align-self: flex-end; }
html.jfe-tema .jt-menu-celular nav { display: flex; flex-direction: column; }
html.jfe-tema .jt-menu-celular-acoes { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1100px) {
    html.jfe-tema .jt-abrir { display: flex; margin-left: auto; }
}

/* ---- página inicial: a chamada do tema vem antes dos banners dos mantenedores ------------- */
html.jfe-tema main.main.layout-portal { margin-top: 0; }
html.jfe-tema main.main .container-md { max-width: none; padding: 0; display: flex; flex-direction: column; }
html.jfe-tema main.main .container-md > * { order: 2; min-width: 0; }
html.jfe-tema main.main .container-md > .jt-chamada { order: 0; }
html.jfe-tema main.main .container-md > .jt-perfis { order: 3; }
html.jfe-tema main.main .container-md > div:first-child { order: 1; width: 100%; max-width: var(--jt-largura); margin: 32px auto 0 !important; padding: 0 24px; box-sizing: border-box; }
html.jfe-tema main.main .container-md > div:first-child .row { margin-left: 0; margin-right: 0; }
html.jfe-tema main.main .container-md > div:first-child .col-12 { padding: 0; flex: 0 0 100%; max-width: 100%; }
html.jfe-tema main.main .container-md > .container { width: 100%; max-width: var(--jt-largura); margin: 0 auto 24px !important; padding: 0 24px; box-sizing: border-box; }
html.jfe-tema main.main .container-md > .container img { width: 100%; height: auto; }
/* o formulário da chamada usa o id antigo (#formBanner, lido pelos scripts): sem a margem que ele trazia */
html.jfe-tema .jt-chamada #formBanner { margin: 0 !important; max-width: 760px; }