/* =====================================================================
   ts-mobile.css — camada de correção para celular
   =====================================================================

   A maioria dos usuários do site acessa pelo celular. O design system
   `ts-*` hoje vive em blocos <style> dentro de cada view, duplicado em
   13 arquivos e já divergente entre eles. Enquanto ele não é extraído
   para um tokens.css de verdade, este arquivo concentra as correções de
   mobile num lugar só, em vez de espalhá-las 13 vezes.

   Ele é carregado no fim do <head> pelo inc/header.php. Como os blocos
   <style> das views vêm DEPOIS no documento, várias regras aqui
   precisam de !important para ganhar — é dívida consciente, e some
   quando o tokens.css existir.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Zoom automático do iOS nos formulários
   ---------------------------------------------------------------------
   O Safari do iPhone dá zoom em qualquer campo com fonte menor que 16px
   ao receber foco. Os inputs do site estão em 14px, então o cadastro —
   16 campos — dava zoom e deslocava o layout a cada toque, e a pessoa
   tinha que pinçar de volta 16 vezes. É o funil principal do site.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ts-input,
    .cad-input,
    .ts-search-bar input,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ---------------------------------------------------------------------
   2. Scroll horizontal
   ---------------------------------------------------------------------
   O pior defeito possível no celular: a página inteira desliza para os
   lados a cada rolagem e o conteúdo foge do dedo.

   Duas origens medidas:
   a) a grid da home usava minmax(330px, 1fr) — mínimo fixo que não
      encolhe, então estourava em telas abaixo de 360px;
   b) a descrição da vaga é HTML colado do Word e traz <h1> renderizado
      a 45px pelo main.css, além de style="" inline com fonte e cor.
   --------------------------------------------------------------------- */
html,
body {
    overflow-x: hidden;
}

.ts-jobs-grid {
    /* min() faz a track encolher junto com o container em telas estreitas */
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)) !important;
}

/* Títulos de vaga são um token único gigante quando vêm com barras:
   "ESTÁGIO PEDAGOGIA/MAGISTÉRIO/PSICOLOGIA/LICENCIATURAS" */
.ts-job-card h4,
.ts-vaga-titulo,
.ts-page-title,
.ts-section-title {
    overflow-wrap: anywhere;
}

/* Contenção do HTML do Word dentro das descrições */
.ts-vaga-descricao,
.ts-job-desc,
.ts-detail-descricao {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ts-vaga-descricao h1,
.ts-vaga-descricao h2,
.ts-vaga-descricao h3,
.ts-vaga-descricao h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 8px 0 !important;
}

.ts-vaga-descricao font,
.ts-vaga-descricao span[style],
.ts-vaga-descricao p[style],
.ts-vaga-descricao div[style] {
    font-size: inherit !important;
    color: inherit !important;
    background: none !important;
}

.ts-vaga-descricao img,
.ts-vaga-descricao table,
.ts-job-desc img {
    max-width: 100% !important;
    height: auto;
}

/* Tabela larga rola dentro do próprio container, nunca a página */
.table-responsive,
.ts-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ---------------------------------------------------------------------
   3. Alvos de toque
   ---------------------------------------------------------------------
   Medidos no DOM: hambúrguer 43x33, itens do menu 38 e 36 de altura,
   checkbox de filtro 15x15 em linha de 30px. A recomendação de acesso
   por toque é 44x44.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
    .navbar-toggle {
        padding: 12px 10px !important;
        min-height: 44px;
        min-width: 44px;
    }

    .header .navbar-nav > li > a,
    .header .navbar-nav > li.postjob > a,
    .header .navbar-nav > li.jobseeker > a {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        min-height: 44px;
    }

    .ts-check-list li {
        padding: 10px 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .ts-check-list li input[type="checkbox"],
    .ts-check-list li input[type="radio"] {
        width: 22px;
        height: 22px;
        flex: none;
    }

    .ts-check-list li label {
        flex: 1;
        margin: 0 0 0 8px;
        padding: 6px 0;
    }

    /* Botões "Adicionar" do currículo tinham padding 0 e ~18px de altura */
    .ts-add-btn,
    .ts-anexo-btn,
    .ts-tab-btn {
        min-height: 44px !important;
        padding: 12px 14px !important;
        display: inline-flex;
        align-items: center;
    }
}


/* ---------------------------------------------------------------------
   4. Ordem e densidade da listagem de vagas
   ---------------------------------------------------------------------
   Em /buscar-empregos o painel de filtros vem antes da lista no HTML.
   Em mobile o Bootstrap empilha na ordem do documento, então a primeira
   vaga só aparecia depois de ~2.250px de rolagem — quase três telas de
   checkbox antes de ver uma vaga sequer.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ts-listagem-row {
        display: flex;
        flex-direction: column;
    }

    .ts-listagem-row > .ts-col-lista {
        order: 1;
    }

    .ts-listagem-row > .ts-col-filtros {
        order: 2;
        margin-top: 20px;
    }

    /* Busca da listagem: em coluna, o input precisa esticar */
    .ts-search-bar {
        align-items: stretch !important;
    }

    .ts-search-bar input,
    .ts-search-bar button {
        width: 100% !important;
    }

    /* Hero da home: os blocos da busca dimensionavam pelo conteúdo
       (222/291/163/121px medidos) e ficavam desalinhados */
    .ts-hero-search .row {
        margin-left: 0;
        margin-right: 0;
    }

    .ts-hero-search .row > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }
}


/* ---------------------------------------------------------------------
   5. Contraste (WCAG 2.1 AA — 4,5:1 para texto normal)
   ---------------------------------------------------------------------
   Paleta oficial da marca (Mirage/Blaze Orange/Deep Sea Green/Wild Sand,
   ver assets/css/ts-tokens.css): #fff sobre Blaze Orange puro (#FF5B04)
   dá 3,11:1 em todo botão principal — falha 4,5:1 (só passa o mínimo de
   3:1 de texto grande, e 15px bold não conta como grande). Contra Wild
   Sand o Blaze puro fica pior ainda (2,64:1), então nem o mínimo de
   texto grande fecha.

   O laranja da marca continua o mesmo nos fundos e bordas decorativos;
   só o laranja que carrega TEXTO usa a variante escurecida #B44000
   (5,7:1 contra branco, 4,8:1 contra Wild Sand). .ts-tag foi trocado
   pra Deep Sea Green (#075056, 6,9:1 contra o fundo da tag) em vez de
   laranja — mais coerente com a hierarquia da paleta (laranja é
   accent/CTA, a marca "secundária" nas tags é o verde-azulado).
   --------------------------------------------------------------------- */
.ts-submit-btn,
.ts-btn-primary {
    background: #B44000 !important;
}

.ts-submit-btn:hover,
.ts-btn-primary:hover {
    background: #8F3300 !important;
}

.ts-tag {
    color: #075056 !important;
}

::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}

.cad-hint,
.cad-step-sub {
    color: #5b5b5b !important;
}


/* ---------------------------------------------------------------------
   6. Foco visível
   ---------------------------------------------------------------------
   O main.css zera `a:focus { outline: 0 }` globalmente e não repõe nada.
   Quem navega por teclado Bluetooth, Switch Control ou TalkBack fica sem
   saber onde está (WCAG 2.4.7).
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #B44000 !important;
    outline-offset: 2px !important;
}


/* ---------------------------------------------------------------------
   7. Parallax no iOS
   ---------------------------------------------------------------------
   O Safari do iPhone não suporta background-attachment: fixed — ele
   dimensiona a imagem pela altura do documento inteiro. Na home, que
   tem mais de 15.000px, a foto sai gigante e desfocada, e o repaint a
   cada rolagem derruba o frame rate.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ts-brand-section,
    .ts-page-hero {
        background-attachment: scroll !important;
    }
}


/* ---------------------------------------------------------------------
   8. Card de vaga clicável
   ---------------------------------------------------------------------
   O card é um <div onclick>. Sem href não dá para abrir em nova aba, não
   é focável e o leitor de tela não anuncia como link. Enquanto o markup
   não vira <a>, ao menos deixa o alvo evidente e focável.
   --------------------------------------------------------------------- */
.ts-vaga-card {
    cursor: pointer;
}

.ts-vaga-card:focus-visible {
    outline: 3px solid #B44000;
    outline-offset: 2px;
}


/* ---------------------------------------------------------------------
   9. Respeitar quem pediu menos movimento
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
