/*
 * weiss-robotics.com - navigation glue, own code.
 *
 * The look of the menus, the hamburger and the language selector comes from
 * the theme's own stylesheets (foldedNavi.css, offCanvasNavigation.css,
 * surroundingConditions.css, custom.css, ls_framework.css), unchanged. The
 * markup emits the classes they expect (useFoldedNavi, foldedNaviToggler,
 * lsUnfoldClosed/Open, #lsOcNavi, #lsOcNaviToggler, useOcNavi, sticky,
 * ls_languageSelector); wr-navigation.js switches them. This file only adds
 * what the old JavaScript did with inline styles and what the theme never had:
 * keyboard access.
 */

/* the theme hides #offCanvasContainer; lsjs set display:block on it at runtime */
#lsOcNavi #offCanvasContainer {
  display: block;
}

/* keyboard: a focused toggler is visible, a focused item shows its dropdown */
.foldedNaviToggler:focus-visible,
#lsOcNaviToggler:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.horizontalNavigation.useFoldedNavi ul.level_1 > li:focus-within > ul.level_2 {
  display: block;
}

/* Chinese and Japanese pages: Roboto has no CJK glyphs, so the system fonts take
   over; no spaces between words, so allow breaks anywhere. (Translation tool, 2026-09-24) */
html[lang^="zh"] body, html[lang^="ja"] body,
html[lang^="zh"] input, html[lang^="zh"] textarea, html[lang^="zh"] button {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", Roboto, sans-serif;
}
html[lang^="zh"] p, html[lang^="zh"] li, html[lang^="zh"] td, html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 {
  word-break: normal; line-break: auto; overflow-wrap: anywhere;
}

/* Korean pages: same system-font treatment as Chinese and Japanese above */
html[lang^="ko"] body, html[lang^="ko"] input, html[lang^="ko"] textarea, html[lang^="ko"] button {
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", Roboto, sans-serif;
}
html[lang^="ko"] p, html[lang^="ko"] li, html[lang^="ko"] td, html[lang^="ko"] h1, html[lang^="ko"] h2, html[lang^="ko"] h3 {
  word-break: keep-all; overflow-wrap: anywhere;
}

/* ---- the three values the main menu dropdown and the language selector share ----
   They are the values custom.css uses for #mainNavigation ul.level_2 (panel, item background) and for the label
   hover; the rules right below take them from here, so the selector can not drift away from the menu. */
:root {
  --wr-nav-panel: #007cbfde;
  --wr-nav-item: #005080;
  --wr-nav-hover: #FFC107;
}
#mainNavigation.horizontalNavigation ul.level_2 {
  background-color: var(--wr-nav-panel);
}
#mainNavigation.horizontalNavigation ul.level_2 > li > a,
#mainNavigation.horizontalNavigation ul.level_2 > li > strong {
  background-color: var(--wr-nav-item) !important;
}
#mainNavigation ul li span:hover {
  color: var(--wr-nav-hover);
}

/* ---- language selector in the header bar (templates/nav_wr_language.html5, wr-navigation.js section 3) ----
   Looks like a menu entry with a dropdown: same label style as #mainNavigation level 1 (upper case, 1.1rem, 500, white,
   yellow on hover), same chevron (Ionicons f35f closed, f365 open), same panel (translucent blue, shadow, rounded
   bottom) with items on the dark blue, upper case, light weight; hover and the current language are yellow like the
   menu. Replaces the old code links: the theme rules that hid them below 751px and moved them into the off-canvas
   menu (custom.css, surroundingConditions.css) are overridden here by selector, the theme files stay unchanged. */
.wr-lang {
  position: relative;
}
#headerLine2 .language_ls {
  float: right;
  margin-right: 20px;
  text-transform: uppercase;
  font-weight: 400;
}
#headerLine2 .language_ls .ls_languageSelector.mod_ls_cnc_selector {
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible; /* the framework's .block clips; the open list hangs below the bar */
}

.wr-lang-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px 0 12px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.wr-lang-button::-webkit-details-marker {
  display: none;
}
.wr-lang-button::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: url(../images/globus_white_language.svg) center / contain no-repeat;
}
.wr-lang-button::after {
  content: "\f35f";
  flex: none;
  width: 16px;
  font-family: Ionicons;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.wr-lang[open] > .wr-lang-button::after {
  content: "\f365";
}
.wr-lang-button:hover {
  color: var(--wr-nav-hover);
}
.wr-lang-button:focus-visible,
.wr-lang-item:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.wr-lang-list {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 9920;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--wr-lang-rows, 7), auto);
  grid-auto-columns: minmax(150px, 1fr);
  gap: 2px 5px;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--wr-nav-panel);
  border-radius: 0 0 4px 4px;
  box-shadow: rgba(0, 0, 0, .45) 0 25px 20px -20px;
}
#headerLine2 .wr-lang-list li {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
}
#headerLine2 .wr-lang-list li::before {
  content: none;
}
/* scoped with #headerLine2: the theme styles every link and span in the old selector (white, 11px top padding) */
#headerLine2 .wr-lang .wr-lang-list .wr-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 5px 20px;
  background: var(--wr-nav-item);
  color: #fff;
  font-size: 1rem;
  font-weight: 100;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
#headerLine2 .wr-lang .wr-lang-list a.wr-lang-item:hover {
  color: var(--wr-nav-hover);
}
#headerLine2 .wr-lang .wr-lang-list .wr-lang-item[aria-current="true"] {
  color: var(--wr-nav-hover);
  font-weight: 700;
}
#headerLine2 .wr-lang .wr-lang-list .wr-lang-item[aria-current="true"]::after {
  content: "\2713";
}
#headerLine2 .wr-lang .wr-lang-list .wr-lang-item:focus-visible {
  outline-color: #fff;
}

/* phones: the framework gives the logo 7/12 of the bar (.lsfwk-small-7), more than its image needs; with a fixed
   width the button, even with a long name like PORTUGUES, stays in the same row */
@media screen and (max-width: 750px) {
  #headerLine2 .logo.lsfwk-small-7 {
    width: 165px !important;
  }
  #headerLine2 .navWrapper {
    padding-right: 4px;
  }
  #headerLine2 .language_ls {
    margin-right: 0;
  }
  .wr-lang-button {
    gap: 4px;
    padding: 0 0 0 4px;
    font-size: .9rem;
  }
  .wr-lang-button::before {
    width: 20px;
    height: 20px;
  }
  .wr-lang-button::after {
    width: 12px;
    font-size: .9rem;
  }
}

/* very narrow phones (360px): the logo gives up a little more width so the longest name still fits in the row */
@media screen and (max-width: 380px) {
  #headerLine2 .logo.lsfwk-small-7 {
    width: 140px !important;
  }
}