/* --- STYLE TOKENS & RESET (LIVING CITY THEME) --- */
:root {
  --bg: #0d1a1b; /* Deep, rainy city teal */
  --panel-bg: rgba(4, 15, 12, 0.4); /* Dark, translucent panel */
  --text: #a8c2b9;
  --text-heading: #e8f1f2;
  --muted: #6a8b7f;
  
  --accent-glow: #6EFACC; /* Cyan Neon */
  --accent-warm: #F2B705; /* Yellow Neon */
  --accent-warm-dark: #C47C3B; /* Rust/Copper */
  
  --radius: 4px;
  
  --font-display: "VT323", monospace;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --transition-fast: 0.3s ease;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=VT323&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
}

/* --- ATMOSPHERIC OVERLAYS --- */
body::before { /* Rain Streaks */
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAAyCAYAAACdC5sXAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEaSURBVHhe7dJBDQAgEMCwA/+eg7a+TRC2R1nB2QIAwsvv3wMAwIhgAQCGCQYAEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGABAYIBgAAChAQYDEBggGACAs/vvDwDAiGAAAAYJBgAQGCAYAEBggGAAAAYJBgAQGCAYAEBggGAAAAYJBgAQGCAYAEBggGAAAE/wD391Afdh/AtQAAAAAElFTkSuQmCC');
    animation: rain 0.8s linear infinite;
    opacity: 0.15;
    z-index: 100;
    pointer-events: none;
}
@keyframes rain { from { background-position: 0% 0%; } to { background-position: 20% 100%; } }

body::after { /* Noise/Texture */
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
    z-index: -1;
}

/* --- LAYOUT & STRUCTURE --- */
.content-wrapper { position: relative; z-index: 5; max-width: 1100px; margin: 0 auto; padding: 2rem; border-left: 1px solid rgba(110, 250, 204, 0.1); border-right: 1px solid rgba(110, 250, 204, 0.1); }
.site-header { position: sticky; top: 0; z-index: 20; padding: 1rem 2rem; background: rgba(13, 26, 27, 0.5); backdrop-filter: blur(8px); }
.main-nav { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.nav-logo { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; text-decoration: none; color: var(--text-heading); text-shadow: 0 0 10px var(--accent-glow); }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { font-family: var(--font-display); font-size: 1.25rem; text-decoration: none; color: var(--muted); transition: var(--transition-fast); }
.nav-links a:hover, .nav-links a.active { color: var(--accent-glow); text-shadow: 0 0 5px var(--accent-glow); }

/* --- HERO SECTION --- */
.hero-section { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; }
h1 { font-size: clamp(3rem, 7vw, 4.5rem); color: var(--text-heading); text-shadow: 0 0 5px #fff, 0 0 15px var(--accent-glow), 0 0 25px var(--accent-glow); line-height: 1.1; }
p.lead { max-width: 50ch; margin: 1.5rem auto 2.5rem; }

/* --- CONTENT SECTIONS & TYPOGRAPHY --- */
.content-section { padding: 5rem 0; }
h2 { font-size: clamp(2.25rem, 6vw, 3rem); text-align: center; margin-bottom: 3rem; color: var(--accent-glow); text-shadow: 0 0 10px var(--accent-glow); }
h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-heading); text-shadow: 0 0 5px var(--accent-glow); }

/* --- CARD & OVERGROWN EFFECT --- */
.card {
  padding: 1.5rem;
  background: var(--panel-bg);
  border: 1px solid rgba(110, 250, 204, 0.2);
  border-radius: var(--radius);
  position: relative;
  box-shadow: inset 0 0 20px rgba(4, 15, 12, 0.8);
  transition: var(--transition-fast);
}
.card:hover { transform: translateY(-4px); border-color: rgba(110, 250, 204, 0.5); }

/* --- BUTTONS & UI ELEMENTS --- */
.btn {
  display: inline-block;
  border: none;
  border-radius: var(--radius);
  padding: 0.8rem 1.8rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-decoration: none;
  transition: var(--transition-fast);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
.btn.primary {
  background: var(--accent-warm);
  color: #000;
  box-shadow: 0 0 15px var(--accent-warm), inset 0 0 5px rgba(255,255,255,0.5);
}
.btn.primary:hover { background: #ffD041; transform: translateY(-2px); box-shadow: 0 4px 20px var(--accent-warm), inset 0 0 5px rgba(255,255,255,0.5); }
.btn.secondary {
  background: transparent;
  color: var(--accent-warm-dark);
  box-shadow: inset 0 0 0 1px var(--accent-warm-dark);
}
.btn.secondary:hover { background: rgba(196, 124, 59, 0.1); color: var(--accent-warm); }
.badge { display: inline-block; border: 1px solid var(--muted); color: var(--muted); padding: .25rem .75rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.8rem; }
.staff-role { color: var(--accent-warm); font-family: var(--font-mono); }
.menu-header .price { color: var(--accent-warm); font-family: var(--font-mono); }

/* --- GRIDS & MOBILE --- */
.grid-3-col, .grid-2-col { display: grid; gap: 2rem; }
@media (min-width: 768px) { .grid-3-col { grid-template-columns: repeat(3, 1fr); } .grid-2-col { grid-template-columns: repeat(2, 1fr); } }

/* --- FOOTER --- */
.site-footer { text-align: center; padding: 4rem 2rem; color: var(--muted); font-family: var(--font-mono); font-size: 0.9rem; }

/* --- BOOKING EMBED STYLES --- */
.booking-embed-container {
    border: 1px solid rgba(110, 250, 204, 0.2);
    border-radius: var(--radius);
    padding: 0.5rem;
    background: var(--panel-bg);
}
.booking-iframe {
    width: 100%;
    aspect-ratio: 1 / 1.2; /* Taller than it is wide, adjust if needed */
    border: none;
    border-radius: var(--radius);
}

/* --- PHOTOBOOK SLIDESHOW STYLES --- */
.slideshow-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    background: var(--panel-bg);
    border: 1px solid rgba(110, 250, 204, 0.2);
    padding: 1rem;
}
.slideshow-image img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 70vh;
    object-fit: contain;
}
.slideshow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(4, 15, 12, 0.7);
    border: 1px solid var(--muted);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 2rem;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    transition: var(--transition-fast);
}
.slideshow-nav:hover {
    background: var(--accent-glow);
    color: var(--bg);
    border-color: var(--accent-glow);
}
.slideshow-nav.prev { left: 1rem; }
.slideshow-nav.next { right: 1rem; }
.slideshow-info {
    text-align: center;
    font-family: var(--font-mono);
    color: var(--muted);
    margin-top: 1rem;
}
/* --- MENU PAGE STYLES --- */

.menu-category {
    margin-bottom: 3rem;
}

.menu-category > h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--text-heading);
    border-bottom: 1px solid rgba(110, 250, 204, 0.2);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.menu-item .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.menu-item h4 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--accent-glow);
    text-shadow: 0 0 5px var(--accent-glow);
    margin: 0;
    text-transform: uppercase;
}

.menu-item .price {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    color: var(--accent-warm);
    flex-shrink: 0; /* Prevents price from wrapping */
}

.menu-item p {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0;
}
/* --- PIXEL FONT CORRECTION --- */

/* Apply pixel font to Navigation and Buttons */
.nav-links a,
.btn {
    font-family: var(--font-display);
}

/* Adjust font sizes for better look with the pixel font */
.nav-links a {
    font-size: 1.25rem;
}

.btn {
    font-size: 1.25rem;
    padding-top: 0.7rem; /* Fine-tune padding for pixel font */
    padding-bottom: 0.5rem;
}

/* Correct the Menu Category Titles */
.menu-category > h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--text-heading);
    border-bottom: 1px solid rgba(110, 250, 204, 0.2);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    /* Remove any conflicting text-shadow if it exists */
    text-shadow: none; 
}
/* --- Y2K SOFTCORE HOMEPAGE & SIDEBAR STYLES --- */

.homepage-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Main content is wider than the sidebar */
    gap: 2rem;
    align-items: center; /* Vertically align content pods */
    padding-top: 5vh;
    padding-bottom: 5vh;
}

/* The "Frosted Glass" Pod Style */
.main-content-pod,
.sidebar-pod {
    background: rgba(16, 38, 33, 0.4); /* Dark translucent green */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(110, 250, 204, 0.2);
    border-radius: 1rem; /* Rounded corners are key */
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

/* Sidebar Specifics */
.sidebar-pod h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.sidebar-events-list {
    display: grid;
    gap: 1rem;
}

.sidebar-events-list .card {
    background: rgba(4, 15, 12, 0.5); /* Make nested cards darker */
    padding: 1rem;
}
.sidebar-events-list .card h3 {
    font-size: 1.25rem;
}
.sidebar-events-list .card p {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Y2K Pill-shaped Next Event Badge */
.next-event-badge {
    display: inline-block;
    background: rgba(110, 250, 204, 0.1);
    border: 1px solid rgba(110, 250, 204, 0.3);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    color: var(--accent-glow);
}

/* Update Nav and Buttons to be Pill-shaped */
.nav-links a.active {
    background: rgba(110, 250, 204, 0.1);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}

.btn {
    border-radius: 999px;
}

/* Responsive stacking for mobile */
@media (max-width: 900px) {
    .homepage-grid {
        grid-template-columns: 1fr; /* Stack into a single column */
    }
}

/* --- LAYOUT REFINEMENT & CONSISTENCY --- */

/* Fix for the squished hero text */
.hero-section {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center them */
    text-align: center;
}
.hero-section .lead {
    margin-left: auto;
    margin-right: auto; /* Ensure lead text is centered */
}

/* New Content Pod for other pages */
.content-pod {
    background: rgba(16, 38, 33, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(110, 250, 204, 0.2);
    border-radius: 1rem;
    padding: 2.5rem;
    max-width: 900px; /* Constrain width for readability */
    margin: 3rem auto; /* Center the pod on the page */
}

/* --- PHOTOBOOK SECTION STYLES (ON HOMEPAGE) --- */
#photobook {
    padding-top: 3rem;
}
#photobook h2 {
    margin-bottom: 2rem;
}
.slideshow-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    background: var(--panel-bg);
    border: 1px solid rgba(110, 250, 204, 0.2);
    padding: 1rem;
    border-radius: 1rem;
}
.slideshow-image img {
    width: 100%; display: block; max-height: 70vh; object-fit: contain; border-radius: 0.5rem;
}
.slideshow-nav {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(4, 15, 12, 0.7); border: 1px solid var(--muted); color: var(--text); font-family: var(--font-display); font-size: 2rem; padding: 0.5rem 1.5rem; cursor: pointer; border-radius: 999px;
}
.slideshow-nav:hover { background: var(--accent-glow); color: var(--bg); border-color: var(--accent-glow); }
.slideshow-nav.prev { left: 1.5rem; }
.slideshow-nav.next { right: 1.5rem; }
.slideshow-info { text-align: center; font-family: var(--font-mono); color: var(--muted); margin-top: 1rem; }

/* --- SPOTIFY EMBED STYLES --- */
.spotify-container {
    margin-top: 2rem;
    border-top: 1px solid rgba(110, 250, 204, 0.2);
    padding-top: 1.5rem;
}
.spotify-container h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text-heading);
    margin-bottom: 1rem;
}