/*
Theme Name: Den Smagløse Café
Author: Codepilots ApS
*/

:root {
  --max-width: 1000px;
  --bg-color: #121212;
  --font-color: #fff;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) var(--bg-color);
  outline: none;
  box-sizing: border-box;  
}

html { height: 100%; }
body { height: 100%; min-height: 100%; padding: 0; margin: 0; font-size: 16px; }
main { min-height: 100%; display: grid; grid-template-rows: 1fr auto; position: relative; overflow-y: hidden; background: var(--bg-color); }
 
.mainbg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }
.mainbg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); opacity: .6; z-index: 1; pointer-events: none; }
.mainbg video { width: 100%; height: 100%; background: var(--font-color); object-fit: cover; }
.mainbg .bgimage { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }

a { color: var(--font-color); text-decoration: underline; transition: color .3s ease; }
ul { padding-left: 1.5em; }
ul li { padding: 1em 0; }

.logo { position: absolute; top: 2em; left: 50%; width: 50%; max-width: 480px; height: 20vh; background-size: contain; background-repeat: no-repeat; background-position: center; transform: translateX(-50%); z-index: 10; filter: drop-shadow(2px 4px 6px black); }
.logo:hover { opacity: .8; cursor: pointer; }
.logo:active { opacity: .5; }

.floater { position: fixed; font-size: 1.3em; z-index: 100; right: -3px; top: 25%; padding: .75em 1em; transform: rotate(-90deg); transform-origin: bottom right; background: var(--font-color); color: var(--bg-color); cursor: pointer; animation: fadeInRotatedFromRight 1s ease; border-radius: .5em .5em 0 0; transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); }
.floater:hover { right: -1px; }
.floater:active { opacity: .5; }

::-webkit-input-placeholder { color: var(--bg-color); font-weight: 600; 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: 700; }
.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; display: grid; grid-template-columns: 1fr auto; grid-gap: 3em; align-items: center; }
.paragraph.content ~ .paragraph.content .content { order: 2; }
.paragraph.content img { width: 100%; object-fit: cover; border-radius: 1.5em; border: 3px solid var(--font-color); position: relative; display: block; }
.paragraph.content .imgwrapper { order: 1; width: 25vw; max-width: 320px; border-radius: 1.5em; position: relative; padding: 0; filter: drop-shadow(2px 4px 6px black); }
.paragraph.content:nth-child(odd) .imgwrapper { transform: rotate(-3deg); }
.paragraph.content:nth-child(even) .imgwrapper { transform: rotate(2deg); }
.paragraph.content .imgwrapper:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1.5em; pointer-events: none; z-index: 0; background: var(--font-color); transform: rotate(-5deg); }
.paragraph.content p { line-height: 1.5; }
.paragraph.content h1, .paragraph.content h2, .paragraph.content h3, .paragraph p { filter: drop-shadow(2px 4px 6px black); }

.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 dashed 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 ~ .button, .paragraph.buttons .button:has( ~ .button) { max-width: 40vw; }
.paragraph.buttons .button.clickable { cursor: pointer; background: var(--font-color); color: var(--bg-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 { max-width: var(--max-width); margin: 0 auto; padding: 0 2em; }
.paragraph.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 1.5em; }
.paragraph.gallery .image { position: relative; transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); }
.paragraph.gallery .image:hover { transform: scale(1.05); cursor:pointer; }
.paragraph.gallery .image img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.5em; border: 3px solid var(--font-color); box-shadow: 2px 4px 6px black; position: relative; }
.paragraph.gallery .image:nth-child(odd) img { transform: rotate(-2deg); }
.paragraph.gallery .image:nth-child(even) img { transform: rotate(2deg); }
.paragraph.gallery .image:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1.5em; pointer-events: none; z-index: 0; background: var(--font-color); transform: rotate(-5deg); }
.paragraph.gallery .image:nth-child(odd):before { transform: rotate(3deg); }
.paragraph.gallery .image:nth-child(even):before { transform: rotate(-3deg); }

.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; grid-gap: 3em; user-select: none; padding: 1em 0; transform: scale(1); transition: all .3s ease; }
.paragraph.events .event h2 { font-size: 2em; font-weight: 400; margin: 0 0 .5em 0; }
.paragraph.events .event p { font-size: 1.2em; font-weight: 400; margin: .25em 0 0 0; }
.paragraph.events .event .imgwrapper { position: relative; z-index: 1; width: 20vw; max-width: 240px; filter: drop-shadow(2px 4px 6px black); }
.paragraph.events .event .imgwrapper:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1.5em; pointer-events: none; z-index: 0; border: 3px dashed var(--font-color); }
.paragraph.events .event img { position: relative; z-index: 1; width: 20vw; max-width: 240px; overflow: hidden; border-radius: 1em; border: 3px solid var(--font-color); }
.paragraph.events .event:nth-child(odd) img { transform: rotate(-3deg); }
.paragraph.events .event:nth-child(even) img { transform: rotate(3deg); }
.paragraph.events .event:nth-child(odd) .imgwrapper:before { transform: rotate(3deg); }
.paragraph.events .event:nth-child(even) .imgwrapper:before { transform: rotate(-3deg); }

.paragraph.events .event button { background: transparent; font-size: 1.2em; border: 3px solid var(--font-color); border-radius: .5em; padding: 1em 1.5em; color: var(--font-color); transition: all .3s ease; }
.paragraph.events .event.clickable:hover { cursor: pointer; transform: scale(1.05); }
.paragraph.events .event button i { transition: all .3s ease; }
.paragraph.events .event:hover button i { transform: translateX(5px); }
.paragraph.events hr { opacity: .2; margin:3em 0; border:0; border-top:2px dashed var(--font-color); background:0; }

.paragraph.video { max-width: var(--max-width); margin: 0 auto; padding: 2em; align-items: center; }
.paragraph.video video { width: 100%; height: 100%; padding: 1.4em 1.4em 3em; background: 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; padding: 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; }
.paragraph.booking button { cursor: pointer; background: #fff; transform: rotate(-5deg); font-size: 1.2em; border: 0; padding: .75em 1em; color: #000; font-family: 'Bungee'; transition: transform .3s ease; }
.paragraph.booking button:hover:not(:disabled) { transform: rotate(0) scale(1.05); }
.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.separator { max-width: var(--max-width); margin: 0 auto; padding: 2em 0; text-align: center; }
.paragraph.separator:after { width: 50%; content: ''; display: block; height: 3px; border-radius: 2px; background: var(--font-color); margin: 0 auto; }

/* Footer */
footer { background: linear-gradient(to bottom, #12121266, #121212); color: var(--font-color); overflow: hidden; text-align: center; padding: 3em 2em; z-index: 2; margin-top:4em; }
footer a { margin: 0 1em; }
footer a i { font-size: 2em !important; color: var(--font-color); }

/* Responsive */
@media (max-width: 768px) {
  .floater { font-size: 1em; }
  
  .paragraphs .paragraph:first-child:not(.video) { margin-top: calc(20vh + 1em); }
  .paragraph.booking { padding: 0 1em; }

  .paragraph.content { grid-template-columns: 1fr; grid-gap: 2em; padding: 1em; }
  .paragraph.content .imgwrapper { width: 100%; max-width: 100%; }
  .paragraph.content ~ .paragraph.content .content { order: 1; }

  .paragraph.video video { padding: 1em 1em 2em; }
  .paragraph.buttons { grid-template-columns: 1fr; grid-gap: 2em; }
  .paragraph.buttons .button { padding: .7em; max-width: 80vw !important; font-size: 1em; }  
  
  .paragraph.events hr { margin: .5em 0; }  
  .paragraph.events .event h2 { font-size: 1.2em; line-height: 1; }
  .paragraph.events .event p { font-size: 1em; line-height: 1; }
  .paragraph.events .event { margin: 0 0 .52em; grid-gap: 1.5em; }    
  .paragraph.events .event:after { bottom: -1em; }    
  .paragraph.events .event>div:last-child { display: none; }
  .paragraph.events .event .imgwrapper, .paragraph.events .event img { width: 100%; max-width: 25vw; }

  .paragraph.gallery { grid-template-columns: 1fr 1fr; grid-gap: 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); }
}