/* Base — só atua em páginas com body.fbs-ds e dentro dos componentes fbs-.
   :where() mantém especificidade 0 para os componentes ganharem sempre. */
body.fbs-ds {
  background: var(--fbs-bg);
  color: var(--fbs-ink);
  font-family: var(--fbs-body);
  -webkit-font-smoothing: antialiased;
}
:where(.fbs-hero, .fbs-section, .fbs-band) {
  box-sizing: border-box;
  font-family: var(--fbs-body);
  color: var(--fbs-ink);
}
:where(.fbs-hero, .fbs-section, .fbs-band) *,
:where(.fbs-hero, .fbs-section, .fbs-band) *::before,
:where(.fbs-hero, .fbs-section, .fbs-band) *::after {
  box-sizing: inherit;
}
:where(.fbs-hero, .fbs-section, .fbs-band) :where(h1, h2, h3, h4, p, figure, ul, ol) {
  margin: 0;
}
:where(.fbs-hero, .fbs-section, .fbs-band) :where(a) {
  color: inherit;
  text-decoration: none;
}
:where(.fbs-hero, .fbs-section, .fbs-band) :where(a:hover) {
  color: var(--fbs-accent);
}
:where(.fbs-hero, .fbs-section, .fbs-band) :where(img) {
  display: block;
  max-width: 100%;
}

/* Tema sem theme.json: o WordPress embrulha o conteúdo de cada Grupo num
   .wp-block-group__inner-container (no site e no editor). Dentro dos componentes FBS esse div
   fica "transparente", para as grelhas e o flex verem os blocos como filhos diretos.
   Nos seletores com ">" usar :is(.x, .x > .wp-block-group__inner-container) > … */
[class*='fbs-'] > .wp-block-group__inner-container {
  display: contents;
}

/* Gutenberg: anula o espaçamento automático entre blocos dentro dos componentes */
:where(.fbs-hero, .fbs-section, .fbs-band) :where(.is-layout-flow, .is-layout-constrained) > * {
  margin-block: 0;
}

/* Tipografia */
.fbs-h1 {
  font: 400 var(--fbs-h1)/0.98 var(--fbs-display);
  text-transform: uppercase;
  letter-spacing: 0;
  text-wrap: balance;
}
.fbs-h1--long {
  font-size: var(--fbs-h1-long);
  line-height: 1;
}
.fbs-h2 {
  font: 400 var(--fbs-h2)/1.1 var(--fbs-display);
  text-transform: uppercase;
  letter-spacing: 0;
  text-wrap: balance;
  margin-bottom: var(--fbs-h2-mb);
}
.fbs-h2--tight {
  margin-bottom: 12px;
}
.fbs-h3 {
  font: 400 var(--fbs-h3)/1.1 var(--fbs-display);
  text-transform: uppercase;
}
.fbs-eyebrow {
  font: 400 13px/1.3 var(--fbs-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fbs-accent);
  margin-bottom: 12px;
}
.fbs-kicker {
  font: 600 10px/1.3 var(--fbs-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fbs-accent);
}
.fbs-lead {
  font: 400 var(--fbs-lead)/1.6 var(--fbs-body);
  color: var(--fbs-muted);
  max-width: 420px;
  text-wrap: pretty;
}
.fbs-text {
  font: 400 14.5px/1.6 var(--fbs-body);
  color: var(--fbs-muted);
  max-width: 480px;
  text-wrap: pretty;
}
.fbs-note {
  font: 400 12.5px/1.6 var(--fbs-body);
  color: var(--fbs-muted-2);
}