/* Global Styles */
:root {
    --primary-color: #d4af37; /* Gold */
    --secondary-color: #1a1a1a; /* Dark Background */
    --text-color: #f0f0f0;
    --accent-color: #c21807; /* Deep Red */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --font-chalk: 'Architects Daughter', cursive;
}

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

body {
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-family: var(--font-body);
    overflow-x: hidden;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Typography */
h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--primary-color);
}

.gold-text {
    color: var(--primary-color);
}

/* Navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(26, 26, 26, 0.95);
    position: fixed;
    width: 100%;
    z-index: 1000;
    transition: background 0.3s ease;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 2px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a.nav-link {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s;
    cursor: pointer;
}

.nav-links a.nav-link:hover, .nav-links a.nav-link.active {
    color: var(--primary-color);
}

.nav-btn {
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
}

.nav-btn:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

/* VIEW SWITCHING LOGIC */
.views-container {
    /* Padding for fixed navbar */
    padding-top: 80px; 
    min-height: 100vh;
}

.view-section {
    opacity: 0;
    display: none;
    animation: fadeInView 0.5s forwards;
}

.view-section.active-view {
    display: block;
}

@keyframes fadeInView {
    to { opacity: 1; }
}

/* Hero Section */
.hero-section {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    position: relative;
    overflow: hidden;
}

.hero-content {
    flex: 1;
    z-index: 2;
    max-width: 500px;
}

.hero-content h1 {
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #ccc;
}

.btn-gold {
    background: linear-gradient(45deg, #d4af37, #f2d06b);
    color: #1a1a1a;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
}

.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}

/* Orbit Animation */
.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 600px; /* fixed height for visual stability */
}

.orbit-container {
    width: 500px;
    height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-logo {
    width: 150px;
    height: 150px;
    z-index: 10;
    position: absolute;
    border-radius: 50%;
}

.center-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: pulse 3s infinite ease-in-out;
}

.orbit-ring {
    width: 100%;
    height: 100%;
    position: absolute;
    animation: rotate 60s linear infinite;
}

.plate-item {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border: 2px solid var(--primary-color);
    transition: transform 0.3s ease;
    
    top: 50%;
    left: 50%;
    margin-top: -60px; 
    margin-left: -60px; 
}

.plate-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plate-item:hover {
    transform: scale(1.2);
    z-index: 20;
    cursor: pointer;
}

.item-1 { transform: rotate(0deg) translate(220px) rotate(0deg); }
.item-2 { transform: rotate(90deg) translate(220px) rotate(-90deg); }
.item-3 { transform: rotate(180deg) translate(220px) rotate(-180deg); }
.item-4 { transform: rotate(270deg) translate(220px) rotate(-270deg); }

.orbit-ring {
    animation: spin 30s linear infinite;
}

.plate-item img {
    animation: spin-reverse 30s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

@keyframes spin-reverse {
    100% { transform: rotate(-360deg); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CHALKBOARD MENU */
.menu-section {
    padding: 4rem 2rem;
    background: #252525;
}

.chalk-board-frame {
    background-color: #3d2b1f; /* Wood frame color */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    max-width: 900px;
    margin: 0 auto;
}

.chalk-content {
    background-color: #1e1e1e; /* Chalkboard dark */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23333333' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126 552 20 570 714 200 719 225M56 256l955 392 386 280M790 691l496 161 68 393M98 221l221 21M97 908l62 45L40 225 363 194 929 655 868 626 951 517M20 52l54 815M109 239l4 742 278-83M933 605l-715-6 109-170 33-339M148 440l878 28M423 37l163 186M658 20l75 873 133-289M40 859l498 335 596 28M383 66l601 568M64 888l30 873M22 662l878 186M31 163l685 86M175 427l374 380M954 624l-319-354M456 273l512 873M65 316l856 501M522 93l319 864M290 286l33 809M165 478l939 12M525 210l128 596M556 286l278 770M50 327l725 37M645 28l586 166M456 317l893 259M722 36l206 873M32 605l85 754M56 12l278 939M152 40l955 770M363 56l221 548M933 13l-45 873M28 273l68 939M95 918l562-45M688 28l-8 754M175 908l89 335M725 56l33 662M25 624l939 200M40 22l68 939M109 56l28 859M908 478l-54-32M456 637l259 344M688 624l-4 939M645 809l498-335'/%3E%3C/g%3E%3C/svg%3E");
    padding: 3rem;
    border: 2px dashed #444; 
    border-radius: 5px;
    font-family: var(--font-chalk);
    color: #eee;
    text-align: center;
}

.chalk-title {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 2rem;
    font-family: var(--font-chalk);
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    border-bottom: 2px solid rgba(255,255,255,0.3);
    display: inline-block;
    padding-bottom: 10px;
}

.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    text-align: left;
}

.menu-category h3 {
    font-family: var(--font-chalk);
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-decoration: underline;
    text-decoration-style: wavy;
}

.menu-category ul {
    list-style: none;
}

.menu-category li {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dotted rgba(255,255,255,0.2);
}

.dish-name {
    font-size: 1.5rem;
    font-weight: bold;
    display: block;
}

.dish-price {
    float: right;
    font-size: 1.4rem;
    color: var(--primary-color);
}

.dish-desc {
    display: block;
    font-size: 1rem;
    color: #aaa;
    font-family: var(--font-body); /* Keep readable font for desc */
    font-style: italic;
    margin-top: 0.5rem;
}

/* Reservation Section (Separate View) */
.full-screen-center {
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #222;
}

.reservation-section {
    width: 100%;
    padding: 2rem;
}

.reservation-form-container {
    max-width: 600px;
    margin: 0 auto;
    background: #2a2a2a;
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid #333;
}

.reservation-form-container h2 {
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.reservation-form-container p {
    margin-bottom: 2rem;
    color: #aaa;
}

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    font-weight: 700;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 1rem;
    background: #333;
    border: 1px solid #444;
    color: #fff;
    border-radius: 5px;
    font-family: var(--font-body);
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.full-width {
    width: 100%;
    padding: 1rem;
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
    opacity: 0; 
    pointer-events: none; /* hidden by default, js will show */
}

.whatsapp-float.visible {
    opacity: 1;
    pointer-events: auto;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Footer */
footer {
    padding: 2rem;
    text-align: center;
    background: #111;
    color: #666;
    font-size: 0.9rem;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section {
        flex-direction: column;
        padding-top: 40px;
        text-align: center;
        height: auto;
        justify-content: center;
    }
    
    .orbit-container {
        width: 300px;
        height: 300px;
        margin-top: 3rem;
    }

    .plate-item {
        width: 80px;
        height: 80px;
        margin-top: -40px;
        margin-left: -40px;
    }
    /* Adjust translate radius for mobile */
    .item-1 { transform: rotate(0deg) translate(130px) rotate(0deg); }
    .item-2 { transform: rotate(90deg) translate(130px) rotate(-90deg); }
    .item-3 { transform: rotate(180deg) translate(130px) rotate(-180deg); }
    .item-4 { transform: rotate(270deg) translate(130px) rotate(-270deg); }

    .menu-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .chalk-content {
        padding: 1.5rem;
    }

    .chalk-title {
        font-size: 2rem;
    }
}