/* ============================================================
   Indice

   1. Estrutura do header
   2. Estado visual da homepage
   3. Logos da homepage
   4. Search e menu hamburger
   5. Hover
   6. Hover logo header
============================================================ */


/* ============================================================
   1. Estrutura do header
============================================================ */

.x-header-main {
  max-height: 80px !important;
  padding: 16px !important;
  box-sizing: border-box;
  transition:
    height 0.3s ease,
    max-height 0.3s ease,
    padding 0.3s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.x-header-main.scrolled,
.x-header-main.is-scrolled {
  padding: 12px 16px !important;
}

.x-header-main a,
.x-header-main button {
  color: inherit;
}


/* ============================================================
   2. Estado visual da homepage
============================================================ */

.home-header {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  color: var(--text-secondary) !important;
}

.home-header.scrolled,
.home-header.is-scrolled {
  background: var(--background-neutral-primary) !important;
  border-bottom-color: var(--line-default) !important;
  color: var(--text-primary) !important;
}


/* ============================================================
   3. Logos da homepage
============================================================ */

.home-header .home-logo-color {
  display: none !important;
}

.home-header .home-logo-white {
  display: block !important;
}

.home-header.scrolled .home-logo-color,
.home-header.is-scrolled .home-logo-color {
  display: block !important;
}

.home-header.scrolled .home-logo-white,
.home-header.is-scrolled .home-logo-white {
  display: none !important;
}


/* ============================================================
   4. Search e menu hamburger
============================================================ */

.x-header-main .bde-search-form {
  --searchFormSize: 48px;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

.x-header-main.scrolled .bde-search-form,
.x-header-main.is-scrolled .bde-search-form {
  --searchFormSize: 40px;
  height: 40px !important;
}

.x-header-main .x-search-btn,
.x-header-main .x-search-btn form,
.x-header-main .x-search-btn button,
.x-header-main .x-search-btn a {
  color: currentColor !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.x-header-main .search-form__button--full-screen,
.x-header-main .x-menu-toggle {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 4px !important;
  color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    width 0.3s ease,
    min-width 0.3s ease,
    height 0.3s ease,
    min-height 0.3s ease,
    color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

.x-header-main.scrolled .search-form__button--full-screen,
.x-header-main.is-scrolled .search-form__button--full-screen,
.x-header-main.scrolled .x-menu-toggle,
.x-header-main.is-scrolled .x-menu-toggle {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
}

.x-header-main .search-form__button--full-screen svg,
.x-header-main .search-form__button--full-screen svg path,
.x-header-main .x-menu-toggle svg,
.x-header-main .x-menu-toggle svg path {
  fill: currentColor !important;
  stroke: none !important;
  transition: none !important;
}

.x-header-main .x-menu-toggle svg {
  width: 26px !important;
  height: 26px !important;
  margin: 5px 0 !important;
}


/* ============================================================
   5. Hover
============================================================ */

.x-header-main .search-form__button--full-screen:hover,
.x-header-main .search-form__button--full-screen:focus-visible,
.x-header-main .x-menu-toggle:hover,
.x-header-main .x-menu-toggle:focus-visible {
  color: var(--status-hover) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.x-header-main .search-form__button--full-screen:hover svg,
.x-header-main .search-form__button--full-screen:hover svg path,
.x-header-main .search-form__button--full-screen:focus-visible svg,
.x-header-main .search-form__button--full-screen:focus-visible svg path,
.x-header-main .x-menu-toggle:hover svg,
.x-header-main .x-menu-toggle:hover svg path,
.x-header-main .x-menu-toggle:focus-visible svg,
.x-header-main .x-menu-toggle:focus-visible svg path {
  fill: currentColor !important;
  stroke: none !important;
}

/* ============================================================
   6. Estrutura do header
============================================================ */
.img-hover-color,
.img-hover-white {
  transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Logo escuro/colorido: fica mais claro/discreto */
.img-hover-color:hover {
  opacity: 0.72;
}

/* Logo branco: fica ligeiramente mais escuro */
.img-hover-white:hover {
  filter: brightness(0.72);
}