/* === General Site Styling === */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

h1, .logo, .casino-line {
  font-family: 'Bebas Neue', sans-serif;  letter-spacing: 0.05em; /* Try increasing this for more spacing */ text-transform: uppercase;

}

body {
  background-color: #FBEED6;color: #ae1219;  font-family: 'Manrope', sans-serif; 
}

h1, h2, h3, h4, h5 {color: #012338;}
.title {color: #ae1219;}
.date-tag {font-weight: bold;}
/* === Mealtime Tag Colors === */
.overlay-left .tag {
  display: block;
  width: 100%;
  text-align: center; /* Optional: center the text inside the full-width tag */
  padding: 0.2rem 0.6rem; /* Optional: ensure nice vertical spacing */
  box-sizing: border-box;
}

.tag-breakfast   { background-color:rgb(163, 133, 12) !important; color: #fff!important;}
.tag-brunch      { background-color:rgb(16, 153, 172) !important; color: #fff !important;}
.tag-lunch       { background-color:rgb(28, 167, 58) !important; color: #fff !important;}
.tag-dinner      { background-color:rgb(44, 2, 161) !important; color: #fff !important;}
.tag-happyhour   { background-color:rgb(118, 58, 175) !important; color: #fff !important;}
.tag-latenight   { background-color: #2C2C2C !important; color: #fff !important;}
.tag-anytime     {background-color:rgb(201, 154, 0) !important; color: #fff !important;}
.tag-default     { background-color:rgb(177, 16, 16) !important; color: #fff !important;}


/* === Card Components === */
.special-card {border: 2px solid #ae1219;border-radius: 8px;height: 100%;}
.special-card .card-content {padding-bottom: 1.5rem;}
.meal-card {position: relative;overflow: hidden;background-size: cover;background-position: center;display: flex;border-radius: 0 0 6px 6px;align-items: center;      /* vertical centering */justify-content: center;  /* horizontal centering */padding: 0;  /* vertical padding for the overlay box itself */}
.meal-card::before {content: "";position: absolute;inset: 0;background-image: inherit;background-size: inherit;background-position: inherit;transition: transform 0.4s ease;z-index: 0;transform: scale(1);}
.meal-card:hover::before {transform: scale(1.15); /* Zoom level */}

.more-info-link {
  display: inline-block;
  transition: transform 0.4s ease;
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
}


.meal-card:hover .more-info-link {
  transform: translate(-80px, 50px) scale(1.2);
}

.meal-card:active .more-info-link,
.meal-card:focus-within .more-info-link {
  transform: translate(-80px, 50px);
}

.card-top-bar {border-radius: 6px 6px 0 0}

.overlay-content {position: relative;z-index: 1;background: rgba(48, 9, 121, 0.65);color: #ae1219;
  width: 100%;              /* Set specific width, or use px if you want fixed size */
  max-width: 360px;        /* Optional: restrict max size */
  height: 100%;
  z-index: 100;
  margin: 0 auto;          /* Center horizontally */
  padding: .1rem 1rem; /* .1rem top & bottom, 1rem left & right */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* or center, if you'd prefer everything vertically centered */
       /* Default is fine unless you want to constrain it */
      /* Ensures it stretches to the height of its container */
  box-sizing: border-box;  /* Ensures padding doesn't overflow width */
  border-radius: 8px;
}
.overlay-content .has-text-grey {color: #ae1219; !important;}
.overlay-content p {margin-bottom: 0.5rem;}
.overlay-content p:last-child {margin-bottom: 0;}

.overlay-content p,
.overlay-content span,
.meal-row p,
.meal-row span {
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75) !important;
  color: #ffffff !important;
}

.meal-row {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.meal-row:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.meal-card .overlay-content {
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.35); /* Optional: dark overlay for better contrast */
  border-radius: 0 0 6px 6px;
  min-height: 200px;   /* or whatever you prefer */
  max-height: 320px;   /* limits really tall content */
}

.meal-row-alt {background-color: rgba(255, 255, 255, 0.05); /* very subtle */}

.meal-row-uppercase p,
.meal-row-uppercase span,
.meal-row-uppercase a {
  text-transform: uppercase;
}

/* === Deal Description Styling === */
.deal-tile .description {font-size: 0.9rem;color: #4a4a4a;}
/* === Image Hover Zoom === */
.meal-image {width: 48px;height: 48px;object-fit: cover;border-radius: 6px;transition: transform 0.3s ease;}
.meal-image-hover {width: 48px;height: 48px;object-fit: cover;border-radius: 6px;transition: transform 0.3s ease;}
.meal-image-hover:hover {transform: scale(3.15);z-index: 10;position: relative;}
figure {overflow: visible;}
a.special-link {color: rgb(252, 235, 7);text-decoration: none;transition: color 0.3s ease;font-weight: bold;}
a.special-link:hover {color:rgb(136, 230, 247); text-decoration: underline;}
/* === Form Styling === */
form.box {background-color: #fffef9;max-width: 600px;margin: 0 auto;padding: 2rem;border-radius: 8px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
form.box .field {margin-bottom: 1.5rem;}
form.box input.input, form.box textarea.textarea, form.box select {border: 1px solid #ccc;border-radius: 4px;padding: 0.75rem;font-size: 1rem;width: 100%;}
form.box label.label {font-weight: 600;margin-bottom: 0.5rem;display: block;}
form.box button.button,.accent-button {background-color: #ae1219;color: white;padding: 0.75rem 1.5rem;border: none;font-weight: bold;border-radius: 4px; cursor: pointer;}
/* === Dark Mode === */
body.dark-mode {background-color: #121212;color: #f0f0f0;}
body.dark-mode .card, body.dark-mode .meal-card {background-color: #1f1f1f;border: 1px solid #333;}
body.dark-mode .deal-tile .description, body.dark-mode .meal-card .description, body.dark-mode .has-text-grey {color: #222222 !important;}
body.dark-mode .meal-row-alt {background-color: rgba(255, 255, 255, 0.05); /* keep same as light */}
/* === Dark Mode Toggle Button === */
.dark-toggle {
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.dark-toggle:hover {
  opacity: 1;
}

/* === Light Gradient Backgrounds for Compact Cards === 
.meal-compact-breakfast {background: linear-gradient(to right, #fff7d1, #ffeaa7); /* soft yellow/orange }
.meal-compact-brunch {background: linear-gradient(to right, #d1f7ff, #a7eaff); /* light teal/blue }
.meal-compact-lunch {background: linear-gradient(to right, #d1ffe7, #a7ffd7); /* mint green }
.meal-compact-dinner {background: linear-gradient(to right, #cce0ff, #a7c7ff); /* blue tones }
.meal-compact-happyhour {background: linear-gradient(to right, #e0ccff, #d1a7ff); /* purples }
.meal-compact-buffet {background: linear-gradient(to right, #fff2cc, #ffe0a7); /* warm golds }
.meal-compact-latenight {background: linear-gradient(to right, #cccccc, #aaaaaa); /* grayscale }
.meal-compact-anytime {background: linear-gradient(to right, #fffacb, #ffe36f); /* bright yellow }

/* Fallback for unknown meal types
.meal-compact-default {
  background: linear-gradient(to right, #f5f5f5, #e5e5e5);
}
 */

.two-panel-layout{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem;background-color:rgba(0,0,0,.35)}
.overlay-left{align-items:flex-start;justify-content:flex-start;padding:0;margin:0;background-color:rgba(0,0,0,.5);width:100%;min-height: 14px;border-radius: 0 0 6px 6px;    /* or whatever you prefer */
  max-height: 80px;   /* limits really tall content */box-sizing:border-box}
.overlay-left {
  align-self: flex-start;border-radius: 0 0 6px 6px;  
}
.bg-breakfast   { background-color: rgba(8, 8, 8, 0.65); }
.bg-brunch      { background-color: rgba(8, 8, 8, 0.65); }
.bg-lunch       { background-color: rgba(8, 8, 8, 0.65); }
.bg-dinner      { background-color: rgba(8, 8, 8, 0.65); }
.bg-happyhour   { background-color: rgba(8, 8, 8, 0.65); }
.bg-latenight   { background-color: rgba(8, 8, 8, 0.65); }
.bg-anytime     { background-color: rgba(8, 8, 8, 0.65); }
.bg-default     { background-color: rgba(8, 8, 8, 0.65); }


.overlay-right {
  align-self: flex-end;
}

.overlay-content.two-panel-layout {max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; flex-direction: row !important; background: none !important; gap: 1rem; align-items: stretch; }
.overlay-right { position: absolute; top: 0; right: 0; height: 100%; width: 100%; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; pointer-events: none; z-index: 101; }
.overlay-right .right-top, .overlay-right .right-bottom { min-width: 100%; max-width: 100%; text-align: right; pointer-events: auto; }
.overlay-right p, .overlay-right span {color: #fff; padding: 0.25rem 0.5rem; font-size: 0.85rem; line-height: 1.2; margin: 0; }

.modal {z-index: 9999 !important; /* Ensures modal appears above everything else */}
.modal-card {z-index: 10000 !important; /* Optional: puts the card itself above modal background */}


@media screen and (max-width: 768px) {
  .section, .container {
margin: 0 auto;
padding: 0;

    width: 98% !important;
    max-width: 98% !important;
  }
}

    #map {
      width: 100%;
      height: 100vh; /* Mobile full-height */
    }

    @media (min-width: 769px) {
      #map {
        height: 600px; /* Desktop max height */
      }
    }

    .modal-card-head,
    .modal-card-foot {
      background-color: #fdf6ec;
    }

    .modal-card-title {
      color: #ae1219;
      font-weight: bold;
    }