/* Round 59 | focused usability repairs; bilingual home-design pages.
   Keep Round 58 layout, content, imagery, pricing and interactions intact. */

/* The EN/ES control belongs at the top of the page, not to the viewport.
   It must scroll away with the document on every builder-collection page. */
html.pmm-builder-shell .pmm-language-float {
  position: absolute !important;
}

/* NOMAD's phone navigation is too tall to remain pinned while scrolling.
   Its normal header layout and desktop sticky behaviour are unchanged. */
@media (max-width: 760px) {
  html.pmm-builder-shell body.nomad-page > header.topbar {
    position: relative !important;
    top: auto !important;
  }
}

/* Round 58 made this paragraph dark, but this home-page banner is dark green.
   Use a high-contrast, comfortably sized caption without altering the banner. */
html.pmm-builder-shell body.pmm-home .tn-home-band p {
  color: #f3f7ef !important;
  font-size: clamp(18px, 1.4vw, 20px) !important;
  line-height: 1.58 !important;
  font-weight: 450 !important;
  letter-spacing: .003em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .25);
}

/* The Nordic brochure/inquiry popup uses the visible mobile viewport, not
   the browser's older, potentially taller 100vh layout viewport. */
html.pmm-builder-shell body.tn-page .pmm-pop-overlay {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-items: safe center;
  padding: max(16px, env(safe-area-inset-top))
           max(14px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom))
           max(14px, env(safe-area-inset-left));
}
html.pmm-builder-shell body.tn-page .pmm-pop-dialog {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: 62px;
}

/* The 44px close control stays exposed as the dialog content scrolls.
   Because it is within the dialog, it stays above the mobile browser UI. */
html.pmm-builder-shell body.tn-page .pmm-pop-close {
  position: sticky !important;
  top: 0 !important;
  right: auto !important;
  float: right;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: -5px -5px 6px 10px;
  padding: 0;
  border: 1px solid #d5c4a6;
  border-radius: 50%;
  background: #f0e5d4;
  color: #173a2d;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
html.pmm-builder-shell body.tn-page .pmm-pop-close:focus-visible {
  outline: 3px solid #b88631;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  html.pmm-builder-shell body.tn-page .pmm-pop-overlay {
    padding: max(12px, env(safe-area-inset-top))
             max(10px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom))
             max(10px, env(safe-area-inset-left));
  }
  html.pmm-builder-shell body.tn-page .pmm-pop-dialog {
    max-height: calc(100dvh - 24px);
    scroll-padding-top: 58px;
  }
}