/* ... All navs ...
-----------------------------------------------*/
:is(nav, .pagination, .mod_changelanguage, .mod_breadcrumb) :is(ul, li) {
  list-style: none;
  margin: 0;
  padding: 0;
}
:is(nav, .pagination, .mod_changelanguage, .mod_breadcrumb) :is(ul, li)::marker {
  content: '';
}
:is(nav, .pagination, .mod_changelanguage) :is(li a, strong) {
  display: block;
  text-decoration: none;
  font-weight: normal;
}
:is(nav, .pagination, .mod_changelanguage) strong {
  cursor: default;
}
:is(.h_nav, .pagination) > ul {
  display: flex;
  flex-wrap: wrap;
}
/* ... All navs ... END
-----------------------------------------------*/



/* ... Main navigation ...
-----------------------------------------------*/
#mainnav {
	--padding-right-submenu: 1.5em;
	padding: 0;
	background-color: var(--menu-default-bg);
	overflow: visible;
	border-top: solid var(--bg-color) var(--divider-space);
}
#mainnav ul {
	z-index: 1;
}
#mainnav > ul { /* the 1st UL */
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
#mainnav ul ul { /* all except the 1st UL */
	position: absolute;
	top: 100%;
	opacity: 0;
	transition: all .1s ease-out 0s;
	font-size: calc(var(--font-size) * .9);
	box-shadow: 2px 1px 4px 0 rgba(0, 0, 0, .3);
	border: 1px solid var(--border-color);
	left: -1px;
}
#mainnav > ul > li > ul { /* the 2nd UL only */
	/* border-top: 3px solid transparent; */
}
#mainnav > ul > li:first-child > ul { /* the first one of the 2nd ULs only */
  /* left: auto; */
}
#mainnav > ul > li:last-child > ul { /* the last one of the 2nd ULs only */
  left: auto;
  right: 0;
}
#mainnav ul ul ul {  /* the 3rd ULs and all further down the tree */
  left: 100%;
	top: -1px;
}
/* all LIs */
#mainnav li {
  display: flex;
  position: relative;
  justify-content: space-between;
  overflow: hidden;
  transition: all .1s ease-out 0s;
}

/* hovering */
#mainnav li:hover,
#mainnav li:hover li.show_trail { /* hovering over the 2nd (3rd ...) level also includes hovering over the 1st level. */
  overflow: visible;
}
#mainnav li:hover > ul,
#mainnav li:hover .show_trail ul {
  opacity: 1;
  transition: all .2s ease-in 0s;
}
#mainnav li:hover > ul {
  z-index: 2;
}
#mainnav li.hide_trail ul {
	opacity: 0 !important;
}




/* the LINKs */
#mainnav :is(li a, strong) { /* all menu LINKs */
  background-color: var(--menu-default-bg);
  color: var(--menu-default-color);
  border-style: solid;
  border-color: var(--border-color);
  border-width: 0 1px 0 0;
  padding: .25em .5em;
  white-space: nowrap;
  flex-grow: 1;
}
#mainnav ul a.trail {
  background-color: var(--menu-trail-bg);
  color: var(--menu-trail-color);
}
#mainnav :is(li a:is(:hover, :active)) {
  background-color: var(--menu-hover-bg);
  color: var(--menu-hover-color);
}
#mainnav ul strong {
  background-color: var(--menu-active-bg);
  color: var(--menu-active-color);
}


#mainnav li li :is(li a, strong) { /* all LINKs of the 2nd level and down */
  padding: .3em .6em;
  background-color: var(--menu-default-bg-l2);
  color: var(--menu-color-l2);
  border-color: var(--menu-border-color);
  border-width: 0 0 1px;
}
#mainnav ul li li a.trail {
  background-color: var(--menu-trail-bg-l2);
  color: var(--menu-trail-color-l2);
}
#mainnav li li :is(li a:is(:hover, :active)) {
  background-color: var(--menu-hover-bg-l2);
  color: var(--menu-hover-color-l2);
}
#mainnav ul li li strong {
  background-color: var(--menu-active-bg-l2);
  color: var(--menu-active-color-l2);
}


#mainnav li li li :is(li a, strong) { /* all LINKs of the 3rd level and down */
  /* border-left-color: transparent; */
  /* border-width: 0 0 1px 5px; */
  /* background-clip: padding-box; */
}
#mainnav li li:last-child >  :is(li a, strong) {
  border-bottom: none;
}

/* submenus */
#mainnav :is(li a.submenu, strong.submenu) {
	padding-right: var(--padding-right-submenu);
	position: relative;
}
#mainnav :is(li a.submenu, strong.submenu)::after {
	content: '\25b8';
	position: absolute;
	width: var(--padding-right-submenu);
	inset: 0;
	left: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
#mainnav :is(li a.submenu:is(:hover, :active, .active, .trail), strong.submenu)::after {
	content: '\25be';
}


/* hide menu item */
#mainnav .hide_in_menu {
  display: none;
}

/* instagram */
#mainnav .instagram {
  margin-left: auto;
}
#mainnav li a.instagram {
	border-width: 0;
	position: relative;
	padding: 0;
	height: 100%;
	width: 40px;
	overflow: hidden;
  text-indent: 100%;
}
/* ... Main navigation ... END
-----------------------------------------------*/



/* ... Servicenav ...
-----------------------------------------------*/
.servicenav .hide_in_menu {
  display: none;
}

.servicenav :is(li a, strong) {
	padding: 0 .5em;
}
.servicenav li:first-child :is(a, strong) {
  padding-left: 0;
}
.servicenav li a:is(:hover, :active) {
  text-decoration: underline;
}
/* ... Servicenav ... END
-----------------------------------------------*/



/* ... Breadcrumb ...
-----------------------------------------------*/
#breadcrumb {
	padding-top: var(--content-space-y-small);
	padding-bottom: var(--content-space-y-small);
}
#breadcrumb ul {
	display: flex;
	gap: .75em;
	flex-wrap: wrap;
	white-space: nowrap;
}
#breadcrumb li:nth-child(n+2) {
	padding-left: .5em;
}
#breadcrumb li {
	font-size: .8em;
	overflow: hidden;
	text-overflow: ellipsis;
}
#breadcrumb li:first-child {
	/* display: none; */
}
#breadcrumb li::marker {
	content: '/';
	color: var(--link-color);
}
#breadcrumb li:first-child::marker {
	content: '';
}
/* ... Breadcrumb ... END
-----------------------------------------------*/



/* ... Paginaton ...
-----------------------------------------------*/
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: var(--brand-color-2-lightest);
	gap: .5em 0;
}
.pagination li :is(a, strong) {
	height: 1.3em;
	padding: .1em .4em;
	min-width: 0.6em;
	text-align: center;
	border-right: 2px solid var(--bg-color-light);
}
.pagination a:is(:hover, :active) {
  background-color: var(--brand-color-2-light);
  color: var(--font-color-light);
}
.pagination strong {
  background-color: var(--brand-color-2);
  color: var(--font-color-light);
}
.pagination p {
	margin: 0;
	order: 1;
	padding: 0 .4em;
	flex-grow: 1;
	text-align: right;
}
/* ... Paginaton ... END
-----------------------------------------------*/