/* Wickburger - custom styles layered on top of Tailwind (CDN) */

:root{
  --ink:#0f0d0c; --ember:#e8542a; --ember-d:#c8431f; --gold:#f4b942; --cream:#fff7ed;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
/* Global guard: never allow horizontal scroll on any device */
html,body{max-width:100%;overflow-x:hidden;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--cream);color:var(--ink);
  line-height:1.62;}
img,svg,video,iframe{max-width:100%;}
/* Long words (Serbian/Hungarian) must wrap instead of forcing overflow */
h1,h2,h3,h4{overflow-wrap:break-word;word-break:break-word;}
/* Serbian/Hungarian diacritics (ő ű š č ć đ ž) need vertical breathing room so
   accents don't collide with the line above. Looser leading on body + headings. */
p,li{line-height:1.62;}
.font-display{font-family:'Anton','Arial Narrow',sans-serif;letter-spacing:.5px;font-weight:400;
  line-height:1.12;}

::selection{background:var(--ember);color:#fff;}

/* Logo: subtle periodic tilt so the brand mark feels alive (stilled under
   reduced motion by the global guard at the bottom of this file). */
.header-logo-light,.header-logo-dark{transform-origin:50% 65%;
  animation:logo-tilt 6s ease-in-out infinite;}
a:hover > .header-logo-light,a:hover > .header-logo-dark{
  animation:none;transform:rotate(-6deg) scale(1.06);transition:transform .25s ease;}
@keyframes logo-tilt{0%,84%,100%{transform:rotate(0);}88%{transform:rotate(-8deg);}
  92%{transform:rotate(7deg);}96%{transform:rotate(-3deg);}}

/* Section anchor offset for sticky header */
section[id]{scroll-margin-top:96px;}

/* Gradient text */
.text-gradient{
  background:linear-gradient(90deg,var(--gold),var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Hero */
.hero-overlay{
  background:
    radial-gradient(100% 100% at 85% 10%, rgba(232,84,42,.28), transparent 55%),
    linear-gradient(90deg, rgba(15,13,12,.92) 0%, rgba(15,13,12,.7) 38%, rgba(15,13,12,.32) 72%, rgba(15,13,12,.15) 100%),
    linear-gradient(180deg, rgba(15,13,12,.25) 0%, rgba(15,13,12,.45) 60%, rgba(15,13,12,.95) 100%);
}
.hero-content h1{text-shadow:0 2px 30px rgba(0,0,0,.45);}
.hero-content p{text-shadow:0 1px 14px rgba(0,0,0,.4);}

/* Hero slider */
.hero-slider{overflow:hidden;}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);transition:opacity 1.4s ease;will-change:opacity,transform;}
.hero-slide.active{opacity:1;animation:hero-zoom 7s ease-out forwards;}
@keyframes hero-zoom{from{transform:scale(1.08);}to{transform:scale(1);}}
.hero-dot{width:9px;height:9px;border-radius:9999px;background:rgba(255,255,255,.4);
  border:0;cursor:pointer;padding:0;transition:.2s ease;}
.hero-dot:hover{background:rgba(255,255,255,.7);}
.hero-dot.active{background:var(--ember);width:26px;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;border-radius:9999px;padding:.8rem 1.5rem;transition:.18s ease;
  line-height:1;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
/* Compact button for tight rows (e.g. menu item cards) */
.btn-sm{padding:.5rem 1rem;font-size:.85rem;}
.btn-ember{background:var(--ember);color:#fff;box-shadow:0 10px 24px -10px rgba(232,84,42,.8);}
.btn-ember:hover{background:var(--ember-d);}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{filter:brightness(1.05);}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,.2);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#241f1c;}
/* style.css is unlayered, so .btn's display:inline-flex beats Tailwind v4's
   layered `hidden` utility. Re-assert the responsive hide/show for buttons. */
.btn.hidden{display:none;}
@media (min-width:640px){.btn.hidden.sm\:inline-flex{display:inline-flex;}}

/* Cards */
.card{background:#fff;border-radius:1.25rem;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,13,12,.06),0 12px 30px -18px rgba(15,13,12,.35);
  transition:transform .25s ease, box-shadow .25s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 45px -20px rgba(15,13,12,.5);}
.card img{transition:transform .5s ease;}
.card:hover img{transform:scale(1.06);}

/* Badge */
.badge{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:.28rem .6rem;border-radius:9999px;}
.badge-popular{background:var(--gold);color:var(--ink);}
.badge-new{background:#16a34a;color:#fff;}
.badge-spicy{background:var(--ember);color:#fff;}
.badge-veg{background:#0ea5e9;color:#fff;}

/* Category chips (menu tabs) */
.chip{display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid rgba(15,13,12,.12);background:#fff;border-radius:9999px;
  padding:.55rem 1.1rem;font-weight:600;white-space:nowrap;transition:.15s;cursor:pointer;}
.chip svg{width:1.15em;height:1.15em;flex:0 0 auto;}
.chip:hover{border-color:var(--ember);}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* Scroll-reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* Open/closed dot */
.live-dot{width:.5rem;height:.5rem;border-radius:9999px;display:inline-block;}
.live-dot.on{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulse 2s infinite;}
.live-dot.off{background:#ef4444;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6);}70%{box-shadow:0 0 0 8px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}

/* Gallery */
.gallery-item{aspect-ratio:1/1;overflow:hidden;border-radius:1rem;cursor:pointer;}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.gallery-item:hover img{transform:scale(1.08);}

/* Lightbox / gallery viewer */
.lightbox{position:fixed;inset:0;background:rgba(15,13,12,.92);display:none;
  align-items:center;justify-content:center;z-index:80;padding:1.5rem;touch-action:pan-y;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:1rem;box-shadow:0 30px 80px rgba(0,0,0,.6);
  user-select:none;-webkit-user-drag:none;}
.lb-btn{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:9999px;border:0;cursor:pointer;color:#fff;font-size:1.15rem;
  background:rgba(255,255,255,.14);backdrop-filter:blur(4px);transition:background .15s ease,transform .1s ease;}
.lb-btn:hover{background:rgba(255,255,255,.28);}
.lb-btn:active{transform:scale(.94);}
.lb-prev{left:1.1rem;top:50%;transform:translateY(-50%);}
.lb-next{right:1.1rem;top:50%;transform:translateY(-50%);}
.lb-prev:active{transform:translateY(-50%) scale(.94);}
.lb-next:active{transform:translateY(-50%) scale(.94);}
.lb-close{top:1.1rem;right:1.1rem;width:44px;height:44px;font-size:1rem;}
.lb-count{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.75);font-size:.85rem;font-weight:600;letter-spacing:.03em;}
@media (max-width:640px){.lb-prev{left:.5rem;}.lb-next{right:.5rem;}.lb-btn{width:42px;height:42px;}}

/* Mobile sticky action bar */
.actionbar{box-shadow:0 -8px 30px -12px rgba(15,13,12,.4);}

/* Hide scrollbar for chip row */
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}

/* Floating quick-call button */
.call-fab{text-decoration:none;}
.call-fab-btn{position:relative;z-index:2;width:60px;height:60px;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(145deg,var(--ember),var(--ember-d));
  box-shadow:0 12px 28px -8px rgba(232,84,42,.75),0 4px 10px rgba(0,0,0,.18);
  transition:box-shadow .18s ease;}
.call-fab-btn svg{animation:fab-ring 2.2s ease-in-out infinite;transform-origin:50% 45%;}
.call-fab:hover .call-fab-btn{box-shadow:0 16px 34px -8px rgba(232,84,42,.9);animation-play-state:paused;transform:scale(1.08);}
.call-fab:active .call-fab-btn{transform:scale(.95);}
/* Continuous bob so the button always draws the eye */
/* @keyframes fab-bob{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-7px) scale(1.05);}} */
/* Periodic "ringing" shake of the handset */
@keyframes fab-ring{0%,72%,100%{transform:rotate(0);}76%{transform:rotate(-16deg);}82%{transform:rotate(14deg);}88%{transform:rotate(-10deg);}94%{transform:rotate(8deg);}}
.call-fab-ring{position:absolute;inset:0;width:60px;height:60px;border-radius:9999px;
  background:var(--ember);opacity:.45;z-index:1;animation:fab-pulse 2s ease-out infinite;}
.call-fab-label{position:absolute;right:72px;background:var(--ink);color:#fff;font-weight:700;
  font-size:.85rem;padding:.45rem .8rem;border-radius:9999px;white-space:nowrap;opacity:0;
  transform:translateX(8px);transition:.2s ease;pointer-events:none;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.5);}
.call-fab:hover .call-fab-label{opacity:1;transform:translateX(0);}
@keyframes fab-pulse{0%{transform:scale(1);opacity:.5;}70%{transform:scale(1.7);opacity:0;}100%{opacity:0;}}

/* Marquee strip */
.marquee{display:flex;gap:3rem;white-space:nowrap;animation:marquee 26s linear infinite;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Respect users who ask for less motion: neutralize incidental animation/transition. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  /* Keep the signature brand loops alive - they carry the page's energy. */
  .marquee{
    animation-duration:26s !important;
    animation-iteration-count:infinite !important;
  }
  .header-logo-light,.header-logo-dark{
    animation-duration:6s !important;
    animation-iteration-count:infinite !important;
  }
  .call-fab-btn{animation-duration:1.7s !important;animation-iteration-count:infinite !important;}
  .call-fab-btn svg{animation-duration:2.2s !important;animation-iteration-count:infinite !important;}
  .call-fab-ring{animation-duration:2s !important;animation-iteration-count:infinite !important;}
}