/* COMMON */
*, *::before, *::after {box-sizing: border-box;}
html, body {width: 100%; height: 100%; overflow: hidden;}
body {background:var(--pageBg); color:var(--pageTxt); margin:0; overflow:auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size:1.1em;}
main {margin:0 auto; clear:both; width:100%; max-width:1200px;}
#content {grid-area:content;}
#contentFull {grid-area: 1 / 1 / 4 / 4;}
#rootNav {grid-area:rootNav; justify-self:start;}
.pageNav {grid-area:topNav;}

hr {clear:both; margin: 15px 0; border-width:0; border-top:var(--line); width:100%;}
ul {line-height:1.4; padding-left:24px;}
a:link {color:var(--theme);} a:visited {color:var(--theme);} a:hover {color:var(--pageTxt);} a:active {color:var(--pageTxt);}
footer {clear:both; margin: 40px auto 0; max-width:1200px; text-align:center; color:var(--txtAlt); font-size:0.8em; padding: 20px 10px 20px; border-top:var(--line); background:var(--pageBg);}
button, input[type="button"], input[type="submit"], input[type="reset"] {border-radius:8px;}
input, button {-webkit-appearance:none; appearance:none; border:none; background-image:none; background-color:transparent; box-shadow: none;}
input:focus, input:active {outline-color:var(--theme);}
button:focus, button:active {outline: none;}
input::placeholder, textarea::placeholder {color:var(--txtAlt); opacity:1;}
.space, .nthng, .space_10, .space_20, .space_30, .space_40 {clear:both; height:5px; width: 100%; margin:0px; padding:0px; font-size:1px; }
.nthng {height:0px; font-size:0px;}
.space_10 {height: 10px;}
.space_20 {height: 20px;}
.space_30 {height: 30px;}
.space_40 {height: 40px;}
.nomargin {margin: 0; padding: 0;}
.hide {display:none;}
.show {display:block;}
.center {text-align:center;}
.right {text-align:right;}
.sr-only { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
i.divider {display:inline-block; width:1px; height:20px; border-right:var(--lineAlt); margin:0px 5px 0 4px;}

#toTopNav { display:none; position:fixed; bottom:15px; right:15px; z-index:99; border:none; outline:none;  background-color:transparent; color:var(--txtAlt); cursor:pointer; padding:15px; border-radius:8px; box-shadow:var(--cardShadow); opacity:.6;}
#toTopNav i {width:30px; height:30px; font-size:30px; line-height:30px;}
#toTopNav:hover { background-color:var(--theme); color:var(--cardBg); opacity:1;}

/* PAGE */
#logo {display:block; max-width:100%; top:0; left:0; margin:0; padding:.5em 0 .6em; background: url('/img/header_bgr.jpg') center no-repeat; background-size:cover;}
#logo::after {content: url(/sys/img/trekkies_logo.svg); display:block; width:153px; height:90px; margin:0 auto 0;}
#container, #logo {transition: all .2s ease-out;}
#container {position:relative; margin: 0 10px;}

.alertMsg {color:var(--alert);}
.chyba, .uspech, .info, .alert, .okmessage, .chybastredni, .planFeedback {clear:both; padding:10px 15px; border-radius:var(--messageRadius); box-shadow:var(--shadow-1);}
.chyba, .alert, .chybastredni, .planFeedbackError {color:var(--error); background:var(--errorBg);}
.uspech, .okmessage, .planFeedbackSuccess {color:var(--success); background:var(--successBg);}
.info {color:var(--pageTxt); background:var(--pageBg);}

select {
  border:none; background: none; outline:none; position: relative; margin:.4em;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
select:hover, select:focus {outline:none; border:none; margin:.4em;}
select::-ms-expand {display: none;}

/* CONTENT */
h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 2rem; font-weight: 600; color:var(--txtAlt); line-height:1.3; /*text-edge: cap alphabetic; leading-trim: both;*/ text-transform: uppercase;}
h1 {margin:0; padding: .8rem .5rem; background:var(--pageBg); color:var(--txt); font-weight:normal;}
h2 {font-size:1.4em; margin:.5em 0;}
h4  {margin:25px 0; color:var(--txt);}
.legal {font-size:.7em; line-height:1.3;}
.copy {display:block; padding:var(--spacing) 0;}
p {color:var(--txt);}
blockquote {background:var(--bgAlt); margin:.5em 0; max-width:100%; padding: 2.2em 1em; font-size: 1em; line-height: 1.5; text-align: justify; position:relative; color:var(--pageTxt); font-style:italic;}
blockquote::before {content: "\e80d"; font-weight:bold; color:var(--txtAlt); display:block; position:absolute; top:10px; left:10px;
    font: normal normal normal 2em/1 TR5; font-family:TR5; text-rendering:auto;}
blockquote::after {content: "\e80e"; font-weight:bold; color:var(--txtAlt); display:block; position:absolute; bottom:10px; right:10px;
    font: normal normal normal 2em/1 TR5; font-family:TR5; text-rendering:auto;}
.cols2 {width:auto; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:20px;}
.cols2 > .col {flex-grow:1; align-self:stretch; margin-top:0; padding-top:0;}

.btnLink, .btnStd, .btnAlt, .touchIcon, select {display: inline-block; padding:10px var(--spacing); border:none; background:none; font-size:14px; font-weight:600; text-transform:uppercase; cursor:pointer; border-radius:8px; margin:10px; text-align:center;}
.btnNone {cursor:auto;}
.btnIcon, .btnIconLeft, .btnIconRight {padding:0; color:var(--txt);}
.btnIcon i, .btnIconLeft i, .btnIconRight i {display:block; font-size:32px; width:32px; height:32px; line-height:32px;}
a.btnLink, a.btnStd, a.btnAlt, a.touchIcon {text-decoration:none; display:inline-block;}
.btnStd, a.btnStd, .touchIcon, select {display:inline-block; color:var(--txt); background:none;}
.btnLink:hover, .btnLink[aria-expanded="true"], .btnStd:hover, .touchIcon:hover, .linkCla:hover, select:hover, select:focus  {color:var(--theme); background:var(--bgAlt);}
.btnNone, .btnNone:hover {color:var(--txtAlt); background:none;}
.btnCta, a.btnCta {color:var(--cardBg); background:var(--theme); border-radius:8px;}
.btnCta:hover, a.btnCta:hover {color:var(--cardBg); background:var(--theme); box-shadow:inset 0 0 0 100px rgba(0,0,0,.12);}
.btnAlt, a.btnAlt {color:var(--txtAlt);}

/* NAV */
.pageNav, .formControl {display:flex; flex-direction:row; justify-content:space-between; width:calc(100% - 10px);}
.formControl > span {display:flex; flex-direction:row;}
.pageNav span {display:flex; flex-direction:row; align-items:center;}
.pageNav span *:first-child {margin-left:0;} .pageNav span *:last-child {margin-right:0;}
.pageNav .tr5-menuRight {color:var(--txtAlt);}
.pageNav .combo/*, .formControl .combo */, #rootNav {position:relative; padding:7px 5px 8px 10px; color:var(--txt);}
.pageNav .btnLink {margin-left:0; margin-right:0;}
.pageNav a {color:var(--txt);}
.pageNav a.btnCta {color:var(--cardBg);}
/*.formControl .btnStd, .formControl .btnLink {margin: 0 5px;}*/
.breadcrumbs {display:block; margin:10px; color:var(--txt); font-weight:600; font-size:14px; text-transform: uppercase;}
.controlRight {justify-content:flex-end;}

ul.dropdown {
  background: var(--cardBg); box-shadow:var(--shadowPopup);
  border: var(--linePopup);
  list-style: none;
	margin: 7px 0 0 0; padding: 5px;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
	position: absolute;
  transition: all 0.5s ease;
  display: none;
  z-index:100;
  border-radius: 13px;
  text-align:left;
}
.dropR {right: 0;}
.dropL {left: 0;}
.dropUp {bottom:38px;}
ul.dropdown li {
  display: block;
	float: left;
	padding: 0;
	position: relative;
	text-decoration: none;
  transition-duration: 0.5s;
  border-radius: 8px;
}
ul.dropdown li.selected {background:var(--selectedBg); color:var(--selectedTxt); font-weight:600;}
ul.dropdown li.selected > a, ul.dropdown li.selected > label {color:var(--selectedTxt); font-weight:600;}
ul.dropdown li.selected > a *, ul.dropdown li.selected > label * {color:inherit;}
ul.dropdown li a, ul.dropdown li label {
  display: inline-block;
  color:var(--txt); text-align:left;
  margin: 0; padding: 9px 25px 10px 15px;
  white-space: nowrap; border-radius:8px;
  text-decoration:none; text-transform:none; font-weight:500; font-size:16px; line-height:24px; height:auto; width:100%;
}
ul.dropdown li a:hover {background:none;}
ul.dropdown li:hover,
ul.dropdown li:focus-within {
	background:var(--hoverBg);
	cursor: pointer;
}

ul.dropdown li.selected:hover, ul.dropdown li.selected:focus-within {background:var(--selectedBg);}
.combo {position:relative;}
.combo.isOpen > ul.dropdown {
  visibility: visible;
  opacity: 1;
  display: block;
}

.combo ul.dropdown li {
  clear: both;
  width: 100%;
}
.combo ul.dropdown li.dropLine {
  left:-5px; width: calc(100% + 10px); margin: 4px 0 5px; padding: 6px 10px 0;
  border-top: var(--line); color: var(--txtAlt); font-size:10px; border-radius: 0;
}
.combo ul.dropdown li.dropLine:hover {background:none;}

/* TABLET PORTRAIT */
@media only screen and (min-width:750px) {
  #logo::after {margin:1em auto; width:187px; height:110px;}
  footer {margin: 20px auto 0; padding: 0 20px 20px; border:none; background:none;}
  .btnIconLeft, .btnIconRight, a.btnIconLeft, a.btnIconRight {display:flex; flex-direction:row; align-items:center; padding-right:12px;}
  .btnIconRight, a.btnIconRight {padding-left:12px; padding-right:0;}
  .btnIconLeft i {margin-right:3px !important;} .btnIconRight i {margin-left:3px !important;}
  .btnIconLeft::after {content: " " attr(txt); display:block;}
  .btnIconRight::before {content: " " attr(txt); display:block;}
}
@media only screen and (min-width:900px) {
  main {padding:0 0 20px;}
  #rootNav {padding:0; margin:0;}
  #rootNav span {display:none;}
  #rootNav .dropdown {visibility:visible; opacity:1; display:block; background:none; border:none; box-shadow:none;}
  #rootNav ul.dropdown li.selected {background:var(--selectedBg);}
  #rootNav.sticky {position:fixed; top:0px;}
  .pageNav span i.divider:first-child {display:none;}
}
/* TABLET LANDSCAPE */
@media only screen and (min-width:1020px) {
  .cols2 {flex-direction:row;}
}
/* WIDESCREEN */
@media only screen and (min-width: 1200px) {
  /*#container {padding: 0 160px;}*/
  /*#content article:only-child {min-height:500px;}*/
  #rootNav li {margin-bottom:10px;}
}

/* Site shell layout: shared by desktop and mobile navigation. */
.siteMobileMain {
  display:grid;
  grid-template-columns:max-content minmax(0, 1fr);
  grid-template-rows:minmax(64px, auto) auto;
  grid-template-areas:
    "rootNav topNav"
    "content content";
  align-items:start;
  padding-top:10px;
}
.siteMobileMain > #rootNav {grid-area:rootNav;}
.siteMobileMain > .pageNav {
  grid-area:topNav;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  width:100%;
}
.siteMobileMain > .pageNav > span:first-child,
.siteMobileMain > .pageNav > .pageNavActions {
  display:flex;
  align-items:center;
  min-width:0;
}
.siteMobileMain > .pageNav > span:first-child {flex:1; flex-wrap:wrap;}
.siteMobileMain > .pageNav > .pageNavActions {
  flex:none;
  justify-content:flex-end;
  gap:0;
}
.siteMobileMain .navSortMenu {white-space:nowrap;}
.siteMobileMain > #content {
  grid-area:content;
  min-width:0;
  width:100%;
}

@media only screen and (min-width:900px) {
  .siteMobileMain {
    grid-template-columns:140px minmax(0, 1fr);
    grid-template-rows:minmax(64px, auto) auto;
    grid-template-areas:
      "rootNav topNav"
      "rootNav content";
    column-gap:15px;
  }
  .siteMobileMain > #rootNav {
    grid-row:1 / span 2;
    align-self:start;
  }
  .siteMobileMain > .pageNav {grid-column:2;}
  .siteMobileMain > #content {grid-column:2;}
  #rootNav.sticky {
    z-index:950;
    background:var(--pageBg);
  }
}

@media only screen and (max-width:879px) {
  main.siteMobileMain {
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .siteMobileMain > #rootNav,
  .siteMobileMain > .pageNav {display:none !important;}
  .siteMobileMain > #content {width:100%;}


}

/* Shared desktop page identity precedes the existing type selectors. */
.desktopPageHeading {display:none;}
.navSortTrigger {display:grid; place-items:center; width:44px; height:44px; padding:10px; margin:0; color:var(--txt);}
.navSortIcon, .mobileNavMenuIcon {
  display:block; flex:none; width:24px; height:24px; background-color:currentColor;
  -webkit-mask:url('/sys/img/icons/tr6-sorting.svg') center / contain no-repeat;
  mask:url('/sys/img/icons/tr6-sorting.svg') center / contain no-repeat;
}
.mobileNavMenuIcon {
  -webkit-mask-image:url('/sys/img/icons/tr6-menu.svg');
  mask-image:url('/sys/img/icons/tr6-menu.svg');
}
.navSortTrigger:focus-visible {outline:2px solid var(--theme); outline-offset:2px;}
@media (min-width:880px) {
  .siteMobileMain > .pageNav {gap:16px; flex-wrap:wrap; padding:8px 0;}
  .desktopPageHeading {display:block; flex:none; max-width:100%; margin-right:4px;}
  .desktopPageHeading h1 {margin:0; padding:0; background:none; color:var(--txt); font-size:1.15rem; font-weight:600; line-height:1.2; text-transform:none;}
  .desktopPageHeading p {margin:3px 0 0; color:var(--txtAlt); font-size:11px; font-weight:500; line-height:1.2;}
  .siteMobileMain > .pageNav > span:first-of-type {flex:1; min-width:0; flex-wrap:wrap;}
  .siteMobileMain > .pageNav > span:last-of-type {flex:none; margin-left:auto;}
  .siteMobileMain > .pageNav > .pageNavActions {flex:none; margin-left:auto;}
  .siteMobileMain > #contentFull {grid-area:content;}
  .siteMobileMain .navSortMenu {padding:0; margin:0;}
  .siteMobileMain .navSortMenu > .dropdown {margin-top:0;}
}
@media (max-width:879px) {
  .siteMobileMain.hasRatePaging > .pageNav > span:not(.pageNavActions):not(:last-child) {display:none !important;}
}

/* Common interaction states: neutral hover, green selection, outlined keyboard focus. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--theme);
  outline-offset:3px;
}
.siteMobileMain > .pageNav .btnIconLeft i,
.siteMobileMain > .pageNav .btnIconRight i {font-size:24px; width:24px; height:24px; line-height:24px;}
.siteMobileMain > .pageNav .btnIconLeft,
.siteMobileMain > .pageNav .btnIconRight {min-height:44px; align-items:center;}

/* Shared geometry for page actions: 24px icons inside 44px controls. */
.siteMobileMain > .pageNav .btnIconLeft,
.siteMobileMain > .pageNav .btnIconRight {
  display:inline-flex; justify-content:center; gap:8px;
  box-sizing:border-box; min-width:44px; height:44px;
  padding:10px; margin:0; line-height:24px;
}
.siteMobileMain > .pageNav .btnIconLeft i,
.siteMobileMain > .pageNav .btnIconRight i {margin:0 !important; flex:none;}
.siteMobileMain > .pageNav > .pageNavActions {gap:4px;}
.siteMobileMain > .pageNav .navSortMenu {padding:0; margin:0;}
.navSortTrigger {box-sizing:border-box;}

/* Type filters use the same 44px geometry as the other page controls. */
.siteMobileMain > .pageNav .combo.btnLink {
  display:inline-flex; align-items:center; gap:8px;
  box-sizing:border-box; min-height:44px; margin:0; padding:10px;
  font-family:inherit; font-size:14px; line-height:24px;
}
.siteMobileMain > .pageNav .combo.btnLink > i {
  display:block; flex:none; width:24px; height:24px;
  margin:0; font-size:24px; line-height:24px;
}
.siteMobileMain > .pageNav .combo.btnLink > .dropdown {top:100%;}
.pageNav .btnLink:hover, .pageNav .combo.btnLink:hover, #rootNav.btnLink:hover,
.pageNav .btnLink[aria-expanded="true"], .pageNav .combo.btnLink[aria-expanded="true"], #rootNav.btnLink[aria-expanded="true"] {
  color:var(--theme); background:var(--bgAlt);
}