/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Playfair+Display:ital,wght@0,500;0,700;1,500&display=swap');

/* ===== Reset / Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  --strip-height: 0px;
  --header-height: 64px;
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  font-family: 'Montserrat', Arial, sans-serif;
  color: #1a1a1a;
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  padding-top: var(--header-height);
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
section,
header,
footer,
main {
  max-width: 100%;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-weight: 800;
  letter-spacing: .5px;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-green { background: #11502f; color: #fff; padding: 15px 42px; font-size: 18px; border-radius: 4px; }
.btn-red   { background: #f1371f; color: #fff; padding: 16px 44px; font-size: 20px; border-radius: 2px; }
.btn-dark  { background: #2b2b2b; color: #fff; padding: 18px 42px; font-size: 19px; }

/* ===== SIPO status strip offset ===== */
/* Keep fixed chrome visible while reserving matching page space. */
body.has-status-strip {
  padding-top: calc(var(--strip-height, 0px) + var(--header-height));
}
body.has-status-strip .site-header { top: var(--strip-height, 0px); }

/* ===== Header / Nav ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  width: 100%;
  background: #000;
}
.nav {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 26px; min-height: var(--header-height); position: relative;
}
.nav-brand { position: absolute; left: 28px; display: none; }
.nav-brand img { height: 42px; }
.nav-links {
  display: flex; list-style: none; gap: 36px; align-items: center;
}
.nav-links a {
  color: #fff; font-weight: 700; font-size: 18px; letter-spacing: .3px;
  transition: color .15s ease;
}
.nav-links a:hover { color: #f7a417; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
  position: absolute; right: 20px;
}
.nav-toggle span { width: 26px; height: 3px; background: #fff; border-radius: 2px; }

/* ===== Hero ===== */
.hero {
  background: radial-gradient(circle at 60% 45%, #fba81d 0%, #f7901a 55%, #ef7d16 100%);
  overflow: hidden;
  scroll-margin-top: calc(var(--strip-height, 0px) + var(--header-height));
}
.hero-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 610px; padding-top: 26px; padding-bottom: 20px;
}
.hero-left { flex: 1 1 46%; }
.hero-badge {
  width: 210px; margin-bottom: 4px;
  animation: canva-pop-in .85s cubic-bezier(.2,.9,.2,1) .1s both;
}
.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-style: italic;
  font-size: 46px; line-height: 1; color: #fff;
  text-transform: uppercase; letter-spacing: -.5px;
  margin: 6px 0 26px;
  text-shadow: 0 3px 10px rgba(0,0,0,.12);
  animation: canva-slide-up .85s cubic-bezier(.2,.9,.2,1) .28s both;
}
.hero-left .btn { animation: canva-slide-up .75s cubic-bezier(.2,.9,.2,1) .48s both; }
.hero-right {
  flex: 1 1 54%; position: relative;
  aspect-ratio: 600 / 540;   /* keeps the tighter Canva-style cluster at any width */
  max-height: 560px;
}
.hero-img {
  position: absolute; filter: drop-shadow(0 18px 28px rgba(0,0,0,.28));
}
/* Tight overlapping cluster (matched to the Canva layout):
   big bowl on top, steak wrap bottom-right, fries cup bottom-left in front */
.hero-bowl  {
  width: 88%; top: 0; left: 2%; z-index: 1;
  animation: canva-food-in-right .95s cubic-bezier(.17,.84,.32,1) .18s both, canva-float 5.8s ease-in-out 1.2s infinite;
}
.hero-steak {
  width: 72%; bottom: 1%; right: 2%; z-index: 2;
  animation: canva-food-in-right .95s cubic-bezier(.17,.84,.32,1) .38s both, canva-float-soft 6.4s ease-in-out 1.4s infinite;
}
.hero-fries {
  width: 35%; bottom: 10%; left: 11%; z-index: 3;
  animation: canva-food-rise .9s cubic-bezier(.17,.84,.32,1) .55s both, canva-float-fries 5.4s ease-in-out 1.6s infinite;
}

/* ===== Feature Cards ===== */
.cards-section { background: #f4f1de; padding: 64px 0; }
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; margin-bottom: 34px;
}
.card {
  position: relative; background: #6b3410; border-radius: 14px;
  display: flex; align-items: center; min-height: 130px;
  padding: 0 22px 0 130px; overflow: visible;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0,0,0,.2); }
.card img {
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 130px; height: 130px; object-fit: cover; border-radius: 50%;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.3));
  transition: transform .25s ease;
}
.card:hover img { transform: translateY(-50%) scale(1.05) rotate(-2deg); }
.card-body { color: #fff; display: flex; flex-direction: column; }
.card-body h3 { font-size: 26px; font-weight: 900; font-style: italic; line-height: 1; }
.card-sub { font-size: 13px; font-weight: 700; letter-spacing: .5px; margin-top: 2px; }
.card-price { font-size: 40px; font-weight: 900; font-style: italic; line-height: 1; }

.cta-row { display: flex; gap: 22px; align-items: stretch; }
.cta-note {
  flex: 1; display: flex; align-items: center;
  border: 2px solid #2b6cff; border-radius: 6px;
  color: #ef7d16; font-weight: 900; font-size: 19px;
  letter-spacing: .3px; padding: 16px 28px; text-transform: uppercase;
}
.cta-btn { display: flex; align-items: center; white-space: nowrap; }

/* ===== Welcome / About ===== */
.welcome { background: #c0341a; color: #fff; }
.welcome-inner {
  display: flex; align-items: center; gap: 50px;
  padding-top: 70px; padding-bottom: 70px;
}
.welcome-img { flex: 1 1 42%; }
.welcome-img img { filter: drop-shadow(0 16px 28px rgba(0,0,0,.3)); }
.welcome-text { flex: 1 1 58%; }
.welcome-text h2 {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 42px; margin-bottom: 22px; color: #fff;
}
.welcome-text p { margin-bottom: 16px; font-size: 17px; color: #fdeede; }

/* ===== Boss / Order Online banner ===== */
.boss {
  background: #120705 url('assets/fire-bg.jpg') center/cover no-repeat;
  background-blend-mode: lighten;
  animation: canva-bg-pan 16s ease-in-out infinite alternate;
}
.boss-inner {
  display: flex; align-items: center; gap: 30px;
  padding-top: 70px; padding-bottom: 70px; min-height: 520px;
}
.boss-text { flex: 1 1 45%; }
.boss-text h2 {
  font-weight: 900; font-style: italic; color: #fff;
  font-size: 64px; line-height: .98; text-transform: uppercase;
  margin-bottom: 32px;
}
.boss-img { flex: 1 1 55%; position: relative; min-height: 440px; }
.boss-plate {
  width: 80%; margin: 0 4% 0 auto; position: relative; z-index: 1;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.5));
  animation: canva-float-soft 6.5s ease-in-out infinite;
}
.boss-board {
  position: absolute; width: 52%; bottom: -2%; right: 2%; z-index: 2;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.5));
  animation: canva-float-fries 5.8s ease-in-out .45s infinite;
}

/* ===== Explore Flavors ===== */
.flavors {
  position: relative; text-align: center;
  background: #f6c9bd url('assets/flavors-spread.jpg') center/cover no-repeat;
  padding: 90px 0;
}
.flavors-overlay {
  position: absolute; inset: 0; background: rgba(255,235,228,.78);
}
.flavors-inner { position: relative; z-index: 1; max-width: 920px; }
.flavors h2 {
  color: #f1371f; font-weight: 900; font-style: italic;
  font-size: 56px; text-transform: uppercase; margin-bottom: 24px;
}
.flavors p { font-size: 18px; margin-bottom: 22px; color: #2a2a2a; }
.flavors-strong { font-weight: 700; }
.flavors-strong strong { font-size: 21px; }

/* ===== Footer ===== */
.footer { background: linear-gradient(180deg, #fba81d 0%, #f7901a 100%); color: #5a2f08; }
.footer-inner {
  display: flex; gap: 50px; align-items: flex-start;
  padding-top: 60px; padding-bottom: 50px;
}
.footer-brand { flex: 1 1 45%; }
.footer-brand img { width: 230px; margin-bottom: 22px; }
.footer-brand p { font-family: 'Playfair Display', serif; font-size: 18px; color: #6b3a10; }
.footer-info { flex: 1 1 45%; }
.footer-info h4 {
  color: #c0341a; font-size: 18px; font-weight: 800;
  text-decoration: underline; margin: 18px 0 6px; letter-spacing: .3px;
}
.footer-info h4:first-child { margin-top: 0; }
.footer-info p { font-weight: 700; font-size: 17px; color: #4a2606; }
.footer-info a { color: #4a2606; }
.footer-info a.footer-msg { margin-top: 26px; color: #fff; }

/* Opening hours list (populated live by the SIPO API) */
.hours-list { list-style: none; margin: 0; padding: 0; max-width: 360px; }
.hours-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 5px 0; border-bottom: 1px solid rgba(90,47,8,.18);
  font-weight: 700; font-size: 16px; color: #4a2606;
}
.hours-list li:last-child { border-bottom: none; }
.hours-list .day { flex: 0 0 auto; }
.hours-list .time { text-align: right; }
.hours-list .closed-day { color: #c0341a; }
.hours-list li.today { color: #11502f; }
.hours-list li.today .day::after { content: " • today"; font-size: 12px; opacity: .7; }

.footer-social {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 24px 0; background: #000; color: #fff;
  font-weight: 700; font-size: 19px; letter-spacing: .5px;
}
.footer-social a { line-height: 0; transition: transform .15s ease; }
.footer-social a:hover { transform: scale(1.1); }

.footer-bar {
  background: #000; color: #cfcfcf;
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
  padding: 18px 28px; font-size: 12px; letter-spacing: .4px;
}
.footer-credit { display: flex; align-items: center; gap: 8px; }
.footer-credit img { height: 22px; }

/* ===== Canva-style motion ===== */
@keyframes canva-slide-up {
  from { opacity: 0; transform: translateY(34px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes canva-pop-in {
  0% { opacity: 0; transform: translateY(20px) scale(.82); }
  68% { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes canva-food-in-right {
  from { opacity: 0; transform: translateX(70px) rotate(2deg) scale(.95); }
  to { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}
@keyframes canva-food-rise {
  from { opacity: 0; transform: translateY(80px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes canva-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(0, -10px, 0) rotate(.5deg); }
}
@keyframes canva-float-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}
@keyframes canva-float-fries {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(0, -9px, 0) rotate(-1deg); }
}
@keyframes canva-bg-pan {
  from { background-position: center top; }
  to { background-position: center 58%; }
}

/* ===== Scroll reveal animation ===== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(48px) scale(.96);
  transition:
    opacity .9s cubic-bezier(.17, .84, .32, 1),
    transform .9s cubic-bezier(.17, .84, .32, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-on-scroll.reveal-from-left { transform: translateX(-52px) scale(.96); }
.reveal-on-scroll.reveal-from-right { transform: translateX(52px) scale(.96); }
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.card.reveal-on-scroll.is-visible:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-badge,
  .hero-title,
  .hero-left .btn,
  .hero-bowl,
  .hero-steak,
  .hero-fries,
  .boss,
  .boss-plate,
  .boss-board {
    animation: none;
  }
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .hero-title { font-size: 48px; }
  .boss-text h2 { font-size: 50px; }
  .flavors h2 { font-size: 44px; }
  .cards { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; }
}

@media (max-width: 760px) {
  html { --header-height: 58px; }
  body { position: relative; }
  .site-header,
  .hero,
  .cards-section,
  .welcome,
  .boss,
  .flavors,
  .footer,
  .contact-hero,
  .contact-section {
    overflow-x: clip;
  }

  .nav { justify-content: flex-start; min-height: 58px; }
  .nav-brand { display: block; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #000;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-links.open { max-height: 360px; }
  .nav-links li { width: 100%; border-top: 1px solid #222; }
  .nav-links a { display: block; padding: 16px 28px; }

  .hero-inner {
    flex-direction: column;
    text-align: center;
    min-height: auto;
    padding-top: 24px;
  }
  .hero-badge { margin: 0 auto 6px; width: 200px; }
  .hero-title { font-size: 40px; }
  .hero-right { width: 100%; min-height: 360px; }

  .welcome-inner, .boss-inner { flex-direction: column; }
  .welcome {
    overflow: hidden;
  }
  .welcome-inner {
    gap: 26px;
    padding-top: 54px;
    padding-bottom: 112px;
  }
  .welcome-img img {
    max-width: 86%;
    margin: 0 auto;
  }
  .welcome-text {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
  }
  .welcome-text p:last-child { margin-bottom: 0; }
  .boss { overflow: hidden; background-position: center top; }
  .boss-inner {
    align-items: stretch;
    gap: 0;
    min-height: 780px;
    padding-top: 170px;
    padding-bottom: 60px;
  }
  .boss-text { text-align: left; width: 100%; }
  .boss-text h2 {
    font-size: 42px;
    line-height: 1.14;
    margin-bottom: 28px;
  }
  .boss-text .btn-red {
    padding: 13px 38px;
    font-size: 16px;
    border-radius: 0;
  }
  .boss-img {
    width: 100%;
    min-height: 440px;
    margin-top: 46px;
  }
  .boss-plate {
    width: 88%;
    margin: 0 auto 0 2%;
  }
  .boss-board {
    width: 82%;
    top: 19%;
    right: 0;
    bottom: auto;
  }
  .reveal-on-scroll.reveal-from-left,
  .reveal-on-scroll.reveal-from-right {
    transform: none;
  }
  .reveal-on-scroll {
    transform: none;
  }
  .welcome-text h2 { font-size: 34px; }
  .flavors h2 { font-size: 34px; }
  .footer-inner {
    flex-direction: column;
    gap: 30px;
    padding-bottom: 76px;
  }
  .footer-info a.footer-msg {
    display: block;
    width: 100%;
    margin: 30px 0 26px;
  }
  .footer-social {
    padding-top: 34px;
  }
}

@media (max-width: 460px) {
  .container { padding-left: 18px; padding-right: 18px; }
  .hero-title { font-size: 32px; }
  .boss-inner { padding-top: 160px; }
  .boss-text h2 { font-size: 40px; }
  .boss-img { min-height: 410px; }
  .btn-green { padding: 15px 34px; font-size: 17px; }
  .card { padding-left: 120px; }
  .card-body h3 { font-size: 22px; }
  .card-price { font-size: 32px; }
}