/*
Theme Name: HSM Consulting
Theme URI: https://hsmc.com.br
Author: Mosten
Description: Tema institucional da HSM Consulting. Cabeçalho e rodapé em PHP, páginas e coleções editáveis por blocos.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: hsmc
*/

@property --brilho {
  syntax: "<number>";
  inherits: false;
  initial-value: -1;
}

:root {
  --noite-950: #05080e;
  --noite-900: #0a1220;
  --noite-850: #101b2e;
  --noite-800: #16233a;
  --noite-700: #1a2941;
  --branco: #ffffff;
  --branco-70: #b5b8bc;
  --branco-50: #858990;
  --branco-16: #313844;
  --branco-9: #202734;
  --branco-58-faixa: #9da3ac;
  --branco-50-faixa: #8b919d;
  --branco-40-faixa: #737b89;
  --ouro-700: #a3854e;
  --ouro-500: #c9ab72;
  --ouro-300: #e0c896;
  --ocre-900: #2a1e08;
  --ocre-500: #c08a2a;
  --ocre-200: #f2d9a6;
  --superficie: var(--noite-900);
  --superficie-papel: var(--noite-850);
  --superficie-realce: var(--noite-700);
  --superficie-inversa: var(--noite-800);
  --texto: var(--branco);
  --texto-secundario: var(--branco-70);
  --texto-terciario: var(--branco-50);
  --texto-inverso: var(--branco);
  --texto-inverso-secundario: var(--branco-70);
  --borda-sutil: var(--branco-9);
  --borda: var(--branco-16);
  --borda-forte: var(--branco-50);
  --acao: var(--ouro-500);
  --acao-hover: var(--ouro-300);
  --acao-profunda: var(--ouro-700);
  --acao-texto: var(--noite-900);
  --foco: var(--branco);
  --realce: var(--ouro-500);
  --realce-discreto: var(--ouro-700);
  --atencao-fundo: var(--ocre-900);
  --atencao-borda: var(--ocre-500);
  --atencao-texto: var(--ocre-200);
  --fonte-titulo: "Source Serif 4 Variable", Georgia, serif;
  --fonte-texto: "Inter Variable", system-ui, sans-serif;
  --passo--2: 0.8125rem;
  --passo--1: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --passo-0: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --passo-1: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
  --passo-2: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --passo-3: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
  --passo-4: clamp(2.75rem, 2rem + 4.6vw, 6rem);
  --altura-display: 1.06;
  --altura-titulo: 1.12;
  --altura-compacta: 1.35;
  --altura-corpo: 1.62;
  --trilha-display: -0.022em;
  --trilha-titulo: -0.012em;
  --trilha-sobrancelha: 0.14em;
  --largura-texto: 64ch;
  --largura-texto-largo: 76ch;
  --largura: 76rem;
  --espaco-0: 0.25rem;
  --espaco-1: 0.5rem;
  --espaco-2: 1rem;
  --espaco-3: 1.5rem;
  --espaco-4: 2.5rem;
  --espaco-5: 4rem;
  --espaco-6: clamp(4rem, 3rem + 5vw, 8rem);
  --espaco-7: clamp(6rem, 4rem + 8vw, 12rem);
  --alvo-toque: 48px;
  --camada-cabecalho: 20;
  --camada-pular: 30;
  --recuo-rolagem: 17rem;
  --duracao: 240ms;
  --duracao-rapida: 120ms;
  --duracao-lenta: 600ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);
  --raio: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-padding-block-start: var(--recuo-rolagem);
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--passo-0);
  line-height: var(--altura-corpo);
  text-wrap: pretty;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: var(--altura-titulo);
  letter-spacing: var(--trilha-titulo);
  text-wrap: balance;
}

h1 { font-size: var(--passo-3); }
h2 { font-size: var(--passo-2); }
h3 { font-size: var(--passo-1); }

.display {
  font-size: var(--passo-4);
  font-weight: 380;
  line-height: var(--altura-display);
  letter-spacing: var(--trilha-display);
}

h1 em,
h2 em,
.display em {
  font-style: italic;
  font-weight: inherit;
  color: var(--realce);
}

a {
  color: var(--acao);
  text-underline-offset: 0.2em;
}

a:hover { color: var(--acao-hover); }

/*
 * Retrato recortado do sócio: halo atrás do terno escuro e máscara que
 * dissolve a base preta no chão da página. Três tamanhos, iguais ao original.
 */
[data-retrato] {
  margin: 0;
  position: relative;
  isolation: isolate;
  justify-self: center;
}
[data-retrato]::before {
  content: "";
  position: absolute;
  inset: 8% -10% 10%;
  z-index: -1;
  background: radial-gradient(closest-side at 50% 42%, var(--superficie-realce), transparent);
  pointer-events: none;
}
[data-retrato] img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  height: auto;
  mask-image: linear-gradient(to bottom, #000 68%, transparent 96%);
}
[data-retrato][data-variante="faixa"] { max-inline-size: 22rem; }
[data-retrato][data-variante="cabecalho"] { max-inline-size: 20rem; }
[data-retrato][data-variante="miniatura"] { max-inline-size: 8rem; }

:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.pular-para-conteudo {
  position: absolute;
  inset-inline-start: var(--espaco-2);
  inset-block-start: var(--espaco-2);
  z-index: var(--camada-pular);
  transform: translateY(-150%);
  background: var(--acao);
  color: var(--acao-texto);
  padding: var(--espaco-1) var(--espaco-2);
  text-decoration: none;
}

.pular-para-conteudo:focus { transform: none; }

[data-superficie="papel"] {
  background: linear-gradient(to bottom, var(--superficie) 0%, var(--superficie-papel) 30%, var(--superficie) 100%);
}

[data-superficie="inversa"] {
  background: var(--superficie-inversa);
  --texto: var(--texto-inverso);
  --texto-secundario: var(--texto-inverso-secundario);
  --texto-terciario: var(--branco-58-faixa);
  --borda: var(--branco-50-faixa);
  --borda-sutil: var(--branco-40-faixa);
  --realce-discreto: var(--ouro-500);
  color: var(--texto);
}

.hsmc-main { display: block; }

.hsmc-prosa,
.wp-block-heading,
.wp-block-paragraph,
.wp-block-list {
  max-width: var(--largura-texto);
}

.hsmc-envoltorio {
  width: min(var(--largura), calc(100% - 2 * var(--espaco-3)));
  margin-inline: auto;
}

.hsmc-prosa > * + *,
.hsmc-capa + .hsmc-prosa > * + * {
  margin-block-start: var(--espaco-3);
}

.wp-block-list { padding-inline-start: 1.2em; }

[data-cabecalho] {
  position: sticky;
  top: 0;
  z-index: var(--camada-cabecalho);
  background: var(--superficie);
  border-block-end: 1px solid var(--borda-sutil);
}

[data-barra-contato] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  min-height: 2.75rem;
  padding: 0.35rem var(--espaco-3);
  font-size: var(--passo--2);
}

[data-barra-contato] p { margin: 0; }

[data-acoes] {
  display: flex;
  gap: var(--espaco-2);
}

[data-acoes] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alvo-toque);
  min-height: var(--alvo-toque);
  color: var(--acao);
}
[data-acoes] a:hover { color: var(--acao-hover); }

[data-acoes] a[data-pendente] {
  background: var(--atencao-fundo);
  color: var(--atencao-texto);
}

[data-barra-navegacao] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  max-width: var(--largura);
  margin-inline: auto;
  padding: var(--espaco-2) var(--espaco-3);
}

[data-marca] {
  display: flex;
  align-items: center;
  min-height: var(--alvo-toque);
  text-decoration: none;
}

[data-logotipo] {
  display: block;
  filter: brightness(0) invert(1);
  height: auto;
  max-width: 100%;
}
[data-logotipo="horizontal"] { width: clamp(7.5rem, 38vw, 9.25rem); }
[data-logotipo="empilhado"] { width: 4.5rem; }

[data-menu] > summary {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  min-height: var(--alvo-toque);
  padding-inline: var(--espaco-2);
  cursor: pointer;
  list-style: none;
  font-size: var(--passo--1);
  font-weight: 600;
  letter-spacing: var(--trilha-sobrancelha);
  text-transform: uppercase;
}

[data-menu] > summary::-webkit-details-marker { display: none; }

[data-tracos] {
  position: relative;
  width: 1.25rem;
  height: 2px;
  background: var(--texto);
}

[data-tracos]::before,
[data-tracos]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: var(--texto);
}

[data-tracos]::before { top: -6px; }
[data-tracos]::after { top: 6px; }

[data-menu] nav ul {
  list-style: none;
  margin: 0;
  padding: var(--espaco-2) 0 var(--espaco-3);
  display: grid;
  gap: var(--espaco-0);
}

[data-menu] nav a {
  display: flex;
  align-items: center;
  min-height: var(--alvo-toque);
  color: var(--texto);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--borda-sutil);
}

@media (min-width: 60rem) {
  [data-menu] > summary { display: none; }
  [data-menu] > nav { display: block; }
  [data-menu]::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  [data-menu] nav ul {
    display: flex;
    gap: var(--espaco-4);
    padding: 0;
  }
  [data-menu] nav a {
    border-bottom: 0;
    min-height: auto;
  }
}

[data-rodape] { padding-block: var(--espaco-6) var(--espaco-4); }

[data-colunas] {
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--espaco-3);
  display: grid;
  gap: var(--espaco-5);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

[data-coluna-marca] { display: grid; gap: var(--espaco-2); align-content: start; }
[data-coluna-marca] p { color: var(--texto-secundario); }

[data-rodape] h2 {
  font-family: var(--fonte-texto);
  font-size: var(--passo--1);
  font-weight: 600;
  letter-spacing: var(--trilha-sobrancelha);
  text-transform: uppercase;
  color: var(--texto-secundario);
  margin-bottom: var(--espaco-2);
}

[data-rodape] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espaco-1);
}

[data-rodape] a { color: var(--texto); text-decoration: none; }
[data-rodape] a:hover { text-decoration: underline; }

[data-legal] {
  max-width: var(--largura);
  margin: var(--espaco-5) auto 0;
  padding: var(--espaco-3) var(--espaco-3) 0;
  border-top: 1px solid var(--borda);
  font-size: var(--passo--1);
  color: var(--texto-secundario);
}

[data-cookies] {
  position: sticky;
  bottom: 0;
  z-index: var(--camada-cabecalho);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-2) var(--espaco-3);
  background: var(--noite-800);
  border-top: 1px solid var(--borda);
}

[data-cookies][hidden] { display: none; }

[data-cookies] p { margin: 0; max-width: 70ch; color: var(--texto-secundario); font-size: var(--passo--1); }

[data-cookies] button {
  min-height: var(--alvo-toque);
  padding: 0 var(--espaco-3);
  border: 1px solid var(--borda-forte);
  background: transparent;
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}

[data-cookies] button[data-aceitar] {
  background: var(--acao);
  color: var(--acao-texto);
  border-color: transparent;
}

.hsmc-busca,
.hsmc-arquivo {
  width: min(var(--largura), calc(100% - 2 * var(--espaco-3)));
  margin: var(--espaco-6) auto;
  display: grid;
  gap: var(--espaco-3);
}

.hsmc-busca form,
.hsmc-formulario {
  display: grid;
  gap: var(--espaco-2);
  max-width: var(--largura-texto);
}

.hsmc-formulario label { display: grid; gap: var(--espaco-1); font-weight: 600; }

.hsmc-formulario input,
.hsmc-formulario textarea,
.hsmc-busca input[type="search"] {
  min-height: var(--alvo-toque);
  padding: var(--espaco-1) var(--espaco-2);
  border: 1px solid var(--borda);
  background: var(--superficie-realce);
  color: var(--texto);
  font: inherit;
}

.hsmc-armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hsmc-aviso { font-size: var(--passo--1); color: var(--texto-secundario); }

.hsmc-botao,
.hsmc-formulario button,
.hsmc-busca button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-toque);
  padding: 0.7rem 1.4rem;
  background: var(--acao);
  color: var(--acao-texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  width: fit-content;
}

.hsmc-botao:hover,
.hsmc-formulario button:hover {
  background: var(--acao-hover);
  color: var(--acao-texto);
}

.hsmc-erro {
  padding: var(--espaco-2);
  background: var(--atencao-fundo);
  color: var(--atencao-texto);
  border: 1px solid var(--atencao-borda);
}

/*
 * Grade portada da aplicação publicada. Fica em `@layer grade` pelo mesmo
 * motivo de lá: qualquer bloco que precise escapar da faixa padrão (a capa do
 * hero, que posiciona em absoluto e precisa do padding box da seção) declara
 * `grid-column: auto` sem camada e vence, independentemente da ordem em que o
 * WordPress imprime o CSS do bloco.
 */
@layer grade {
  .envoltorio {
    display: grid;
    grid-template-columns:
      [borda-inicio] minmax(var(--espaco-3), 1fr)
      [larga-inicio] repeat(12, minmax(0, 4.95rem))
      [larga-fim] minmax(var(--espaco-3), 1fr) [borda-fim];
    column-gap: var(--espaco-3);
    row-gap: var(--espaco-4);
  }

  .envoltorio > * { grid-column: larga-inicio 1 / span 8; }
  .faixa-texto { grid-column: larga-inicio 1 / span 8; }
  .faixa-media { grid-column: larga-inicio 1 / span 10; }
  .faixa-larga { grid-column: larga-inicio / larga-fim; }
  .faixa-total { grid-column: borda-inicio / borda-fim; }
  .faixa-aparte { grid-column: span 4 / larga-fim; }
  .faixa-centro { align-self: center; }
  .secao { padding-block: var(--espaco-6); }
  .secao-larga { padding-block: var(--espaco-7); }

  @media (max-width: 60rem) {
    .envoltorio > *,
    .faixa-texto,
    .faixa-media,
    .faixa-larga,
    .faixa-aparte { grid-column: larga-inicio / larga-fim; }
  }
}

.hsmc-sobrancelha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-block-end: var(--espaco-3);
  color: var(--realce-discreto);
  font-size: var(--passo--1);
  font-weight: 600;
  letter-spacing: var(--trilha-sobrancelha);
  text-transform: uppercase;
}

.hsmc-sobrancelha::before {
  content: "";
  inline-size: 2rem;
  block-size: 1px;
  flex: none;
  background: currentColor;
}

[data-brilho] {
  --brilho: -1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

[data-brilho]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 45%) 50%, transparent 64%);
  transform: translateX(calc(var(--brilho) * 100%));
  transition: transform 900ms var(--curva);
}

[data-brilho]:hover { --brilho: 1; }

/* Cabeçalho: mesmas dimensões e comportamento da versão publicada. */
[data-barra-contato] {
  justify-content: center;
  gap: 0 var(--espaco-1);
  min-height: 0;
  padding: 2px var(--espaco-1);
  line-height: 1.35;
}

[data-barra-contato] p {
  flex-basis: 100%;
  text-align: center;
}

[data-acoes] { align-items: center; gap: var(--espaco-1); }

[data-barra-contato] [data-acoes] a {
  min-block-size: var(--alvo-toque);
  min-inline-size: 44px;
}

[data-barra-navegacao] { min-height: 80px; }
[data-menu] nav a:hover { color: var(--acao); }

@media (min-width: 48rem) {
  [data-barra-contato] { flex-wrap: nowrap; gap: var(--espaco-2); }
  [data-barra-contato] p { flex-basis: auto; }
  [data-barra-contato] [data-acoes] {
    gap: var(--espaco-0);
    padding-inline-start: var(--espaco-1);
    border-inline-start: 1px solid var(--borda-sutil);
  }
  [data-barra-contato] [data-acoes] a {
    min-block-size: 0;
    min-inline-size: 0;
    padding-inline: var(--espaco-0);
  }
  [data-barra-contato] svg { width: 14px; height: 14px; }
}

@media (min-width: 60rem) {
  [data-logotipo="horizontal"] { width: 13.5rem; }
}

/* Painel de consentimento da aplicação de referência. */
[data-cookies] {
  position: fixed;
  inset-inline-end: max(var(--espaco-3), env(safe-area-inset-right));
  inset-block-end: max(var(--espaco-3), env(safe-area-inset-bottom));
  z-index: var(--camada-cabecalho);
  inline-size: min(25rem, calc(100vw - 2 * var(--espaco-3)));
  max-block-size: calc(100dvh - 2 * var(--espaco-3));
  overflow-y: auto;
  display: block;
  padding: var(--espaco-3);
  border: 1px solid var(--borda-forte);
  border-block-start: 2px solid var(--realce);
  background: var(--superficie-papel);
  box-shadow: 0 8px 32px rgb(0 0 0 / 24%);
}

[data-cookies][hidden] { display: none; }
[data-cookies] h2 { margin: 0 0 var(--espaco-1); font-size: var(--passo-1); }
[data-cookies] p {
  margin: 0 0 var(--espaco-1);
  color: var(--texto-secundario);
  font-size: var(--passo--1);
  line-height: 1.5;
}
[data-cookies] > a { display: inline-block; padding-block: var(--espaco-1); color: var(--texto); font-size: var(--passo--1); }
[data-cookies-acoes] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-1); margin-block-start: var(--espaco-2); }
[data-cookies] button {
  min-height: var(--alvo-toque);
  padding: var(--espaco-1);
  border: 1px solid var(--borda-forte);
  background: var(--superficie-papel);
  color: var(--texto);
  font: 500 var(--passo--1) / var(--altura-compacta) var(--fonte-texto);
}
[data-cookies] button:hover { background: var(--superficie-realce); }

@media (max-width: 380px) {
  [data-cookies] {
    inset-inline-end: var(--espaco-2);
    inset-block-end: var(--espaco-2);
    inline-size: calc(100vw - 2 * var(--espaco-2));
    padding: var(--espaco-2);
  }
  [data-cookies-acoes] { grid-template-columns: 1fr; }
}

@view-transition { navigation: auto; }

@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;
  }
  @view-transition { navigation: none; }
}