/* ================================================================
   VORA / HEADER — ETAPA 02
   Base limpa no desktop, navegação editorial em tela cheia no mobile.
   Mantém o CSS da ETAPA 01 intacto: ajustes do idioma vivem aqui.
   ================================================================ */

:root {
  --header-height: 106px;
  --header-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header {
  position: fixed;
  z-index: 51;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  padding-inline: var(--space-edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms var(--header-ease), visibility 700ms,
              background-color 400ms ease, backdrop-filter 400ms ease;
}

/* O header não deve atravessar a abertura do preloader. */
body.is-loading .site-header {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.site-header.is-scrolled {
  background: rgb(228 229 242 / 88%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header__logo {
  position: relative;
  z-index: 2;
  color: var(--black-blue);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.7vw, 39px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  text-decoration: none;
  transition: color 250ms ease;
}

.site-header__logo:focus-visible,
.site-header__link:focus-visible,
.mobile-menu__link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 7px;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(26px, 3.2vw, 58px);
}

.site-header__link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.32vw, 21px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--black-blue);
  text-decoration: none;
  transition: color 240ms ease;
}

.site-header__link::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 360ms var(--header-ease);
}

.site-header__link:hover { color: var(--blue); }
.site-header__link:hover::after,
.site-header__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Único controle de idioma, compartilhado pelo loader e header. */
.language {
  z-index: 60;
  top: calc((var(--header-height) - 28px) / 2);
  left: 50%;
  right: auto;
  height: 28px;
  transform: translateX(-50%);
  gap: 11px;
  white-space: nowrap;
}

.language__button {
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 7px 1px;
}

.language__button:hover { color: var(--blue); }

/* Botão hamburguer aparece só em telas menores. */
.site-header__toggle {
  display: none;
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  place-items: center;
  width: 47px;
  height: 47px;
  border: 1px solid rgb(14 15 40 / 10%);
  border-radius: 50%;
  background: var(--black-blue);
  color: var(--white-blue);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 250ms ease, color 250ms ease,
              border-color 250ms ease, transform 400ms var(--header-ease);
}
.site-header__toggle:hover { transform: scale(1.045); }
.site-header__toggle-bars { display: grid; place-items: center; width: 20px; height: 18px; }
.site-header__toggle-line {
  grid-area: 1 / 1;
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 450ms var(--header-ease);
}
.site-header__toggle-line:first-child { transform: translateY(-4px); }
.site-header__toggle-line:last-child { transform: translateY(4px); }

/* Visível apenas no mobile, mas sempre fora da navegação desktop. */
.mobile-menu { display: none; }

@media (max-width: 760px) {
  :root { --header-height: 89px; }

  .site-header { padding-inline: clamp(20px, 5vw, 34px); }
  .site-header__logo { font-size: 32px; }
  .site-header__nav { display: none; }
  .site-header__toggle { display: grid; }

  /* Linguagem sempre no centro, entre marca e botão circular. */
  .language { gap: 8px; }
  .language__button { font-size: 11px; }

  .mobile-menu {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 120px clamp(24px, 7vw, 45px) 74px;
    background: var(--black-blue);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 480ms var(--header-ease), visibility 480ms;
  }

  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu__inner {
    width: 100%;
    max-width: 530px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(39px, 7.5vh, 77px);
  }

  .mobile-menu__link {
    display: block;
    width: max-content;
    max-width: 100%;
    color: var(--white-blue);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: clamp(54px, 12.6vw, 83px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.025em;
    opacity: 0;
    transform: translateY(28px);
    transition: transform 650ms var(--header-ease),
                opacity 650ms var(--header-ease), color 250ms ease;
  }

  /* Alinhamentos editoriais, sem criar categorias ou links desnecessários. */
  .mobile-menu__link--one { align-self: flex-start; }
  .mobile-menu__link--two {
    align-self: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.035em;
  }
  .mobile-menu__link--three {
    align-self: flex-end;
    color: #6371FF;
  }

  .mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: translateY(0); }
  .mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 70ms; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 135ms; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 200ms; }
  .mobile-menu__link:hover { color: #8F99FF; }

  body.menu-is-open { overflow: hidden; }
  body.menu-is-open .site-header {
    background: var(--black-blue);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.menu-is-open .site-header__logo { color: var(--white-blue); }
  body.menu-is-open .site-header__toggle {
    background: var(--white-blue);
    color: var(--black-blue);
    border-color: transparent;
  }
  body.menu-is-open .site-header__toggle-line:first-child { transform: rotate(45deg); }
  body.menu-is-open .site-header__toggle-line:last-child { transform: rotate(-45deg); }
  body.menu-is-open .language__button { color: #A2A6C3; }
  body.menu-is-open .language__button.is-current,
  body.menu-is-open .language__button:hover { color: var(--white-blue); }
  body.menu-is-open .language__separator { color: #68708D; }
}

@media (max-width: 370px) {
  .site-header { padding-inline: 18px; }
  .site-header__logo { font-size: 28px; }
  .site-header__toggle { width: 42px; height: 42px; }
  .mobile-menu__link { font-size: 12vw; }
}

@media (max-height: 630px) and (max-width: 760px) {
  .mobile-menu { justify-content: flex-start; }
  .mobile-menu__inner { gap: 30px; }
  .mobile-menu__link { font-size: clamp(44px, 10vh, 72px); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__link { transform: none; }
}

/* Respiro equilibrado em notebooks e navegação móvel. */
@media (min-width: 761px) and (max-width: 1366px) {
  .site-header__nav { gap: clamp(22px, 2.6vw, 38px); }
  .site-header__link { font-size: clamp(15px, 1.25vw, 17px); }
  .site-header__logo { font-size: clamp(30px, 2.7vw, 36px); }
}
@media (max-width: 760px) {
  .site-header__logo { letter-spacing: -.035em; }
  .mobile-menu__link { letter-spacing: -.025em; }
}

/* VORA — marcas oficiais sem símbolo no cabeçalho. A escolha acompanha
   o fundo claro/escuro, inclusive em todas as páginas de case. */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: clamp(116px, 9.2vw, 142px);
}
.site-header__logo-image { display: block; width: 100%; height: auto; }
.site-header__logo-image--light { display: none; }
.site-header:is(.is-on-projects, .is-on-footer) .site-header__logo-image--dark { display: none; }
.site-header:is(.is-on-projects, .is-on-footer) .site-header__logo-image--light { display: block; }
/* Menu aberto sempre tem fundo escuro, independentemente da seção. */
body.menu-is-open .site-header__logo-image--dark { display: none !important; }
body.menu-is-open .site-header__logo-image--light { display: block !important; }
@media (max-width: 760px) {
  .site-header__logo { width: clamp(99px, 28vw, 119px); }
}