/* ============================================================
   Mirante Cultural - Estilos do tema
   Tudo aqui deriva de assets/css/tokens.css. Nao use valores
   de cor ou tamanho diretos: use as variaveis --mc-*.
   ============================================================ */

/* ---------- 1. Base tipografica ---------------------------- */

body {
  font-family: var(--mc-font-body);
  font-size: var(--mc-fs-base);
  line-height: var(--mc-lh-base);
  color: var(--mc-text);
}

h1, h2 {
  font-family: var(--mc-font-heading);
  font-weight: var(--mc-fw-bold);
  line-height: var(--mc-lh-tight);
}

h3, h4, h5, h6 {
  font-family: var(--mc-font-body);
  font-weight: var(--mc-fw-bold);
  line-height: var(--mc-lh-tight);
}

h1 { font-size: var(--mc-fs-3xl); }
h2 { font-size: var(--mc-fs-2xl); }
h3 { font-size: var(--mc-fs-xl); }
h4 { font-size: var(--mc-fs-lg); }

a {
  color: var(--mc-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--mc-link-hover);
}

/* Foco sempre visivel: requisito de acessibilidade. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--mc-cyan);
  outline-offset: 2px;
}

/* ---------- 2. Secoes de cor ------------------------------- */
/* Aplique estas classes em blocos Grupo do Gutenberg.
   Exemplo: bloco Grupo > Avancado > Classes CSS adicionais
   > digitar: mc-section mc-section--yellow             */

.mc-section {
  padding-block: var(--mc-space-7);
  padding-inline: var(--mc-space-3);
}

.mc-section--navy {
  background-color: var(--mc-navy);
  color: var(--mc-text-invert);
}

.mc-section--yellow {
  background-color: var(--mc-yellow);
  color: var(--mc-text);
}

.mc-section--yellow-alt {
  background-color: var(--mc-yellow-alt);
  color: var(--mc-text);
}

.mc-section--green {
  background-color: var(--mc-green);
  color: var(--mc-text-invert);
}

.mc-section--gray {
  background-color: var(--mc-bg-alt);
}

/* Em fundo escuro, titulos e links herdam o contraste correto. */
.mc-section--navy :is(h1, h2, h3, h4, h5, h6),
.mc-section--green :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

.mc-section--navy a:not(.mc-btn),
.mc-section--green a:not(.mc-btn) {
  color: var(--mc-text-invert);
  text-decoration: underline;
}

/* ---------- 3. Container ----------------------------------- */

.mc-container {
  max-width: var(--mc-container);
  margin-inline: auto;
  width: 100%;
}

/* ---------- 4. Botoes -------------------------------------- */
/* Use em blocos Botao: Avancado > Classes CSS adicionais */

.mc-btn {
  display: inline-block;
  font-family: var(--mc-font-body);
  font-size: var(--mc-fs-sm);
  font-weight: var(--mc-fw-bold);
  letter-spacing: var(--mc-ls-wide);
  padding: var(--mc-space-2) var(--mc-space-4);
  border-radius: var(--mc-radius-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mc-btn--navy {
  background-color: var(--mc-navy);
  color: var(--mc-text-invert);
}

.mc-btn--navy:hover,
.mc-btn--navy:focus-visible {
  background-color: var(--mc-navy-dark);
  color: var(--mc-text-invert);
}

.mc-btn--green {
  background-color: var(--mc-green);
  color: var(--mc-text-invert);
}

.mc-btn--green:hover,
.mc-btn--green:focus-visible {
  background-color: var(--mc-green-dark);
  color: var(--mc-text-invert);
}

.mc-btn--outline {
  background-color: transparent;
  border-color: var(--mc-navy);
  color: var(--mc-navy);
}

.mc-btn--outline:hover,
.mc-btn--outline:focus-visible {
  background-color: var(--mc-navy);
  color: var(--mc-text-invert);
}

/* ---------- 5. Card de projeto ----------------------------- */
/* Usado na grade da pagina Projetos e nos cards do Blog. */

.mc-card {
  background-color: var(--mc-white);
  border-radius: var(--mc-radius-sm);
  box-shadow: var(--mc-shadow-card);
  overflow: hidden;
  height: 100%;
}

.mc-card img {
  width: 100%;
  height: auto;
  display: block;
}

.mc-card__body {
  padding: var(--mc-space-3);
}

.mc-card__title {
  font-size: var(--mc-fs-lg);
  margin-block: 0 var(--mc-space-1);
}

.mc-card__text {
  font-size: var(--mc-fs-sm);
  color: var(--mc-text-muted);
  margin: 0;
}

/* ---------- 6. Bloco de estatistica (secao Impacto) -------- */

.mc-stat {
  background-color: var(--mc-green);
  color: var(--mc-text-invert);
  border-radius: var(--mc-radius-sm);
  padding: var(--mc-space-2) var(--mc-space-3);
  margin-block-end: var(--mc-space-2);
}

.mc-stat__number {
  font-family: var(--mc-font-heading);
  font-size: var(--mc-fs-2xl);
  font-weight: var(--mc-fw-bold);
  line-height: var(--mc-lh-tight);
  display: block;
}

.mc-stat__label {
  font-size: var(--mc-fs-sm);
  display: block;
}

/* ---------- 7. Eyebrow (rotulo acima do titulo) ------------ */

.mc-eyebrow {
  font-size: var(--mc-fs-sm);
  font-weight: var(--mc-fw-bold);
  letter-spacing: var(--mc-ls-wide);
  text-transform: uppercase;
  color: var(--mc-text-muted);
  margin-block-end: var(--mc-space-1);
  display: block;
}

/* ---------- 8. Acessibilidade ------------------------------ */

/* Respeita quem pediu menos animacao no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Texto visivel so para leitores de tela. */
.mc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 9. Correcoes ----------------------------------- */

/* O tema pai aplica capitalize global. Texto deve manter a
   grafia original: capitalize quebra siglas, nomes e leitura. */
body,
.wp-block-heading,
p, h1, h2, h3, h4, h5, h6, li, cite, blockquote {
  text-transform: none;
}

/* Classes de cor da paleta registrada em functions.php.
   Temas classicos nao geram este CSS automaticamente. */
.has-mc-navy-color { color: var(--mc-navy) !important; }
.has-mc-green-color { color: var(--mc-green) !important; }
.has-mc-cyan-color { color: var(--mc-cyan) !important; }
.has-mc-yellow-color { color: var(--mc-yellow) !important; }
.has-mc-yellow-alt-color { color: var(--mc-yellow-alt) !important; }
.has-mc-gray-100-color { color: var(--mc-gray-100) !important; }
.has-mc-text-color { color: var(--mc-text) !important; }
.has-mc-white-color { color: var(--mc-white) !important; }

.has-mc-navy-background-color { background-color: var(--mc-navy) !important; }
.has-mc-green-background-color { background-color: var(--mc-green) !important; }
.has-mc-cyan-background-color { background-color: var(--mc-cyan) !important; }
.has-mc-yellow-background-color { background-color: var(--mc-yellow) !important; }
.has-mc-yellow-alt-background-color { background-color: var(--mc-yellow-alt) !important; }
.has-mc-gray-100-background-color { background-color: var(--mc-gray-100) !important; }
.has-mc-text-background-color { background-color: var(--mc-text) !important; }
.has-mc-white-background-color { background-color: var(--mc-white) !important; }

/* Tamanhos de fonte da escala registrada. */
.has-mc-sm-font-size { font-size: var(--mc-fs-sm) !important; }
.has-mc-base-font-size { font-size: var(--mc-fs-base) !important; }
.has-mc-md-font-size { font-size: var(--mc-fs-md) !important; }
.has-mc-xl-font-size { font-size: var(--mc-fs-xl) !important; }
.has-mc-2xl-font-size { font-size: var(--mc-fs-2xl) !important; }
.has-mc-3xl-font-size { font-size: var(--mc-fs-3xl) !important; }

/* Colunas com fundo colorido precisam respirar. */
.wp-block-column.mc-section {
  padding: var(--mc-space-5);
}
/* ===== MC :: ESPAÇAMENTO E HERO :: v1 :: INÍCIO ===== */

:root {
  --mc-space-section: clamp(2.5rem, 6vw, 5rem);
  --mc-space-gutter: clamp(1.5rem, 4vw, 3rem);
  --mc-space-stack: 0.75rem;
}

.mc-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
  padding-block: var(--mc-space-section);
  padding-inline: var(--mc-space-gutter);
  background-color: var(--mc-navy);
}

.mc-hero :is(h1, h2, p) {
  color: #fff;
}

.mc-section {
  padding-block: var(--mc-space-section);
  padding-inline: var(--mc-space-gutter);
}

.wp-block-columns {
  gap: var(--mc-space-gutter);
}

.mc-split {
  gap: 0;
}

.mc-split > .wp-block-column > .wp-block-image:only-child {
  height: 100%;
  margin-block: 0;
}

.mc-split > .wp-block-column > .wp-block-image:only-child img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-stat {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 0.5rem;
}

.mc-stat > * + * {
  margin-block-start: var(--mc-space-stack);
}

.mc-stat__number {
  margin-block: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
}

.mc-stat__label {
  margin-block: 0;
}

@media (max-width: 781px) {
  .mc-split {
    gap: var(--mc-space-gutter);
  }

  .mc-split > .wp-block-column > .wp-block-image:only-child,
  .mc-split > .wp-block-column > .wp-block-image:only-child img {
    height: auto;
  }

  .wp-block-column .has-text-align-right {
    text-align: left;
  }
}
/* Grades de conteúdo: imagens com proporção uniforme */
.mc-section .wp-block-columns .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.25rem;
}
/* ===== MC :: ESPAÇAMENTO E HERO :: v1 :: FIM ===== */