:root{
  --accent:#C6D642;      /* green */
  --purple:#662E81;      /* brand purple */
  --blue:#28316F;        /* deep blue ring */
  --bg:#101010;          /* page background */
  --panel:#111;          /* card/panel */
  --text:#fff;
  --muted:#aaa;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

/* Base */
body{
  font-family:'Montserrat',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Typography accents */
h1,h2,h3,h4{color:var(--accent);font-weight:700}
h2{text-align:center}

/* Header / Nav */
header{background:var(--purple);color:#fff;position:sticky;top:0;z-index:1000}
.nav-container{max-width:1200px;margin:auto;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between}
/* Logo and Instagram group */
.logo-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.logo-img {
  height: 60px;
  width: auto;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.logo-img:hover {
  transform: scale(1.05);
}

/* Instagram icon beside logo */
.social-link {
  color: var(--accent);
  font-size: 1.6rem;
  transition: color 0.3s, transform 0.2s;
}

.social-link:hover {
  color: #fff;
  transform: scale(1.1);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .nav-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .logo-group {
    flex: 1 1 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
  }

  .logo-img {
    height: 50px;
  }
}


.social-link {
  color: var(--accent);
  font-size: 1.5rem;
  transition: color 0.3s, transform 0.2s;
}

.social-link:hover {
  color: #fff;
  transform: scale(1.1);
}

/* Make sure it looks good on mobile too */
@media (max-width: 768px) {
  .nav-container {
    flex-wrap: wrap;
  }
  .logo-group {
    flex: 1 1 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
}

nav ul{list-style:none;display:flex;gap:.5rem}
nav ul li a,.nav-btn{display:block;padding:.5rem 1rem;color:#fff;text-decoration:none;font-weight:600;border-radius:6px;transition:background .3s}
nav ul li a:hover,.nav-btn:hover{background:var(--accent);color:#000}
.nav-btn{background:var(--accent);color:#000}
.menu-toggle{display:none;font-size:1.6rem;cursor:pointer;color:#fff}
.address-bar{background:#512567;text-align:center;padding:.35rem}
.address{color:#ddd;text-decoration:none;font-size:.9rem;display:inline-flex;gap:.35rem;align-items:center}
.address i{color:var(--accent)}
.address-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.address-bar .divider {
  color: var(--accent);
  font-weight: 600;
}

.address.phone i {
  color: var(--accent);
}

.address.phone:hover {
  color: var(--accent);
}


/* Opening Hours Bar */
.opening-hours {
  background: #000; /* black background */
  text-align: center;
  padding: 0.6rem 1rem;
}

.opening-hours p {
  color: #C6D642; /* brand green accent */
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}


/* Mobile menu drops BELOW the header */
@media (max-width:768px){
  header{position:relative}
  nav ul{
    position:absolute;left:0;top:100%;width:100%;
    background:#222;flex-direction:column;display:none;padding:1rem;z-index:999
  }
  nav ul.showing{display:flex}
  .menu-toggle{display:block}
}

/* Hero */
.hero{position:relative;height:80vh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;background:#000}
.hero-bg{position:absolute;inset:0;background-image:url('./images/dbimage7.jpeg');background-size:cover;background-position:center;filter:brightness(.6);will-change:transform}
.hero-inner{position:relative;z-index:1;padding:0 1rem}
.hero-inner h1{font-family:'Montserrat',sans-serif;font-size:clamp(2.2rem,5vw,3.5rem);color:var(--accent)}
.hero-inner p{color:#e8e8e8}

/* Sections */
section{max-width:1200px;margin:2rem auto;padding:2rem 1rem;background:var(--panel);border-radius:12px}

/* ABOUT slideshow (JS-driven) */
.about{display:flex;flex-direction:column;gap:1.5rem}
.about-carousel {
  flex: 1 1 50%;
  border-radius: 12px;
  overflow: hidden;
  height: 260px;
  min-width: 280px;
  position: relative;
}

@media (min-width: 600px) {
  .about-carousel {
    height: 400px; /* taller on desktop for better aspect ratio */
  }
  .about-text {
    flex: 1 1 50%;
    padding-left: 1.5rem;
    text-align: left;
  }
}

.about-text{text-align:center}
.slides{position:relative;width:100%;height:100%}
.slides img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 1s ease-in-out
}
.slides img.active{opacity:1}

/* MENU: single black box with accordion */
#menu{background:#000;border-radius:12px;padding:2rem}
.menu-category{background:#1a1a1a;margin:0;border-bottom:1px solid #333}
.menu-category:last-child{border-bottom:none}
.category-toggle{
  width:100%;text-align:left;background:#1a1a1a;color:var(--accent);
  border:none;cursor:pointer;font-size:1.1rem;font-weight:600;
  padding:1rem;display:flex;justify-content:space-between;align-items:center
}
.category-content{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s ease,opacity .45s ease;
  padding:0 1rem
}
.menu-category.open .category-content{
  max-height:1000px;opacity:1;padding:1rem
}
.menu-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.menu-item h4 {
  font-size: 0.95rem;           /* slightly smaller */
  font-weight: 600;
  color: #999;                  /* medium grey */
  margin-bottom: 0.25rem;
}

.price {
  color: #888;                  /* same tone as item name */
  font-weight: 600;
  font-size: 0.95rem;
  margin-left: 0.25rem;
}

.menu-item p {
  color: #ccc;
  font-size: 0.95rem;
  margin-left: 0.25rem;
}


/* Optional: subtle divider between items */
.menu-item:not(:last-child) {
  border-bottom: 1px solid #222;
  padding-bottom: 1rem;
}


/* Catering Section */
#catering {
  background: var(--panel);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
}

.catering-content {
  max-width: 800px;
  margin: 0 auto;
  color: #ddd;
  line-height: 1.7;
  font-size: 1.05rem;
}

.catering-content strong {
  color: var(--accent);
}

.catering-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.catering-link:hover {
  text-decoration: underline;
  color: #fff;
}


/* Footer */
footer{background:#111;color:#fff;text-align:center;padding:1.25rem;border-radius:12px}

/* About / Forms responsive tweaks */
@media (min-width:600px){
  .about{flex-direction:row}
}