/* Simplicity - navigation layout and style                 */
/* Created 2020-2021 by Jan / gosimplicity.org     */
/*                                                          */
/*                                                          */
/* last update: 2024-08-19                                  */

:root {
  /* --nav-border-radius: 1em 1.04em 0.5em 1.5em / 1.4em 1.1em 0.9em 0.35em; */
  /* --nav-border-radius: 1rem; */

  font-size: clamp( 1rem, 1.1vw, 1.1vw ); /* make menu usable on all screen sizes */

  --nav-menu-below-make-seamless-magic-value: 0.2rem;
  --nav-main-menu-entries-padding-block-start: 0.25rem; /* this needs to be the same for all main menu items to align text baseline */
  --nav-li-padding-inline-value-one: 0.4rem;
  --nav-li-padding-inline-value-two: 0.3rem;
  --home-bg-image-width-hamburger: calc( var(--home-bg-image-width) + 1rem );
}

/*
fixthem: inset-* is still unsupported by chrome, safari. Update: support should be universal by mid-november (both have committed fixes).
  --> as this is absolutely essential to support all scripts (only horizontal for now), stick to using inset-* nevertheless
  --> KaiOS will support this in 2021 (when they start updating FirefoxOS)

  Similarly sad story with :dir(). Chrome and Safari are still not supporting this, but we absolutely need and do use it. So use Firefox.
*/

nav input[type="checkbox"] {
  /* display: none can't be clicked on with keyboard */
  opacity: 0;
}

/* any opened (sub-)menus */
nav input[type="checkbox"]:checked + label {
  /* color: #dcbed7; */
  /*
  outline-color: #ca6036;
  outline-style: dotted;
  outline-width: 5px; */
  /*
  outline-width: 1px;
  outline-color: var(--main-contrast-color); */
  /* border-radius: var(--nav-border-radius); */ /* only for opened menus to prevent ugly artifacts around the corners */ /* 2020-12-31: seems not needed anymore */
  box-shadow: 0px 0px 7px -1px var(--nav-selected-highlight-color);
}

nav input[type="checkbox"]:focus + label, nav input[type="checkbox"]:hover + label,
nav input[type="submit"]:focus, nav input[type="submit"]:hover {
  /* outline: #ca6036 dotted 2px; */
  /* outline: #ca6036 inset 2px; */
  color: var(--header-contrast-color);
  transition: background-color 0.4s  ease-in-out;
  box-shadow: 0px 0px 7px 1px var(--header-contrast-color); /* was --nav-selected-highlight-color */
}

/* append menu state indicator: closed */
nav input[type="checkbox"] + label::after {
  content: " ▾";
}

/* append menu state indicator: open */
nav input[type="checkbox"]:checked + label::after {
  content: " ▴";
}

/* append sub-menu state indicator: closed */
nav ol li ol input[type="checkbox"] + label::after {
  /* content: " ▸"; */
  content: " ▾";
}
/* append sub-menu state indicator: open */
nav ol li ol input[type="checkbox"]:checked + label::after {
  /* content: " ◂"; */
  content: " ▴";
}

nav {
  /* visibility: collapse; */
  height: var(--show-header, 4em ); /* otherwise, header has no height */ /* was: min-height - test with headers removed */
  top: 0px;
  font-size: 1rem;
  text-align: start;
}

header {
  font-size: 1rem; /* do not inherit large size from main. Can't set on .breadcrumbs directly as that would cause gap between main nav */
}

.breadCrumbs {
  display: inline-block; /* block makes it stretch across the whole page */
  text-shadow: 0px 0px 5px var(--nav-text-shadow-color);
  background-image: var(--header-bg-image);
  background-color: var(--header-bg-color);
  background-blend-mode: multiply;
  background-attachment: fixed;
  background-repeat: var(--bg-repeat);
  background-size: var(--bg-size);
  background-position-x: center;
  background-position-y: var(--bg-position-y);
  line-height: 2;
  user-select: none;

  /* border-block-start: 1px solid var(--header-bg-color); */
  border-inline-start-style: solid;
  border-inline-end-style: solid;
  border-block-start-style: none;
  border-block-end-style: solid;
  border-color: var(--infobox-border-color);
  border-width: 1px;

  /* border-start-start-radius: 1.6rem;
  border-start-end-radius: 1.6rem; */
  border-end-start-radius: 2rem;
  border-end-end-radius: 1.6rem;
  padding-inline-start: 1.3rem;
  padding-inline-end: 1.5rem;
  padding-block-start: var(--menu-block-end-padding); /* match -start and -end for visual harmony. Can be 0 for trim look, 0.2 to give some breathing room. */
  padding-block-end: 0rem;
  margin-inline-start: 3.8rem; /* only if mainMenu has inline-start borders or margin */
  margin-inline-end: auto;
  /* margin-block-start: 0.6rem; */
  /* margin-block-start: var(--nav-menu-below-make-seamless-magic-value); */
}

.breadCrumbs a:hover {
  position: relative; /* this prevents box-shadow appear cut-off 'under' other breadcrumb if breadcrumbs do not fit on one line. */
}

.breadCrumbs a {
  text-decoration-color: var(--header-contrast-color);
}

.breadCrumbs a:hover, .breadCrumbs a:focus {
  color: var(--header-contrast-color);
  box-shadow: 0px 0px 7px 1px var(--header-contrast-color);
}

.breadCrumbs a.nolink {
  display: inline-block;
  color: var(--nav-link-empty-color);
  background-image: inherit;
  background-blend-mode: inherit;
  background-attachment: inherit;
  background-repeat: inherit;
  background-size: inherit;
  background-position-x: inherit;
  background-position-y: inherit;
  border-radius: initial; /* prevent ugly artifacts */
  box-shadow: none;
}

/* .breadCrumbs:not(:empty)::before { */
.breadCrumbs > .navPathSymbol::before { /* need extra span here to isolate for mirroring for dir="rtl" */
  content: "⚐";
  padding-inline-end: 0.7rem;
}

.breadCrumbs:empty {
  display: none; /* do not use up space on homepage */
}

/* hide menu button on wide screens */
nav > label, nav > input {
  display: none;
  visibility: hidden;
}

/* show main menu on wide screens */
.mainMenu {
  display: initial;
  border-end-start-radius: var(--main-menu-border-radius);
  border-end-end-radius: var(--main-menu-border-radius);
  padding-block-start: var(--show-header, var(--menu-block-end-padding) ); /* hide if header is not shown */ /* this was --nav-ol-block-padding */
  padding-block-end: var(--show-header, var(--nav-ol-block-padding) );
  margin-block-start: 0rem;
}

/* in case header is light and content is dark, we need a different contrasting color */
.mainMenu a:not(.nolink):focus, .mainMenu a:not(.nolink):hover {
  color: var(--header-contrast-color);
  outline-color: var(--header-contrast-color);
  box-shadow: 0px 0px 7px 1px var(--header-contrast-color);
}

/* first element of main menu */
.mainMenu > li:nth-child(2) {
  margin-inline-end: auto; /* fill up space */
}

/* last element of main menu */
.mainMenu > li:nth-last-child(2) {
  margin-inline-start: auto; /* fill up space */
}

/* for background image */
.menuButton {
  background-image: var(--header-bg-image);
  background-color: var(--nav-menu-bg-color);
  background-blend-mode: multiply;
  background-attachment: fixed;
  background-repeat: var(--bg-repeat);
  background-size: var(--bg-size);
  background-position-x: center;
  background-position-y: var(--bg-position-y);
}

/* border between closed hamburger menu and breadcrumbs or page content. */
.menuButton, .mainMenu {
  border-block-end-style: solid;
  border-block-end-color: var(--infobox-border-color);
  border-block-end-width: 1px;
}

nav .mainMenu {
  position: absolute;
  /* where do these pixels come from? */
  max-height: calc( 3rem - var(--nav-menu-below-make-seamless-magic-value) ); /* max- instead of height, to allow collapsing in case all header items are disabled */
  inset-inline-start: 0; /* center */
  inset-inline-end: 0;
  background-color: var(--nav-menu-bg-color); /* child can't be more opaque than parent... */
  background-image: var(--header-bg-image);
  background-blend-mode: multiply;
  background-attachment: fixed;
  background-repeat: var(--bg-repeat);
  background-size: var(--bg-size);
  background-position-x: center;
  background-position-y: var(--bg-position-y);
  z-index: 10;
}

nav > ol {
  /* border-start-start-radius: 3rem;
  border-start-end-radius: 3rem; */
}

nav label, nav a, nav .menuButton, nav input[type="submit"] {
  height: 2.2rem; /* make entries large targets */
  line-height: 2.2rem; /* center text vertically */
  overflow: hidden;
  text-overflow: ellipsis; /* not working */
  /* background-color: #2d0e1d; */
  /* background-color: #35022b; */
  /* outline: #cacaca solid 2px; */
  /* text-decoration: underline; */
  text-shadow: 0px 0px 5px var(--nav-text-shadow-color);
  /* box-shadow: 0px 0px 3px var(--nav-selected-highlight-color); */ /* lighter appearance without this */
  border-radius: var(--nav-border-radius);
  cursor: pointer;
  user-select: none; /* prevent 'selection-marks' when clicking repeatedly on menu */
  padding-inline-start: 8px;
  padding-inline-end: 8px;
  padding-block-start: var(--nav-main-menu-entries-padding-block-start); /* was: 4px */
  padding-block-end: 4px;
}

/* display border around empty 'links' */
nav li a.nolink, nav li a.nolink:hover {
  background: transparent; /* fixes .nolink from overlapping box-shadow of siblings. Very subtle */
  font-family: var(--nav-font);
  /* border-radius: 0; */ /* prevent ugly corner artifact */
  box-shadow: none;
  border-inline-start: 4px dotted var(--nav-selected-highlight-color);
}

/* highlight active (sub-)menus */
/* nav .navSiteNavigation label.currentPage { */
.currentPage {
  border-inline-start: 4px dotted var(--nav-selected-highlight-color);
  /* text-decoration: underline; */
  /* border-inline-end: 4px dotted var(--nav-selected-highlight-color); */
}

nav li label, nav li a {
  transition: box-shadow ease-in-out 0.2s;
}

/* mark pages in menu with existing translation */
/* update: this could be simplified. Remove below comments after 2021-06-15. */

/* when language selection entries are a mix of ltr and rtl writing modes */
/*   we need to make sure that the tickmark appears on the same side of the text - regardless of writing mode */
/* the 'html[dir="AAA"]' ar needed so that the '.nolink' (current language) is aligned */
/* defining separate 'content:' for rtl and rtl itms is needed to ensure they are lined up */
/*
html[dir="ltr"] nav li[dir="ltr"] a.linkTargetFound::after, html[dir="ltr"] nav li[dir="rtl"] a.linkTargetFound::before,
html[dir="rtl"] nav li[dir="ltr"] a.linkTargetFound::before, html[dir="rtl"] nav li[dir="rtl"] a.linkTargetFound::after { */
nav li a.linkTargetFound::after {
  /* the extra spaces (\0000a0) _after_ the mark are for entries in rtl mode. They make the distance of the mark equal as in ltr mode. */
  content: "\0000a0\0000a0✓\0000a0\0000a0";
  color: var(--nav-link-checkmark-color);
  top: -0.3em; /* superscript */
  font-size: 0.83em;
  line-height: 1em; /* prevent line-height from becoming larger */
  position: relative; /* make line-height work */
}

/* fix slight misalignment of lang menu item text start when */
/*   item is rtl and not current language (.nolink), */
/*   and the page is rtl */
/* nav .navLang a:dir(rtl):not(.nolink) { */
nav .navLang a:not(.nolink) {
  border-inline-start: none;
}

/* ... and these, too */
nav .navLang li:dir(ltr) {
  /* these are very subtle! */
  padding-inline-start: var(--nav-li-padding-inline-value-two);
  padding-inline-end: var(--nav-li-padding-inline-value-one);
}

nav .navLang li:dir(rtl) {
  /* these are very subtle! */
  padding-inline-start: var(--nav-li-padding-inline-value-one);
  padding-inline-end: var(--nav-li-padding-inline-value-two);
}

/* align items with currently selected (.nolink) item */
nav .navLang li:dir(ltr) a:not(.nolink) {
  border-inline-start: 4px solid transparent;
  border-inline-end: 4px solid transparent;
}

nav .navLang li:dir(rtl) a:not(.nolink) {
  border-inline-start: 4px solid transparent;
  border-inline-end: 4px solid transparent;
}

/* mark pages in menu with no translation */ /* do not use - use positive confirmation instead */
nav li a.linkTargetNotFound {

}

nav li a.linkTargetNotFound::after {
  /* content: "\0000a0\0000a0X"; */ /* showing negative mark would indicate 'nothing here', discourage from changing language */
}

/* color for all navigation text */
nav label, nav a, nav input[type="submit"] {
  color: var(--nav-menuitem-text-color);
  transition: background-color 0.2s  ease-out;
}

nav input[type=checkbox]:checked ~ ol {
  display: block; /* was: flex */
  flex-direction: column;
}

/* make main menu span the whole screen */
nav > input[type=checkbox] ~ ol {
  /* display: block; */
  display: flex;
}


/*
#main-menu {
  position: absolute;
  inset-inline-start: -999em;
}
*/

nav ol {
  visibility: initial;
  display: none;
  inline-size: 100%; /* apparently needed for webkit to use whole inline-size */
  list-style: none;
  padding-inline-start: 0em;
  padding-inline-end: 0em;
  padding-block-start: var(--nav-ol-block-padding);
  padding-block-end: var(--nav-ol-block-padding);
  margin-block-start: 0.4rem;
  margin-block-end: 0rem;
  /* background-color: #4f293b; */
  /* border-block-end: 1px solid #000000; */
}

.navSiteNavigation:focus-within, .navSiteNavigation:hover {
  z-index: 10; /* if more than one menu is open, ensure the currently used menu is on top */
}

/* when indenting sub-menus, no need to mark them with a border */
.navSiteNavigation ol, .navSiteNavigation li {
  border-inline-start: none;
}

nav ol label {
  display: inline-block; /* allow line-height to have effect, to center text vertically */
  /* min-width: 11rem; */ /* make label same width across all languages. Bad idea. */
}

nav ol li {
  position: relative; /* prevents box-shadow from being cut off at block-start. Also aligns items properly in block-direction. */
  /* flex-shrink: 0; */ /* prevent main menu items from jumping around when opening */
  min-width: max-content;
}

nav ol li, nav input[type="submit"] {
  opacity: 1;
  /* display: block; */
  /* flex-direction: column;
  justify-content: flex-start;
  align-items: self-start; */
  /* set to same width as submenu entries to prevent menu from becoming wider when submenu expanded */
  /* width: 12rem; */ /* todo: delete after 2021-08-01 */
  /* max-width: 16.4rem; */
  padding-inline-start: 0.4rem;
  padding-inline-end: 0.4rem;
  /* margin-block-end: 0.8rem; */ /* prevent overlap if menu wraps to next line */
}

nav ol li ol {
  /* top: 3.6rem; */ /* same as main menu height */
  top: 0.4rem;
  position: relative;
  padding-block-start: 0.4rem; /* eliminate vertical space between menu and menu entries*/
  margin-block-start: 0;
  /* width: 100vw; */ /* to make menus full-width */
  width: 14rem;
  inset-inline-start: 0;
}

.navSiteNavigation ol {
  width: max-content;
}

.navLangSymbol {
  /* speaking head symbol doesn't render as plain text even with u+fe0e appended */
  /*   so this hack to tone its appearance down */
  /*   fixme: so, find a different glyph, or use svg or create own font */
  /* filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(220deg); */ /* colorize - but note, this doesn't reflect theme color */
  filter: grayscale(100%) invert(1) brightness(100%); /* simply tone it down */
  text-shadow: none; /* keep legibility */
  text-shadow: 0px 0px 1px white; /* this color is inverted, too... */
  font-size: 1.4em;
  vertical-align: middle; /* keep baseline aligned even if font-size is larger */
}

.navSiteNavigation ol, .navLang ol {
  position: absolute; /* this fixes jumping menus! :) */
  /* top: initial; */
}

.navSiteNavigation ol ol {
  top: initial; /* otherwise top from parent gets used, which we creates huge space above menu entries */
}

.navSiteNavigation > ol, .navLang > ol {
  top: calc( ( 3rem - var(--nav-menu-below-make-seamless-magic-value) ) + ( 0.6rem ) ); /* same as height: nav .mainMenu + padding-block-end: nav ol */
}

nav > ol > li > ol { /* mark menu borders for clarity */
  /* box-shadow: 0px 0px 7px -1px var(--nav-selected-highlight-color); */
  /* can't use border, as inline-start border does not show */
  box-shadow: 0px 2px 3px -2px var(--nav-selected-highlight-color),
             -2px 1px 3px -2px var(--nav-selected-highlight-color),
              2px 1px 3px -2px var(--nav-selected-highlight-color);
}

/* background for opened menus */
.navSiteNavigation > ol, .navLang > ol,
.navSiteNavigation ol label, .navSiteNavigation li a, .navLang li a {
  background-color: var(--nav-menu-bg-color); /* position: absolute doesn't inherit background? */
  background-image: var(--header-bg-image);
  background-blend-mode: multiply;
  background-attachment: fixed;
  background-repeat: var(--bg-repeat);
  background-size: var(--bg-size);
  background-position-x: center;
  background-position-y: var(--bg-position-y);
}

.navSiteNavigation > ol, .navLang > ol {
  width: min-content;
  /* padding-inline-start: 100vw; */ /* enable these three to make menus fill the screen horizontally */
  /* padding-inline-end: 100vw; */
  /* margin-inline-start: -100vw; */
}

.navSiteNavigation ol label, .navSiteNavigation ol a, .navLang ol a {
  /* border-radius: 0; */ /* only on focus to prevent corner artifacts */
}

.navSiteNavigation ol label:focus-within, .navSiteNavigation ol a:focus, .navLang ol a:focus,
.navSiteNavigation ol label:hover, .navSiteNavigation ol a:hover, .navLang ol a:hover {
  /* border-radius: var(--nav-border-radius); */ /* somehow label:focus-within doesn't work */ /* 2020-12-31: doesn't seem necessary anymore */
}

/* .navSiteNavigation > label, .navLang > label { */
/* nav > ol > li > label, nav > ol > li > a:hover, nav > ol > li > a:focus,
.navContactHighlight a, .navContactHighlight input { */
  /* for main navigation items */
  /* :hover/focus on a to prevent logo from being cut. */
  /* at least make the main menus round like the other header items */
.navHome a:focus, .navHome a:hover {
  border-radius: var(--nav-border-radius);
  border-end-start-radius: 1em; /* do not cut off logo */
}

.navContactHighlight a:focus, .navContactHighlight a:hover {
  border-end-end-radius: 1em; /* round this corner to coincide with rounded header corner */
                              /* fixme: in case navContactHighlight is hidden, would need to apply to next item... */
}

/* Do not cut off logo from Home: use square corners only if navHome has a background image. */
nav > ol > li.navHome > a {
  /* set border radius to invalid = 0 if '--home-bg-image' is set, to '--nav-border-radius' otherwise */
  /* XXX re-enable???
  border-radius: var(--home-bg-image, var(--nav-border-radius) );
  border-end-start-radius: 1em; *//* round this corner to coincide with rounded header corner */
}

.navSiteNavigation ol label, .navSiteNavigation li a, .navLang li a {
  min-width: 12rem;
  width: min-content;
  background: transparent; /* fixes corner artifacts with background-radius */
  /* padding-block-start: 0.6rem; */
  /* padding-block-end: 0.6rem; */
}

/* indent sub-menus */
nav ol ol ol {
  padding-inline-start: 1rem;
}

nav ol li ol a, nav ol li ol label {
  width: 100%; /* make all submenu-entries equal width */
  /* max-width: 100%; */ /* make all submenu-entries equal width */
  white-space: nowrap ; /* prevent line breaks, get maximum content in */
  overflow: hidden; /* cutt off overlong menu entries */
  padding-inline-start: 1rem; /* if link becomes larger than parent menu, borders will disappear */
  padding-inline-end: 0rem;
}

.navSiteNavigation ol ol {
  position: relative; /* otherwise, submenus will overlap */
}

nav ol li ol li.currentPage {
  border-inline-start: none;
}

nav ol li label, nav ol li a {
  border-inline-start: 4px dotted transparent; /* align menu items with "currentPage" item */
}

nav ol li ol a {
  /* width: 12rem; */ /* make all submenu-entries equal width */
  width: 100%;
  padding-inline-start: 1em; /* if link becomes larger than parent menu, borders will disappear */
  padding-inline-end: 1em; /* was 0 - was there a reason? If nothing breaks, remove this comment */
}

/* only for submenus: spearate entries with space */
nav ol li ol li {
  /* display: block; */ /* was: flex */
  top: 0.4rem;
  width: 100%;
  box-sizing: border-box; /* make all submen entries' -end borders align */
  /* display: block; */ /* inline for buttons, block for stacked entries */
  /* padding-block-end: 0.9rem; */ /* space between menu entries */
  padding-inline-start: var(--nav-li-padding-inline-value-one); /* 0rem: align menu entries with parent menu */
  padding-inline-end: var(--nav-li-padding-inline-value-two);
  margin-block-end: 0.2rem; /* remove ridiculously large space from parent */
}

nav ol li ol li ol {
  position: relative;
  top: 0rem;
}

nav ol li ol li ol li {
  /* border-inline-start: 4px solid var(--main-contrast-color); */ /* highlight mark submenu entries */
  border-inline-start: 4px solid var(--nav-selected-highlight-color); /* highlight mark submenu entries */
}

nav ol a {
  display: inline-block;
  /* width: 90vw; */ /* only if nav ol li is display: block */
  padding-inline-start: 1em;
  padding-inline-end: 1em;
  padding-block-start: var(--nav-main-menu-entries-padding-block-start);
  padding-block-end: 0.25rem;
  text-decoration: none;
}

/* maybe add: nav ol input[type="submit"]:focus, nav ol input[type="submit"]:hover */
/* 'nav ol input' without 'type=', so it can be easily overridden without important */
nav ol a:focus, nav label:focus, nav input[type="submit"]:focus,
nav ol a:hover, nav label:hover, nav input[type="submit"]:hover {
  outline-style: none; /* disable UA-default outline for links */
  outline-width: 1px; /* was 2px */
  /* background-color: #000000; */
  transition: background-color 0.4s  ease-in-out;
  box-shadow: 0px 0px 7px 1px var(--header-contrast-color); /* was --nav-selected-highlight-color */
  z-index: 50; /* prevent box-shadow from being overlapped */
}

/* highlight hamburger menu button when used */
/* unfortunately, we can't simply use .menuButton: focus, as the checkbox will get the focus, not the menu button */
nav .menuButton:hover,
nav > input#chkMenu:focus + .menuButton  {
  background-color: var(--nav-menuButton-bg-color-focus);
}

nav ol a:active {
  /* outline-width: 24px; */
  box-shadow: 0px 0px 7px 4px var(--nav-selected-highlight-color);
}

nav .navHome a {
  background-image: var(--home-bg-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: 0.5em; /* do not cut off logo with rounded header borders */
  background-position-y: center;
  padding-left: var(--home-bg-image-width); /* ATTENTION: on purpose using left, not inline-start to keep logo layout the same in rtl pages */
  border-radius: 0; /* do not inherit radius to prevent logo from being cut off */
  transition-property: none; /* do no animate the box-shadow, as this would animate the border-radius, which looks ugly */
  margin-inline-start: 1rem;
  margin-inline-end: 1rem;
}

.mainMenu > .navHome a:empty, .mainMenu > .navAbout a:empty {
  display: none; /* if any of these links are disabled in config, hide them completely */
}

nav .navAbout a {
  display: inline-block;
  max-inline-size: 20vw;
  max-height: max-content;
}

nav .navAbout a {
  /* fixme: is the navAbout logo still supported? Or has it been declared redundant as you should use navHome image instead? */
  /* border-radius: 0em; */ /* do not cut off logo. There is no navAbout logo. */
  border-inline-start: 0rem; /* remove unsightly gap*/
  /* padding-inline-start: 0rem; */ /* make image fit linke without unsightly paddings */
  /* padding-inline-end: 0rem; */ /* fixme: these inline paddings should be 0 when using an image, 1em when using text... waiting for has()... */

  /* note: the 'pargin/madding' needs to be same as other menu items. That is, 4px. */
  /*         when using image, margin should be set, with zero padding. Makes image look better. */
  /*         when using text, padding should be set, with zero margin. This ensures button height for hover-shadow is equal to that of other menu items. */
  /*       We default to text (no image) here, so need to overwrite in site specific style if using image. */

  /* padding-block-start: 0rem;
  padding-block-end: 0rem; */
  padding-block-start: 4px; /* same as padding for other items in menu */
  padding-block-end: 4px; /* same as padding for other items in menu */
  /* margin-block-start: 0.25rem; */ /* move image back in place. Same value as padding was. */
}

nav .navAbout a:hover { /* need to only enable this if it :has(img). Need parent selector! */
  /* border-radius: inherit; */ /* currently disabled as it would also apply when only text and no img is used */
}

nav .navAbout img {
  display: block; /* display image properly aligned */
  max-inline-size: 100%; /* ensure image doesn't get cut off if it is too wiede or tall */
  max-block-size: 100%;
}

.navMainMenuEntry {
  width: 11rem;
  flex-shrink: 0;
}

nav .mainMenu .navContactHighlight {
  /* Need to do this properly and allow contacthighlight to be omitted from HTML in the first place. */
  /* display: var(--show-header); */ /* temporary hotfix. Hide if header is hidden. */
  /* position: absolute; */
  /* display: inline-block; */
  /* flex-basis: 14rem; */
  /* width: 14rem; */
  /* top: 0.6rem; */ /* fixme: needs to be positioned automatically */
  /* inset-inline-end: 3rem; */
  /* line-height: 100%; */
  /* line-height: 2.2rem; */
  /* vertical-align: bottom; */
  margin-inline-start: 0rem;
  margin-inline-end: 1rem;
}

nav .mainMenu .navContactHighlight input, nav .contactinfo {
  font-size: 1.7rem; /* 145% */
  /* width: auto; */
  height: 100%;
  border: none;
  /* padding-inline-start: 2rem; */
  /* padding-inline-end: 2rem; */
}

nav .navContactHighlight form input:hover, nav .navContactHighlight form input:focus {
  outline-style: none; /* override from main stylesheet */
}

.navContactHighlight a {
  display: block;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
  border: 0px;
}

.navSiteNavigation, .navLang {
  position: relative;
  display: inline-block;
}

/* these need to be mirrored in rtl layouts. Once browsers implement it, .mirrorHorizIfRtl:dir(rtl) is better */
.mirrorHorizIfRtl[dir="rtl"] {
  display: inline-block;
  transform: scaleX(-1);
  direction: ltr; /* make logical properties for padding, margin work correctly. */
    /* This seems wrong - if logical properties were working, this should not be necessary.
       It looks as though the logical padding-inline-end is assuming ltr even with dir="rtl"
       - maybe the flag icon in breadcrumbs triggers auto ltr mode? */
}

/* anything below 1280px wide, show hamburger menu. Otherwise risk of cutting off menu items is too high. */
@media screen and ( max-width: 1279px ) {
  /* fixme: change everything in here from rem -> em, where sensible. Though it should not be a huge deal as it's only for narrow screens. */

  nav {
    height: min-content; /* make breadcrumbs flush to main menu button */
  }

  /* show menu button on narrow screens */
  nav > label, nav > input {
    display: initial;
    visibility: inherit;
  }

  /* nav label, nav a, nav .menuButton, nav input[type="submit"] { */
  /* fixme: this list is a huge mess! */
  .mainMenu .navHome a,  .mainMenu .navAbout a,
  nav .mainMenu .navSiteNavigation li label, nav .navSiteNavigation > ol > li a:hover, .navSiteNavigation > ol > li a:focus,
  .mainMenu .navLang li a, .navContactHighlight a, .navContactHighlight input,
  nav input[type="checkbox"] + label, nav input[type="checkbox"]:checked + label, nav input[type="submit"] {
    border-radius: 0rem; /* would be nice. But needs nested margins/borders sorted out - need a way to specify fixed margin from -end */
  }

  nav .menuButton {
    /* make menuButton full-width */
    /* display: block; */
    display: var(--show-header, block);
    width: 100vw;
    padding-inline-start: 1rem;
    padding-inline-end: 0px;
  }

  .breadCrumbs {
    margin-inline-start: 0rem;
    /* margin-block-start: -0.3rem; */ /* only needed if .menuButton is inline-block */
    padding-block-end: 1rem; /* avoid 'pointy corners' of the link bounding box from sticking out over the border. */
  }
    
  /* hide main menu on narrow screens */
  .mainMenu {
    display: none;
    border-block-start: 1px solid var(--nav-menu-bg-color); /* line between menuButton and mainMenu */
    padding-inline-end: 0.75rem;
    margin-inline-start: 0rem;
    margin-inline-end: 0rem;
    margin-block-start: -0.1rem; /* 0.3rem if .menuButton is inline-block. remove gap between menuButton and mainMenu */
    margin-block-end: 0.2em;
  }

  nav .mainMenu {
    height: -moz-max-content; /* for old KaiOS <= 2.51 */
    height: max-content; /* restore menu functionality that gets broken by the fix for jumping menus in wide viewports */
    max-height: -moz-max-content; /* for old KaiOS <= 2.51 */
    max-height: max-content; /* for small screens with hamburger menu, we need to fit all content if the menu / header is displayed */
  }

  nav .navAbout a { /* 2020-12-31: was: nav .mainMenu .navAbout a */
    display: block; /* so text-shadow can expand to whole line */
    max-inline-size: 100vw; /* make text-shadow apply to whole width, like the other items */
    /* xmax-inline-size: min( 100%, 90vw ); */
    padding-inline-start: 0.6em; /* fixme: this was 0, but 0 mis-aligns on hamburger menu. Need to check why it was 0 (image?) */
    padding-block-start: 0.6em; /* fixme: magic number to center image */
    height: 2.8em; /* same height as the other items. It's a magic number: 3.4rem - padding-block-start */
  }

  UNUSED nav .navAbout img {
    block-size: 2.2rem;
    line-height: 2.2rem;
    max-inline-size: 90vw; /* allow logo to almost fill the width of narrow screens */
    margin-inline-start: calc( 1rem - 4px ); /* 4px is border of other elements */
  }

  .navSiteNavigation > ol, .navLang > ol {
    top: initial; /* reset for narrow screens to prevent huge gap */
  }

  nav ol {
    /*clear: both; */
    display: none;
    overflow: hidden; /* wrap margins? */
    padding-block-start: 0.25rem;
    padding-block-end: 0.5rem;
    margin-inline-start: -1rem;
    margin-inline-end: -1rem;
    margin-block-start: -0.75rem;
    margin-block-end: -0.75rem;
  }

  nav ol label {
    padding-block-end: 0.25rem;
    margin-block-start: 0.8rem; /* 2.4rem space above menu entries*/
    margin-block-end: 0.5rem; /* orig: 0.8rem */
  }

  nav ol li {
    display: block; /* fixme: this is only if wide screens use something other than display: block */
    /* text-align: start; */ /* remove this if everything works ok */
    width: 100vw; /* make all menus, submenus and entries full-width */
    padding-inline-start: 0rem;
    padding-inline-end: 0rem;
  }

  /* .navSiteNavigation > label, .navLang > label { */
  nav > ol > li label, nav > ol > li a {
    border-radius: 0rem; /* for narrow screens, make main menus the same style as other items */
  }

  nav ol li ol, .navLang ol {
    width: 100vw;
    padding-block-start: 0.4rem; /* orig: 0.1rem */
    margin-block-start: 0rem; /* space between sub-menu and menu entries*/
    border-inline-start: 4px solid var(--nav-selected-highlight-color); /* highlight mark submenu entries */ /* XXX check */
    margin-block-end: 2px;
  }

  .navSiteNavigation ol, .navLang ol {
    position: relative; /* restore menu functionality that gets broken by the fix for jumping menus in wide viewports */
  }

  /* only for submenus: spearate entries with space */
  nav ol li ol li {
    padding-inline-start: initial;
    padding-inline-end: initial;
    padding-block-end: 0.2rem; /* space between menu entries */
    margin-block-end: 0rem;
  }

  nav ol li ol li a, nav ol li ol li label {
    margin-inline-start: 0.4rem; /* give space to 'current item' indicator */
  }

  nav ol li ol li a {
    margin-block-start: 0rem;
    margin-block-end: 0.2rem;
  }

  nav ol li ol li ol {
    margin-inline-start: 0.3rem;
    border-inline-start: none; /* remove double border (from wide-screen menu) */
  }

  /* for narrow screens, do not indent sub-menus... */
  nav ol ol ol {
    padding-inline-start: initial;
  }

  /* ... but do mark submenus with border */
  .navSiteNavigation ol li ol li, .navSiteNavigation li {
    border-inline-start: 4px solid var(--nav-selected-highlight-color); /* highlight mark submenu entries */
  }

  nav ol li ol li ol li {
    /* margin-block-start: 0.2rem; */ /* restore top margin to make hover outline visible. creates space btween menu entries */
  }

  nav ol li ol li ol li:nth-last-child(n+2) a {
    /* margin-block-end: 0rem; */ /* compensate for top margin: remove bottom margin. But not on last element */
  }

  .navSiteNavigation > ol, .navLang > ol,
  .navSiteNavigation li a, .navSiteNavigation ol label, .navLang li a {
    width: inherit; /* restore menu functionality that gets broken by the fix for jumping menus in wide viewports */
      /* fixme: too many times is width defined for the (sub-)menus */
    height: min-content; /* needed for words to break */
  }

  .navSiteNavigation label {
    height: min-content; /* needed for words to break */
  }

  .navSiteNavigation label span, .navSiteNavigation a span, .navContactHighlight input[type=submit], .navContactHighlight a {
    display: inline-block; /* needed for words to break */
    white-space: normal;
    word-wrap: break-word;
  }

  .navSiteNavigation label span, .navSiteNavigation a span {
    max-width: 70vw; /* needed for words to break. fixme: random guess - need a way to extend to end of screen */
  }

  nav .mainMenu .navContactHighlight input[type=submit], nav .mainMenu .navContactHighlight a {
    height: max-content; /* needed for words to break */
    width: 90vw; /* to ensure line wraps before overlapping border, have to set to somewhat less than 100vw. */
  }

  .navContactHighlight a, .navContactHighlight a,
  .navContactHighlight a:focus, .navContactHighlight a:hover {
    /* since we can't use 100vw width to ensure text gets wrapped properly, */
    /* we end up with hover-shadows that stop before before the viewport ends. */
    /* This looks ugly, as all other items have shadows extending across the whole width. */
    /* To somewhat work around this, round the corners so it looks a bit like 'sticking out'. */
    /* Note: we also set the non-hover radii to prevent ugly artifact on hover-in/hover-out */
    /*       as the corners would transition between round and square. */
    border-start-start-radius: 1em;
    border-start-end-radius: 1em;
    border-end-start-radius: 1em;
    border-end-end-radius: 1em;
  }

  /* make submenus fill wide */
  nav ol li label {
    display: inline-block;
    width: 100vw;
    padding-inline-start: 1rem;
  }

  nav ol li a {
    padding-inline-start: 4rem;
  } 

  nav .mainMenu a {
    padding-inline-start: 1.2rem;
  }

  nav ol a {
    display: block;
    padding-inline-start: 0.8rem;
    padding-inline-end: 0.8rem;
    padding-block-start: 0.6rem;
    padding-block-end: 0.6rem;
    margin-inline-start: 0rem;
    margin-inline-end: 0.0rem;
    margin-block-start: 0.8rem;
    margin-block-end: 0.45rem;
  }

  nav label, nav ol, nav a {
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  nav ol label {
    height: 2.2rem;
    line-height: 2.2rem;
    padding-block-start: 0.6rem;
    padding-block-end: 0.6rem;
  }

  nav:checked ~ nav ol {
    display: block;
  }

  nav input[type="checkbox"] {
    /* make it top-inline-start for easy selection */
    position: absolute ;
  }

  /* allow main menu to be closed */
  nav > input[type=checkbox] ~ ol {
    display: none;
  }


  nav .mainMenu .navHome a {
    width: 100%;
    /* padding-inline-start: var(--home-bg-image-width); */
    padding-inline-start: var(--home-bg-image-width-hamburger, 1em ); /* in case no image is defined, align with other labels */
    margin-inline-start: 0rem;
    margin-inline-end: 0rem;
  }

  html[dir="ltr"] nav .mainMenu .navHome a {
    /* Somehow, this would be off-screen towards the -end if applied in a rtl document. Why? */
    background-position-x: 1em; /* reset to align with other menu items */
  }

  .navHomeLogoFixRtl[dir="rtl"] {
    background-position-x: right; /* hack to make logo show. Still it's on the wrong side of the text. */ /* should be background-position-inline: start <on the main selector (without dir="rtl")>  once supported */
  }

  nav .mainMenu .navContactHighlight input {
    width: 100%;
    text-align: start;
    padding-inline-start: 1.3rem;
    padding-block-start: 0.6rem;
    padding-block-end: 0.6rem;
    margin-block-start: 0.25rem;
    margin-block-end: 0.45rem;
  }

}

@media print{
  nav, .breadCrumbs:empty {
    display: none;
  }

  .breadCrumbs {
    text-shadow: none;
    margin-inline-start: 0rem; /* for print, we want no margins for breadcrumbs */
    margin-block-start: 0rem;
    margin-block-end: 1.2rem;
  }

   header .breadCrumbs {
    border-inline-start-style: none;
    border-inline-end-style: none;
    border-block-start-style: none;
    border-block-end-style: none;
    border-block-start: none;
  }

}