/* ============================================================
   Fixed translucent site header (home page only).

   Layout: [logo] [primary nav]  [actions: Login + Conheça]
   Mobile: collapses behind a hamburger toggle.
   ============================================================ */

/* In-page anchor links (menu items pointing at #sectionId) stop below the
   fixed header instead of behind it. --home-header-h is published by
   mainMenuHome.js; the fallback covers the header before JS runs. */
html {
  scroll-padding-top: calc(var(--home-header-h, 80px) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* The header elements that go full-width on mobile (nav links and action
   buttons) carry their own padding + border. Without border-box, width:100%
   adds those on top and overflows the panel, which clips the buttons'
   right edge against the actions' overflow:hidden. */
.MainNavSiteHome *,
.MainNavSiteHome *::before,
.MainNavSiteHome *::after {
  box-sizing: border-box;
}

.MainNavSiteHome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.27);
  background-color: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(15.8px);
  -webkit-backdrop-filter: blur(15.8px);
  box-shadow:
    inset 2.45px 2.29px 10.56px 0 rgba(255, 255, 255, 0.09),
    inset 1.52px 1.42px 5.28px 0 rgba(255, 255, 255, 0.09);
}

.welcomeBar {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  text-rendering: geometricPrecision;
  text-align: center;
}

.siteHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 44px;
}

/* --- logo ------------------------------------------------------ */
.siteHeaderLogo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.siteHeaderLogoImg {
  display: block;
  width: 151px;
  height: auto;
}

.siteHeaderLogo:hover {
  opacity: 1;
}

/* --- primary navigation ---------------------------------------- */
/* Selectors target the nav by container so the styles work whether the
   `primary-menu` class lands on the <ul> (wp_nav_menu) or the wrapping
   <div> (wp_page_menu fallback when no menu is assigned). */
.siteHeaderNav ul {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.siteHeaderNav li {
  position: relative;
}

.siteHeaderNav li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 244px;
  color: #f3f4f7;
  font-family: "Lato", var(--ff-main, sans-serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.siteHeaderNav li > a:hover,
.siteHeaderNav li > a:focus-visible {
  color: #ffffff;
  opacity: 1;
  outline: none;
}

/* Dropdown chevron. */
.siteHeaderNav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f3f4f7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease;
}

.siteHeaderNav .menu-item-has-children:hover > a::after,
.siteHeaderNav .menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}

/* Submenu (dropdown). */
/* Transparent bridge spanning the gap between the parent link and the
   dropdown, so moving the cursor down into the submenu doesn't cross a
   dead zone and lose :hover (which would hide the dropdown mid-click). */
.siteHeaderNav .menu-item-has-children > .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.siteHeaderNav .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background-color: rgba(0, 19, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(15.8px);
  -webkit-backdrop-filter: blur(15.8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.siteHeaderNav li:hover > .sub-menu,
.siteHeaderNav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.siteHeaderNav .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: #f3f4f7;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.siteHeaderNav .sub-menu a:hover {
  background-color: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

/* --- action buttons (Login / Conheça) -------------------------- */
.siteHeaderActions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.siteHeaderActionLogin,
.siteHeaderActionPrimary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 244px;
  font-family: "Lato", var(--ff-main, sans-serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.siteHeaderActionLogin {
  border: 1px solid #0073ff;
  color: #0073ff;
  background-color: transparent;
}

.siteHeaderActionLogin:hover,
.siteHeaderActionLogin:focus-visible {
  background-color: #0073ff;
  color: #ffffff;
  opacity: 1;
  outline: none;
}

.siteHeaderActionPrimary {
  background-color: #0073ff;
  color: #ffffff;
  border: 1px solid #0073ff;
}

.siteHeaderActionPrimary:hover,
.siteHeaderActionPrimary:focus-visible {
  background-color: #005bcc;
  border-color: #005bcc;
  color: #ffffff;
  opacity: 1;
  outline: none;
}

.siteHeaderActionIcon {
  display: block;
  flex-shrink: 0;
}

/* --- hamburger ------------------------------------------------- */
.siteHeaderHamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.siteHeaderHamburger span {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.siteHeader.is-open .siteHeaderHamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.siteHeader.is-open .siteHeaderHamburger span:nth-child(2) {
  opacity: 0;
}

.siteHeader.is-open .siteHeaderHamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- mobile / tablet ------------------------------------------- */
@media (max-width: 991px) {
  .siteHeader {
    flex-wrap: wrap;
    padding: 10px 18px;
    gap: 0;
  }

  /* Solid panel once open so items are readable over the hero instead of
     showing the blurred page bleeding through the translucent bar. The
     row gap is added only when open so the collapsed bar has no dead space
     below the logo (the 0-height nav/actions lines otherwise add gaps). */
  .siteHeader.is-open {
    background-color: rgba(2, 13, 30, 0.98);
    gap: 10px;
  }

  .siteHeaderHamburger {
    display: flex;
    order: 2;
    margin-left: auto;
  }

  .siteHeaderNav,
  .siteHeaderActions {
    order: 3;
    width: 100%;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }

  /* Scroll the nav itself when the menu is taller than the screen so the
     bottom items / action buttons never get cut off. */
  .siteHeader.is-open .siteHeaderNav {
    max-height: 70vh;
    overflow-y: auto;
    opacity: 1;
  }

  .siteHeader.is-open .siteHeaderActions {
    max-height: 400px;
    opacity: 1;
    padding: 8px 0 4px;
  }

  .siteHeaderNav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 4px;
  }

  .siteHeaderNav li > a {
    width: 100%;
    justify-content: space-between;
  }

  /* The hover bridge would sit over the parent link's tap target on touch. */
  .siteHeaderNav .menu-item-has-children > .sub-menu::before {
    display: none;
  }

  /* Indented list (left rule) reads better than a translucent card now
     that the panel behind it is solid. */
  .siteHeaderNav .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    width: 100%;
    margin: 0 0 4px;
    padding: 2px 0 2px 14px;
    background-color: transparent;
    border: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* The desktop open-state rule re-applies translateX(-50%) on hover/focus,
     which would shove the static mobile submenu off to the left and make it
     unclickable. Keep it in place. */
  .siteHeaderNav li:hover > .sub-menu,
  .siteHeaderNav li:focus-within > .sub-menu {
    transform: none;
  }

  .siteHeaderNav .sub-menu a {
    padding: 8px 12px;
  }

  .siteHeaderActions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .siteHeaderActionLogin,
  .siteHeaderActionPrimary {
    justify-content: center;
    width: 100%;
  }
}