/* Limesoda landing page. Layout styles live inline in index.html (exported from Claude Design);
   this file holds global rules, hover states and the responsive switches the design runtime used to do in JS. */
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:#fbfbf6;color:#0e0f0a;font-family:'Inter Tight',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:#0e0f0a;text-decoration:none}
a:hover{color:#0e0f0a}
::selection{background:#d4e031;color:#0e0f0a}
img{display:block}
:focus-visible{outline:3px solid #bec524;outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#0e0f0a;color:#fbfbf6;padding:10px 16px;border-radius:999px;font-weight:700}
.skip:focus{left:12px;color:#fbfbf6}

/* Responsive switches: narrow < 900px, extra-wide >= 1140px */
.vw,.vx{display:contents}
.vn{display:none}
.ticket{flex-direction:row}
.ticket-stub{flex:0 0 clamp(320px,32vw,400px)}
@media (max-width:1139.98px){.vx{display:none}}
@media (max-width:899.98px){
  .vw{display:none}
  .vn{display:contents}
  .ticket{flex-direction:column}
  .ticket-stub{flex:0 0 auto}
}
@media (min-width:900px){#mobile-menu{display:none!important}}
body.menu-open{overflow:hidden}

/* Category cards: stop Safari squashing the icons, and use two columns on phones so labels fit */
.cat{grid-template-columns:minmax(0,1fr)}
.cat-ic{flex:none;aspect-ratio:1/1;object-fit:contain}
@media (max-width:559.98px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Pre-order ticket stickers: keep them off the ticket's content on smaller screens */
.stk-games{z-index:2!important}
@media (max-width:899.98px){
  .stk-camera{left:-8px!important;top:-66px!important;width:80px!important}
  .stk-wine{right:48px!important;top:-68px!important;width:72px!important;z-index:2!important}
  .stk-games{left:30%!important;bottom:-62px!important;width:72px!important}
}

/* FAQ accordion */
.faq-icon{background:#eef0e2;transform:rotate(0deg)}
.faq-item.open .faq-icon{background:#d4e031;transform:rotate(45deg)}
.faq-a{grid-template-rows:0fr}
.faq-item.open .faq-a{grid-template-rows:1fr}

/* Hide reveal targets until the animation script has taken control (avoids a flash of final state) */
html.js:not(.ready) [data-reveal]{opacity:0}

@media (hover:hover){
.h1:hover{gap:10px!important;color:#d4e031!important}
.h2:hover{background:#eef0e2!important}
.h3:hover{background:#d4e031!important;color:#0e0f0a!important;transform:translateY(-1px)!important}
.h4:hover{transform:translateY(-3px)!important}
.h5:hover{background:#d4e031!important;transform:translateY(-6px) rotate(-2deg)!important}
.h6:hover{background:#d4e031!important;transform:translateY(-6px) rotate(2deg)!important}
.h7:hover{transform:rotate(0deg) scale(1.04)!important}
.h8:hover{color:#d4e031!important}
.h9:hover{background:#d4e031!important;color:#0e0f0a!important;border-color:#d4e031!important}
}