/* Drei Stuben. Ported from the old Tailwind app: preflight, globals.css and paraiso.css. */

@font-face { font-family: 'Approach'; src: url(/assets/fonts/approach-light.woff) format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Approach'; src: url(/assets/fonts/approach-regular.woff) format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Approach'; src: url(/assets/fonts/approach-italic.woff) format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Approach'; src: url(/assets/fonts/approach-semibold.woff) format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Recoleta'; src: url(/assets/fonts/recoleta-regular.woff2) format('woff2'); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Recoleta'; src: url(/assets/fonts/recoleta-semibold.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* Tailwind preflight */
*, ::before, ::after { margin: 0; padding: 0; }
html { line-height: 1.5; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: inherit; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }

/* globals.css */
h1, h2, h3, h4 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; margin-bottom: 1rem; }
h3 { font-size: 1.25rem; line-height: 1.75rem; }
strong { font-weight: 600; }
p { margin-bottom: 1rem; font-weight: 300; }
p img { display: inline-block; }
ul { margin-top: 1.5rem; padding-inline-start: 3rem; }
li { margin-bottom: 0.25rem; font-weight: 300; }
a { color: #000; font-weight: 300; }
a:hover { text-decoration: underline; }
.block { display: block; margin-inline: 1rem; }
.text-block ul { list-style: disc; margin-top: 0; margin-bottom: 1.5rem; }

/* Utilities the pages use */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.h-full { height: 100%; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; }
@media (min-width: 768px) {
  .md\:order-1 { order: 1; } .md\:order-2 { order: 2; } .md\:order-3 { order: 3; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
}

/* Page frame: the image wraps pages in main.content > article */
main.content { max-width: none; margin: 0; padding: 0; position: relative; z-index: 2; }
main.content > article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; max-width: 800px; margin: 0 auto; padding: 0 0 3rem; }
@media (min-width: 768px) { main.content > article { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Header */
header { position: relative; overflow: hidden; width: 100vw; margin-bottom: 3rem; }
.header-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
header > *:not(.header-bg) { position: relative; z-index: 1; }
.h-main { height: 90vh; min-height: 600px; max-height: 600px; display: flex; flex-direction: column-reverse; }
.h-main[data-variant="paraiso"], .h-paraiso:not([data-variant="paraiso"]) { display: none; }
.h-main .logo { margin: 1.5rem 0; width: 300px; align-self: center; }
.h-main .logo img { width: 300px; }
.h-main > nav { flex: 1 1 0%; font-size: 20px; line-height: 1.5; text-transform: uppercase; text-align: center; }
.h-main > nav a { color: #fff; }
.h-main > nav ul { padding-inline-start: 0; }
.h-main > nav li:last-child a { border: 1px solid #fff; background: rgba(255, 255, 255, 0.3); padding: 0.25rem 0.5rem; margin-left: -0.5rem; }
.h-main .newsletter { color: #fff; font-weight: 300; cursor: pointer; }
.h-main .newsletter:hover { text-decoration: underline; }
.language { margin-top: 1.25rem; text-align: center; flex: 0 1 0%; }
.language a { color: #fff; font-size: 0.875rem; line-height: 1.25rem; margin-right: 0.75rem; }
.c-langswitch a:not([href]) { display: none; }
.h-main .paraiso-banner { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 800px; height: 180px; display: flex; align-items: center; justify-content: space-between; gap: 2vw; padding: 0 4vw; overflow: hidden; background: url(/assets/images/paraiso_header.jpg) center / cover; font-family: 'Recoleta', serif; }
.pb-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.paraiso-banner > span { position: relative; z-index: 1; }
.b-title { font-size: clamp(36px, 14vw, 96px); color: #e8d2c7; font-weight: 400; line-height: 1; flex-shrink: 0; animation: fadeSlideIn 8s 0s ease infinite; }
.b-subtitle { flex: 1; font-size: clamp(10px, 1.6vw, 15px); text-align: center; color: #fff; font-weight: 300; letter-spacing: 0.08em; line-height: 1.6; animation: fadeSlideIn 8s 0.5s ease infinite; }
.b-cta { flex-shrink: 0; font-size: clamp(9px, 1.4vw, 13px); color: #fff; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.7); padding: 8px 16px; white-space: nowrap; transition: background 0.2s ease; animation: fadeSlideIn 8s 1s ease infinite, pulse 3s 2s ease infinite; }
.paraiso-banner:hover .b-cta { background: rgba(255, 255, 255, 0.25); }
.h-main[data-banner="off"] .paraiso-banner { display: none; }
@keyframes fadeSlideIn { 0% { opacity: 0; transform: translateY(8px); } 10% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); } }
@media (max-width: 500px) { .b-subtitle { display: none; } }
@media (max-width: 767px) { .h-main[data-stag="on"] > nav ul { margin-top: 170px; } }
@media (min-width: 768px) {
  .h-main { height: 90vh; min-height: 0; max-height: none; flex-direction: row; }
  .h-main .logo { align-self: flex-start; }
  .h-main > nav { text-align: left; }
  .h-main > nav ul { padding-inline-start: 3rem; }
  .h-main .newsletter { margin-left: 3rem; }
  .language { margin-right: 2.5rem; text-align: right; flex: 1 1 0%; }
  .h-main .paraiso-banner { bottom: auto; top: 65%; transform: translate(-50%, -50%); }
  .h-main[data-stag="on"] .logo { transform: translateX(20px); }
}

/* Paraiso page: its own header, font and palette */
body:has(.h-paraiso[data-variant="paraiso"]) { background: #e8d2c7; font-family: 'Recoleta', serif; letter-spacing: 0.1em; color: #4a3428; }
body:has(.h-paraiso[data-variant="paraiso"]) a { color: #4a3428; }
.h-paraiso { height: 480px; display: flex; flex-direction: column; }
.h-paraiso .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 1.5rem; }
.h-paraiso .logo { width: 300px; margin-top: 44px; }
.h-paraiso h1 { margin-top: auto; transform: translateY(-44px); font-size: 18vw; text-align: center; color: #e8d2c7; font-weight: 400; line-height: 1; margin-bottom: 1rem; }
.h-paraiso h2 { font-size: 16px; line-height: 1.5; text-align: center; color: #fff; font-weight: 300; letter-spacing: 0.1em; margin-bottom: auto; }
.h-paraiso .language { position: absolute; top: 1.25rem; right: 1.25rem; margin: 0; text-align: right; z-index: 2; }
.h-paraiso .reservation { position: absolute; top: 1.25rem; left: 1.25rem; text-transform: uppercase; font-family: 'Approach', sans-serif; letter-spacing: 0.05em; z-index: 2; }
.h-paraiso .reservation a { color: #fff; font-size: 20px; font-weight: 400; letter-spacing: 0.05em; border: 1px solid #fff; background: rgba(0, 0, 0, 0.6); padding: 0.25rem 0.5rem; }
body:has(.h-paraiso[data-variant="paraiso"]) .h-paraiso .reservation a { color: #fff; }
@media (min-width: 768px) {
  .h-paraiso { height: 90vh; }
  .h-paraiso .logo { margin-top: 0; }
  .h-paraiso h1 { transform: none; font-size: 196px; }
  .h-paraiso h2 { font-size: 28px; line-height: 1.75rem; }
}

/* Footer */
footer { margin-top: auto; margin-bottom: 1rem; }
footer .icons { display: flex; flex-direction: row; justify-content: flex-end; margin-bottom: 2rem; }
footer .icon { width: 2rem; margin-left: 0.375rem; }
footer .icon:hover { opacity: 0.4; }
footer .copyright { text-align: right; }

/* Carousel (replaces react-image-gallery) */
.gallery { min-height: 432px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; }
.gallery > .carousel { width: min(320px, 100%); height: 432px; margin-inline: auto; }
@media (min-width: 768px) { .gallery > .carousel { margin-inline: 0; } .gallery.order-3 > .carousel { margin-inline: auto; } }
.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; max-width: none; }
.carousel-bullets { display: flex; gap: 0.5rem; justify-content: center; margin-top: -2rem; position: relative; z-index: 1; height: 1rem; }
.carousel-bullets button { width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: transparent; }
.carousel-bullets button.active { background: #fff; }
body:has(.h-paraiso[data-variant="paraiso"]) .gallery, body:has(.h-main[data-variant="xmas"]) .gallery { justify-content: center; }
body:has(.h-paraiso[data-variant="paraiso"]) .gallery > .carousel, body:has(.h-main[data-variant="xmas"]) .gallery > .carousel { margin-inline: auto; }
.gallery > img { display: block; width: min(320px, 100%); height: 432px; object-fit: cover; margin-inline: auto; }
.carousel img[src*="wild/carousel-1.jpg"] { object-position: center 72%; }

/* Home (and Wild): stag link, event gallery, vertical centring */
.wild-stag { position: absolute; top: calc(-33.3vh - 48px); left: 50%; transform: translate(-50%, -50%); width: min(29vw, 300px); aspect-ratio: 876 / 972; background: url("/assets/images/wild/stag-logo-white.png") center / contain no-repeat; z-index: 10; }
.wild-stag-eye { position: absolute; left: 55.7%; top: 53.3%; width: 3%; height: 2%; border-radius: 45%; background: white; box-shadow: inset 0 -2px 0 #302018; opacity: 0; }
.wild-stag-label { position: absolute; left: calc(50% + 14px); bottom: -27px; transform: translateX(-50%); color: white; font-size: 14px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.wild-stag:hover .wild-stag-eye { animation: wild-eye-blink 0.85s ease-in-out 1; }
@keyframes wild-eye-blink { 0%, 20%, 80%, 100% { opacity: 0; transform: scaleY(0); } 40%, 58% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 767px) { .wild-stag { top: -396px; width: 120px; } }
.event-gallery { display: flex; flex-direction: column; align-items: center; }
.event-gallery > .gallery { width: 100%; }
.event-links { width: min(320px, 100%); margin: 24px auto 0; padding-left: 0; list-style: none; }
.event-links li + li { margin-top: 8px; }
@media (min-width: 768px) {
  body:has(.h-main[data-variant="default"][data-stag="on"]) main.content > article > .gallery + .block, body:has(.h-main[data-variant="default"][data-stag="on"]) main.content > article > .block#food { display: flex; flex-direction: column; justify-content: center; }
}

/* Wild page */
body:has(.h-main[data-variant="wild"]) { background: #e8d2c7; }
body:has(.h-main[data-variant="wild"]) main.content, body:has(.h-main[data-variant="wild"]) main.content a, body:has(.h-main[data-variant="wild"]) main.content h1, body:has(.h-main[data-variant="wild"]) main.content h2, body:has(.h-main[data-variant="wild"]) main.content p, body:has(.h-main[data-variant="wild"]) main.content strong { color: #4a3428; }
body:has(.h-main[data-variant="wild"]) main.content { padding-top: 24px; }
@media (min-width: 768px) {
  body:has(.h-main[data-variant="wild"]) main.content > article > .block.order-1, body:has(.h-main[data-variant="wild"]) main.content > article > .block.order-2 { display: flex; flex-direction: column; justify-content: center; }
  body:has(.h-main[data-variant="wild"]) main.content > article > .gallery.order-3 + .block.order-3 { display: flex; flex-direction: column; justify-content: center; }
}

/* Paraiso page */
@media (min-width: 768px) {
  body:has(.h-paraiso[data-variant="paraiso"]) main.content > article > .gallery.paraiso-intro-gallery + .block, body:has(.h-paraiso[data-variant="paraiso"]) main.content > article > .block#food { display: flex; flex-direction: column; justify-content: center; }
}
body:has(.h-paraiso[data-variant="paraiso"]) main.content { color: #4a3428; }

/* Events page */
.events-poster { position: relative; width: min(100%, 720px); margin: 0 auto; line-height: 0; }
.events-poster img { display: block; width: 100%; height: auto; }
.events-hotspot { position: absolute; left: 8%; width: 84%; z-index: 2; border-radius: 8px; }
.events-hotspot:focus-visible { outline: 3px solid white; outline-offset: -3px; background: rgba(255, 255, 255, 0.12); }
.events-wild { top: 25.5%; height: 12.5%; }
.events-paraiso { top: 79%; height: 12%; }
.events-home { left: 24%; top: 92%; width: 52%; height: 6%; }

/* Christmas page */
@media (min-width: 768px) { body:has(.h-main[data-variant="xmas"]) main.content > article > .block.order-1 { display: flex; flex-direction: column; justify-content: center; } }

/* Paraiso: headings use the Recoleta body font (the base layer sets --font-heading), language links stay white */
body:has(.h-paraiso[data-variant="paraiso"]) :is(h1, h2, h3, h4) { font-family: inherit; }
body:has(.h-paraiso[data-variant="paraiso"]) .h-paraiso .language a { color: #fff; }