/* =========================================================
   ONEPA HEADER
   ========================================================= */

.reference-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: #f7f8fb;
}


/* =========================================================
   HEADER INNER
   ========================================================= */

.header-inner {
  max-width: 1210px;
  margin: 0 auto;
  padding: 18px 32px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}


/* =========================================================
   LOGO
   ========================================================= */

.header-logo-link {
  display: block;
  line-height: 0;
  flex: none;
}

.reference-header-logo {
  width: 140px;
  height: auto;

  aspect-ratio: 1774 / 887;

  object-fit: contain;
  display: block;

  font-size: 0;
  color: transparent;
}

.reference-header-logo.logo-missing {
  visibility: hidden;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.header-nav {
  display: flex;
  align-items: center;

  gap: 10px;

  flex-wrap: wrap;
  justify-content: flex-end;
}


/* =========================================================
   NAVIGATION BUTTONS
   ========================================================= */

.nav-pill {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  background: #ffffff;
  color: #4b5768;

  font-size: 14px;
  font-weight: 500;

  line-height: 1;

  white-space: nowrap;

  padding: 14px 20px;

  border-radius: 10px;
  border: none;

  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.06);

  text-decoration: none;

  transition:
    color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.nav-pill:hover {
  color: #1683d8;
}

.nav-pill.active {
  color: #2f6fed;
  font-weight: 600;
}


/* =========================================================
   SERVIÇOS DROPDOWN CONTAINER
   ========================================================= */

.services-dropdown {
  position: relative;

  display: flex;
  align-items: center;
}


/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

.services-arrow {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  align-self: center;

  width: 10px;
  height: 10px;

  flex: 0 0 10px;
}

.services-arrow::before {
  content: "";

  display: block;

  width: 6px;
  height: 6px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: rotate(45deg);

  transition: transform 0.2s ease;
}


/* =========================================================
   SERVIÇOS DROPDOWN MENU
   ========================================================= */

.services-menu {
  position: absolute;

  /*
    The menu visually remains 8px below the button.
  */
  top: calc(100% + 8px);

  left: 50%;

  width: 245px;

  padding: 8px;

  background: #ffffff;

  border-radius: 12px;

  border: 1px solid #edf0f5;

  box-shadow:
    0 12px 30px rgba(16, 24, 40, 0.14),
    0 2px 8px rgba(16, 24, 40, 0.08);

  opacity: 0;
  visibility: hidden;

  transform:
    translateX(-50%)
    translateY(-8px);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;

  pointer-events: none;

  z-index: 100;
}


/* =========================================================
   INVISIBLE MOUSE BRIDGE
   =========================================================

   This is the important fix.

   The dropdown is visually separated from the
   Serviços button, but this invisible area fills
   the gap so the mouse does not leave the dropdown
   container while moving downward.
   ========================================================= */

.services-menu::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: -10px;

  height: 10px;

  background: transparent;
}


/* =========================================================
   SHOW DROPDOWN
   ========================================================= */

.services-dropdown:hover .services-menu,
.services-dropdown:focus-within .services-menu {
  opacity: 1;

  visibility: visible;

  transform:
    translateX(-50%)
    translateY(0);

  pointer-events: auto;
}


/* =========================================================
   ROTATE ARROW WHEN OPEN
   ========================================================= */

.services-dropdown:hover .services-arrow::before,
.services-dropdown:focus-within .services-arrow::before {
  transform: rotate(225deg);
}


/* =========================================================
   DROPDOWN ITEMS
   ========================================================= */

.services-menu-item {
  display: block;

  padding: 13px 14px;

  border-radius: 8px;

  color: #4b5768;

  font-size: 14px;
  font-weight: 500;

  line-height: 1.3;

  text-decoration: none;

  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.services-menu-item:hover {
  background: #f4f8fd;

  color: #1683d8;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 780px) {

  .header-inner {
    padding: 14px 20px;

    flex-wrap: wrap;

    row-gap: 12px;
  }


  .header-nav {
    width: 100%;

    justify-content: flex-start;

    gap: 8px;
  }


  .nav-pill {
    font-size: 13px;

    padding: 10px 14px;
  }


  .reference-header-logo {
    width: 110px;
  }


  .services-menu {
    left: 0;

    width: 230px;

    transform: translateY(-8px);
  }


  .services-dropdown:hover .services-menu,
  .services-dropdown:focus-within .services-menu {
    transform: translateY(0);
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

  .header-nav {
    gap: 6px;
  }


  .nav-pill {
    padding: 9px 12px;

    font-size: 12px;
  }


  .services-menu {
    width: 220px;
  }


  .services-menu-item {
    font-size: 13px;

    padding: 11px 12px;
  }
}


/* =========================================================
   MOBILE HAMBURGER TOGGLE
   Hidden on desktop/tablet — only shown at the mobile
   breakpoint below, where it replaces the nav-pill row.
   ========================================================= */

.header-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;

  width: 26px;
  height: 18px;

  padding: 0;
  border: 0;
  background: transparent;

  cursor: pointer;
  flex: none;
}

.header-mobile-toggle .hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #1c3f73;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.header-mobile-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header-mobile-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.header-mobile-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* =========================================================
   MOBILE NAV PANEL
   Stacked menu that drops down under the header when the
   hamburger is tapped. Hidden by default at every width;
   the mobile media query below is what makes the toggle
   button (and therefore this panel) reachable at all.
   ========================================================= */

.mobile-nav-panel {
  display: none;
  flex-direction: column;
}

.mobile-nav-panel.is-open {
  display: flex;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;

  padding: 14px 4px;

  background: none;
  border: 0;
  border-bottom: 1px solid rgba(15, 38, 72, 0.08);

  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #1c3f73;
  text-align: left;
  text-decoration: none;

  cursor: pointer;
}

.mobile-nav-link.active {
  color: #2f6fed;
}

.mobile-nav-group {
  display: flex;
  flex-direction: column;
}

.mobile-services-submenu {
  display: none;
  flex-direction: column;
  padding: 2px 0 6px 14px;
}

.mobile-nav-group.is-open .mobile-services-submenu {
  display: flex;
}

.mobile-submenu-item {
  padding: 10px 4px;

  font-size: 14px;
  color: #4b5768;
  text-decoration: none;
}

.mobile-submenu-item:hover {
  color: #1683d8;
}


/* =========================================================
   MOBILE: SWITCH NAV FOR HAMBURGER
   Below this width the pill navigation is replaced by the
   hamburger + dropdown panel above. Nothing above this
   breakpoint (desktop and tablet) is affected.
   ========================================================= */

@media (max-width: 600px) {

  .header-inner {
    flex-wrap: nowrap;
    row-gap: 0;
  }

  .header-nav {
    display: none;
  }

  .header-mobile-toggle {
    display: flex;
  }

  .mobile-nav-panel {
    padding: 4px 20px 16px;
    background: #f7f8fb;
    border-top: 1px solid rgba(15, 38, 72, 0.08);
  }

}