/*
Theme Name: Viggos
Author: Codepilots ApS
*/
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust:none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) rgba(0,0,0,0);
  outline:none;
  box-sizing: border-box;
}
:root {
  --max-width: 1000px;
  --bg-color: #4b301f; 
  --font-color: #fff;
}

html { height:100%; background-color: #000; }
body { height:100%; padding:0; margin:0; font-size: 16px; }
main { min-height:100%; display: grid; grid-template-rows: 1fr auto; background: #000 url('_img/bg.jpg') no-repeat top center; background-size: cover; }
a { color: var(--font-color); text-decoration: underline; transition: color .3s ease; }
ul { padding-left: 1.5em; }
ul li { padding: 1em 0; }

.text-center { text-align: center; }
.logo { position: absolute; top:2em; left:0; width: 100%; height:20vh; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 10; }
.logo:hover { opacity: .8; cursor: pointer;}
.logo:active { opacity: .5; }
.floater { position: fixed; font-family: 'Rockwell'; font-size:1.2em; z-index: 100; right:0; top:25%; padding:.75em 1em; border-radius: .25em .25em 0 0; transform:rotate(-90deg); transform-origin: bottom right; background:var(--font-color); cursor:pointer; animation: fadeInRotatedFromRight 1s ease; }
.floater:active { opacity: .5; }

::-webkit-input-placeholder { color:rgba(255,255,255,.2); font-weight: 400; font-size:.8em; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.15); }

.ui-datepicker { background: var(--bg-color) !important; }

/* Cookies */
.cookies_tekst { position: fixed; z-index: 100; bottom: -240px; background: #000a; width: 100%; display:table; padding: 1em; box-sizing: border-box; }
.cookies_content, .cookies_content p, .cookies_tekst, .cookies_tekst p { color: var(--font-color) !important; }
.cookies_tekst.inview { transition: transform 1s ease; transform: translate3d(0, -240px, 0); }
.cookies_table { width:auto; max-width:1280px; margin:0 auto; }
.cookies_icon { font-size:64px !important; margin-right:12px; } 
.cookies_close { display:block; }
.cookies_close button { background: transparent; border:2px solid var(--font-color); border-radius: 5px; color:var(--font-color); padding:10px; margin-top: 10px; box-shadow: none !important; cursor: pointer; font-weight: 400; }
.cookies_close button:nth-child(2) { background:#fff; color:#000; }
  
/* Paragraphs */
.paragraphs { display: inline-block;}
.paragraphs .paragraph:first-child:not(.video) { margin-top:calc(20vh + 2em); }
.paragraph { position: relative; color:var(--font-color); }

.paragraph.content { max-width: var(--max-width); margin: 0 auto; padding: 2em; align-items: center; width: fit-content; }
.paragraph.content:has(img) { display: grid; grid-template-columns: auto 1fr; grid-gap: 3em; }
.paragraph.content ~ .paragraph.content .content { order:2; }
.paragraph.content img { order: 1; width: 25vw; max-width: 320px; border-radius: 2em; border:1em solid transparent; box-shadow: 0 0 0 3px var(--font-color); }
.paragraph.content:has(img):nth-child(even) { grid-template-columns: 1fr auto; }
.paragraph.content:nth-child(odd) img { transform: rotate(-3deg);}
.paragraph.content:nth-child(even) img { transform: rotate(3deg);}
.paragraph.buttons { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(33%, 1fr)); grid-gap: 0; padding: 2em 0; text-align: center; }

.paragraph.buttons { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(29%, 1fr)); grid-gap: 5em; padding: 2em; text-align: center; }
.paragraph.buttons .button { filter: drop-shadow(2px 4px 6px black); border: 3px solid var(--font-color); color: var(--font-color); margin: 0 auto; width: 100%; transition: all 1s ease; aspect-ratio: 5/4; position: relative; border-radius: 1.5em; max-width: 480px; display: grid; place-content: center; font-size: 1.4em; padding: 1em; }
.paragraph.buttons .button img { max-width: 40%; margin:0 auto .5em; }
.paragraph.buttons .button ~ .button, .paragraph.buttons .button:has( ~ .button) { max-width: 40vw; }
.paragraph.buttons .button.clickable { cursor: pointer; background: transparent; color: var(--font-color); border: 3px solid var(--font-color);  }
.paragraph.buttons .button.clickable:active { opacity: .5; }
.paragraph.buttons .button h1, .paragraph.buttons .button h2, .paragraph.buttons .button h3, .paragraph.buttons .button p { margin: .5em 0; line-height: 1; filter: none; }

.paragraph.buttons .button:nth-child(odd) { animation: rotateMinus2deg 1s ease-in-out forwards; }
.paragraph.buttons .button:nth-child(even) { animation: rotatePlus2deg 1s ease-in-out forwards; }
.paragraph.buttons .button.clickable:nth-child(odd):hover { transform: rotate(-2deg) scale(1.05) !important; }
.paragraph.buttons .button.clickable:nth-child(even):hover { transform: rotate(2deg) scale(1.05) !important; }

.paragraph.gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 2em 1em; max-width: var(--max-width); margin: 0 auto; padding: 2em; }
.paragraph.gallery .image { margin: 0 auto; cursor:pointer; text-decoration: none; }
.paragraph.gallery .image:active { opacity: .5; }
.paragraph.gallery .image:hover img { transform:scale(1.05); }
.paragraph.gallery .image img { transition: transform .1s ease-in-out; width: 100%; max-width: calc(var(--max-width) / 4 - 4em); border-radius: .75em; border:.75em solid transparent; box-shadow: 0 0 0 3px var(--font-color); }
.paragraph.gallery .image:nth-child(10n+1) { transform: rotate(-2deg); }
.paragraph.gallery .image:nth-child(10n+2) { transform: rotate(3deg); }
.paragraph.gallery .image:nth-child(10n+3) { transform: rotate(-3deg); }
.paragraph.gallery .image:nth-child(10n+4) { transform: rotate(2deg); }
.paragraph.gallery .image:nth-child(10n+5) { transform: rotate(-1deg); }
.paragraph.gallery .image h3 { cursor:pointer; background: none;  font-size: 1em; word-wrap: break-word; text-transform: uppercase; border-radius: .5em; padding:1em .5em; color:var(--font-color); text-align: center; }
.paragraph.gallery .image h3:empty { display:none; }

.paragraph.events { max-width: var(--max-width); margin: 0 auto; padding: 0 2em; }
.paragraph.events .event { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; margin:0 0 4em; grid-gap:3em; user-select: none; cursor:pointer; padding:1em 0; }
.paragraph.events .event:hover img, .paragraph.events .event:hover h2, .paragraph.events .event:hover p, .paragraph.events .event:hover button { opacity: .75; transition: all .3s ease; }
.paragraph.events .event:active img, .paragraph.events .event:active h2, .paragraph.events .event:active p, .paragraph.events .event:active button { opacity: .5; }
.paragraph.events .event h2 {  font-size: 1.5em; font-weight: 400; margin:0 0 .5em 0; text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black; }
.paragraph.events .event p {  font-size: 1.2em; font-weight: 400; margin:.25em 0 0 0; }
.paragraph.events .event img { position: relative; z-index: 1; width: 20vw; max-width: 240px; overflow:hidden; border-radius:1em; border:3px solid var(--bg-color); box-shadow: 0 0 0 3px var(--font-color); transition: transform .3s ease; }
.paragraph.events .event button { cursor:pointer; background: none; border:5px solid transparent; box-shadow: 0 0 0 3px var(--font-color); font-size: 1.2em; text-transform: uppercase; border-radius: .5em; padding:1em 1.5em; color:var(--font-color); }

.paragraph.events .event:hover img { transform:rotate(-5deg) scale(1.05); }
.paragraph.events .event:after { content:''; position: absolute; bottom:-2em; right:0; width: calc(100%); border-bottom:3px dashed var(--font-color); z-index: 0; opacity: .25; }
.paragraph.events .event:last-child:after { display:none; }

.paragraph.video { max-width: var(--max-width); margin: 0 auto; padding: 2em; align-items: center; }
.paragraph.video video { width: 100%; height: 100%; border-radius: 2em; border:3px solid var(--bg-color); box-shadow: 0 0 0 3px var(--font-color); object-fit: cover; }
.paragraph.video:first-child { width: 100%; max-width:100%; height: 60vh; min-height:0px; max-height: 1000px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); }
.paragraph.video:first-child video { border:0; border-radius: 0; box-shadow: none; position: absolute; top: 50%; left: 50%; transform: translate(-51%, -51%); min-width: 102%; min-height: 102%; object-fit: cover; }
.paragraph.video:first-child ~ .paragraph.buttons { position: relative; z-index: 1; top:-20vh; margin-bottom:-20vh; } 

.paragraph.booking { max-width: var(--max-width); margin: 0 auto; padding: 0 2em; }
.paragraph.booking h2 {  font-size: 1.5em; font-weight: 400; margin:0 0 .5em 0; text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black; }
.paragraph.booking button { cursor:pointer; background: none; transform:rotate(-5deg); border:3px solid var(--font-color); font-size: 1.2em; text-transform: uppercase; border-radius: .5em; padding:1em 1.5em; color:var(--font-color); }
.paragraph.booking button:hover:not(:disabled) { box-shadow: 0 0 0 5px rgba(255,255,255,.15); }
.paragraph.booking button:disabled { background:rgba(255,255,255,.1); color:rgba(255,255,255,.1); }
.paragraph.booking button:active, .paragraph.booking button:hover:active { box-shadow: 0 0 0 5px rgba(255,255,255,.15), inset 0 0 0 100px rgba(0,0,0,.15); }

.paragraph.faq { max-width: var(--max-width); margin: 0 auto; padding: 2em; }
.paragraph.faq .question h3 { cursor:pointer; user-select: none; margin-bottom:0; }
.paragraph.faq .question h3.shown { color: var(--font-color); }
.paragraph.faq .question h3:before { display: inline-block; width:24px; content:'+'; }
.paragraph.faq .question h3.shown:before { content:'-'; }
.paragraph.faq .question div { max-height:0; overflow:hidden; transition: max-height .3s ease; }
.paragraph.faq .question h3.shown + div { max-height: 1000px; }

.paragraph.separator { max-width: var(--max-width); margin: 0 auto; padding: 2em 0; text-align: center; }
.paragraph.separator:after { width: calc(50%); content: ''; display: block; height: 3px; border-radius: 2px; background: var(--font-color); margin: 0 auto; box-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black; }

/* Footer */
footer { color:var(--font-color); text-transform: uppercase; overflow: hidden; text-align: center; padding: 2em; }
footer p { margin:0;}
footer a { margin:0 1em;}
footer a i { font-size: 2em !important; color:var(--font-color); }

/* Responsive */
@media (max-width: 768px) {
  :root {
    --max-width: 768px;
  }

  .floater {  font-size:1em; }
  /* .logo { top:1em; max-height:180px; } */

  .paragraphs .paragraph:first-child:not(.video) { margin-top:calc(20vh + 1em); }

  .paragraph.booking { padding:0 1em; }

  .paragraph.content, .paragraph.content:has(img), .paragraph.content:has(img):nth-child(even) { grid-template-columns: 1fr; grid-gap:2em; }
  .paragraph.content img { width: 100%; max-width: 100%; }
  .paragraph.content ~ .paragraph.content .content { order:1; }

  .paragraph.buttons .button h3 { font-size: .8em; }
  .paragraph.buttons { display: block; }
  .paragraph.buttons .button ~ .button, .paragraph.buttons .button:has( ~ .button) { max-width: 100%; margin-top: 2em; }

  .paragraph.events .event { margin: 0 0 2em; grid-gap:1.5em; }    
  .paragraph.events .event:after { bottom:-1em; }    
  .paragraph.events .event>div:last-child { display:none; }
  .paragraph.events .event img { width: 100%; max-width: 25vw; }
  .paragraph.events .event h2 { font-size: 1.2em; }
  .paragraph.events .event p { font-size: 1em; }
}

/* Animations */
@keyframes fadeInRotatedFromRight { from { opacity: 0; transform: rotate(-90deg) translateY(100%); } to { opacity: 1; transform: rotate(-90deg) translateY(0); } }
@keyframes rotatePlus2deg { 0% { transform: rotate(0deg); } 100% { transform: rotate(2deg); } }
@keyframes rotateMinus2deg { 0% { transform: rotate(0deg); } 100% { transform: rotate(-2deg); } }