/* ========================
   CSS Variables & Theme
   ======================== */
:root {
    /* Backgrounds -- original warm dark */
    --bg-dark                 : #1a1614;
    --bg-darker               : #13100e;
    --bg-cream                : #f5f0e6;
    --bg-cream-alt            : #ebe4d4;

    /* Text */
    --text-light              : #fdfbf8;
    --text-light-muted        : #d0c8c4;
    --text-dark               : #2d2522;
    --text-dark-muted         : #5c4e48;

    /* Primary accent -- terracotta */
    --accent-primary          : #c16757;
    --accent-primary-hover    : #ab5748;

    /* Secondary -- gold (mural buildings) */
    --accent-gold             : #f3e4b1;
    --accent-dark-gold        : #afa37c;

    /* Tertiary -- mural greens & timber */
    --accent-green            : #3a7d44;
    --accent-timber           : #8b6914;
    --frieze-blue             : #3b82c4;

    /* Kept for admin backward compat */
    --accent-terracotta       : #c16757;
    --accent-terracotta-hover : #ab5748;

    /* Status */
    --success                 : #28a745;
    --info                    : #17a2b8;
    --warning                 : #ffc107;
    --danger                  : #dc3545;

    /* Typography */
    --font-heading            : 'Viaoda Libre', serif;
    --font-body               : 'Outfit', sans-serif;

    /* Spacing & Sizes */
    --transition-speed        : 0.3s;
    --border-radius           : 8px;
    --nav-height              : 80px;
    --page-hero-padding       : 6rem;
}

/* ========================
   Reset & Base Styles
   ======================== */
* {
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
}

html {
    scroll-behavior : smooth;
    font-size       : 16px;
}

body {
    font-family      : var(--font-body);
    color            : var(--text-light);
    line-height      : 1.6;
    background-color : var(--bg-dark);
    overflow-x       : hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family : var(--font-heading);
    font-weight : 100;
    line-height : 1.2;
}

a {
    text-decoration : none;
    color           : inherit;
    transition      : color var(--transition-speed) ease;
}

ul {
    list-style : none;
}

img {
    max-width : 100%;
    height    : auto;
    display   : block;
}

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

/* ========================
   Typography Utilities
   ======================== */
.text-dark { color : var(--text-dark); }

.text-dark-muted { color : var(--text-dark-muted); }

.text-light { color : var(--text-light); }

.text-light-muted { color : var(--text-light-muted); }

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

.text-success { color : var(--success); }

.text-info { color : var(--info); }

.text-warning { color : var(--warning); }

.text-danger { color : var(--danger); }

.text-center { text-align : center; }

.section-padding {
    padding : 6rem 0;
}

.sub-section-padding {
    padding : 3rem 0;
}

.bg-dark { background-color : var(--bg-dark); }

.bg-cream {
    background-color : var(--bg-cream);
    color            : var(--text-dark);
    background-image : url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 10 L25 20 L20 30 L15 20Z' fill='%23d4af37' opacity='0.03'/%3E%3C/svg%3E");
}

.mb-3 { margin-bottom : 1.5rem; }

.mt-3 { margin-top : 1.5rem; }

.mt-4 { margin-top : 2.5rem; }

/* ========================
   Components
   ======================== */
/* Buttons */
.btn {
    display       : inline-block;
    padding       : 0.8rem 1.8rem;
    font-family   : var(--font-body);
    font-weight   : 500;
    font-size     : 1rem;
    border-radius : var(--border-radius);
    text-align    : center;
    cursor        : pointer;
    transition    : all var(--transition-speed) ease;
    border        : 1px solid transparent;
}

.btn-primary {
    background-color : var(--accent-primary);
    color            : var(--text-light);
    box-shadow       : 0 4px 15px rgba(193, 103, 87, 0.3);
}

.btn-primary:hover {
    background-color : var(--accent-primary-hover);
    transform        : translateY(-2px);
    box-shadow       : 0 6px 20px rgba(193, 103, 87, 0.4);
}

.btn-secondary {
    background-color : transparent;
    border           : 1px solid var(--text-light);
    color            : var(--text-light);
}

.btn-secondary:hover {
    background-color : rgba(253, 251, 248, 0.1);
}

.btn-outline-dark {
    border : 1px solid var(--text-dark);
    color  : var(--text-dark);
}

.btn-outline-dark:hover {
    background-color : var(--text-dark);
    color            : var(--bg-cream);
}

.btn-outline-light {
    border : 1px solid var(--text-light);
    color  : var(--text-light);
}

.btn-outline-light:hover {
    background-color : var(--text-light);
    color            : var(--bg-dark);
}

.btn-large {
    padding   : 1rem 2.5rem;
    font-size : 1.1rem;
}

/* Animations */
.animate-on-scroll {
    opacity    : 0;
    transform  : translateY(30px);
    transition : opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.visible {
    opacity   : 1;
    transform : translateY(0);
}

/* ========================
   Header & Navigation
   ======================== */
.navbar {
    position   : fixed;
    top        : 0;
    left       : 0;
    width      : 100%;
    z-index    : 1000;
    padding    : 0.5rem 0;
    transition : background-color var(--transition-speed) ease, backdrop-filter var(--transition-speed) ease, padding var(--transition-speed) ease;
}

.navbar.scrolled {
    background-color : rgba(26, 22, 20, 0.2);
    backdrop-filter  : blur(10px);
    box-shadow       : 0 2px 10px rgba(0, 0, 0, 0.3);
}

.navbar-container {
    display         : flex;
    justify-content : center;
    align-items     : center;
    height          : 100%;
    max-width       : none;
    padding         : 0 2rem;
    position        : relative;
}

.brand-logo {
    display     : flex;
    align-items : center;
    flex-shrink : 0;
    margin      : 0 2rem;
}

.brand-logo--mobile {
    display : none;
}

.brand-logo-img {
    height     : 112px;
    width      : auto;
    margin-top : 12px;
    transition : height var(--transition-speed) ease, margin-top var(--transition-speed) ease;
}

.navbar.scrolled .brand-logo-img {
    height     : 52px;
    margin-top : 0;
}

.sr-only {
    position    : absolute;
    width       : 1px;
    height      : 1px;
    padding     : 0;
    margin      : -1px;
    overflow    : hidden;
    clip        : rect(0, 0, 0, 0);
    white-space : nowrap;
    border      : 0;
}

.nav-menu {
    display         : flex;
    align-items     : center;
    width           : 100%;
    justify-content : center;

}

.nav-list {
    display : flex;
    gap     : 1.5rem;
}

.nav-list--left {
    justify-content : flex-end;
    flex            : 1;
}

.nav-list--right {
    justify-content : flex-start;
    flex            : 1;
}

.nav-link {
    font-size      : 0.95rem;
    font-weight    : 400;
    position       : relative;
    padding-bottom : 0.2rem;
}

.nav-link::after {
    content          : '';
    position         : absolute;
    bottom           : 0;
    left             : 0;
    width            : 0;
    height           : 1px;
    background-color : var(--accent-gold);
    transition       : width var(--transition-speed) ease;
}

.nav-link:hover::after {
    width : 100%;
}

.nav-actions {
    display     : flex;
    align-items : center;
    gap         : 1rem;
    position    : absolute;
    right       : 2rem;
}

.lang-switcher {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
    font-size   : 0.9rem;
}

.lang-btn {
    background  : none;
    border      : none;
    color       : var(--text-light-muted);
    cursor      : pointer;
    font-family : var(--font-body);
    transition  : color 0.3s;
}

.lang-btn.active, .lang-btn:hover {
    color       : var(--text-light);
    font-weight : 500;
}

.lang-sep {
    color : var(--text-light-muted);
}

.mobile-toggle {
    display        : none;
    background     : none;
    border         : none;
    cursor         : pointer;
    flex-direction : column;
    gap            : 5px;
}

.mobile-toggle .bar {
    width            : 25px;
    height           : 2px;
    background-color : var(--text-light);
    transition       : 0.3s;
}

/* ========================
   Hero Section
   ======================== */
.hero {
    position            : relative;
    min-height          : 100vh;
    display             : flex;
    align-items         : center;
    justify-content     : center;
    background-color    : var(--bg-darker);
    background-image    : url('images/hero_bg.jpg');
    background-size     : cover;
    background-position : center;
    overflow            : hidden;
}

.hero-bg {
    position            : absolute;
    inset               : 0;
    background-size     : cover;
    background-position : center;
    z-index             : 0;
    will-change         : transform;
}

.has-hero-fade {
    position : relative;
    z-index  : 1;
}

.has-hero-fade::before {
    content        : '';
    position       : absolute;
    left           : 0;
    right          : 0;
    bottom         : 100%;
    height         : 100vh;
    background     : linear-gradient(to bottom, rgba(26, 22, 20, 0.1) 0%, rgba(26, 22, 20, 0.4) 50%, var(--bg-dark) 100%);
    pointer-events : none;
}

.hero-overlay {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : radial-gradient(ellipse at center, transparent 30%, rgba(26, 22, 20, 0.6) 100%);
    z-index    : 1;
}

.hero-content {
    position    : relative;
    z-index     : 2;
    text-align  : center;
    max-width   : 800px;
    padding-top : var(--nav-height);
}

.hero-logo {
    max-width : 180px;
    height    : auto;
    margin    : 0 auto 1.5rem auto;
    display   : block;
}

/* Hero Reservation Form */
.hero-reservation-form {
    display       : flex;
    align-items   : stretch;
    background    : rgba(26, 22, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius : var(--border-radius);
    border        : 1px solid rgba(255, 255, 255, 0.1);
    overflow      : hidden;
    max-width     : 700px;
    margin        : 0 auto;
    box-shadow    : 0 8px 30px rgba(0, 0, 0, 0.4);
}

.hero-form-field {
    display      : flex;
    align-items  : center;
    gap          : 0.6rem;
    padding      : 0.9rem 1.2rem;
    border-right : 1px solid rgba(255, 255, 255, 0.1);
    flex         : 1;
    min-width    : 0;
}

.hero-form-field i {
    color       : var(--accent-gold);
    font-size   : 1rem;
    flex-shrink : 0;
}

.hero-form-select,
.hero-form-input {
    border             : none;
    background         : transparent;
    font-family        : var(--font-body);
    font-size          : 0.95rem;
    color              : var(--text-light);
    cursor             : pointer;
    width              : 100%;
    outline            : none;
    -webkit-appearance : none;
    appearance         : none;
}

.hero-form-select option {
    background : var(--bg-dark);
    color      : var(--text-light);
}

.hero-form-select {
    background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d0c8c4' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat   : no-repeat;
    background-position : right 0 center;
    padding-right       : 16px;
}

.hero-form-input::-webkit-calendar-picker-indicator {
    filter : invert(1);
    opacity: 0.7;
    cursor : pointer;
}

.hero-form-btn {
    background-color : var(--accent-primary);
    color            : #fff;
    border           : none;
    padding          : 0.9rem 1.8rem;
    font-family      : var(--font-body);
    font-size        : 0.95rem;
    font-weight      : 600;
    cursor           : pointer;
    white-space      : nowrap;
    transition       : background-color var(--transition-speed);
    flex-shrink      : 0;
}

.hero-form-btn:hover {
    background-color : var(--accent-primary-hover);
}

@media screen and (max-width : 768px) {
    .hero-reservation-form {
        flex-direction : column;
        max-width      : 320px;
    }

    .hero-form-field {
        border-right  : none;
        border-bottom : 1px solid rgba(255, 255, 255, 0.1);
    }

    .hero-form-btn {
        padding    : 1rem;
        text-align : center;
    }
}

.hero-events-link {
    display       : inline-flex;
    align-items   : center;
    gap           : 0.5rem;
    margin-top    : 1.2rem;
    padding       : 0.7rem 1.6rem;
    background    : rgba(26, 22, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color         : var(--text-light);
    font-family   : var(--font-body);
    font-size     : 0.95rem;
    font-weight   : 600;
    border-radius : var(--border-radius);
    border        : 1px solid rgba(255, 255, 255, 0.1);
    box-shadow    : 0 8px 30px rgba(0, 0, 0, 0.4);
    transition    : background var(--transition-speed);
}

.hero-events-link:hover {
    background : rgba(26, 22, 20, 0.95);
}

.hero-title {
    font-family   : var(--font-heading);
    font-size     : 4.5rem;
    margin-bottom : 1rem;
    text-shadow   : 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 60px rgba(212, 175, 55, 0.1);
}

.hero-subtitle {
    font-size     : 1.3rem;
    line-height: 1.1;
    color         : var(--text-light);
    margin-bottom : 2.5rem;
    font-weight   : 300;
}

.hero-ctas {
    display         : flex;
    gap             : 1.5rem;
    justify-content : center;
}

/* ========================
   Experience Highlights
   ======================== */
.highlights-grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 2.5rem;
    text-align            : center;
}

.highlights-grid > :nth-child(2) {
    border-left   : 1px solid rgba(255, 255, 255, 0.1);
    border-right  : 1px solid rgba(255, 255, 255, 0.1);
    padding-left  : 2.5rem;
    padding-right : 2.5rem;
}

.highlight-item {
    padding       : 2rem;
    background    : rgba(255, 255, 255, 0.06);
    border-radius : var(--border-radius);
    border        : 1px solid rgba(255, 255, 255, 0.08);
    border-bottom : 3px solid var(--accent-gold);
    transition    : transform var(--transition-speed), background var(--transition-speed);
}

.highlight-item:hover {
    transform  : translateY(-5px);
    background : rgba(255, 255, 255, 0.1);
}

.highlight-icon {
    margin-bottom : 1rem;
    color         : var(--accent-gold);
}

.highlight-icon svg {
    width   : 48px;
    height  : 48px;
    display : inline-block;
}

.highlight-title {
    font-size      : 1.1rem;
    margin-bottom  : 1rem;
    color          : var(--accent-gold);
    text-transform : uppercase;
    letter-spacing : 2px;
}

.highlight-desc {
    color     : var(--text-light-muted);
    font-size : 0.95rem;
}

/* ========================
   Featured Dishes Menu
   ======================== */
.section-header {
    margin-bottom : 3rem;
}

.section-header.center {
    text-align : center;
}

.section-subtitle {
    display        : block;
    font-family    : var(--font-body);
    color          : var(--accent-primary);
    text-transform : uppercase;
    letter-spacing : 2px;
    font-size      : 0.85rem;
    font-weight    : 600;
    margin-bottom  : 0.5rem;
}

.section-title {
    font-size : 2.5rem;
}

.dishes-grid {
    display               : grid;
    grid-template-columns : repeat(2, 1fr);
    gap                   : 2rem;
}

.dish-card {
    display       : flex;
    background    : var(--bg-cream-alt);
    border-radius : var(--border-radius);
    overflow      : hidden;
    box-shadow    : 0 4px 15px rgba(0, 0, 0, 0.05);
    transition    : transform var(--transition-speed);
}

.dish-card:hover {
    transform  : translateY(-5px);
    box-shadow : 0 8px 25px rgba(0, 0, 0, 0.1);
}

.dish-img-placeholder {
    width            : 35%;
    background-color : #ddd;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    color            : #999;
}

.dish-image {
    width      : 35%;
    object-fit : cover;
}

.dish-info {
    width   : 65%;
    padding : 1.5rem;
}

.dish-header {
    display         : flex;
    justify-content : space-between;
    align-items     : baseline;
    margin-bottom   : 0.5rem;
    border-bottom   : 1px dotted var(--accent-gold);
    padding-bottom  : 0.5rem;
}

.dish-name {
    font-size   : 1.2rem;
    font-family : var(--font-heading);
}

.dish-price {
    font-weight : 600;
    color       : var(--accent-primary);
}

.dish-desc {
    font-size : 0.9rem;
}

.center-cta {
    text-align : center;
}

/* ========================
   Gallery Teaser
   ======================== */
.gallery-grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    grid-auto-rows        : 250px;
    gap                   : 1rem;
}

.gallery-item {
    background-color : #2a2422;
    border-radius    : var(--border-radius);
    display          : flex;
    align-items      : center;
    justify-content  : center;
    color            : #4a403d;
    overflow         : hidden;
    position         : relative;
    border           : 2px solid transparent;
    transition       : transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.gallery-item:hover {
    transform    : scale(1.02);
    border-color : var(--accent-gold);
    box-shadow   : 0 0 20px rgba(212, 175, 55, 0.15);
}

.gallery-item.large {
    grid-column : span 2;
    grid-row    : span 2;
}

.gallery-item.wide {
    grid-column : span 2;
}

/* ========================
   Events & Reviews Split
   ======================== */
.split-layout {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 4rem;
}

.events-teaser {
    padding-right : 2rem;
    border-right  : 1px solid rgba(0, 0, 0, 0.1);
}

.event-date {
    color     : var(--accent-primary);
    font-size : 1.1rem;
}

.review-card {
    background    : #fff;
    padding       : 1.5rem;
    border-radius : var(--border-radius);
    box-shadow    : 0 4px 15px rgba(0, 0, 0, 0.05);
}

.stars {
    color         : var(--accent-gold);
    margin-bottom : 0.5rem;
    font-size     : 1.2rem;
}

.review-quote {
    font-style    : italic;
    color         : var(--text-dark);
    margin-bottom : 0.8rem;
}

.review-author {
    font-weight : 600;
    font-size   : 0.9rem;
    color       : var(--text-dark-muted);
}

/* ========================
   Reservation CTA
   ======================== */
.reservation-cta {
    background-color : var(--accent-primary);
    padding          : 5rem 2rem;
    color            : #fff;
}

.cta-title {
    font-size     : 2.5rem;
    margin-bottom : 1rem;
}

.cta-desc {
    font-size : 1.1rem;
    opacity   : 0.9;
}

.reservation-cta .btn-primary {
    background-color : var(--bg-dark);
    color            : var(--text-light);
    box-shadow       : none;
}

.reservation-cta .btn-primary:hover {
    background-color : var(--bg-darker);
    transform        : translateY(-2px);
    box-shadow       : 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* ========================
   Footer
   ======================== */

.footer-grid {
    display               : grid;
    grid-template-columns : 2fr 1fr 1fr 1fr;
    gap                   : 2rem;
    margin-bottom         : 3rem;
}

.footer-title {
    font-size     : 1.2rem;
    margin-bottom : 1.2rem;
    color         : var(--text-light);
}

.footer-text {
    color     : var(--text-light-muted);
    font-size : 0.9rem;
}

.social-link {
    display       : inline-block;
    color         : var(--accent-gold);
    font-size     : 0.95rem;
    border-bottom : 1px solid transparent;
}

.social-link:hover {
    border-bottom-color : var(--accent-gold);
}

.hours-list li {
    display         : flex;
    justify-content : space-between;
    font-size       : 0.9rem;
    color           : var(--text-light-muted);
    margin-bottom   : 0.5rem;
    border-bottom   : 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom  : 0.2rem;
}

.footer-map iframe {
    display : block;
    width   : 100%;
}

.footer-bottom {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding-top     : 1.5rem;
    border-top      : 1px solid rgba(255, 255, 255, 0.05);
    color           : var(--text-light-muted);
    font-size       : 0.85rem;
}

.footer-bottom-links {
    display : flex;
    gap     : 1rem;
}

.footer-bottom-links a:hover {
    color : var(--text-light);
}

.page-hero {
    display             : flex;
    align-items         : center;
    justify-content     : center;
    text-align          : center;
    background-color    : var(--bg-darker);
    background-size     : cover;
    background-position : center;
    padding-top         : calc(var(--nav-height) + 4rem);
    padding-bottom      : 4rem;
    position            : relative;

    background: conic-gradient(from 90deg at 1px 1px, #0000 25%, black 0%) -0.5px -0.5px/1em 1em, linear-gradient(45deg, #0000 calc(50% + -1*0.5px), black 0 calc(50% + 0.5px), #0000 0) 0 0/2em 2em, linear-gradient(-45deg, #0000 calc(50% + -1*0.5px), black 0 calc(50% + 0.5px), #0000 0) 0 0/2em 2em;
    background-attachment : fixed;
}

.page-hero::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    background : linear-gradient(rgba(26, 22, 20, 0.7), rgba(26, 22, 20, 0.7));
    z-index    : 1;
}

.page-hero .container {
    position : relative;
    z-index  : 2;
}

/* ========================
   Reservation Page
   ======================== */
.reservation-form-section {
    padding : 6rem 0;
}

.reservation-card {
    background    : var(--bg-cream-alt);
    padding       : 3rem;
    border-radius : var(--border-radius);
    box-shadow    : 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width     : 800px;
    margin        : 0 auto;
}

/* Table Admin */
.table-admin {
    width           : 100%;
    border-collapse : collapse;
    margin-top      : 1rem;
}

.table-admin th {
    background-color : var(--bg-dark);
    color            : var(--text-light);
    padding          : 1rem;
    text-align       : left;
    border-bottom    : 2px solid var(--accent-primary);
}

.table-admin td {
    padding       : 1rem;
    border-bottom : 1px solid rgba(0, 0, 0, 0.05);
    color         : var(--text-dark);
}

.table-admin tr:hover {
    background-color : rgba(0, 0, 0, 0.02);
}

.badge {
    display        : inline-block;
    padding        : 0.25em 0.6em;
    font-size      : 75%;
    font-weight    : 700;
    line-height    : 1;
    text-align     : center;
    white-space    : nowrap;
    vertical-align : baseline;
    border-radius  : 0.25rem;
}

.badge-info {
    background-color : #17a2b8;
    color            : #fff;
}

.badge-secondary {
    background-color : #6c757d;
    color            : #fff;
}

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

.form-label {
    display       : block;
    font-family   : var(--font-body);
    font-weight   : 500;
    font-size     : 0.9rem;
    margin-bottom : 0.5rem;
    color         : var(--text-dark);
}

.form-control {
    width            : 100%;
    padding          : 0.8rem 1rem;
    font-family      : var(--font-body);
    font-size        : 1rem;
    border           : 1px solid rgba(0, 0, 0, 0.1);
    border-radius    : var(--border-radius);
    background-color : #fff;
    color            : var(--text-dark);
    transition       : border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.form-control:focus {
    outline      : none;
    border-color : var(--accent-primary);
    box-shadow   : 0 0 0 3px rgba(193, 103, 87, 0.2);
}

.form-row {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1.5rem;
}

@media screen and (max-width : 768px) {
    .reservation-card {
        padding : 2rem 1.5rem;
    }

    .form-row {
        grid-template-columns : 1fr;
        gap                   : 0;
    }
}

/* ========================
   Contact Page
   ======================== */
.contact-section {
    padding : 6rem 0;
}

.contact-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 4rem;
    align-items           : start;
}

.info-card {
    background    : var(--bg-cream-alt);
    padding       : 2.5rem;
    border-radius : var(--border-radius);
    margin-bottom : 2rem;
}

.info-item {
    margin-bottom : 2rem;
}

.info-item:last-child {
    margin-bottom : 0;
}

.info-title {
    font-family   : var(--font-heading);
    font-size     : 1.3rem;
    margin-bottom : 0.8rem;
    color         : var(--text-dark);
}

.map-container {
    height        : 350px;
    width         : 100%;
    border-radius : var(--border-radius);
    overflow      : hidden;
    box-shadow    : 0 4px 15px rgba(0, 0, 0, 0.05);
}

.map-container iframe {
    width  : 100%;
    height : 100%;
    border : 0;
}

.contact-form-container {
    background    : #fff;
    padding       : 3rem;
    border-radius : var(--border-radius);
    box-shadow    : 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact-form .form-control {
    margin-bottom : 1.2rem;
}

@media screen and (max-width : 992px) {
    .contact-grid {
        grid-template-columns : 1fr;
        gap                   : 3rem;
    }

    .contact-form-container {
        padding : 2rem;
    }
}

.nav-book-icon {
    display : none;
}

@media screen and (max-width : 1300px) and (min-width : 993px) {
    .nav-book-label {
        display : none;
    }

    .nav-book-icon {
        display : inline;
    }
}

/* ========================
   Responsive Media Queries
   ======================== */
@media screen and (max-width : 992px) {
    .navbar-container {
        justify-content : space-between;
    }

    .nav-menu {
        position         : fixed;
        top              : 0;
        left             : -100%;
        width            : 100%;
        height           : 100vh;
        background-color : rgba(26, 22, 20, 0.42);
        backdrop-filter  : blur(16px);
        flex-direction   : column;
        justify-content  : center;
        transition       : left 0.4s ease;
        padding          : 2rem;
    }

    .nav-menu.active {
        left : 0;
    }

    .nav-list {
        flex-direction : column;
        align-items    : center;
        gap            : 2rem;
    }

    .nav-link {
        font-size : 1.2rem;
    }

    .nav-list--left,
    .nav-list--right {
        flex            : none;
        justify-content : center;
    }

    .brand-logo {
        display    : block;
        height     : 2rem;
        visibility : hidden;
        margin     : 0;
    }

    .brand-logo--mobile {
        display    : flex;
        visibility : visible;
        height     : auto;
        order      : 1;
        margin     : 0;
    }

    .brand-logo--mobile .brand-logo-img {
        height : 50px;
    }

    .nav-actions {
        position       : static;
        flex-direction : column;
        margin-top     : 2rem;
    }

    .mobile-toggle {
        display : flex;
        order   : 2;
    }

    .hero-title {
        font-size : 3.5rem;
    }

    .dishes-grid {
        grid-template-columns : 1fr;
    }

    .split-layout {
        grid-template-columns : 1fr;
        gap                   : 2rem;
    }

    .events-teaser {
        padding-right  : 0;
        border-right   : none;
        border-bottom  : 1px solid rgba(0, 0, 0, 0.1);
        padding-bottom : 2rem;
    }

    .footer-grid {
        grid-template-columns : 1fr 1fr;
    }
}

@media screen and (max-width : 768px) {
    .highlights-grid {
        grid-template-columns : 1fr;
    }

    .hero-ctas {
        flex-direction : column;
        width          : 100%;
    }

    .gallery-grid {
        grid-template-columns : 1fr;
        grid-auto-rows        : auto;
    }

    .gallery-item {
        aspect-ratio : 4 / 3;
    }

    .gallery-item.large,
    .gallery-item.wide {
        grid-column : span 1;
        grid-row    : span 1;
    }

    .footer-grid {
        grid-template-columns : 1fr;
    }

    .dish-card {
        flex-direction : column;
    }

    .dish-img-placeholder {
        width  : 100%;
        height : 150px;
    }

    .dish-info {
        width : 100%;
    }
}

/* ========================
   Admin Panel Dashboard
   ======================== */
.dashboard-grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 1.5rem;
}

@media screen and (max-width : 992px) {
    .dashboard-grid {
        grid-template-columns : repeat(2, 1fr);
    }
}

@media screen and (max-width : 768px) {
    .dashboard-grid {
        grid-template-columns : 1fr;
    }
}

/* ========================
   Focus & Accessibility
   ======================== */
.btn:focus-visible {
    outline        : 2px solid var(--accent-gold);
    outline-offset : 2px;
}

.nav-link:focus-visible {
    outline : none;
}

.nav-link:focus-visible::after {
    width : 100%;
}

.lang-btn:focus-visible {
    outline        : 2px solid var(--accent-gold);
    outline-offset : 2px;
    border-radius  : 2px;
}

.mobile-toggle:focus-visible {
    outline        : 2px solid var(--accent-gold);
    outline-offset : 4px;
    border-radius  : 2px;
}

.social-link:focus-visible {
    outline        : 2px solid var(--accent-gold);
    outline-offset : 2px;
}

/* ========================
   Block Button
   ======================== */
.btn-block {
    width   : 100%;
    display : block;
}

.btn-gold {
    background-color : var(--accent-gold);
    color            : var(--text-dark);
    box-shadow       : 0 4px 15px rgba(212, 175, 55, 0.3);
}

.btn-gold:hover {
    background-color : var(--accent-dark-gold);
    transform        : translateY(-2px);
    box-shadow       : 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* ========================
   Section Wave Divider
   ======================== */
.has-wave {
    position : relative;
}

.section-wave {
    position    : absolute;
    bottom      : 0;
    left        : 0;
    width       : 100%;
    line-height : 0;
    overflow    : hidden;
    z-index     : 2;
}

/* Ensure sections have room for the wave below their content */
.section-padding.has-wave {
    padding-bottom : calc(6rem + 60px);
}

.page-hero.has-wave {
    padding-bottom : calc(4rem + 60px);
}

.hero.has-wave {
    padding-bottom : 60px;
}

@media screen and (max-width : 768px) {
    .section-padding.has-wave {
        padding-bottom : calc(6rem + 36px);
    }

    .page-hero.has-wave {
        padding-bottom : calc(4rem + 36px);
    }

    .hero.has-wave {
        padding-bottom : 36px;
    }
}

.section-wave svg {
    width   : 100%;
    height  : 60px;
    display : block;
}

.section-wave--dark svg path {
    fill : var(--bg-dark);
}

.section-wave--cream svg path {
    fill : var(--bg-cream);
}

.section-wave--primary svg path {
    fill : var(--accent-primary);
}

@media screen and (max-width : 768px) {
    .section-wave svg {
        height : 36px;
    }
}

/* ========================
   Menu Page
   ======================== */
.menu-categories {
    display         : flex;
    justify-content : center;
    gap             : 2rem;
    padding         : 2rem 0;
    overflow-x      : auto;
    white-space     : nowrap;
    border-bottom   : 1px solid rgba(255, 255, 255, 0.05);
}

.menu-filter {
    cursor         : pointer;
    color          : var(--text-light);
    text-transform : uppercase;
    font-weight    : 600;
    letter-spacing : 1px;
    font-size      : 0.9rem;
    border         : none;
    border-bottom  : 2px solid transparent;
    padding        : 0 0 0.5rem 0;
    background     : none;
    font-family    : var(--font-body);
    transition     : all var(--transition-speed) ease;
}

.menu-filter.active,
.menu-filter:hover {
    color               : var(--accent-gold);
    border-bottom-color : var(--accent-gold);
}

.menu-filter:focus-visible {
    outline        : 2px solid var(--accent-gold);
    outline-offset : 4px;
}

.menu-category {
    margin-bottom : 5rem;
    width         : 100%;
}

.menu-list {
    max-width      : 800px;
    margin         : 0 auto;
    display        : flex;
    flex-direction : column;
    gap            : 2rem;
}

.menu-item {
    border-bottom  : 1px dotted var(--text-dark-muted);
    padding-bottom : 1rem;
}

.menu-item-header {
    display         : flex;
    justify-content : space-between;
    align-items     : baseline;
}

.menu-item-name {
    font-family : var(--font-heading);
    font-size   : 1.3rem;
}

.menu-item-price {
    color       : var(--accent-primary);
    font-weight : 600;
}

.menu-item-desc {
    font-size  : 0.95rem;
    margin-top : 0.3rem;
}

.menu-item-allergens {
    font-size : 0.75rem;
    color     : var(--text-dark-muted);
}

/* ========================
   Events Page
   ======================== */
.events-container {
    max-width      : 900px;
    margin         : 0 auto;
    display        : flex;
    flex-direction : column;
    gap            : 3rem;
}

.event-card {
    display       : flex;
    background    : #fff;
    border-radius : var(--border-radius);
    overflow      : hidden;
    box-shadow    : 0 4px 15px rgba(0, 0, 0, 0.05);
    transition    : transform var(--transition-speed), box-shadow var(--transition-speed);
}

.event-card:hover {
    transform  : translateY(-3px);
    box-shadow : 0 8px 25px rgba(0, 0, 0, 0.1);
}

.event-img {
    width               : 40%;
    background-size     : cover;
    background-position : center;
}

.event-content {
    width   : 60%;
    padding : 2rem;
}

.event-meta {
    color          : var(--accent-primary);
    font-weight    : 600;
    margin-bottom  : 0.5rem;
    text-transform : uppercase;
    font-size      : 0.9rem;
    letter-spacing : 1px;
}

.event-title {
    font-family   : var(--font-heading);
    font-size     : 1.8rem;
    margin-bottom : 1rem;
}

.event-desc {
    margin-bottom : 1.5rem;
}

.private-dining {
    margin-top  : 6rem;
    padding-top : 4rem;
    border-top  : 1px solid rgba(0, 0, 0, 0.1);
}

.private-dining-desc {
    max-width : 600px;
    margin    : 0 auto 2rem auto;
    font-size : 1.1rem;
}

@media screen and (max-width : 768px) {
    .event-card {
        flex-direction : column;
    }

    .event-img {
        width  : 100%;
        height : 200px;
    }

    .event-content {
        width : 100%;
    }
}

/* ========================
   About Page
   ======================== */
.about-text p {
    font-size   : 1.1rem;
    line-height : 1.8;
}

.about-image-placeholder {
    background-size     : cover;
    background-position : center;
    height              : 500px;
    border-radius       : var(--border-radius);
}

.team-section {
    margin-top : 6rem;
}

.team-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(250px, 1fr));
    gap                   : 2rem;
    text-align            : center;
}

.member-img {
    width         : 150px;
    height        : 150px;
    border-radius : 50%;
    margin        : 0 auto 1.5rem auto;
    overflow      : hidden;
}

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

.member-name {
    font-family : var(--font-heading);
    font-size   : 1.3rem;
}

.member-role {
    color : var(--accent-primary);
}

@media screen and (max-width : 768px) {
    .about-image-placeholder {
        height : 300px;
    }
}

/* ========================
   Gallery Full Page
   ======================== */
.full-page-grid {
    grid-template-columns : repeat(4, 1fr);
    gap                   : 1.5rem;
    grid-auto-rows        : 300px;
}

/* ========================
   Lightbox
   ======================== */
.lightbox {
    position        : fixed;
    inset           : 0;
    background      : rgba(0, 0, 0, 0.95);
    z-index         : 2000;
    display         : flex;
    align-items     : center;
    justify-content : center;
    opacity         : 0;
    visibility      : hidden;
    transition      : opacity var(--transition-speed), visibility var(--transition-speed);
}

.lightbox.active {
    opacity    : 1;
    visibility : visible;
}

.lightbox-img {
    max-width     : 90%;
    max-height    : 85vh;
    object-fit    : contain;
    border-radius : var(--border-radius);
}

.lightbox-close {
    position        : absolute;
    top             : 1.5rem;
    right           : 1.5rem;
    background      : none;
    border          : none;
    color           : var(--text-light);
    font-size       : 2rem;
    cursor          : pointer;
    width           : 48px;
    height          : 48px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : opacity var(--transition-speed);
}

.lightbox-close:hover {
    opacity : 0.7;
}

.lightbox-prev,
.lightbox-next {
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    background      : rgba(255, 255, 255, 0.1);
    border          : none;
    color           : var(--text-light);
    font-size       : 2rem;
    cursor          : pointer;
    width           : 48px;
    height          : 48px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : background var(--transition-speed);
}

.lightbox-prev { left : 1.5rem; }

.lightbox-next { right : 1.5rem; }

.lightbox-prev:hover,
.lightbox-next:hover {
    background : rgba(255, 255, 255, 0.2);
}

.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
    outline        : 2px solid var(--accent-gold);
    outline-offset : 2px;
}

.lightbox-counter {
    position    : absolute;
    bottom      : 1.5rem;
    left        : 50%;
    transform   : translateX(-50%);
    color       : var(--text-light-muted);
    font-family : var(--font-body);
    font-size   : 0.9rem;
}

.gallery-item[style*="background-image"] {
    cursor : pointer;
}

@media screen and (max-width : 768px) {
    .lightbox-prev { left : 0.5rem; }

    .lightbox-next { right : 0.5rem; }

    .lightbox-img {
        max-width  : 95%;
        max-height : 80vh;
    }
}

@media screen and (max-width : 768px) {
    .full-page-grid {
        grid-template-columns : 1fr;
        grid-auto-rows        : auto;
    }

    .full-page-grid .gallery-item {
        aspect-ratio : 4 / 3;
    }

    .full-page-grid .gallery-item.large,
    .full-page-grid .gallery-item.wide {
        grid-column : span 1;
        grid-row    : span 1;
    }
}