/* Global safety: images never overflow their container */
img {
  max-width: 100%;
  height: auto;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 70vh;
  overflow: hidden;
  isolation: isolate;
}

/* instant gradient while video loads */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 800px at 10% 20%, rgba(255, 255, 255, .08), transparent 60%),
    radial-gradient(900px 600px at 90% 80%, rgba(0, 0, 0, .06), transparent 55%),
    linear-gradient(115deg, #f7b67a 0%, #ef9a57 40%, #f1b97e 100%);
  animation: bg-pan 18s ease-in-out infinite alternate;
  background-size: 140% 140%, 140% 140%, 200% 200%;
}

@keyframes bg-pan {
  0% {
    background-position: 0% 0%, 100% 100%, 0% 50%;
  }

  50% {
    background-position: 50% 50%, 50% 50%, 100% 50%;
  }

  100% {
    background-position: 100% 100%, 0% 0%, 0% 100%;
  }
}

/* video fills container */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.02) brightness(.95);
}

/* title overlay */
.hero__content {
  position: relative;
  z-index: 1;
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 clamp(12px, 4vw, 48px);
  /* keeps the logo off the edges on mobile */
}

.hero-logo {
  display: block;
  width: clamp(220px, 70vw, 960px);
  /* min 220px, usually 70% of viewport width, max 960px */
  height: auto;
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.6));
}

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__bg {
    animation: none;
  }

  .hero__video {
    display: none;
  }
}

/* Small-height screens */
@media (max-height:560px) {
  .hero {
    min-height: 60vh;
  }

  .supper {
    transform: translateY(-.15em) rotate(-2deg);
  }
}

/* controls height of Hero on mobile */
@media (max-width: 768px) {
  .hero {
    min-height: 20vh;
    /* reduce hero height */
  }

  .hero__content {
    min-height: 30vh;
    /* scale overlay content to match */
  }
}

/* NAV BAR */

/* Scale logos as needed */
.logo-desktop {
  max-height: 300px;
}

.logo-mobile {
  max-height: 100px;
}

/* Keep logo from being too tall */
.navbar-brand img {
  max-height: 48px;
  /* good size for mobile/desktop */
  height: auto;
  width: auto;
}

@media (min-width: 992px) {

  /* large screens */
  .navbar-brand img {
    max-height: 72px;
    /* allow it to grow bigger */
  }
}

/* Nav Bar */

.navbar {
  background: linear-gradient(to right, #ff69b4, #8a2be2);
  /* pink → purple */
}


.navbar .nav-link {
  color: #fff !important;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.navbar .btn {
  background-color: #fff;
  color: #8a2be2;
  font-weight: bold;
  border: none;
}

.navbar .btn:hover {
  background-color: #ff69b4;
  color: #fff;
}

/* Make expanded hamburger menu items stack vertically but align right */
#mainNav .navbar-nav {
  margin-left: auto;
  /* push nav group to right */
  align-items: flex-end;
  /* align items to the right edge */
  text-align: right;
  /* align text inside the items */
}

#mainNav .nav-item {
  width: 100%;
  /* each item takes full width of collapse */
}

#mainNav .nav-link {
  display: block;
  text-align: right;
  /* align text to the right */
  padding-right: 1rem;
  /* add breathing room on right edge */
}

/* Style the offcanvas */
.glsc-offcanvas {
  width: 250px;
  /* about 2 columns wide */
  background: linear-gradient(to bottom, #ff69b4, #8a2be2);
  color: #fff;
}

.glsc-offcanvas .nav-link {
  color: #fff !important;
  font-family: 'Monoton';
  /* funky 70s vibe font */
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  text-align: left;
  /* text flush left */
  align-items: flex-start;
  /* flex children align to the start */
  width: 100%;
  /* full row clickable */
  padding-left: 1rem;
}

.glsc-offcanvas .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

/* For wider screens, keep it neat */
@media (min-width: 768px) {
  .glsc-offcanvas {
    width: 300px;
  }
}




/* Swiper Restaurant View */
/* Make sure the swiper container fills the width */
#logo_carousel {
  width: 100%;
  min-height: 70vh;
  /* full viewport height; adjust as needed */
  display: block;

  /* Animated gradient background */
  background: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80, #facc15);
  background-size: 800% 800%;
  animation: gradientShift 15s ease infinite;
}

/* Animate the background colors shifting */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Swiper slide tweaks so images sit nicely */
#logo_carousel swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  /* let gradient show around slides */
}

#logo_carousel swiper-slide img {
  display: block;
  width: 90%;
  /* slightly smaller to let gradient peek through */
  height: auto;
  border-radius: 12px;
  /* optional */
}

@media (max-width: 768px) {
  .mySwiper {
    height: 20vh;
    /* carousel takes ~40% */
  }

  .mySwiper img {
    max-height: 90%;
    /* so images don’t overflow container */
  }
}

/* === FULL CONCEPT CAROUSEL ONLY === */

#full_concept {
  width: 100%;
  height: 100vh;
  /* full height on mobile by default */
  display: block;
  background: #bfe4b6;
  /* light green background */
  margin: 0 auto;
}

/* On medium screens and up, shrink to 50% height */
@media (min-width: 768px) {
  #full_concept {
    height: 50vh;
    /* 50% of viewport height */
  }
}

#full_concept swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

#full_concept swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
}