/* Retorno do formulário de contato, servido pela Pages Function. */
.debony-form-message {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.4;
}

.debony-form-message[data-status='sending'] {
  background: #eef2f7;
  color: #33415c;
}

.debony-form-message[data-status='success'] {
  background: #e6f4ea;
  color: #1e4620;
}

.debony-form-message[data-status='error'] {
  background: #fdecea;
  color: #611a15;
}

/* ---------------------------------------------------------------------------
   Lightbox dos certificados
   --------------------------------------------------------------------------- */

.debony-lightbox-open {
  overflow: hidden;
}

.debony-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px 32px;
  background: rgba(9, 12, 18, 0.92);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.debony-lightbox.is-open {
  opacity: 1;
}

/*
 * Obrigatório: `display: flex` acima vence a regra `[hidden]` do browser por
 * especificidade. Sem isto o overlay fechado continua cobrindo a viewport com
 * opacity 0 — invisível e engolindo todo clique da página.
 */
.debony-lightbox[hidden] {
  display: none;
}

.debony-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
}

.debony-lightbox__image {
  max-width: min(1100px, 100%);
  /* Desconta o respiro do topo/rodapé para o certificado caber inteiro. */
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.debony-lightbox__caption {
  max-width: 60ch;
  color: #e8ecf3;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

.debony-lightbox__counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: #aab4c4;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* Botões: o "X" fica no canto superior direito. */
.debony-lightbox__close,
.debony-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.debony-lightbox__close:hover,
.debony-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.debony-lightbox__close:focus-visible,
.debony-lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.debony-lightbox__close {
  top: 16px;
  right: 16px;
  width: 46px;
  height: 46px;
}

.debony-lightbox__close svg {
  width: 22px;
  height: 22px;
}

.debony-lightbox__nav {
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
}

.debony-lightbox__nav:hover {
  transform: translateY(-50%);
}

.debony-lightbox__nav--prev {
  left: 16px;
}

.debony-lightbox__nav--next {
  right: 16px;
}

.debony-lightbox__nav svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 720px) {
  .debony-lightbox {
    padding: 60px 12px 56px;
  }

  .debony-lightbox__image {
    max-height: calc(100vh - 170px);
  }

  /* Em tela estreita as setas saem das laterais e vão para o rodapé. */
  .debony-lightbox__nav {
    top: auto;
    bottom: 12px;
    width: 44px;
    height: 44px;
    transform: none;
  }

  .debony-lightbox__nav:hover {
    transform: none;
  }

  .debony-lightbox__nav--prev {
    left: calc(50% - 78px);
  }

  .debony-lightbox__nav--next {
    right: calc(50% - 78px);
  }

  .debony-lightbox__counter {
    bottom: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .debony-lightbox {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Mapa de "Nossos produtos percorrem o mundo" (home)
   --------------------------------------------------------------------------- */

/*
 * O GIF animado já traz o selo "Brasil" com o pino. O selo original do Elementor
 * é um container posicionado por cima do mapa e ficaria duplicado.
 * Escondido por CSS, e não removido do HTML, porque o container tem divs
 * aninhados — removê-lo com regex seria frágil a qualquer mudança de markup.
 */
/* Por data-id exato: os IDs do Elementor têm tamanho variável (este tem 8
   caracteres), e um seletor montado a partir de um ID truncado não casa nada. */
.elementor-10 [data-id="3e169061"] {
  display: none !important;
}

[data-debony="mapa-envios"] img {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Menu do cabeçalho: horizontal no computador (a partir de 1025px)
   --------------------------------------------------------------------------- */

/*
 * Abaixo de 1025px nada aqui se aplica: o CSS do Elementor esconde a <nav>
 * horizontal e mostra o hambúrguer, como sempre foi. O breakpoint vem da classe
 * elementor-nav-menu--dropdown-tablet, gerada no build (tools/build.mjs).
 */
@media (min-width: 1025px) {
  /*
   * O grupo da direita (botão + menu) tinha --width fixo de 332px, pensado para
   * o botão e o ícone do hambúrguer. Espremido ali, o menu quebrava um item por
   * linha e o botão encolhia. Agora ocupa o espaço livre ao lado da logo.
   */
  .elementor .elementor-element.elementor-element-29de2ff {
    --width: auto;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
  }

  /* Menu à esquerda do botão "Entre em contato", que não pode encolher. */
  .elementor .elementor-element.elementor-element-265527d {
    order: -1;
    width: auto;
  }

  .elementor .elementor-element.elementor-element-2f8444d {
    flex-shrink: 0;
  }

  [data-debony="menu-horizontal"] > .elementor-nav-menu {
    flex-wrap: nowrap;
  }

  /*
   * Seletor com especificidade (0,4,1) de propósito. O Elementor tem
   * `.elementor-nav-menu--main .elementor-nav-menu a:hover { padding: 13px 20px }`,
   * (0,3,1): um seletor (0,3,0) vence no estado normal mas perde no hover, e o
   * item crescia até 24px ao passar o mouse. O menu inteiro pulava, e o submenu
   * "Sobre nós" saía de baixo do cursor e fechava. Mantenha acima de (0,3,1).
   */

  .elementor [data-debony="menu-horizontal"] .elementor-nav-menu a.elementor-item {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--e-global-color-accent);
    padding: 12px 14px;
    white-space: nowrap;
  }

  .elementor [data-debony="menu-horizontal"] .elementor-item:hover,
  .elementor [data-debony="menu-horizontal"] .elementor-item:focus-visible,
  .elementor [data-debony="menu-horizontal"] .elementor-item.elementor-item-active {
    color: var(--e-global-color-primary);
  }

  /* Sublinhado do ponteiro na cor da marca, e não no cinza padrão do Elementor. */
  .elementor [data-debony="menu-horizontal"] .elementor-item::after {
    background-color: var(--e-global-color-primary);
  }

  /* Caret do submenu "Sobre nós" acompanha a cor do texto. */
  .elementor [data-debony="menu-horizontal"] .sub-arrow svg {
    fill: currentColor;
  }

  /*
   * Submenu "Sobre nós" por CSS, no hover e no foco do teclado.
   *
   * O SmartMenus do Elementor inicializa nesta <nav>, mas não abre o submenu no
   * hover (medido em Chrome, com movimento real do mouse), e nunca abriria pelo
   * Tab. Abrir por CSS não depende de JS e se comporta igual nos dois casos.
   * Sem o SmartMenus abrindo, ninguém calcula a posição: ela vai fixa aqui,
   * colada ao item para o mouse não cruzar um vão e fechar o submenu no caminho.
   */
  [data-debony="menu-horizontal"] .menu-item-has-children {
    position: relative;
  }

  [data-debony="menu-horizontal"] .menu-item-has-children > .sub-menu {
    top: 100%;
    left: 0;
    /*
     * Largura do conteúdo. O Elementor fixa 12em e os itens não quebram linha:
     * "Sustentabilidade e Responsabilidade Social" vazava do fundo azul e, branco
     * sobre a página branca, sumia pela metade.
     */
    width: max-content;
    min-width: 240px;
    z-index: 9999;
  }

  /*
   * Os subitens herdam a fonte grande do menu de celular, pensada para toque.
   * No computador acompanham os itens do topo. Só a fonte: o padding do Elementor
   * é o mesmo com e sem hover aqui, e mexer nele reabriria o risco de salto.
   * Especificidade (0,4,1) contra o (0,3,0) da regra de fonte do Elementor.
   */
  .elementor [data-debony="menu-horizontal"] .sub-menu a.elementor-sub-item {
    font-size: 16px;
  }

  [data-debony="menu-horizontal"] .menu-item-has-children:hover > .sub-menu,
  [data-debony="menu-horizontal"] .menu-item-has-children:focus-within > .sub-menu {
    display: block !important;
  }
}

/*
 * Entre 1025 e 1279px não cabem logo de 320px + 6 itens + botão numa linha: o
 * menu encostava na logo e passava por cima do botão. Aqui a logo e os itens
 * ficam mais compactos. Medido em Chrome de 1025 a 1279px.
 */
@media (min-width: 1025px) and (max-width: 1279px) {
  .elementor .elementor-element.elementor-element-9c44feb {
    --width: 230px;
    width: 230px;
    flex-shrink: 0;
  }

  .elementor .elementor-element.elementor-element-9c44feb img {
    width: 100%;
    height: auto;
  }

  .elementor .elementor-element.elementor-element-29de2ff {
    gap: 12px;
  }

  .elementor [data-debony="menu-horizontal"] .elementor-nav-menu a.elementor-item {
    font-size: 14px;
    padding: 10px 8px;
  }

  .elementor .elementor-element.elementor-element-2f8444d .elementor-button {
    font-size: 14px;
    padding: 10px 16px;
  }
}

/* Fim da faixa: em 1025px o menu ainda encostava na logo. */
@media (min-width: 1025px) and (max-width: 1099px) {
  .elementor .elementor-element.elementor-element-9c44feb {
    --width: 200px;
    width: 200px;
  }

  .elementor [data-debony="menu-horizontal"] .elementor-nav-menu a.elementor-item {
    padding: 10px 6px;
  }
}