:root {
  --header-height: 55px;
  --main-background: #a8cae9;
  --footer-background: #302c2b;
  --footer-hedge-height: 100px;
  --font-color: #000;
  
  /* nav pattern controls */
  --nav-color-0: 0, 0, 0;
  --nav-color-1: 255, 215, 0;
  --nav-opacity-0: 0;
  --nav-opacity-1: .05;
  --nav-opacity-2: .1;
  --nav-opacity-3: .15;
  --nav-opacity-4: .2;
  --nav-opacity-5: .25;
  --nav-opacity-6: .3;
}
* {
  box-sizing: border-box;
}
html {
  background-color: var(--main-background);
}

/* text color & decorations */
html,
a {
  color: var(--font-color);
}
a:hover {
  color: var(--font-color);
  text-decoration: none;
}
#content section a {
  text-decoration: underline;
}
#content section a:hover {
  color: #555;
}

@font-face {
  font-family: zhurzh;
  src: url("../fonts/Zhurzh.ttf");
}
h1,
h2,
h3,
nav a {
  font-family: zhurzh, sans-serif;
}

a[href^="http"]:not([class^="wsw-hide-ext"]):after {
  display: inline-block;
  width: 14px;
  height: 10px;
  position: relative;
  left: 4px;
  content: " ";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBpZD0iUmVubm11dHplbCIgZD0ibTUuODgwNDc3LDQuODE0MTg3bC01LjE0Mjc2MSwwbDAsOC4xMjAxNDlsOC4xMjAxNTEsMGwwLC01LjE0Mjc2bS0yLjcwNjcxNywtNy4wMzc0NjRsMCwxLjM1MzM1OGwxLjM1MzM1OCwxLjM1MzM1OGwtNC4wNjAwNzUsNC4wNjAwNzVsMi43MDY3MTcsMi43MDY3MTZsNC4wNjAwNzUsLTQuMDYwMDc0bDEuMzUzMzU5LDEuMzUzMzU4bDEuMzUzMzU3LDBsMCwtNi43NjY3OTFsLTYuNzY2NzkxLDB6IiBzdHJva2U9IiM2NjYiIGZpbGw9InRyYW5zcGFyZW50Ii8+DQo8L3N2Zz4=);
  background-repeat: no-repeat;
  background-size: contain;
}

/* frosted glass optics */
nav,
#content section,
.consent-container,
footer > div {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0px 10px 15px 10px rgba(0, 0, 0, .15);
  background-color: rgba(218, 232, 243, .8);
}
nav {
  background: 
  linear-gradient(
    315deg, 
    rgba(var(--nav-color-1), var(--nav-opacity-3)) 0%,
    rgba(var(--nav-color-1), var(--nav-opacity-6)) 8%,
    rgba(var(--nav-color-0), var(--nav-opacity-4)) 15%,
    rgba(var(--nav-color-0), var(--nav-opacity-1)) 30%,
    rgba(var(--nav-color-1), var(--nav-opacity-1)) 50%,
    rgba(var(--nav-color-0), var(--nav-opacity-0)) 100%
  ),
  linear-gradient(
    125deg, 
    rgba(var(--nav-color-1), var(--nav-opacity-0)) 0%,
    rgba(var(--nav-color-1), var(--nav-opacity-5)) 10%,
    rgba(var(--nav-color-0), var(--nav-opacity-3)) 20%,
    rgba(var(--nav-color-1), var(--nav-opacity-1)) 35%,
    rgba(var(--nav-color-0), var(--nav-opacity-2)) 60%,
    rgba(var(--nav-color-1), var(--nav-opacity-0)) 100%
  ),
  linear-gradient(
    200deg, 
    rgba(var(--nav-color-0), var(--nav-opacity-0)) 0%,
    rgba(var(--nav-color-0), var(--nav-opacity-5)) 10%,
    rgba(var(--nav-color-1), var(--nav-opacity-3)) 20%,
    rgba(var(--nav-color-0), var(--nav-opacity-1)) 35%,
    rgba(var(--nav-color-1), var(--nav-opacity-2)) 60%,
    rgba(var(--nav-color-0), var(--nav-opacity-0)) 100%
  ),
  linear-gradient(
    280deg, 
    rgba(var(--nav-color-1), var(--nav-opacity-0)) 0%,
    rgba(var(--nav-color-0), var(--nav-opacity-3)) 20%,
    rgba(var(--nav-color-1), var(--nav-opacity-2)) 40%,
    rgba(var(--nav-color-0), var(--nav-opacity-4)) 70%,
    rgba(var(--nav-color-1), var(--nav-opacity-1)) 90%,
    rgba(var(--nav-color-0), var(--nav-opacity-0)) 100%
  );
}

/* home page sliding backgrounds */
body > div[uk-slider] {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
body > div[uk-slider] div {
  width: 100%;
  height: 100%;
}

/* header */
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 7;
}
header h1 {
  margin-top: 0;
  font-size: 4em;
  letter-spacing: 2px;
  overflow: hidden;
}

/* navigation */
nav {
  margin: 0 auto;
  max-width: 980px;
  height: calc(var(--header-height) - 10px);
  margin-top: 15px;
  border-radius: 15px;
}

nav a {
  position: relative;
  top: 0;
  transition: top 0.2s;
  display: inline-block;
  width: 100%;
  height: calc(var(--header-height) - 10px);
  padding: 8px 0;
  text-align: center;
  font-size: 1.3em;
}
nav a:hover {
  top: -2px;
}
nav a:active {
  top: 4px;
}
nav span.uk-icon svg {
  stroke-width: 1.3px;
  stroke: var(--font-color);
}

/* body area */
main {
  position: relative;
  overflow: hidden;
	background-image: none;
  padding-bottom: calc(var(--footer-hedge-height) - 40px);
}
main.page {
  background-image: url(../img/background.jpg);
	background-color: #333;
	background-repeat: no-repeat;
}
/* mobile browser do not support 
   background-attachment: fixed for performance reasons,
   the following fix enables it only on desktop */
   @media only screen and (min-width: 1080px) {
	main.page {
		background-attachment: fixed;
		background-size: cover;
		background-position-x: center;
	}
}
@media only screen and (max-width: 1080px) {
	main.page {
		background-attachment: scroll;
		background-position-y: 0;
	}
}

#content {
  margin-top: calc(var(--header-height) + 22.5px);
  min-height: calc(100vh - var(--header-height));
}
#content > * {
  margin: 0 auto 40px;
  max-width: 960px;
}
[class^="uk-card-media-"] a:hover img,
[uk-lightbox] a:hover img,
[uk-toggle]:hover {
  filter: brightness(0.75);
  cursor: pointer;
}

section {
  border-radius: 15px;
  padding: 30px;
}
section ~ section {
  margin-top: 30px;
}

/* footer */
footer {
  position: relative;
  padding: 20px;
  background-image: url(../img/footer.png);
  background-color: var(--footer-background);
}
footer > div {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 15px;
  padding: 30px;
}
footer:before {
  content: " ";
  position: absolute;
  top: calc(var(--footer-hedge-height) * -1);
  left: 0;
  width: 100%;
  height: var(--footer-hedge-height);
  background-image: url(../img/footer-over.png);
  /* disable until polishing */
  /* display: none; */
}
footer .uk-button-group {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
}
/* footer .uk-button-group a ~ a {
	margin-left: 6px; 
} */

footer a:not(.wsw-hide-ext):before {
  display: inline-block;
  width: 1em;
  content: " ";
}
footer a:not(.wsw-hide-ext):hover:before {
  content: ">";
}
footer a.wsw-hide-ext:hover > span.uk-icon-button {
  background-color: #ebebeb;
  color: #666;
}

/* prices & gallery */
article {
  position: relative;
  min-height: 270px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
}
article:hover {
  opacity: .9;
}
article h3, 
article span {
  position: absolute;
  background-color: rgba(255, 255, 255, .8);
  margin: 0;
  font-size: 12pt;
}
article h3 {
  bottom: 0;
  width: 100%;
  min-height: 4em;
  padding: 8px 12px 8px 22px;
}
article span {
  top: .5em;
  right: .5em;
  padding: 2px 8px;
  border-radius: 6px;
}
article > span.selected-label {
  padding: 0;
  background: none;
  top: .1em;
  left: .1em;
  font-size: 1.5em;
}
article:not(.selected) > span.selected-label {
  display: none;
}

/* consent container */
.consent-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 350px;
  min-height: 200px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  background-color: transparent;
}
.consent-container:hover {
  box-shadow: 0px 10px 15px 5px rgb(0 0 0 / 15%);
}

/* uikit overrides */
span.uk-icon {
  margin-right: 0.25em;
}
span.uk-icon-lift {
  position: relative;
  top: -2px;
}
[class*="uk-column-"] > * {
  break-inside: avoid-column;
}
.uk-checkbox, .uk-radio {
  border: 1px solid #666;
}
.uk-modal-dialog,
.uk-modal-header,
.uk-modal-footer,
.uk-input,
.uk-textarea,
.uk-button,
.uk-alert {
  border-radius: 6px;
}

/* js-disabled */
.js-disabled {
  font-family: monospace;
  padding: 3px 8px;
  font-weight: 600;
  background-color: #000;
  color: white;
}

/* administrative */
.debug {
  display: block;
  position: relative;
  padding: 8px;
  font-family: monospace;
  border: 1px solid orange;
  color: #000;
  background: transparent;
  font-size: 0.75em;
  line-height: 1em;
  overflow: visible;
}
.debug > h3 {
  font-size: 1em;
  position: absolute;
  right: 8px;
  margin-top: 0;
}
.debug:before {
  content: "debug";
  color: #000;
  background: orange;
  position: absolute;
  top: -0.75em;
  left: 6px;
  padding: 1px 4px;
  border-radius: 2px;
}
