/* Estilo base dos sites públicos. Também é carregado no editor (iframe), para a edição
   ficar igual ao que é publicado. Temas por site entram depois. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 17px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #1c2230; background: #fff; }
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* Grid de 12 colunas, como o .row/.col-md-* do Bootstrap: cada conteúdo é uma coluna.
   O espaço entre colunas (24px) vem do padding de cada uma; o container desconta 12px
   para o texto continuar alinhado a 20px da borda. Abaixo de 768px tudo ocupa 100%. */
.container { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 0 8px; }
/* Largura da coluna (--col, das classes col-N) menos as margens laterais (--ml e --mr,
   das classes ml- e mr-): com margem, a coluna continua cabendo na linha. */
.container > * {
  /* Cada coluna começa com os valores padrão: custom properties são herdadas, e sem isto
     os filhos de um container col-N (ou com margem) herdariam a largura do pai. As
     classes col-N, ml-* e mr-* vêm depois e valem sobre estes padrões. */
  --col: 100%; --ml: 0px; --mr: 0px;
  --w: calc(var(--col) - var(--ml) - var(--mr));
  flex: 0 0 var(--w); max-width: var(--w); min-width: 0; padding-left: 12px; padding-right: 12px;
}
/* Container dentro de container: é uma coluna do pai e uma linha para os próprios filhos
   (como uma .row dentro de uma .col no Bootstrap). Sem padding: os filhos já trazem o
   espaçamento, e o texto deles fica alinhado ao dos vizinhos. */
.container .container { max-width: none; margin: 0; padding: 0; }

/* Layout: o container mais externo é o site; header e footer são containers; a página
   entra no <main class="cms-outlet">, que é uma coluna como um container aninhado. */
.container:not(.container .container) { padding-top: 24px; padding-bottom: 48px; }
.container > .cms-outlet { padding-left: 0; padding-right: 0; margin: 24px 0; }
.container > header.container, .container > footer.container { padding-top: 8px; padding-bottom: 8px; }
@media (min-width: 768px) {
  .container > .col-1 { --col: 8.3333%; }
  .container > .col-2 { --col: 16.6667%; }
  .container > .col-3 { --col: 25.0000%; }
  .container > .col-4 { --col: 33.3333%; }
  .container > .col-5 { --col: 41.6667%; }
  .container > .col-6 { --col: 50.0000%; }
  .container > .col-7 { --col: 58.3333%; }
  .container > .col-8 { --col: 66.6667%; }
  .container > .col-9 { --col: 75.0000%; }
  .container > .col-10 { --col: 83.3333%; }
  .container > .col-11 { --col: 91.6667%; }
  .container > .col-12 { --col: 100.0000%; }
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; margin-top: 1.4em; }
h3 { font-size: 1.3rem; margin-top: 1.2em; }
p { margin: 0 0 1em; }

/* Imagem: ocupa a largura do bloco (a coluna), sem distorcer; a legenda segue o
   alinhamento de texto do container. width/height do <img> reservam o espaço. */
.cms-image { margin: 0 0 1em; }
.cms-image img { display: block; width: 100%; height: auto; }
.cms-image figcaption { margin-top: 0.5em; font-size: 0.875em; color: #5a6270; }

/* Botão/link. Sem largura, ocupa o tamanho do texto: botões seguidos ficam lado a lado;
   com largura (col-N), é uma coluna como os outros blocos. As cores vêm de variáveis
   (--button-*, --link-*), para o tema do site trocar sem reescrever as regras. */
.container > .cms-cta:not([class*="col-"]) { flex: 0 0 auto; max-width: 100%; }
.cms-cta { margin: 0 0 1em; }
.cms-button {
  display: inline-block; padding: var(--button-pad, 0.7em 1.4em);
  border: 2px solid var(--button-bg, #1c2230); border-radius: var(--button-radius, 8px);
  background: var(--button-bg, #1c2230); color: var(--button-text, #fff);
  font: inherit; font-weight: var(--button-weight, 600); line-height: 1.3; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.cms-button:hover { background: var(--button-hover-bg, #000); border-color: var(--button-hover-bg, #000); }
.cms-button-secondary { background: transparent; color: var(--button-secondary-text, var(--button-bg, #1c2230)); border-color: currentColor; }
.cms-button-secondary:hover { background: var(--button-secondary-hover-bg, rgb(0 0 0 / 6%)); border-color: currentColor; }
.cms-button-link {
  padding: 0; border: 0; border-radius: 0; background: none; color: var(--link-color, inherit);
  text-decoration: underline; text-underline-offset: 3px;
}
.cms-button-link:hover { background: none; color: var(--link-hover-color, inherit); }

/* Menu: links das páginas publicadas (preenchido pelo servidor). */
.cms-menu ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.cms-menu a { color: inherit; text-decoration: none; }
.cms-menu a:hover { text-decoration: underline; }
.cms-menu a[aria-current="page"] { font-weight: 600; }

/* Formatação de trechos de texto (listas em App\Domain\TextStyles). O tamanho é relativo
   ao bloco, então vale igual em parágrafos e títulos. As fontes vêm do Google Fonts: o
   servidor só carrega as que a página usa. */
strong { font-weight: 700; }
.fs-xs  { font-size: 0.75em; }
.fs-sm  { font-size: 0.875em; }
.fs-lg  { font-size: 1.25em; }
.fs-xl  { font-size: 1.5em; }
.fs-2xl { font-size: 2em; }
.fs-3xl { font-size: 3em; }
.ff-inter          { font-family: 'Inter', system-ui, sans-serif; }
.ff-montserrat     { font-family: 'Montserrat', system-ui, sans-serif; }
.ff-nunito         { font-family: 'Nunito', system-ui, sans-serif; }
.ff-oswald         { font-family: 'Oswald', 'Arial Narrow', sans-serif; }
.ff-merriweather   { font-family: 'Merriweather', Georgia, serif; }
.ff-playfair       { font-family: 'Playfair Display', Georgia, serif; }
.ff-jetbrains-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.ff-caveat         { font-family: 'Caveat', cursive; }

/* Opções do container (PageContent::CONTAINER_OPTIONS). Padrão: texto à esquerda,
   itens no topo, distribuídos a partir do início. */
.container { align-content: flex-start; }
.ta-center { text-align: center; }
.ta-right  { text-align: right; }
.ai-center  { align-items: center; }
.ai-end     { align-items: flex-end; }
.ai-stretch { align-items: stretch; }
.jc-center  { justify-content: center; }
.jc-end     { justify-content: flex-end; }
.jc-between { justify-content: space-between; }
.jc-around  { justify-content: space-around; }
.jc-evenly  { justify-content: space-evenly; }
.ac-center  { align-content: center; }
.ac-end     { align-content: flex-end; }
.ac-between { align-content: space-between; }
.ac-around  { align-content: space-around; }
.ac-stretch { align-content: stretch; }

/* Imagem de fundo (--cms-bg vem do atributo style, validado no servidor). */
.container.has-bg { background: var(--cms-bg) center / cover no-repeat; padding-top: 32px; padding-bottom: 32px; }
.container.has-bg.bg-parallax { background-attachment: fixed; }
/* Fundo na largura da tela: o conteúdo fica no container; um pseudo-elemento leva o
   fundo de borda a borda da janela. */
.container.has-bg.bg-full { background: none; position: relative; isolation: isolate; }
.container.has-bg.bg-full::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: -1; background: var(--cms-bg) center / cover no-repeat;
}
.container.has-bg.bg-full.bg-parallax::before { background-attachment: fixed; }
/* 100vw inclui a barra de rolagem: corta o excesso em vez de criar rolagem lateral. */
html, body { overflow-x: clip; }

/* Tela inteira (full-bleed): o container sai das bordas do pai (centralizado) até as
   bordas da janela. Só containers direto na página ou no layout. O conteúdo ganha o
   mesmo recuo da página (8px); com w-full-site, fica na largura do site (944px de
   conteúdo, como o container principal). */
.container > .w-full {
  --w: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.container > .container.w-full { padding-left: 8px; padding-right: 8px; }
.container > .container.w-full-site {
  padding-left: max(8px, calc(50vw - 472px)); padding-right: max(8px, calc(50vw - 472px));
}

/* Espaçamento (PageContent::SPACING), por lado: m = margin, p = padding; t/r/b/l = lados.
   !important, como os utilitários do Bootstrap: valem sobre os espaçamentos automáticos
   (página, header/footer, fundo com imagem). As margens laterais também alimentam a
   largura da coluna (--ml/--mr). */
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; --ml: 0px; } .mr-0 { margin-right: 0 !important; --mr: 0px; }
.mt-xs { margin-top: 8px !important; } .mb-xs { margin-bottom: 8px !important; } .ml-xs { margin-left: 8px !important; --ml: 8px; } .mr-xs { margin-right: 8px !important; --mr: 8px; }
.mt-sm { margin-top: 16px !important; } .mb-sm { margin-bottom: 16px !important; } .ml-sm { margin-left: 16px !important; --ml: 16px; } .mr-sm { margin-right: 16px !important; --mr: 16px; }
.mt-md { margin-top: 24px !important; } .mb-md { margin-bottom: 24px !important; } .ml-md { margin-left: 24px !important; --ml: 24px; } .mr-md { margin-right: 24px !important; --mr: 24px; }
.mt-lg { margin-top: 40px !important; } .mb-lg { margin-bottom: 40px !important; } .ml-lg { margin-left: 40px !important; --ml: 40px; } .mr-lg { margin-right: 40px !important; --mr: 40px; }
.mt-xl { margin-top: 64px !important; } .mb-xl { margin-bottom: 64px !important; } .ml-xl { margin-left: 64px !important; --ml: 64px; } .mr-xl { margin-right: 64px !important; --mr: 64px; }
.mt-2xl { margin-top: 96px !important; } .mb-2xl { margin-bottom: 96px !important; } .ml-2xl { margin-left: 96px !important; --ml: 96px; } .mr-2xl { margin-right: 96px !important; --mr: 96px; }
.pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .pr-0 { padding-right: 0 !important; }
.pt-xs { padding-top: 8px !important; } .pb-xs { padding-bottom: 8px !important; } .pl-xs { padding-left: 8px !important; } .pr-xs { padding-right: 8px !important; }
.pt-sm { padding-top: 16px !important; } .pb-sm { padding-bottom: 16px !important; } .pl-sm { padding-left: 16px !important; } .pr-sm { padding-right: 16px !important; }
.pt-md { padding-top: 24px !important; } .pb-md { padding-bottom: 24px !important; } .pl-md { padding-left: 24px !important; } .pr-md { padding-right: 24px !important; }
.pt-lg { padding-top: 40px !important; } .pb-lg { padding-bottom: 40px !important; } .pl-lg { padding-left: 40px !important; } .pr-lg { padding-right: 40px !important; }
.pt-xl { padding-top: 64px !important; } .pb-xl { padding-bottom: 64px !important; } .pl-xl { padding-left: 64px !important; } .pr-xl { padding-right: 64px !important; }
.pt-2xl { padding-top: 96px !important; } .pb-2xl { padding-bottom: 96px !important; } .pl-2xl { padding-left: 96px !important; } .pr-2xl { padding-right: 96px !important; }