/* Storefront header: the only stylesheet that styles the public nav on faq, guide, plans and trial.
   It replaces header rules that used to be spread across mobile-v3, responsive-polish and theme-v10,
   several of them forced with importance flags. Loaded last, so plain selectors win by source order.
   Layout is set on the page itself: the switcher reserves a slot (.locale-slot) so the
   language control arrives without shifting the layout. */

html{scroll-padding-top:96px}

.nav-wrap{position:sticky;top:0;z-index:60;padding-top:env(safe-area-inset-top);background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid var(--line,#dbe8e4);box-shadow:0 1px 0 rgba(17,63,54,.04)}

.nav-wrap .nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:28px;height:72px;min-height:72px}

.nav-wrap .brand{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.nav-wrap .brand-copy{display:grid;min-width:0;line-height:1.2}
.nav-wrap .brand-copy b{font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-wrap .brand-copy small{font-size:11px;color:#778984;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav-wrap nav{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}
.nav-wrap nav a{position:relative;display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:10px;color:#52635f;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background-color .16s ease,color .16s ease}
.nav-wrap nav a:hover{background:#f1f8f6;color:var(--brand-dark,#087c6c)}
.nav-wrap nav a[aria-current="page"]{background:#e8f6f2;color:var(--brand-dark,#087c6c)}
.nav-wrap nav a[aria-current="page"]::after{display:none}
.nav-wrap a:focus-visible{outline:2px solid var(--brand,#12b89f);outline-offset:2px}

.nav-wrap .nav-actions{display:flex;align-items:center;gap:10px}
.nav-wrap .locale-slot{display:inline-flex;align-items:center;min-width:84px;min-height:34px}
.nav-wrap .nav-actions .button{min-height:40px;padding:0 16px;white-space:nowrap}

@media(max-width:1100px){
  .nav-wrap .nav{column-gap:18px}
  .nav-wrap nav a{padding:0 9px;font-size:13px}
}

/* Below 900px the links drop to a second row that scrolls sideways. The edges fade out
   so a cut-off link reads as "more to the side" rather than as a layout bug. */
@media(max-width:900px){
  html{scroll-padding-top:112px}
  .nav-wrap .nav{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "links links";height:auto;min-height:0;row-gap:0;column-gap:12px;padding-block:8px 0}
  .nav-wrap .brand{grid-area:brand}
  .nav-wrap .nav-actions{grid-area:actions}
  .nav-wrap nav{grid-area:links;justify-content:flex-start;margin-inline:-14px;padding:8px 14px 10px;border-top:1px solid rgba(219,232,228,.8);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent)}
  .nav-wrap nav::-webkit-scrollbar{display:none}
  .nav-wrap nav a{flex:0 0 auto;min-height:36px;padding:0 12px;font-size:13px}
}

@media(max-width:680px){
  .nav-wrap .brand-copy small{display:none}
  .nav-wrap .locale-slot{min-width:66px}
  .nav-wrap .brand-copy b{font-size:13px}
  .nav-wrap .nav-actions{gap:8px}
  .nav-wrap .nav-actions .button{min-height:38px;padding:0 12px;font-size:12px}
}

/* mobile-v3 forces a 43px logo below 430px; the header needs that width for the brand name. */
@media(max-width:430px){
  .nav-wrap .logo.wending-logo{width:36px!important;height:36px!important;flex-basis:36px!important}
  .nav-wrap .nav-actions .button{padding:0 10px;font-size:11px}
  .nav-wrap .brand-copy b{font-size:12px}
}

@media(max-width:380px){
  .nav-wrap .nav-actions .button{padding:0 10px;font-size:11px}
  .nav-wrap .brand-copy b{max-width:34vw}
}

/* The header sign-in is the one solid action; the legacy theme rule that styled it targeted
   the old markup and no longer matches. It has to be important because .button-ghost is forced to white with !important. */
.nav-wrap .nav-actions .wending-login-action{border:1px solid var(--wd-brand-600,#087c6c)!important;background:var(--wd-brand-600,#087c6c)!important;color:#fff!important;box-shadow:0 8px 20px rgba(8,124,108,.16)!important}