/* ================================================================
   GP Header — Component Styles
   Figma Make: Create HTML/CSS for Website
   Variantes: Default (white bg) · Dark (transparent/dark bg)
   Breakpoints:
     Logo / Nav / Hamburger: 768px
     Layout (padding/height): Mobile ≤440px · Tablet 441–1199px · Desktop ≥1200px
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   1. BASE — posição fixa, transição suave
   ────────────────────────────────────────────────────────────── */
.gp-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition:
    background-color 0.35s ease,
    box-shadow       0.35s ease;
}

/* ──────────────────────────────────────────────────────────────
   2. VARIANTES DE FUNDO
   ────────────────────────────────────────────────────────────── */
.gp-header--transparent {
  background-color: transparent;
  box-shadow: none;
  border-bottom: 0;
}

.gp-header--white {
  background-color: var(--neutral-color-high-pure);
  box-shadow: var(--shadow-weak);
}

.gp-header--scrolled {
  background-color: var(--neutral-color-high-pure) !important;
  box-shadow: var(--shadow-weak) !important;
}

/* ──────────────────────────────────────────────────────────────
   3. INNER LAYOUT
   ────────────────────────────────────────────────────────────── */
.gp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-4xs) var(--padding-mega) var(--padding-4xs) var(--padding-mega);
  height: auto;
  box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────
   4. LOGO — visibilidade por variante + breakpoint 768px
   ────────────────────────────────────────────────────────────── */
.gp-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;
}

/* Todas as imagens escondidas por padrão */
.gp-header__logo-desktop-default,
.gp-header__logo-desktop-dark,
.gp-header__logo-mobile-default,
.gp-header__logo-mobile-dark {
  display: none;
  height: 70px;
  width: auto;
}

/* ── Header Default (white bg) ──────────────────────────────── */
/* Desktop/Tablet ≥769px: logo desktop default */
@media (min-width: 769px) {
  .gp-header--white .gp-header__logo-desktop-default { display: block; }
}
/* Mobile ≤768px: logo mobile default */
@media (max-width: 768px) {
  .gp-header--white .gp-header__logo-mobile-default  { display: block; }
}

/* ── Header Dark (transparent bg) ───────────────────────────── */
/* Desktop/Tablet ≥769px: logo desktop dark */
@media (min-width: 769px) {
  .gp-header--transparent .gp-header__logo-desktop-dark { display: block; }
}
/* Mobile ≤768px: logo mobile dark */
@media (max-width: 768px) {
  .gp-header--transparent .gp-header__logo-mobile-dark  { display: block; }
}

/* ── Scrollado — sempre mostra logos default ─────────────────── */
@media (min-width: 769px) {
  .gp-header--scrolled .gp-header__logo-desktop-default { display: block !important; }
  .gp-header--scrolled .gp-header__logo-desktop-dark    { display: none  !important; }
}
@media (max-width: 768px) {
  .gp-header--scrolled .gp-header__logo-mobile-default  { display: block !important; }
  .gp-header--scrolled .gp-header__logo-mobile-dark     { display: none  !important; }

  .gp-header--scrolled .gp-header__logo-mobile-default {
    height: 48px !important;
  }

  .gp-header--scrolled .gp-header__inner {
    padding: var(--padding-nano) var(--padding-4xs) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   5. NAV + HAMBURGER — breakpoint 768px
   ────────────────────────────────────────────────────────────── */
.gp-header__nav {
  display: none;
  align-items: center;
}

.gp-header__hamburger {
  display: flex;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--padding-nano);
  color: var(--brand-color-secondary-dark);
  font-size: 40px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

/* Desktop/Tablet ≥769px: nav visível, hamburger escondido */
@media (min-width: 769px) {
  .gp-header__nav       { display: flex; }
  .gp-header__hamburger { display: none; }
}

/* Hambúrguer no header transparente */
.gp-header--transparent .gp-header__hamburger {
  color: var(--brand-color-secondary-pure);
}
/* Scrollado */
.gp-header--scrolled .gp-header__hamburger {
  color: var(--brand-color-secondary-dark) !important;
}

/* ──────────────────────────────────────────────────────────────
   6. MENU — Links com underline transition (Figma Make)
   Underline: ::after pseudo-element, 2px, scaleX 0→1 em 300ms
   ────────────────────────────────────────────────────────────── */
.gp-header__menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-md); /* 48px */
}

.gp-header__menu li {
  line-height: 1;
  float: none;
  margin: 0;
  /* Reset .bt-verde genérico que vaza do style.css */
  height: auto !important;
  line-height: normal !important;
  display: list-item !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Base — fundo branco (default) */
.gp-header__menu li a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-nano);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs); /* 20px — Body/LG/Regular */
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--brand-color-primary-pure);
  text-decoration: none;
  text-transform: none;
  letter-spacing: var(--letter-spacing-default);
  position: relative;
  padding: 0 0 4px 0;
  transition: color 0.3s ease;
  height: auto;
  margin: 0;
  background: none !important;
  border: none;
  border-radius: 0;
}

/* Underline via ::after — largura 0, transição 300ms */
.gp-header__menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--brand-color-secondary-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* Hover — underline aparece */
.gp-header__menu li a:hover {
  color: var(--brand-color-secondary-dark);
}
.gp-header__menu li a:hover::after {
  transform: scaleX(1);
}

/* Selected — página atual */
.gp-header__menu li.current-menu-item > a,
.gp-header__menu li.current_page_item > a {
  color: var(--brand-color-secondary-dark);
}
.gp-header__menu li.current-menu-item > a::after,
.gp-header__menu li.current_page_item > a::after {
  transform: scaleX(1);
}

/* ── Header transparente (dark bg) ── */
.gp-header--transparent .gp-header__menu li a {
  color: var(--neutral-color-high-pure);
}
.gp-header--transparent .gp-header__menu li a::after {
  background-color: var(--brand-color-secondary-pure);
}
.gp-header--transparent .gp-header__menu li a:hover {
  color: var(--brand-color-secondary-pure);
}
.gp-header--transparent .gp-header__menu li.current-menu-item > a,
.gp-header--transparent .gp-header__menu li.current_page_item > a {
  color: var(--brand-color-secondary-pure);
}

/* ── Scrollado: sempre "on white" ── */
.gp-header--scrolled .gp-header__menu li a {
  color: var(--brand-color-primary-pure) !important;
}
.gp-header--scrolled .gp-header__menu li a::after {
  background-color: var(--brand-color-secondary-dark) !important;
}
.gp-header--scrolled .gp-header__menu li a:hover {
  color: var(--brand-color-secondary-dark) !important;
}

/* ──────────────────────────────────────────────────────────────
   7. BOTÃO CONTATO — ícone icon-contact + underline sempre visível
   ────────────────────────────────────────────────────────────── */
.gp-header__menu li.bt-verde > a {
  color: var(--brand-color-secondary-dark);
  font-weight: var(--font-weight-bold); /* Body/XLG/Bold */
  background: none !important;
  border-radius: 0 !important;
  padding: 0 0 4px 0 !important;
  height: auto !important;
  line-height: 1.5;
  gap: var(--spacing-nano); /* 8px entre ícone e label */
}

/* Underline do Contato — escondido por padrão, aparece no hover */
.gp-header__menu li.bt-verde > a::after {
  transform: scaleX(0);
  background-color: var(--brand-color-secondary-dark);
}
.gp-header__menu li.bt-verde > a:hover::after {
  transform: scaleX(1);
}

/* Ícone <i> dentro do link */
.gp-header__menu li.bt-verde > a > i {
  font-size: 1em;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  margin: 0;
  float: none;
  display: inline;
}

.gp-header__menu li.bt-verde > a:hover,
.gp-header__menu li.bt-verde:hover {
  color: var(--brand-color-secondary-dark);
  background-color: transparent !important;
}

/* Contato no header transparente */
.gp-header--transparent .gp-header__menu li.bt-verde > a {
  color: var(--brand-color-secondary-pure);
}
.gp-header--transparent .gp-header__menu li.bt-verde > a::after {
  background-color: var(--brand-color-secondary-pure);
}
.gp-header--transparent .gp-header__menu li.bt-verde > a:hover,
.gp-header--transparent .gp-header__menu li.bt-verde:hover {
  color: var(--brand-color-secondary-pure);
  background-color: transparent !important;
}

/* Contato scrollado */
.gp-header--scrolled .gp-header__menu li.bt-verde > a {
  color: var(--brand-color-secondary-dark) !important;
}
.gp-header--scrolled .gp-header__menu li.bt-verde > a::after {
  background-color: var(--brand-color-secondary-dark) !important;
}

/* ──────────────────────────────────────────────────────────────
   8. RESPONSIVO — Layout (padding / height / tamanhos)
   ────────────────────────────────────────────────────────────── */

/* Mobile ≤768px */
@media (max-width: 768px) {
  .gp-header__inner {
    padding: var(--padding-4xs) var(--padding-4xs);
  }

  .gp-header__logo-mobile-default,
  .gp-header__logo-mobile-dark {
    height: 62px;
  }
}

/* Tablet 769–1199px */
@media (min-width: 769px) and (max-width: 1199px) {
  .gp-header__inner {
    padding: var(--padding-4xs) var(--padding-2xs) var(--padding-4xs) var(--padding-2xs);
  }

  .gp-header__menu {
    gap: var(--spacing-md); /* 48px no tablet */
  }

  .gp-header__menu li a {
    font-size: var(--font-size-xs); /* 20px — Body/LG/Regular */
  }

  .gp-header__logo-desktop-default,
  .gp-header__logo-desktop-dark {
    height: 62px;
  }
}

/* ── Scrollado: Tablet 769–1199px ─────────────────────────────── */
@media (min-width: 769px) and (max-width: 1199px) {
  .gp-header--scrolled .gp-header__logo-desktop-default,
  .gp-header--scrolled .gp-header__logo-desktop-dark {
    height: 42px !important;
  }

  .gp-header--scrolled .gp-header__inner {
    padding: var(--padding-micro) var(--padding-mega) var(--padding-micro) var(--padding-mega) !important;
  }

  .gp-header--scrolled .gp-header__menu li a {
    font-size: var(--font-size-xxs) !important; /* 16px */
  }
}

/* ── Scrollado: Desktop ≥1200px ──────────────────────────────── */
@media (min-width: 1200px) {
  .gp-header--scrolled .gp-header__logo-desktop-default,
  .gp-header--scrolled .gp-header__logo-desktop-dark {
    height: 52px !important;
  }

  .gp-header--scrolled .gp-header__inner {
    padding: var(--padding-micro) var(--padding-mega) var(--padding-micro) var(--padding-mega) !important;
  }

  .gp-header--scrolled .gp-header__menu li a {
    font-size: var(--font-size-xxs) !important; /* 16px */
  }
}

/* ──────────────────────────────────────────────────────────────
   9. OFFSET DE CONTEÚDO
   ────────────────────────────────────────────────────────────── */
body.has-fixed-header:not(.home) {
  padding-top: 102px; /* 16 + 70 + 16 */
}

@media (max-width: 768px) {
  body.has-fixed-header:not(.home) {
    padding-top: 94px; /* 16 + 62 + 16 */
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  body.has-fixed-header:not(.home) {
    padding-top: 94px; /* 16 + 62 + 16 */
  }
}

/* ──────────────────────────────────────────────────────────────
   10. MENU MOBILE — md-overlay acima do header fixo
   ────────────────────────────────────────────────────────────── */
.md-overlay {
  z-index: 1010;
}

.md-overlay .gp-col-12 {
  padding-left: 16px;
  padding-right: 16px;
}

.md-overlay .bt-fechar {
  font-size: 40px;
  margin: 26px 0 0 0;
  float: right;
  color: var(--brand-color-secondary-pure);
}

.md-overlay .bt-fechar i {
  font-size: 40px;
  color: var(--brand-color-secondary-pure);
}


/* ──────────────────────────────────────────────────────────────
   11. LARGE BREAKPOINT — >1632px · alinhado ao grid 1440px
   ────────────────────────────────────────────────────────────── */
@media only screen and (min-width: 1633px) {
  .gp-header__inner {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .gp-header--scrolled .gp-header__inner {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}