/* ==========================================================================
   Rei do Celular — base.css
   v1.7.0 · Etapa 2 do rebrand
   --------------------------------------------------------------------------
   Aplicação dos tokens do Design System na fundação visual do tema:
   - Tipografia global (Cormorant nos títulos, Inter no corpo)
   - Cores via tokens canônicos (--rdc-*)
   - Botões, inputs, links, paginação alinhados com o DS
   - Camada de compatibilidade: aliases --fm-* apontam para tokens novos,
     preservando layout.css e demais CSS modulares sem quebra.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CAMADA DE COMPATIBILIDADE — aliases legados apontando para tokens novos
   Esses aliases serão removidos quando todos os arquivos CSS forem migrados.
   -------------------------------------------------------------------------- */
:root {
  /* Cores legadas → tokens novos */
  --fm-background:        var(--rdc-color-creme);
  --fm-surface:           var(--rdc-color-branco);
  --fm-surface-soft:      var(--rdc-color-creme-escuro);
  --fm-surface-deep:      var(--rdc-color-creme-escuro);
  --fm-text:              var(--rdc-color-preto);
  --fm-muted:             var(--rdc-color-cinza);
  --fm-line:              var(--rdc-color-cinza-claro);
  --fm-line-strong:       var(--rdc-color-preto);
  --fm-accent:            var(--rdc-color-preto);
  --fm-accent-soft:       var(--rdc-color-preto-hover);
  --fm-accent-contrast:   var(--rdc-color-creme);
  --fm-gold:              var(--rdc-color-ambar);
  --fm-success:           var(--rdc-color-sucesso);
  --fm-sale:              var(--rdc-color-erro);

  /* Raios — DS é mais sóbrio (4 / 8px), legado usava 14 / 22 / 34px.
     Mantemos valores legados mais discretos pra evitar quebra brusca,
     mas todos puxando do sistema de raios novo. */
  --fm-radius-sm:         var(--rdc-radius-md);     /* era 14px → vira 4px */
  --fm-radius-md:         var(--rdc-radius-lg);     /* era 22px → vira 8px */
  --fm-radius-lg:         var(--rdc-radius-lg);     /* era 34px → vira 8px */

  /* Sombras — DS proíbe sombras pesadas. Reduzimos drasticamente. */
  --fm-shadow-soft:       var(--rdc-shadow-soft);
  --fm-shadow-card:       var(--rdc-shadow-soft);
  --fm-shadow-hard:       var(--rdc-shadow-modal);

  /* Containers */
  --fm-container:         min(var(--rdc-container-max), calc(100% - 40px));
  --fm-container-narrow:  min(var(--rdc-container-narrow), calc(100% - 40px));

  /* Transição padrão */
  --fm-transition:        var(--rdc-duration-normal) var(--rdc-ease);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--rdc-font-body);
  font-size: var(--rdc-fs-body);
  font-weight: var(--rdc-fw-regular);
  line-height: var(--rdc-lh-relaxed);
  color: var(--rdc-fg);
  background: var(--rdc-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--rdc-duration-fast) var(--rdc-ease),
              opacity var(--rdc-duration-fast) var(--rdc-ease);
}

a:hover {
  color: var(--rdc-color-ambar);
}

/* --------------------------------------------------------------------------
   TIPOGRAFIA — headings com Cormorant, corpo com Inter
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--rdc-space-3);
  font-family: var(--rdc-font-display);
  font-weight: var(--rdc-fw-medium);
  line-height: var(--rdc-lh-tight);
  letter-spacing: var(--rdc-ls-display);
  color: var(--rdc-fg);
}

h1 {
  font-size: var(--rdc-fs-h1);
}

h2 {
  font-size: var(--rdc-fs-h2);
}

h3 {
  font-family: var(--rdc-font-body);
  font-size: var(--rdc-fs-h3);
  font-weight: var(--rdc-fw-semibold);
  line-height: var(--rdc-lh-snug);
  letter-spacing: var(--rdc-ls-normal);
}

h4 {
  font-family: var(--rdc-font-body);
  font-size: var(--rdc-fs-h4);
  font-weight: var(--rdc-fw-semibold);
  line-height: var(--rdc-lh-snug);
  letter-spacing: var(--rdc-ls-normal);
}

h5 {
  font-family: var(--rdc-font-body);
  font-size: var(--rdc-fs-body);
  font-weight: var(--rdc-fw-semibold);
}

h6 {
  font-family: var(--rdc-font-body);
  font-size: var(--rdc-fs-body-sm);
  font-weight: var(--rdc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--rdc-ls-eyebrow);
  color: var(--rdc-fg-muted);
}

p,
ul,
ol,
dl,
blockquote {
  margin: 0 0 var(--rdc-space-4);
}

ul,
ol {
  padding-left: var(--rdc-space-5);
}

/* --------------------------------------------------------------------------
   EYEBROWS — labels caps clássicos do DS
   Usa as classes legadas (não pode quebrá-las) mas com tokens novos.
   -------------------------------------------------------------------------- */
small,
.site-header__tagline,
.page-intro__eyebrow,
.shop-hero__eyebrow,
.section-heading__eyebrow,
.home-hero__eyebrow,
.feature-card__eyebrow,
.metric-card__label,
.site-footer__eyebrow,
.content-card__meta,
.editorial-card__eyebrow,
.hero-showcase__label,
.promise-card__icon,
.fm-product-category,
.home-value-chip__icon {
  font-family: var(--rdc-font-body);
  font-size: var(--rdc-fs-eyebrow);
  font-weight: var(--rdc-fw-semibold);
  letter-spacing: var(--rdc-ls-eyebrow);
  text-transform: uppercase;
  color: var(--rdc-fg-muted);
}

/* --------------------------------------------------------------------------
   FORMULÁRIOS — inputs, selects, textareas
   DS: border 1px cinza-claro, radius 4px, foco com border preto.
   -------------------------------------------------------------------------- */
button,
input,
select,
textarea {
  font: inherit;
  font-family: var(--rdc-font-body);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--rdc-border);
  border-radius: var(--rdc-radius-md);
  background: var(--rdc-bg-input);
  padding: var(--rdc-space-3) var(--rdc-space-4);
  color: var(--rdc-fg);
  font-size: var(--rdc-fs-body);
  transition: border-color var(--rdc-duration-fast) var(--rdc-ease),
              box-shadow var(--rdc-duration-fast) var(--rdc-ease);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--rdc-border-strong);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

input::placeholder,
textarea::placeholder {
  color: var(--rdc-fg-muted);
  opacity: 1;
}

/* Anti-zoom no mobile (iOS) */
@media (max-width: 980px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.35;
  }
}

/* --------------------------------------------------------------------------
   ACESSIBILIDADE — screen reader only
   -------------------------------------------------------------------------- */
.screen-reader-text {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  width: auto;
  height: auto;
  background: var(--rdc-bg-input);
  color: var(--rdc-fg);
  z-index: 99999;
  top: var(--rdc-space-4);
  left: var(--rdc-space-4);
  padding: var(--rdc-space-2) var(--rdc-space-4);
  border-radius: var(--rdc-radius-md);
}

/* --------------------------------------------------------------------------
   CONTAINERS LEGADOS (.fm-container)
   -------------------------------------------------------------------------- */
.fm-container {
  width: var(--fm-container);
  margin-inline: auto;
}

.fm-container--narrow {
  width: var(--fm-container-narrow);
  margin-inline: auto;
}

.fm-stack-lg > * + * {
  margin-top: var(--rdc-space-8);
}

/* --------------------------------------------------------------------------
   PAINÉIS DE CONTEÚDO — cards de conteúdo (página, post)
   DS: sem backdrop-filter, sem sombras pesadas, raio menor.
   -------------------------------------------------------------------------- */
.content-panel,
.comments-panel,
.empty-state {
  background: var(--rdc-bg-input);
  border: 1px solid var(--rdc-border);
  border-radius: var(--rdc-radius-lg);
  box-shadow: none;
}

.content-panel {
  padding: var(--rdc-space-6);
}

.content-panel--single {
  max-width: var(--fm-container-narrow);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .content-panel {
    padding: var(--rdc-space-8);
  }
}

/* --------------------------------------------------------------------------
   ENTRY (post/página) — conteúdo formatado
   -------------------------------------------------------------------------- */
.entry-content > * + * {
  margin-top: var(--rdc-space-4);
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--rdc-space-5);
}

.entry-media {
  margin-bottom: var(--rdc-space-6);
  overflow: hidden;
  border-radius: var(--rdc-radius-lg);
}

.entry-meta {
  display: inline-flex;
  gap: var(--rdc-space-3);
  align-items: center;
  color: var(--rdc-fg-muted);
  font-size: var(--rdc-fs-body-sm);
  margin-bottom: var(--rdc-space-5);
}

/* --------------------------------------------------------------------------
   BOTÕES — DS: preto sólido, radius 4px, sem sombra dramática
   Cobre WP block button, botões nativos, .button, Woo, .fm-button
   -------------------------------------------------------------------------- */
.wp-block-button__link,
button,
.button,
.wp-element-button,
.fm-button,
input[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rdc-space-2);
  min-height: 48px;
  padding: var(--rdc-space-4) var(--rdc-space-8);
  border: 1px solid var(--rdc-color-preto);
  border-radius: var(--rdc-radius-md);
  background: var(--rdc-color-preto);
  color: var(--rdc-color-creme);
  font-family: var(--rdc-font-body);
  font-size: 15px;
  font-weight: var(--rdc-fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--rdc-duration-fast) var(--rdc-ease),
              border-color var(--rdc-duration-fast) var(--rdc-ease),
              color var(--rdc-duration-fast) var(--rdc-ease),
              opacity var(--rdc-duration-fast) var(--rdc-ease);
}

.wp-block-button__link:hover,
button:hover,
.button:hover,
.wp-element-button:hover,
.fm-button:hover,
input[type='submit']:hover {
  background: var(--rdc-color-preto-hover);
  border-color: var(--rdc-color-preto-hover);
  color: var(--rdc-color-creme);
  box-shadow: none;
  transform: none;
}

button:disabled,
.button:disabled,
.fm-button:disabled,
input[type='submit']:disabled {
  background: var(--rdc-color-cinza-claro);
  border-color: var(--rdc-color-cinza-claro);
  color: var(--rdc-color-cinza);
  cursor: not-allowed;
  opacity: 1;
}

/* Botão fantasma / secundário */
.fm-button--ghost,
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: transparent !important;
  color: var(--rdc-fg) !important;
  border-color: var(--rdc-color-preto) !important;
  box-shadow: none !important;
}

.fm-button--ghost:hover,
.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--rdc-color-preto) !important;
  color: var(--rdc-color-creme) !important;
  border-color: var(--rdc-color-preto) !important;
}

/* --------------------------------------------------------------------------
   TABELAS
   -------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* --------------------------------------------------------------------------
   BLOCKQUOTE
   -------------------------------------------------------------------------- */
blockquote {
  padding: var(--rdc-space-5) var(--rdc-space-6);
  border-left: 3px solid var(--rdc-color-ambar);
  background: var(--rdc-bg-elevated);
  border-radius: 0 var(--rdc-radius-lg) var(--rdc-radius-lg) 0;
  font-family: var(--rdc-font-display);
  font-style: italic;
  font-size: var(--rdc-fs-h4);
  color: var(--rdc-fg);
}

/* --------------------------------------------------------------------------
   SITE MAIN — wrapper principal de conteúdo
   -------------------------------------------------------------------------- */
.site-main {
  padding: 0 0 var(--rdc-space-16);
}

.site-main--home {
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   FULLSCREEN da conta WAOTP — mantém compatibilidade
   -------------------------------------------------------------------------- */
body.rc-waotp-account-fullscreen #page,
body.rc-waotp-account-fullscreen .site-main,
body.rc-waotp-account-fullscreen .fm-container,
body.rc-waotp-account-fullscreen .fm-container--narrow,
body.rc-waotp-account-fullscreen .fm-stack-lg,
body.rc-waotp-account-fullscreen .content-panel,
body.rc-waotp-account-fullscreen .content-panel--page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.rc-waotp-account-fullscreen .page-intro {
  display: none !important;
}

/* --------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: var(--rdc-space-12);
}

.empty-state h3,
.empty-state h2 {
  margin-bottom: var(--rdc-space-2);
}

.empty-state p {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--rdc-fg-muted);
}

/* --------------------------------------------------------------------------
   PAGINAÇÃO
   -------------------------------------------------------------------------- */
.pagination,
.nav-links,
.woocommerce-pagination {
  display: flex;
  justify-content: center;
  gap: var(--rdc-space-2);
  margin-top: var(--rdc-space-8);
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--rdc-space-3);
  border-radius: var(--rdc-radius-md);
  border: 1px solid var(--rdc-border);
  background: var(--rdc-bg-input);
  color: var(--rdc-fg);
  font-family: var(--rdc-font-body);
  font-weight: var(--rdc-fw-medium);
  text-decoration: none;
  transition: border-color var(--rdc-duration-fast) var(--rdc-ease),
              background var(--rdc-duration-fast) var(--rdc-ease);
}

.page-numbers:hover {
  border-color: var(--rdc-color-preto);
}

.page-numbers.current {
  background: var(--rdc-color-preto);
  border-color: var(--rdc-color-preto);
  color: var(--rdc-color-creme);
}

/* --------------------------------------------------------------------------
   RESPONSIVO — ajustes mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --fm-container:        calc(100% - 32px);
    --fm-container-narrow: calc(100% - 32px);
  }

  .site-main {
    padding-bottom: var(--rdc-space-12);
  }

  .fm-stack-lg > * + * {
    margin-top: var(--rdc-space-6);
  }
}