/*
Theme Name: Ônibus Online
Theme URI: https://onibus.online/
Author: Isaac
Author URI: https://onibus.online/
Description: Tema clássico leve para onibus.online. Sem Bootstrap, sem jQuery, sem Font Awesome, sem requisições externas. Implementa à mão apenas as classes de layout efetivamente usadas no conteúdo do site, mantendo compatibilidade com o HTML já publicado.
Version: 0.8.2
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onibus-online
Tags: custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. TOKENS
   Valores medidos no site em produção (agosto/2026) via getComputedStyle.
   Alterar cor do site = alterar aqui, em um lugar só.
   ========================================================================== */
:root {
  /* Marca — todos extraídos do bootbus.css e do header.php atuais */
  --oo-brand: #0d51aa;          /* navbar-top, numeral, botão do cookie */
  --oo-brand-800: #0a3d80;      /* fundo do rodapé — um tom abaixo do cabeçalho */
  --oo-brand-dark: #002d66;     /* navbar-bottom */
  --oo-brand-deep: #012d67;     /* .bg-bus */

  /* Rodapé — texto sobre o azul escuro. Os três tons passam no contraste
     AA sobre --oo-brand-800: 7,3:1, 5,4:1 e 4,8:1 respectivamente. */
  --oo-foot-text: #c4d8f2;
  --oo-foot-soft: #a4c3e8;
  --oo-foot-link: #e2edfa;
  --oo-foot-dim:  #8db2e0;
  --oo-yellow: #e8bc1a;         /* barra de cookies, ticket */
  --oo-yellow-2: #f0c116;       /* .bg-bus2, .btn-clickbus */
  --oo-yellow-3: #ecbe18;       /* botão da busca */
  --oo-link: #4582ec;
  --oo-link-hover: #01447e;
  --oo-link-content: #0275d8;   /* links no conteúdo e no breadcrumb */
  --oo-success: #02b875;
  --oo-warning: #ffc107;
  --oo-next: #f4de81;           /* destaque "próximo horário" */
  --oo-alert: #f04e4e;          /* borda do .bd-callout */
  --oo-alert-bg: #f0c0c0;

  /* Neutros */
  --oo-text: #343a40;
  --oo-text-soft: #6c757d;
  --oo-ink: #3C3C3C;            /* .linklinha */
  --oo-bg: #fff;
  --oo-bg-soft: #f6f7f9;
  --oo-border: #eaecef;
  --oo-border-2: #dfdfdf;
  --oo-dark: #444;              /* fundo do título do quadro e do .cia */
  --oo-btn-soft: #e7e7e7;
  --oo-ad-bg: #dfdfdf;          /* placeholder cinza dos blocos de anúncio */

  /* Tipografia */
  --oo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  /* Tipografia fluida.
     O bootbus.css atual usa 1.15rem fixo (18,4px) no body e 1.4rem (22,4px)
     nos textos de conteúdo — tamanhos pensados para desktop, que ficam grandes
     demais numa tela de 390px. Com clamp(), o mesmo valor de hoje continua
     valendo no desktop e encolhe proporcionalmente no celular.
     Como 90% do acesso é mobile, é ali que o ajuste importa. */
  --oo-fs-base: clamp(1rem, 0.95rem + 0.28vw, 1.15rem);      /* 16 → 18,4px */
  --oo-fs-lead: clamp(1.05rem, 0.95rem + 0.55vw, 1.4rem);    /* 16,8 → 22,4px */
  --oo-fs-h1:   clamp(1.4rem, 1.15rem + 1.1vw, 2rem);        /* 22,4 → 32px */
  --oo-fs-h2:   clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --oo-fs-h3:   clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --oo-lh: 1.5;

  /* Layout */
  --oo-gutter: 15px;
  --oo-radius: 5px;
  --oo-radius-pill: 22px;

  /* Escala de espaçamento (mesma do Bootstrap, para compatibilidade) */
  --oo-s0: 0;
  --oo-s1: .25rem;
  --oo-s2: .5rem;
  --oo-s3: 1rem;
  --oo-s4: 1.5rem;
  --oo-s5: 3rem;
}

/* ==========================================================================
   2. RESET MÍNIMO
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--oo-font);
  font-size: var(--oo-fs-base);
  line-height: var(--oo-lh);
  color: var(--oo-text);
  background: var(--oo-bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
img { border: 0; vertical-align: middle; }

a { color: var(--oo-link); text-decoration: none; }
a:hover { color: var(--oo-link-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-weight: 700; line-height: 1.25; }
h1 { font-size: var(--oo-fs-h1); }
h2 { font-size: var(--oo-fs-h2); }
h3 { font-size: var(--oo-fs-h3); }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1rem; }

ul, ol { padding-left: 1.5rem; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: .5rem; text-align: left; border-bottom: 1px solid var(--oo-border); }

hr { border: 0; border-top: 1px solid var(--oo-border); margin: 1.5rem 0; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Acessibilidade: foco sempre visível (refino em relação ao tema atual) */
:focus-visible {
  outline: 3px solid var(--oo-link);
  outline-offset: 2px;
  border-radius: 2px;
}

.screen-reader-text, .visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: 100;
  padding: .75rem 1rem;
  background: #fff; color: var(--oo-brand);
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   3. LAYOUT — camada compatível com as classes já usadas no conteúdo
   Reescrita à mão. Cobre exatamente o que foi medido nas páginas do site.
   ========================================================================== */
/* O container centralizado é o que cria a margem lateral do desktop.
   Larguras iguais às do Bootstrap, que é o que o site usa hoje. */
.container, .container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--oo-gutter);
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
.container-fluid { max-width: 100%; }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--oo-gutter) * -1);
}
.row > * { padding-inline: var(--oo-gutter); width: 100%; }

/* --------------------------------------------------------------------------
   Layout sem margens (template-full.php → onibus_layout('full'))

   Ajusta os TRÊS níveis de uma vez. Só zerar o padding do #primary, como o
   style="" inline fazia, deixava o .container com max-width e a .row com
   margem negativa de -15px — o conteúdo continuava limitado e podia gerar
   rolagem horizontal no celular.
   -------------------------------------------------------------------------- */
.layout-full #content > .container {
  max-width: none;
  padding-inline: 0;
}
.layout-full #content > .container > .row { margin-inline: 0; }
.layout-full #primary { padding-inline: 0; }

/* Sem respiro vertical: no layout full o conteúdo encosta no cabeçalho e no
   rodapé. Anula o padding que o #content.site-content recebe por padrão. */
.layout-full #content.site-content {
  padding-top: 0;
  padding-bottom: 0;
}

/* Blocos do conteúdo que precisarem de respiro dentro do layout full podem
   usar .container por dentro, ou esta classe utilitária. */
.layout-full .com-margem { padding-inline: var(--oo-gutter); }

/* Gutters verticais do Bootstrap 5 (g-*). Hoje essas classes existem no seu
   HTML mas não fazem nada, porque a folha carregada é da versão 4. */
.g-0  { gap: 0; }
.g-1  { gap: var(--oo-s1); }
.g-2  { gap: var(--oo-s2); }
.g-3  { gap: var(--oo-s3); }
.g-4  { gap: var(--oo-s4); }
.g-5  { gap: var(--oo-s5); }
.gap-0 { gap: 0; }
.gap-1 { gap: var(--oo-s1); }
.gap-2 { gap: var(--oo-s2); }
.gap-3 { gap: var(--oo-s3); }
.gap-4 { gap: var(--oo-s4); }
.gap-5 { gap: var(--oo-s5); }

.col      { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width: 8.3333%; }
.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-5  { flex: 0 0 auto; width: 41.6667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.3333%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm-1  { flex: 0 0 auto; width: 8.3333%; }
  .col-sm-2  { flex: 0 0 auto; width: 16.6667%; }
  .col-sm-3  { flex: 0 0 auto; width: 25%; }
  .col-sm-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-sm-5  { flex: 0 0 auto; width: 41.6667%; }
  .col-sm-6  { flex: 0 0 auto; width: 50%; }
  .col-sm-7  { flex: 0 0 auto; width: 58.3333%; }
  .col-sm-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-sm-9  { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
  .g-sm-3 { gap: var(--oo-s3); }
  .g-sm-4 { gap: var(--oo-s4); }
  .align-items-sm-center { align-items: center; }
  .mb-sm-0 { margin-bottom: 0; }
  .mb-sm-3 { margin-bottom: var(--oo-s3); }
  .d-sm-block { display: block; }
  .d-sm-none  { display: none; }
}

@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .d-md-block { display: block; }
  .d-md-none  { display: none; }
}

@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
  .ps-lg-5, .pl-lg-5 { padding-left: var(--oo-s5); }
  .d-lg-block { display: block; }
  .d-lg-none  { display: none; }
}

/* ==========================================================================
   4. UTILITÁRIOS — grafia v4 e v5 aceitas em paralelo
   Isso permite migrar o conteúdo aos poucos, sem quebrar nada.
   ========================================================================== */
.d-none          { display: none; }
.d-block         { display: block; }
.d-inline        { display: inline; }
.d-inline-block  { display: inline-block; }
.d-flex          { display: flex; }
.d-inline-flex   { display: inline-flex; }
.d-grid          { display: grid; }

.flex-row     { flex-direction: row; }
.flex-column  { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-grow-1  { flex-grow: 1; }

.align-items-start   { align-items: flex-start; }
.align-items-center  { align-items: center; }
.align-items-end     { align-items: flex-end; }
.justify-content-start   { justify-content: flex-start; }
.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end     { justify-content: flex-end; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }

.text-start, .text-left   { text-align: left; }
.text-center              { text-align: center; }
.text-end, .text-right    { text-align: right; }
.text-white   { color: #fff; }
.text-muted   { color: var(--oo-text-soft); }
.text-nowrap  { white-space: nowrap; }

.fw-bold, .font-weight-bold       { font-weight: 700; }
.fw-normal, .font-weight-normal   { font-weight: 400; }
.fst-italic, .font-italic         { font-style: italic; }

.bg-transparent { background-color: transparent; }
.bg-light  { background-color: var(--oo-bg-soft); }
.bg-white  { background-color: #fff; }

.rounded         { border-radius: var(--oo-radius); }
.rounded-circle  { border-radius: 50%; }
.rounded-pill    { border-radius: var(--oo-radius-pill); }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Espaçamento: m/p × 0..5. Sufixos s/e (v5) e l/r (v4) apontam para o mesmo lugar. */
.m-0{margin:0}.m-1{margin:var(--oo-s1)}.m-2{margin:var(--oo-s2)}.m-3{margin:var(--oo-s3)}.m-4{margin:var(--oo-s4)}.m-5{margin:var(--oo-s5)}
.mt-0{margin-top:0}.mt-1{margin-top:var(--oo-s1)}.mt-2{margin-top:var(--oo-s2)}.mt-3{margin-top:var(--oo-s3)}.mt-4{margin-top:var(--oo-s4)}.mt-5{margin-top:var(--oo-s5)}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--oo-s1)}.mb-2{margin-bottom:var(--oo-s2)}.mb-3{margin-bottom:var(--oo-s3)}.mb-4{margin-bottom:var(--oo-s4)}.mb-5{margin-bottom:var(--oo-s5)}
.ms-0,.ml-0{margin-left:0}.ms-1,.ml-1{margin-left:var(--oo-s1)}.ms-2,.ml-2{margin-left:var(--oo-s2)}.ms-3,.ml-3{margin-left:var(--oo-s3)}.ms-4,.ml-4{margin-left:var(--oo-s4)}.ms-5,.ml-5{margin-left:var(--oo-s5)}
.me-0,.mr-0{margin-right:0}.me-1,.mr-1{margin-right:var(--oo-s1)}.me-2,.mr-2{margin-right:var(--oo-s2)}.me-3,.mr-3{margin-right:var(--oo-s3)}.me-4,.mr-4{margin-right:var(--oo-s4)}.me-5,.mr-5{margin-right:var(--oo-s5)}
.mx-0{margin-inline:0}.mx-1{margin-inline:var(--oo-s1)}.mx-2{margin-inline:var(--oo-s2)}.mx-3{margin-inline:var(--oo-s3)}.mx-auto{margin-inline:auto}
.my-0{margin-block:0}.my-1{margin-block:var(--oo-s1)}.my-2{margin-block:var(--oo-s2)}.my-3{margin-block:var(--oo-s3)}.my-4{margin-block:var(--oo-s4)}.my-5{margin-block:var(--oo-s5)}

.p-0{padding:0}.p-1{padding:var(--oo-s1)}.p-2{padding:var(--oo-s2)}.p-3{padding:var(--oo-s3)}.p-4{padding:var(--oo-s4)}.p-5{padding:var(--oo-s5)}
.pt-0{padding-top:0}.pt-1{padding-top:var(--oo-s1)}.pt-2{padding-top:var(--oo-s2)}.pt-3{padding-top:var(--oo-s3)}.pt-4{padding-top:var(--oo-s4)}.pt-5{padding-top:var(--oo-s5)}
.pb-0{padding-bottom:0}.pb-1{padding-bottom:var(--oo-s1)}.pb-2{padding-bottom:var(--oo-s2)}.pb-3{padding-bottom:var(--oo-s3)}.pb-4{padding-bottom:var(--oo-s4)}.pb-5{padding-bottom:var(--oo-s5)}
.ps-0,.pl-0{padding-left:0}.ps-1,.pl-1{padding-left:var(--oo-s1)}.ps-2,.pl-2{padding-left:var(--oo-s2)}.ps-3,.pl-3{padding-left:var(--oo-s3)}.ps-4,.pl-4{padding-left:var(--oo-s4)}.ps-5,.pl-5{padding-left:var(--oo-s5)}
.pe-0,.pr-0{padding-right:0}.pe-1,.pr-1{padding-right:var(--oo-s1)}.pe-2,.pr-2{padding-right:var(--oo-s2)}.pe-3,.pr-3{padding-right:var(--oo-s3)}.pe-4,.pr-4{padding-right:var(--oo-s4)}.pe-5,.pr-5{padding-right:var(--oo-s5)}
.px-0{padding-inline:0}.px-1{padding-inline:var(--oo-s1)}.px-2{padding-inline:var(--oo-s2)}.px-3{padding-inline:var(--oo-s3)}.px-4{padding-inline:var(--oo-s4)}
.py-0{padding-block:0}.py-1{padding-block:var(--oo-s1)}.py-2{padding-block:var(--oo-s2)}.py-3{padding-block:var(--oo-s3)}.py-4{padding-block:var(--oo-s4)}

/* ==========================================================================
   5. COMPONENTES — só os que o site realmente usa
   ========================================================================== */

/* --- Botões --- */
.btn {
  display: inline-block;
  padding: .375rem .825rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--oo-radius-pill);
  background: transparent;
  color: var(--oo-text);
  transition: background-color .15s, color .15s, border-color .15s;
  min-height: 44px;              /* refino: alvo de toque acessível */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:hover { text-decoration: none; }
.btn-sm { padding: .25rem .5rem; font-size: .8125rem; min-height: 38px; }
.btn-success {
  background: var(--oo-success);
  border-color: var(--oo-success);
  color: #fff;
}
.btn-success:hover { background: #029a62; border-color: #029a62; color: #fff; }
.btn-outline-success { color: var(--oo-success); border-color: var(--oo-success); }
.btn-outline-success:hover { background: var(--oo-success); color: #fff; }
.btn-primary { background: var(--oo-brand); border-color: var(--oo-brand); color: #fff; }
.btn-primary:hover { background: var(--oo-brand-dark); border-color: var(--oo-brand-dark); color: #fff; }

/* --- Badge --- */
.badge {
  display: inline-block;
  padding: .225rem .375rem;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1;
  color: #212529;
  background: var(--oo-warning);
  border-radius: 3px;
  vertical-align: baseline;
}

/* --- Card --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 0;
  border-radius: var(--oo-radius);
  margin-bottom: var(--oo-s3);
}
.card-body   { flex: 1 1 auto; padding: var(--oo-s3); }
.card-header { padding: .75rem var(--oo-s3); border-bottom: 1px solid var(--oo-border); }
.card-title  { margin-bottom: .5rem; font-size: 1.1rem; font-weight: 700; }
.card-img, .card-img-top { width: 100%; border-radius: var(--oo-radius) var(--oo-radius) 0 0; }
.img-thumbnail {
  padding: .25rem;
  background: #fff;
  border: 1px solid var(--oo-border);
  border-radius: var(--oo-radius);
}

/* Link que cobre o card inteiro */
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- List group --- */
.list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.list-group-item {
  position: relative;
  display: block;
  padding: .625rem var(--oo-s3);
  background: #fff;
  border: 1px solid var(--oo-border);
  margin-bottom: -1px;
}
.list-group-item:first-child { border-radius: var(--oo-radius) var(--oo-radius) 0 0; }
.list-group-item:last-child  { border-radius: 0 0 var(--oo-radius) var(--oo-radius); margin-bottom: 0; }
.list-group-flush .list-group-item { border-inline: 0; border-radius: 0; }

/* --- Accordion / collapse (sem framework, ~20 linhas) --- */
.collapse:not(.show) { display: none; }
.collapsing { height: 0; overflow: hidden; transition: height .2s ease; }
.accordion { margin-bottom: var(--oo-s3); }
.accordion .card-header { cursor: pointer; }
[data-bs-toggle="collapse"], [data-toggle="collapse"] { cursor: pointer; }

/* --- Formulários --- */
.form-control {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--oo-text);
  background: #fff;
  border: 1px solid var(--oo-border);
  border-radius: var(--oo-radius);
  min-height: 44px;
}
.form-control:focus { border-color: var(--oo-link); outline: 0; box-shadow: 0 0 0 3px rgba(69,130,236,.2); }
.form-label { display: inline-block; margin-bottom: .25rem; font-weight: 700; }

/* ==========================================================================
   6. ESTRUTURA DO SITE
   ========================================================================== */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-content { flex: 1 0 auto; }

/* --- Cabeçalho ---
   Porte fiel do CSS que estava embutido no header-teste.php. Duas coisas
   ficaram de fora de propósito:

   1) O reset global `* { margin:0; padding:0 }`. Ele zerava a margem de TODO
      elemento da página, inclusive parágrafos e listas do conteúdo, e obrigava
      cada bloco a recriar o próprio espaçamento. O reset da seção 2 já resolve
      o box-sizing sem esse efeito colateral.

   2) O `@import url('...fonts.googleapis.com...Inter')`. Além de ser uma
      requisição externa, ele estava DEPOIS de uma regra `*{}` dentro do mesmo
      bloco <style> — e, pela especificação do CSS, um @import fora do topo da
      folha é ignorado. Ou seja: a Inter nunca chegou a carregar. O que o
      visitante vê hoje é a fonte do sistema, que é o que está aqui. */
.site-header {
  background: var(--oo-brand);
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1rem;
  position: relative;
}

.logo-container { display: flex; align-items: center; justify-content: center; }
.logo-container img { width: 150px; height: auto; }

.menu-toggle,
.search-toggle {
  background: none;
  border: 0;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  transition: opacity .3s ease;
}
.menu-toggle:hover, .search-toggle:hover { opacity: .8; }

/* --- Menu (painel que desce sob o cabeçalho) --- */
.mobile-menu {
  background: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-in-out;
}
.mobile-menu.active { max-height: none; }

.main-menu { list-style: none; padding: 1.5rem; margin: 0; }
.main-menu li { margin-bottom: .75rem; }

.menu-link {
  color: #000;
  text-decoration: none;
  font-weight: 600;
  display: block;
  padding: .75rem 1rem;
  font-size: 1.25rem;
  background: #f3f6ff;
  border-radius: 8px;
  transition: background-color .2s ease, transform .2s ease;
}
.menu-link:hover { background: #dae0f0; color: #000; text-decoration: none; transform: translateX(4px); }

.menu-item-has-children { position: relative; }
.menu-item-has-children > .menu-link::after {
  content: "▼";
  font-size: .8rem;
  margin-left: .5rem;
  display: inline-block;
  transition: transform .3s ease;
}
.menu-item-has-children.active > .menu-link::after { transform: rotate(180deg); }

.sub-menu { list-style: none; padding: .5rem 0 .5rem 1rem; margin: 0; display: none; }
.menu-item-has-children.active > .sub-menu { display: block; }
.sub-menu li { margin-bottom: .5rem; }
.sub-menu li a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: .6rem 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  background: #f9f9f9;
  border-radius: 6px;
  transition: background-color .2s ease, transform .2s ease;
}
.sub-menu li a:hover { color: #000; background: #f0f0f0; text-decoration: none; transform: translateX(4px); }

.flag-icon {
  width: 18px;
  height: 12px;
  margin-right: 6px;
  vertical-align: middle;
}

.text-menu {
  padding-left: 1.5rem;
  font-size: .8rem;
  color: #aaa;
  margin-top: -2rem;
  padding-bottom: 1rem;
}

/* No mobile os itens do menu podem ser um pouco maiores, como no tema atual. */
@media (max-width: 767px) {
  .menu-link      { font-size: 1.15rem; }
  .sub-menu li a  { font-size: 1.05rem; }
}
@media (min-width: 768px) {
  .navbar-container { padding: .5rem 2rem; }
}

/* --- Busca do cabeçalho --- */
.search-container {
  background: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  display: none;
}
.search-container.active { display: block; }

.searchform {
  display: flex;
  align-items: center;
  max-width: 600px;
  margin-inline: auto;
  position: relative;
}
.search-field {
  width: 100%;
  padding: .75rem 3rem .75rem 1rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  outline: 0;
  font-size: 1rem;
  transition: border-color .3s ease;
}
.search-field:focus { border-color: var(--oo-brand); }
.search-submit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--oo-yellow);
  color: var(--oo-brand);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s ease;
}
.search-submit:hover { background: #d4ab18; }

/* --- Rodapé ---
   Estrutura da proposta homeproposta_2.html: marca à esquerda, colunas de
   links à direita, aviso legal e assinatura. O fundo é um azul mais escuro
   que o do cabeçalho, o que separa visualmente o rodapé do conteúdo. */
.site-footer {
  background: var(--oo-brand-800);
  color: var(--oo-foot-text);
  padding: 26px 0 30px;
  font-size: 13.5px;
  line-height: 1.5;
}
.site-footer a { color: var(--oo-foot-link); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.foot-brand { margin-bottom: 22px; }

.footer-logo { display: inline-block; margin-bottom: 12px; }
.footer-logo img { height: 32px; width: auto; display: block; }

.footer-tagline {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--oo-foot-soft);
  max-width: 44ch;
}

.fcols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 20px;
}

.fcol-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oo-yellow);
}

.fcol ul { list-style: none; margin: 0; padding: 0; }
.fcol li { margin-bottom: 9px; }
.fcol li:last-child { margin-bottom: 0; }

.fcol-link {
  display: inline-block;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--oo-foot-link);
}

/* Item com subtítulo (ex.: Faixa Exclusiva) */
.fcol-link--ext b { display: block; font-weight: 700; color: #fff; }
.fcol-link--ext span {
  display: block;
  font-size: 11.5px;
  color: var(--oo-foot-dim);
  margin-top: 1px;
}
.fcol-link--ext:hover span { color: var(--oo-foot-link); }

.footer-legal {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--oo-foot-dim);
}
.footer-legal a { text-decoration: underline; }

.footer-copyright {
  margin: 14px 0 0;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .site-footer { padding: 34px 0 36px; }

  .foot-top {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr;
    gap: 48px;
    align-items: start;
  }
  .foot-brand { margin-bottom: 0; }
  .fcols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .footer-logo img { height: 34px; }
}
/* --- Aviso de cookies ---
   Reproduz a barra amarela atual: fica no fluxo, logo abaixo do cabeçalho,
   e não flutua sobre o conteúdo. Mesmas cores do header.php de hoje. */
#cookieConsent {
  background: var(--oo-yellow);
  color: #000;
  text-align: center;
  padding: 10px;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
#cookieConsent[hidden] { display: none; }
.privacy-content {
  font-size: 1rem;
  line-height: 1.4;
}
.privacy-content a { color: #000; text-decoration: underline; }
.privacy-content button {
  border: 0;
  background: var(--oo-brand);
  color: #fff;
  padding: 2px 14px;
  margin: 3px;
  border-radius: 10px;
  font-size: 1.15rem;
  min-height: 36px;
  cursor: pointer;
}

/* ==========================================================================
   7. CONTEÚDO — classes que aparecem dentro do HTML das páginas publicadas.
   Reproduzidas a partir do CSS medido em produção. NÃO renomear:
   elas estão gravadas no conteúdo de milhares de páginas.
   ========================================================================== */

#content.site-content { padding-top: .5rem; padding-bottom: 3.75rem; }

.entry-header { margin-bottom: var(--oo-s3); }
h1.entry-title { font-size: var(--oo-fs-h1); text-align: center; border-bottom: 1px solid var(--oo-border); padding-bottom: .5rem; }
h2.entry-title { border-bottom: 1px solid var(--oo-border); }
.entry-content { overflow-wrap: break-word; }
.entry-content a { color: var(--oo-link-content); }
.entry-content a:hover { color: var(--oo-link-hover); }

/* Breadcrumb escrito à mão no conteúdo */
ol.breadcrumb1, ul.breadcrumb1 { padding: 10px 16px; margin: 0 0 .5rem; list-style: none; }
ol.breadcrumb1 li, ul.breadcrumb1 li { display: inline; font-size: 12px; }
ol.breadcrumb1 li + li::before,
ul.breadcrumb1 li + li::before { padding: 8px; color: #000; content: "/ "; }
ol.breadcrumb1 li a, ul.breadcrumb1 li a { color: var(--oo-link-content); text-decoration: none; }
ol.breadcrumb1 li a:hover, ul.breadcrumb1 li a:hover { color: var(--oo-link-hover); text-decoration: underline; }

/* Quadro de horários */
.quadro { text-align: center; }
.quadro ul { padding-left: 0; }
.quadro li {
  padding: 5px 12px;
  margin: 3px;
  text-align: center;
  display: inline-block;
  list-style-type: none;
}
.quadro .card-title {
  font-size: 1.3rem;
  background: var(--oo-dark);
  color: #fff;
  border: 0;
  border-radius: 3px;
  text-align: center;
  display: inline-block;
  width: 100%;
  font-weight: 700;
  padding: 10px 22px;
  margin: 10px 0 5px;
}

.diario {
  font-size: 1rem;
  display: inline-block;
  text-align: center;
  padding: 10px 22px;
  margin: 10px 0 5px;
  width: 100%;
  font-weight: 700;
  border-bottom: 1px solid var(--oo-border);
}

.square {
  border: 0;
  border-radius: 3px;
  text-align: center;
  display: inline-block;
  font-size: 1rem;
}
.square.buttonH {
  background: var(--oo-btn-soft);
  color: #000;
  padding: 5px 12px;
  margin: 3px;
}
.proximo {
  background: var(--oo-next);
  color: #000;
  font-weight: 700;
  padding: 5px 12px;
  margin: 3px;
}

.lista-horarios { list-style: none; padding-left: 0; }
.divli { padding-left: 15px; }
.dias { text-align: center; }
.itinerario { text-align: justify; }
.percent { width: 100%; }
.centered { text-align: center; }
.rodape1 { text-align: left; }
.logoempresa { float: right; }

.section-title {
  font-size: var(--oo-fs-lead);
  text-align: center;
  padding: 10px 12px;
  margin: 10px 0 5px;
  border-bottom: 1px solid var(--oo-border);
}
.feature-title {
  font-size: var(--oo-fs-h1);
  border-bottom: 1px solid var(--oo-border);
}

/* Marca de horário aproximado */
sup { color: red; }
.square span { color: #bbb; }
.square span::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #bbb;
  margin-right: 5px;
}

/* --- Textos ---
   text-align: justify foi trocado por start no mobile: em telas estreitas o
   justificado abre "rios" de espaço entre palavras, que é exatamente o efeito
   visível na captura do site de testes. No desktop o justificado volta. */
.description  { font-size: var(--oo-fs-lead); text-align: start; }
.informacoes  { font-size: var(--oo-fs-lead); font-weight: 300; margin-bottom: .2rem; font-style: italic; text-align: start; }
.itinerario, .atendimentos, .att { text-align: start; }

@media (min-width: 768px) {
  .description, .informacoes, .itinerario, .atendimentos, .att { text-align: justify; }
}
.atendimentos { clear: both; margin: 15px 0; font-style: italic; }
.att          { font-size: .82rem; font-style: italic; }
.alerta       { font-size: var(--oo-fs-h3); margin-top: 1rem; font-weight: 700; }

/* --- Caixas --- */
.containerb { padding-inline: 0; }
.boxx {
  border-radius: 3px;
  border: 1px solid var(--oo-border-2);
  padding: 10px;
  margin-bottom: 20px;
  background: #fff;
}
.caixa {
  border-radius: 3px;
  border: 1px solid var(--oo-border-2);
  padding: 10px;
  margin-bottom: 20px;
}
.bd-callout {
  padding: .70rem 1.25rem .25rem;
  margin: .05rem 0 .75rem;
  border: 1px solid #eee;
  border-left: 1.25rem solid var(--oo-alert);
  border-radius: .5rem;
  background: var(--oo-alert-bg);
}

/* --- Botões do conteúdo --- */
.but {
  border-radius: 3px;
  border: 0;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-weight: 700;
}
.but.indice  { font-size: 15px; margin: 3px 10px 3px 0; width: 80px;  height: 35px; }
.but.wpp     { font-size: 18px; margin: 3px 10px 3px 0; width: 200px; height: 40px; }
.but.numeral { font-size: 20px; margin: 3px 10px 3px 0; height: 45px; }

.myButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .5rem 1rem;
  background: var(--oo-brand);
  color: #fff;
  border-radius: var(--oo-radius-pill);
  font-weight: 700;
  text-decoration: none;
}
.myButton:hover { background: var(--oo-brand-dark); color: #fff; text-decoration: none; }

/* --- Listagens de cidade, linha e empresa --- */
.empresas   { padding: 0; margin-bottom: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem); color: #fff; }
.linhas     { font-size: var(--oo-fs-h3); text-align: left; margin-bottom: 0; }
.linklinha  { color: var(--oo-ink); font-weight: 700; font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem); }
.linklinhab { color: var(--oo-ink); font-weight: 400; font-size: var(--oo-fs-h3); }
.linkd      { font-size: var(--oo-fs-h3); }
a.linkd     { color: #000; }
.linkc      { margin-bottom: .7rem; }
.city       { padding: .75rem 1.25rem; float: left; width: 100%; }
.cia        { background: var(--oo-dark); color: #fff; }
.bg-bus     { color: #fff; font-size: 1.3rem; background-color: var(--oo-brand-deep) !important; }
.bg-bus2    { background-color: var(--oo-yellow-2) !important; }
.h2contato  { clear: none; }

/* Seta antes do nome da linha */
.linklinha::before {
  display: inline-block;
  margin-right: .355em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

.linkhero { -webkit-text-stroke: 1px #fff; }

/* --- Numeral da linha --- */
.numeral {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  font-weight: 700;
  height: 100px;
  width: 100px;
  text-align: center;
  border-radius: 15px;
  font-size: 2.5rem;
  background: var(--oo-brand);
}
#divdireita  { display: table-cell; vertical-align: middle; padding-right: 7px; padding-bottom: 5px; }
#divesquerda { float: left; padding-right: 7px; padding-bottom: 5px; }

/* Clearfix usado no conteúdo */
.group::before, .group::after { content: ""; display: table; }
.group::after { clear: both; }

/* --- Blocos promocionais --- */
.maisempresas {
  background: url("https://onibus.online/wp-content/uploads/2023/07/veja-mais.webp") center / cover;
  padding: 30px;
  border: 1px solid #eee;
  border-radius: 12px;
  margin-block: 15px;
}
.badge-maisempresas {
  display: inline-block;
  padding: .6em 1.2em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  color: #212529;
  background: var(--oo-warning);
}
.clickbus-julho {
  background: url("https://onibus.online/wp-content/uploads/2023/07/background-clickbus-roxo.webp") center / cover;
  color: #fff;
  padding: 30px;
  margin-top: 20px;
  border-radius: 20px;
  text-align: left;
}
.btn-clickbus { background: var(--oo-yellow-2); font-weight: 700; color: #000; }

/* --- Tarifa --- */
.ticket-item { margin-bottom: 10px; }
.ticket-image-popular {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: left;
  width: 100%;
  height: 70px;
  border: 1px solid #051c2c;
  border-radius: 5px;
  background: #fff;
  color: #051c2c;
}
.ticket-image-popular .ticket-image-title { display: inline; margin-left: 20px; min-width: 190px; }
.ticket-image-popular .prefix,
.ticket-image-popular .suffix { display: inline; font-size: 3rem; line-height: 3rem; letter-spacing: -1px; }
.ticket-image-popular .prefix { font-weight: 700; }
.ticket-image-popular .strapline { position: unset; padding-right: 60px; }
.ticket-image-popular::before {
  content: "";
  position: absolute;
  width: 40px; height: 68px;
  top: 0; right: 0;
  display: block;
  border-radius: 0 4px 4px 0;
  background: var(--oo-yellow);
}

/* --- Ajustes de card usados no conteúdo --- */
.card-body   { padding: 0; }
.card        { margin-bottom: 15px; }
.card-header { background: #fff; }

/* --- Estado desktop / mobile (usado no cabeçalho) --- */
.state-desktop { display: none; }
@media (min-width: 992px) {
  .state-desktop { display: block; }
  .state-mobile  { display: none; }
}

/* --- Áreas de anúncio ---
   O tema NÃO gera mais nenhum anúncio: quem coloca os códigos é você, no
   conteúdo ou por plugin. Estas classes ficam porque já estão escritas no HTML
   de páginas publicadas — vieram do bootbus.css e continuam valendo.
   A altura fixa é o que reserva o espaço e evita o salto de layout (CLS)
   quando o anúncio carrega. */
.pub {
  display: block;
  width: 100%;
  height: 300px;
  margin: 15px 0;
  background: var(--oo-ad-bg);
}
.pubc {
  display: block;
  width: 100%;
  height: 100px;
  margin: 5px 0;
  background: #dedede;
}
.responsive_1 { display: block; width: 320px; height: 250px; text-align: center; }
@media (min-width: 500px) { .responsive_1 { width: 468px; height: 60px; } }
@media (min-width: 800px) { .responsive_1 { width: 728px; height: 90px; } }

/* ==========================================================================
   8. RESULTADOS DE BUSCA
   ========================================================================== */
.search-results-group { margin-bottom: var(--oo-s4); }
.search-results-group > h2 {
  font-size: 1.05rem;
  color: var(--oo-text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--oo-border);
  padding-bottom: .25rem;
}
.search-hit { padding: .5rem 0; border-bottom: 1px solid var(--oo-border); }
.search-hit__title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.search-hit__path { font-size: .78rem; color: var(--oo-text-soft); }

.pagination { display: flex; flex-wrap: wrap; gap: .35rem; margin: var(--oo-s4) 0; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .5rem;
  border: 1px solid var(--oo-border);
  border-radius: var(--oo-radius);
}
.pagination .current { background: var(--oo-brand); color: #fff; border-color: var(--oo-brand); }

/* ==========================================================================
   9. IMPRESSÃO — a página de horários é frequentemente impressa
   ========================================================================== */
@media print {
  .site-header, .site-footer, #cookieConsent, .pub, .adsbygoogle,
  [class*="clever-"], .mobile-menu, .search-container { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: none; }
  .quadro .card-title { background: #eee !important; color: #000 !important; }
  .proximo { background: #eee !important; }
}