/* General Styles - Artisan & Warm */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(145deg, #2c3e50, #1a2a3a); /* Deep charcoal to dark blue gradient */
    color: #ecf0f1; /* Light grey text for contrast */
    font-family: 'Georgia', serif; /* Classic, elegant serif font */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-x: hidden;
}

.menu-container {
    display: flex;
    max-width: 1300px; /* Slightly wider */
    width: 100%;
    background: #34495e; /* Muted dark blue-grey for container */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); /* Stronger, deeper shadow */
    border-radius: 18px; /* More pronounced rounded corners */
    overflow: hidden;
    position: relative;
    transform: perspective(1200px) rotateY(3deg); /* Subtle 3D rotation */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother, bouncier transition */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle light border */
}

.menu-container:hover {
    transform: perspective(1200px) rotateY(0deg); /* Straighten on hover */
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7); /* Enhance shadow on hover */
}

/* Left Page Styles - Feature & Spotlight */
.page-left {
    flex: 1.2; /* Slightly larger left page */
    background: #22303f; /* Even darker background for emphasis */
    padding: 60px; /* More padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 900px; /* Increased min-height */
    z-index: 2;
    border-right: 2px solid rgba(255, 204, 102, 0.1); /* Subtle, warm accent border */
    border-radius: 18px 0 0 18px;
    box-shadow: inset -5px 0 15px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
}

.background-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(255, 204, 102, 0.04) 0%, transparent 20%),
        radial-gradient(circle at 85% 75%, rgba(255, 204, 102, 0.04) 0%, transparent 20%);
    opacity: 0.8;
    z-index: 1;
}

.header {
    position: relative;
    z-index: 2;
    text-align: center;
}

.restaurant-name {
    font-size: 28px;
    letter-spacing: 8px; /* Wider spacing */
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #f1c40f; /* Golden accent color */
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding: 0 20px;
    font-family: 'Cinzel Decorative', cursive; /* Decorative font */
}

.restaurant-name:before, .restaurant-name:after {
    content: "—"; /* Decorative dashes */
    position: absolute;
    top: 50%;
    width: 50px;
    height: 1px;
    background: transparent; /* No background */
    color: #f1c40f; /* Golden dash color */
    font-size: 20px;
    line-height: 0;
    transform: translateY(-50%);
}

.restaurant-name:before {
    left: -70px;
}

.restaurant-name:after {
    right: -70px;
}

.menu-title {
    font-family: 'Playfair Display', serif; /* Keep for main title */
    font-size: 140px; /* Larger, more impactful */
    font-weight: 900; /* Extra bold */
    line-height: 0.9; /* Tighter line height */
    margin: 30px 0 50px;
    color: #ecf0f1;
    position: relative;
    z-index: 3;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Deeper text shadow */
    letter-spacing: -4px;
    text-transform: capitalize;
    background: linear-gradient(to top, #f1c40f, #f39c12); /* Golden gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.featured-dish {
    position: relative;
    z-index: 2;
    margin: 40px auto;
    border-radius: 12px; /* Softer corners */
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Prominent shadow */
    max-width: 450px; /* Slightly larger */
    transform: rotate(-2deg); /* Slight, artistic rotation */
    border: 5px solid #2c3e50; /* Border matching body background */
}

.dish-image {
    width: 100%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: brightness(0.95); /* Slightly dim image */
}

.featured-dish:hover .dish-image {
    transform: scale(1.06) rotate(1deg); /* More dynamic zoom and rotation */
    filter: brightness(1.05); /* Brighten on hover */
}

.special-offer {
    background: linear-gradient(90deg, #e67e22, #d35400); /* Orange-red gradient */
    color: white;
    padding: 20px 35px;
    border-radius: 30px; /* Pill shape */
    font-weight: 700;
    text-align: center;
    margin: 50px auto;
    max-width: 300px;
    font-size: 20px;
    box-shadow: 0 10px 25px rgba(230, 126, 34, 0.4); /* Stronger shadow */
    position: relative;
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: rotate(1deg) translateY(-5px); /* Lift and subtle rotation */
    font-family: 'Cinzel Decorative', cursive; /* Matching decorative font */
    border: 2px solid rgba(255, 255, 255, 0.2); /* Light inner border */
    transition: all 0.4s ease-in-out;
}

.special-offer:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.02); /* More lift and straighten */
    box-shadow: 0 12px 30px rgba(230, 126, 34, 0.6);
}

.contact-info {
    text-align: center;
    position: relative;
    z-index: 3;
    margin-top: 40px;
    font-size: 16px;
    line-height: 1.7;
    color: #bdc3c7; /* Muted light grey */
    font-weight: 300;
    letter-spacing: 0.5px;
}

.contact-info div {
    margin: 10px 0;
}

/* Right Page Styles - Menu Sections */
.page-right {
    flex: 1;
    background: #34495e; /* Same as menu-container background */
    padding: 60px 70px; /* More padding */
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 900px;
    z-index: 2;
    border-radius: 0 18px 18px 0;
    box-shadow: inset 5px 0 15px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
}

.menu-header {
    font-family: 'Playfair Display', serif;
    font-size: 60px; /* Larger */
    margin-bottom: 50px;
    color: #ecf0f1;
    position: relative;
    z-index: 3;
    text-align: center;
    letter-spacing: 2px;
    background: linear-gradient(to bottom, #ecf0f1, #bdc3c7); /* Light gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 0 25px;
    border-bottom: 2px solid rgba(255, 204, 102, 0.2); /* Matching accent border */
}

.menu-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* More gap */
    position: relative;
    z-index: 3;
}

.menu-section {
    margin-bottom: 40px;
    position: relative;
}

.section-title {
    position: relative;
    padding: 15px 25px;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 26px; /* Larger */
    letter-spacing: 2px;
    color: #2c3e50; /* Dark text on brushstroke */
    display: inline-block;
    z-index: 2;
    font-family: 'Cinzel Decorative', cursive; /* Decorative font */
}

.brushstroke {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f1c40f, #e67e22); /* Golden to orange gradient */
    border-radius: 8px; /* Slightly more rounded */
    z-index: -1;
    transform: rotate(-1deg) scaleX(1.05); /* Subtle rotation and stretch */
    opacity: 1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Pronounced shadow */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Light inner border */
}

.brushstroke:before, .brushstroke:after {
    content: none; /* Removed */
}

.menu-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px; /* More spacing */
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15); /* Light, subtle dash */
    position: relative;
    transition: all 0.3s ease-in-out;
}

.menu-item:hover {
    transform: translateX(8px) translateY(-2px); /* More pronounced lift and slide */
    border-bottom: 1px dashed #f1c40f; /* Golden dashed line on hover */
}

.item-name {
    font-size: 19px; /* Slightly larger */
    color: #ecf0f1;
    padding-left: 15px;
    position: relative;
    font-weight: 400;
    font-family: 'Lora', serif; /* Readable serif font */
}

.item-name:before {
    content: "•"; /* Bullet point */
    position: absolute;
    left: -5px;
    color: #f1c40f; /* Golden bullet */
    font-size: 28px; /* Larger bullet */
    line-height: 0.7; /* Align better with text */
    top: 50%;
    transform: translateY(-50%);
}

.item-price {
    color: #e67e22; /* Orange-red price */
    font-weight: 700;
    font-size: 24px; /* Larger price */
    font-family: 'Playfair Display', serif;
}

.restaurant-description {
    margin: 50px 0;
    padding: 30px;
    background: rgba(255, 255, 255, 0.05); /* Very subtle transparent background */
    border-radius: 10px;
    font-style: italic; /* Bring italic back */
    color: #bdc3c7;
    line-height: 1.8;
    position: relative;
    z-index: 3;
    max-width: 100%;
    border-left: 5px solid #f1c40f; /* Golden border */
    font-size: 17px; /* Slightly larger text */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* More prominent shadow */
}

.restaurant-description h3 {
    font-family: 'Cinzel Decorative', cursive; /* Decorative font for heading */
    font-size: 32px;
    color: #f1c40f;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
}

.featured-main {
    position: relative;
    z-index: 2;
    margin-top: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    max-width: 400px;
    align-self: flex-start; /* Align to the start for a different look */
    transform: rotate(3deg); /* Artistic rotation */
    border: 5px solid #2c3e50; /* Border matching body background */
}

.decorative-corner {
    position: absolute;
    width: 100px; /* Larger corners */
    height: 100px;
    opacity: 0.05; /* Slightly less subtle */
    z-index: 0;
    border: 3px solid #f1c40f; /* Golden corners */
}

.corner-tl {
    top: -10px; /* Slightly outside */
    left: -10px;
    border-top: 3px solid #f1c40f;
    border-left: 3px solid #f1c40f;
    border-right: none;
    border-bottom: none;
}

.corner-tr {
    top: -10px;
    right: -10px;
    border-top: 3px solid #f1c40f;
    border-right: 3px solid #f1c40f;
    border-left: none;
    border-bottom: none;
}

.corner-bl {
    bottom: -10px;
    left: -10px;
    border-bottom: 3px solid #f1c40f;
    border-left: 3px solid #f1c40f;
    border-right: none;
    border-top: none;
}

.corner-br {
    bottom: -10px;
    right: -10px;
    border-bottom: 3px solid #f1c40f;
    border-right: 3px solid #f1c40f;
    border-left: none;
    border-top: none;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .menu-container {
        flex-direction: column;
        transform: none; /* No 3D transform on smaller screens */
    }

    .page-left, .page-right {
        border-radius: 18px; /* Maintain container border radius */
        border-right: none;
        border-bottom: 2px solid rgba(255, 204, 102, 0.1); /* Consistent border */
        min-height: auto;
        padding: 40px; /* Reduced padding */
    }

    .menu-sections {
        grid-template-columns: 1fr;
    }

    .featured-main {
        align-self: center;
        margin-top: 40px;
        transform: none; /* No rotation */
    }

    .page-left {
        border-bottom: 2px solid rgba(255, 204, 102, 0.1);
    }
}

@media (max-width: 768px) {
    .menu-title {
        font-size: 90px; /* Smaller font size */
        margin-bottom: 30px;
    }

    .menu-header {
        font-size: 40px;
        margin-bottom: 30px;
    }

    .page-left, .page-right {
        padding: 30px 20px;
    }

    .section-title {
        font-size: 22px;
        padding: 10px 15px;
        margin-bottom: 20px;
    }

    .item-name {
        font-size: 16px;
    }

    .special-offer {
        font-size: 17px;
        padding: 15px 25px;
        max-width: 250px;
        letter-spacing: 1.5px;
    }

    .restaurant-name {
        font-size: 22px;
        letter-spacing: 6px;
    }

    .restaurant-name:before, .restaurant-name:after {
        width: 30px;
        left: -50px;
        right: -50px;
        font-size: 18px;
    }

    .decorative-corner {
        width: 70px;
        height: 70px;
    }

    .corner-tl, .corner-tr, .corner-bl, .corner-br {
        top: -5px;
        left: -5px;
        bottom: -5px;
        right: -5px;
    }

    .item-price {
        font-size: 20px;
    }

    .restaurant-description {
        font-size: 15px;
        padding: 20px;
        margin: 30px 0;
    }

    .restaurant-description h3 {
        font-size: 26px;
    }
}