/* === Base Styles === */
:root{
  /* Maximus gold v2 */
  --gold-bright: #f7db4b;  /* lighter shine */
  --gold-mid:    #e8c131;  /* main gold */
  --gold-deep:   #8f6f05;  /* deeper shadow */
  --gold-solid:  #e8c131;  /* solid fallback */
}

body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Header === */
header { text-align: center; padding: 20px; }

/* ↓ makes the ring look slimmer without editing the image */
.logo {
  width: 235px;            /* was 260px */
  max-width: 95%;
  height: auto;
  margin-bottom: 10px;
  object-fit: contain;
}

.hero-title, h1 { font-size: 2rem; color: var(--gold-solid); margin: 0; }
.slogan { font-style: italic; color: #aaa; font-size: 0.9rem; margin-top: 0.5rem; }

/* === Menu Banner === */
.menu-banner {
  background-color: #0f0f0f;
  text-align: center;
  padding: 1rem 0;         /* was 0.8rem */
  font-size: 1.25rem;      /* was 1.1rem */
  font-weight: 800;
  margin: 0.35rem 0 0.8rem;/* moved up a bit */
  border-top: 1px solid var(--gold-deep);
  border-bottom: 1px solid var(--gold-deep);
}

/* gold gradient title */
.menu-banner h2{
  margin: 0;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-mid) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === Featured Meals (the H2 after .menu-banner) */
.menu-banner + h2{
  text-align:center;
  font-size: 1.35rem !important;
  margin: .6rem 0 0;
  letter-spacing: .04em;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-mid) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* === Grid Layout === */
.food-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.food-card {
  background: #1a1a1a;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  width: calc(50% - 1rem);
  max-width: 160px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.food-card:hover { transform: scale(1.03); }

.food-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.food-info { padding: 0.3rem; line-height: 1.1; }
.food-info h4 { color: #fff; font-size: 0.8rem; margin: 0.2rem 0; }

/* gold gradient price */
.food-info p {
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-mid) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === Meal Captions / Tray Note === */
.meal-caption {
  text-align: center; font-size: 0.95rem; color: #ddd;
  margin: 1.5rem auto 2rem; padding: 1rem; max-width: 90%;
  line-height: 1.5; background-color: #111; border: 1px solid #333; border-radius: 10px;
}
.tray-note {
  text-align: center; font-size: 0.9rem; color: #aaa;
  margin: 2rem auto 5rem; padding: 1rem; max-width: 90%;
  background-color: #111; border-radius: 10px; border: 1px solid #333; line-height: 1.4;
}

.page-back {
  text-align: center;
  margin: 0 auto 5rem;
}

.page-back a {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--gold-deep);
  background-color: #111;
  color: var(--gold-solid);
  text-decoration: none;
  font-weight: 700;
}

.page-back a:hover,
.page-back a:focus-visible {
  box-shadow: 0 0 10px rgba(232, 193, 49, 0.28);
}

/* === Bottom Navigation === */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: #111;
  border-top: 1px solid #333;
  display: flex; justify-content: space-around;
  padding: 0.5rem 0;
  z-index: 1000;
}

.bottom-nav a,
.bottom-nav a:visited,
.bottom-nav a:focus,
.bottom-nav a:active{
  color: var(--gold-solid);
  font-weight: 700;
  text-decoration: none;
  font-size: 22px;
  padding: 0.6rem;
}

.bottom-nav a.active{
  color: var(--gold-solid);
  border-bottom: 1px solid var(--gold-deep);
}

/* tap glow */
.bottom-nav a:active{
  box-shadow:
    inset 0 -2px 0 var(--gold-mid),
    0 0 8px rgba(232, 193, 49, 0.55);
}

/* === Responsive === */
@media (max-width: 600px) {
  .logo { width: 180px; }
  .hero-title { font-size: 1.5rem; }
  .slogan { font-size: 0.75rem; }
  .food-card { width: 48%; }
  .food-info h4, .food-info p { font-size: 0.78rem; }
  .bottom-nav a { font-size: 18px; }
}

@media (max-width: 400px) {
  .food-card { width: 100%; }
  .logo { width: 160px; }
}

/* Prevent last row being hidden behind nav */
.food-grid { padding-bottom: 4rem; }

/* === Contact page elements === */
.contact-container {
  max-width: 600px; margin: 2rem auto 5rem; padding: 2rem;
  background-color: #111; border: 1px solid #333; border-radius: 10px;
  text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.contact-container h2{
  margin-bottom: 1.5rem; font-size: 1.5rem;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-mid) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact-item{ margin: 1.5rem 0; font-size: 1.05rem; color:#ccc; line-height:1.6; }
.contact-item span, .contact-item a{
  color: var(--gold-solid); text-decoration: none; display:block; margin: .3rem 0;
}
.contact-item a:hover{ text-decoration: underline; }

/* === Drinks categories: gold tiles + toggle glow === */
.menu-toggle{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr)); /* 2-up */
  gap: 1.2rem;
  max-width: 820px;
  margin: 1.4rem auto 1.8rem;
  padding: 0 1rem;
}

.menu-toggle a{
  display: block;
  text-align: center;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  border: 2px solid #b68617;                 /* crisp edge */
  background: linear-gradient(180deg,#f1d24a 0%,#e8c131 55%,#c4971e 100%);
  color: #111;                                /* dark text on gold */
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .3px;
  box-shadow:
    0 2px 0 #8f6f05,                          /* small base edge */
    0 6px 22px rgba(232,193,49,.18);          /* ambient */
  transition: transform .06s ease,
             box-shadow .18s ease,
             filter .18s ease;
}

/* hover lift */
.menu-toggle a:hover{
  filter: brightness(1.03);
  box-shadow:
    0 2px 0 #8f6f05,
    0 10px 28px rgba(232,193,49,.28);
}

/* press feedback */
.menu-toggle a:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 -2px 6px rgba(0,0,0,.25),
    0 8px 30px rgba(232,193,49,.35);
}

/* keep colors stable on visited/focus — FIX for dimming after click */
.menu-toggle a:link,
.menu-toggle a:visited,
.menu-toggle a:focus{
  background: linear-gradient(180deg,#f1d24a 0%,#e8c131 55%,#c4971e 100%) !important;
  border: 2px solid #b68617 !important;
  color:#111 !important;
  opacity: 1 !important;
  filter: none !important;
  outline: none;
}

/* toggled/current page — soft golden glow behind */
.menu-toggle a.active,
.menu-toggle a[aria-current="page"]{
  box-shadow:
    0 0 0 2px rgba(255,220,100,.55),
    0 16px 40px rgba(232,193,49,.42);
}
/* === GOLD GLOW ON TOGGLE (tiles + bottom nav) === */

/* remove default tap highlight so the glow is visible on mobile */
a { -webkit-tap-highlight-color: transparent; }

/* base tile gets its own glow layer sitting behind it */
.menu-toggle a{
  position: relative;
  isolation: isolate;                  /* so the glow sits behind only this tile */
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

/* the glow itself (off by default) */
.menu-toggle a::after{
  content:"";
  position:absolute;
  inset:-10px;                         /* extend outside the tile for a halo */
  border-radius: 20px;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  transition: opacity .18s ease;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(232,193,49,.40) 0%,
      rgba(232,193,49,.20) 45%,
      transparent 70%);
}

/* show glow while interacting */
.menu-toggle a:hover,
.menu-toggle a:focus-visible{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 2px 0 #8f6f05,
    0 10px 28px rgba(232,193,49,.28);
}
.menu-toggle a:hover::after,
.menu-toggle a:focus-visible::after,
.menu-toggle a:active::after{          /* quick flash on tap */
  opacity:1;
}

/* keep a persistent glow for the “current” category */
.menu-toggle a.active,
.menu-toggle a[aria-current="page"]{
  box-shadow:
    0 0 0 2px rgba(255,220,100,.55),
    0 12px 36px rgba(232,193,49,.28);
}
.menu-toggle a.active::after,
.menu-toggle a[aria-current="page"]::after{
  opacity:1;
}

/* bottom nav subtle glow on press/hover (no color change) */
.bottom-nav a:hover,
.bottom-nav a:focus-visible,
.bottom-nav a:active{
  text-shadow: 0 0 12px rgba(232,193,49,.45);
  box-shadow:
    inset 0 -2px 0 var(--gold-mid),
    0 0 20px rgba(232,193,49,.35);
}
/* === Gold glow for food images/cards === */
/* keep the current hover scale, just add a halo */
.food-card{
  position: relative;
  transition: box-shadow .22s ease, filter .22s ease;
  /* existing transform hover rule remains intact above */
}

/* hover / keyboard focus */
.food-card:hover,
.food-card:focus-within{
  /* keep the original soft shadow + add golden glow outside the card */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.35),         /* your base shadow */
    0 0 18px rgba(232,193,49,0.28),     /* gold halo */
    0 10px 28px rgba(232,193,49,0.22);  /* ambient gold glow */
  filter: brightness(1.02);
}

/* tap/press feedback (mobile) */
.food-card:active{
  box-shadow:
    0 2px 8px rgba(0,0,0,0.45),
    0 0 22px rgba(232,193,49,0.35),
    0 12px 32px rgba(232,193,49,0.28);
}