/**
 * Bella Flor — Base
 * ---------------------------------------------------------------------------
 * Reset moderno, tipografia da marca, elementos de formulário e utilitários.
 * Nenhum componente aqui: apenas o comportamento padrão dos elementos HTML.
 */

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Âncoras não param embaixo do header fixo. */
  scroll-padding-top: calc(var(--bf-header-h) + var(--bf-space-4));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--bf-bg);
  color: var(--bf-text);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-regular);
  line-height: var(--bf-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Trava o scroll do fundo quando um drawer/modal está aberto. */
body.bf-scroll-locked {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

/*
 * `:where()` zera a especificidade do seletor. Sem ele, `ul[class]` (0,1,1)
 * vence qualquer regra de componente escrita com uma classe (0,1,0) e apaga
 * silenciosamente as margens que o próprio componente declara.
 */
:where(ul[class], ol[class]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  /* Evita o "flash" de alt text quebrado enquanto a imagem carrega. */
  color: transparent;
}

svg {
  flex-shrink: 0;
}

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--bf-line);
  margin: var(--bf-space-6) 0;
}

/* --- Tipografia ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-regular);
  line-height: var(--bf-leading-tight);
  /* Serifadas grandes pedem tracking negativo para não parecerem soltas. */
  letter-spacing: -0.015em;
  color: var(--bf-text);
  text-wrap: balance;
}

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

h5, h6 {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  letter-spacing: var(--bf-tracking-wide);
  text-transform: uppercase;
  line-height: var(--bf-leading-snug);
}

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--bf-space-4);
}

strong, b { font-weight: var(--bf-weight-semibold); }
small     { font-size: var(--bf-text-xs); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--bf-duration-fast) var(--bf-ease);
}

a:hover {
  color: var(--bf-brand-hover);
}

/*
 * Prosa — blocos de texto editorial.
 * Fica aqui (bundle global) porque é compartilhada por páginas institucionais,
 * descrição do produto, abas e topo de categoria.
 */
.bf-prose {
  font-size: var(--bf-text-md);
  line-height: var(--bf-leading-body);
  color: var(--bf-text);
}

.bf-prose > * + * {
  margin-top: var(--bf-space-4);
}

.bf-prose h2 {
  margin-top: var(--bf-space-8);
  font-size: var(--bf-text-xl);
}

.bf-prose h3 {
  margin-top: var(--bf-space-6);
  font-size: var(--bf-text-lg);
}

.bf-prose ul,
.bf-prose ol {
  padding-left: var(--bf-space-5);
}

.bf-prose li + li {
  margin-top: var(--bf-space-2);
}

.bf-prose img,
.bf-prose figure {
  border-radius: var(--bf-radius-sm);
}

.bf-prose figcaption {
  margin-top: var(--bf-space-2);
  font-size: var(--bf-text-sm);
  color: var(--bf-text-muted);
  text-align: center;
}

.bf-prose table {
  font-size: var(--bf-text-sm);
}

.bf-prose th,
.bf-prose td {
  padding: var(--bf-space-3);
  border: 1px solid var(--bf-line);
  text-align: left;
}

.bf-prose th {
  background-color: var(--bf-surface-alt);
  font-weight: var(--bf-weight-medium);
}

/* Tabelas largas rolam dentro do próprio bloco, sem estourar a página. */
.bf-prose .wp-block-table {
  overflow-x: auto;
}

/* Links dentro de texto corrido mantêm o sublinhado — acessibilidade. */
.bf-prose a,
.entry-content a {
  color: var(--bf-brand-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.bf-prose a:hover,
.entry-content a:hover {
  text-decoration-thickness: 2px;
}

blockquote {
  border-left: 2px solid var(--bf-brand-strong);
  padding-left: var(--bf-space-5);
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-lg);
  font-style: italic;
  color: var(--bf-text-muted);
}

::selection {
  background-color: var(--bf-brand-strong);
  color: var(--bf-text-inverse);
}

/* --- Foco ----------------------------------------------------------------- */

/*
 * `:focus-visible` mostra o anel apenas para navegação por teclado,
 * sem poluir o clique do mouse. Nunca removemos o indicador de foco.
 */
:focus-visible {
  outline: 2px solid var(--bf-brand-strong);
  outline-offset: 3px;
  border-radius: var(--bf-radius-xs);
}

/* --- Formulários ---------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: var(--bf-space-3) var(--bf-space-4);
  background-color: var(--bf-surface);
  border: 1px solid var(--bf-line-strong);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-text-base);
  color: var(--bf-text);
  transition:
    border-color var(--bf-duration-fast) var(--bf-ease),
    box-shadow var(--bf-duration-fast) var(--bf-ease);
  /* 16px no iOS impede o zoom automático ao focar o campo. */
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 768px) {
  input, textarea, select {
    font-size: 1rem;
  }
}

input::placeholder,
textarea::placeholder {
  color: var(--bf-text-subtle);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--bf-brand-strong);
  box-shadow: var(--bf-shadow-focus);
}

input[aria-invalid="true"],
.bf-field--error input {
  border-color: var(--bf-danger);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--bf-space-4) center;
  padding-right: var(--bf-space-8);
}

label {
  display: inline-block;
  margin-bottom: var(--bf-space-2);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-text);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

/* --- Utilitários ---------------------------------------------------------- */

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

.bf-container--wide { max-width: var(--bf-container-wide); }
.bf-container--text { max-width: var(--bf-container-text); }
.bf-container--flush { max-width: 100%; padding-inline: 0; }

.bf-section {
  padding-block: var(--bf-section-y);
}

.bf-section--tight  { padding-block: calc(var(--bf-section-y) * 0.55); }
.bf-section--alt    { background-color: var(--bf-surface-alt); }
.bf-section--surface{ background-color: var(--bf-surface); }

/* Rótulo em caixa alta acima de títulos de seção. */
.bf-eyebrow {
  display: block;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-medium);
  letter-spacing: var(--bf-tracking-wider);
  text-transform: uppercase;
  color: var(--bf-brand-soft);
}

.bf-text-muted  { color: var(--bf-text-muted); }
.bf-text-center { text-align: center; }

/* Esconde visualmente mantendo o conteúdo para leitores de tela. */
.screen-reader-text,
.bf-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;
}

/* O link "pular para o conteúdo" reaparece ao receber foco. */
.skip-link:focus {
  position: fixed !important;
  top: var(--bf-space-3);
  left: var(--bf-space-3);
  z-index: var(--bf-z-toast);
  width: auto;
  height: auto;
  padding: var(--bf-space-3) var(--bf-space-5);
  clip: auto;
  background-color: var(--bf-brand-strong);
  color: var(--bf-text-inverse);
  border-radius: var(--bf-radius-sm);
  box-shadow: var(--bf-shadow-md);
}

.bf-hide-desktop { display: none; }

@media (max-width: 1024px) {
  .bf-hide-mobile  { display: none !important; }
  .bf-hide-desktop { display: revert; }
}