/* Compact header menu for the six LP pages in PT-BR, EN-US and ES.
   Scoped to .lp-r2 .site-header and loaded after lp-r2.css. It restyles the header only:
   no global rule, no change to the commerce scripts, the offer, the examples or the footer. */

/* The wordmark keeps its text and home URL; the link box now reaches the 44 px touch target. */
.lp-r2 .site-header > .wordmark { display: inline-flex; align-items: center; min-height: 44px; }

.lp-r2 .site-header .lp-site-menu { position: relative; flex: 0 0 auto; font-size: 14px; line-height: 1.3; }

/* Native <details>: Enter and Space on the summary open and close it with no script. */
.lp-r2 .site-header .lp-site-menu > summary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 44px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--ink); border-radius: 3px; background: transparent; color: var(--ink);
  font-weight: 750; list-style: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.lp-r2 .site-header .lp-site-menu > summary::-webkit-details-marker { display: none; }
.lp-r2 .site-header .lp-site-menu > summary::marker { content: ""; }
.lp-r2 .site-header .lp-site-menu > summary::after { content: "+"; content: "+" / ""; font-size: 20px; font-weight: 400; line-height: 1; }
.lp-r2 .site-header .lp-site-menu[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.lp-r2 .site-header .lp-site-menu > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.lp-r2 .site-header .lp-site-menu-panel {
  position: absolute; z-index: 10; top: calc(100% + 8px); right: 0;
  box-sizing: border-box; width: min(288px, calc(100vw - var(--gutter) * 2)); padding: 10px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 3px; box-shadow: 0 12px 24px #153e351f;
}

.lp-r2 .site-header .lp-site-menu-panel nav { display: grid; gap: 0; }
.lp-r2 .site-header .lp-site-menu-panel nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 10px; border-radius: 2px;
  font-size: 15px; line-height: 1.3; text-decoration: none;
}
/* lp-r2.css hides .all-link on phones; inside the menu it is always the first entry. */
.lp-r2 .site-header .lp-site-menu-panel .all-link { display: flex; }
.lp-r2 .site-header .lp-site-menu-panel nav a:hover,
.lp-r2 .site-header .lp-site-menu-panel .languages a:hover { background: #e8edd2; }
.lp-r2 .site-header .lp-site-menu-panel a:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

/* PT / EN / ES live only here. Each link keeps its lang query, hreflang, lang and data-locale. */
.lp-r2 .site-header .lp-site-menu-panel .languages {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
.lp-r2 .site-header .lp-site-menu-panel .languages a {
  display: grid; place-items: center; width: auto; min-width: 44px; min-height: 44px;
  border: 1px solid transparent; border-radius: 2px;
  font-size: 14px; font-weight: 650; text-decoration: none;
}
.lp-r2 .site-header .lp-site-menu-panel .languages a[aria-current] {
  border-color: var(--ink); font-weight: 800;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .24em;
}

@media print {
  .lp-r2 .site-header .lp-site-menu { display: none; }
}