@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/t1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/t2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/t3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/t4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* CSS Custom Properties */
:root {
    --gold: #d4af37;
    --gold-light: #e4c147;
    --gold-glow: rgba(212, 175, 55, 0.3);
    --bronze: #8b6914;
    --cream: #f5f5dc;
    --cream-80: rgba(245, 245, 220, 0.8);
    --cream-60: rgba(245, 245, 220, 0.6);
    --charcoal: #1a1a1a;
    --charcoal-90: rgba(26, 26, 26, 0.9);
    --font-serif: "Cormorant Garamond", serif;
    --font-sans: "Montserrat", sans-serif;
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-elegant: 0 10px 30px -10px rgba(212, 175, 55, 0.2);
    --shadow-glow: 0 0 40px rgba(212, 175, 55, 0.15);
  /* Goathead icon (relative image; the importer moves it onto the asset rail) */
    --goathead-image: url(/assets/media/5e81de6e20d1cfaf626c816bf0a163a5.webp);
}

/* Keyframe Animations */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes staggerFadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulseGlow {
    0%,
  100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
    }

    50% {
        box-shadow: 0 0 30px rgba(212, 175, 55, 0.25);
    }
}

@keyframes slideDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
  *::before,
  *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
    background-color: #000000;
}

/* Promo Banner */
.promo-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%),
    linear-gradient(90deg, #000000 0%, var(--gold) 7%, var(--gold-light) 50%, var(--gold) 93%, #000000 100%);
    background-size: 200% 100%,
    100% 100%;
    animation: shimmer 4s ease-in-out infinite;
    color: var(--charcoal);
    text-align: center;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.4s ease-out,
    opacity 0.4s ease-out;
}

.promo-banner.dismissed {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.promo-banner strong {
    font-weight: 700;
}

.promo-banner-dismiss {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26, 26, 26, 0.2);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease,
    transform 0.3s ease;
}

.promo-banner-dismiss:hover {
    background: rgba(26, 26, 26, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.promo-banner-dismiss svg {
    width: 12px;
    height: 12px;
    stroke: var(--charcoal);
    stroke-width: 2.5;
}

body {
    font-family: var(--font-sans);
    background-color: #000000;
    color: var(--cream);
    line-height: 1.7;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    padding-top: 2rem;
    margin: 0;
}

body.banner-dismissed {
    padding-top: 0;
}

/* Focus States for Accessibility */
*:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Main Container */
.hero-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background-color: #000000;
    overflow-x: hidden;
  /* Full-bleed inside page builders that add side padding */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Background Images */
.background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 700ms ease-in-out;
    z-index: 1;
  /* Hide broken image icon and alt text when image fails to load */
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
}

/* Additional rule to hide broken image placeholder */
.background-image::before,
.background-image::after {
    display: none !important;
}

/* Hide broken image icon on WebKit browsers */
.background-image:not([src]),
.background-image[src=""],
.background-image:-moz-broken {
    visibility: hidden;
}

.background-image.active {
    opacity: 1;
    visibility: visible;
}

/* Gradient Background for Events */
.gradient-background {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 700ms ease-in-out;
    z-index: 1;
    background: linear-gradient(135deg, #2d1810 0%, #1a1a1a 25%, #2d1810 50%, #1a1a1a 75%, #2d1810 100%);
}

.gradient-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(212, 175, 55, 0.15) 0%, transparent 50%);
}

.gradient-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 80%, rgba(139, 69, 19, 0.2) 0%, transparent 50%);
}

.gradient-background.active {
    opacity: 1;
}

/* Gradient Overlay */
.gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
    to right,
    rgba(26, 26, 26, 0.95) 0%,
    rgba(26, 26, 26, 0.7) 30%,
    rgba(26, 26, 26, 0.4) 60%,
    rgba(26, 26, 26, 0.2) 100%
  );
    z-index: 2;
}

/* Logo */
.logo-container {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    text-align: center;
    transition: all 500ms ease-out;
}

.logo-image {
    max-width: 280px;
    width: 100%;
    height: auto;
    transition: max-width 500ms ease-out;
}

@media (min-width: 768px) {
    .logo-container {
        top: 3rem;
    }

    .logo-image {
        max-width: 350px;
    }

    .logo-container.menu-active {
        opacity: 0;
        pointer-events: none;
    }
}

@media (min-width: 1024px) {
    .logo-container {
        top: 4rem;
    }

    .logo-image {
        max-width: 420px;
    }

    .logo-container.menu-active {
        opacity: 0;
        pointer-events: none;
    }
}

/* Navigation Menu */
.menu-navigation {
    position: relative;
    z-index: 20;
    padding: 8rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: 14rem;
}

@media (min-width: 768px) {
    .menu-navigation {
        padding: 4rem;
        padding-top: 16rem;
        max-width: 50%;
    }
}

@media (min-width: 1024px) {
    .menu-navigation {
        padding: 6rem;
        padding-top: 18rem;
    }
}

.main-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (min-width: 768px) {
    .main-menu {
        gap: 0.5rem;
    }
}

.main-menu-item {
    position: relative;
    animation: staggerFadeIn 0.5s ease-out forwards;
    opacity: 0;
}

.main-menu-item:nth-child(1) {
    animation-delay: 0.1s;
}

.main-menu-item:nth-child(2) {
    animation-delay: 0.15s;
}

.main-menu-item:nth-child(3) {
    animation-delay: 0.2s;
}

.main-menu-item:nth-child(4) {
    animation-delay: 0.25s;
}

.main-menu-item:nth-child(5) {
    animation-delay: 0.3s;
}

.main-menu-item:nth-child(6) {
    animation-delay: 0.35s;
}

.main-menu-item:nth-child(7) {
    animation-delay: 0.4s;
}

.main-menu-item:nth-child(8) {
    animation-delay: 0.45s;
}

.main-menu-link {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--cream-60);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--transition-smooth);
    cursor: pointer;
    position: relative;
    padding: 0.375rem 0;
    padding-left: 0;
    border-radius: 4px;
}

@media (min-width: 768px) {
    .main-menu-link {
        font-size: 2.25rem;
        padding: 0.25rem 0;
    }
}

@media (min-width: 1024px) {
    .main-menu-link {
        font-size: 3rem;
    }
}

.main-menu-link::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 50%;
    transform: translateY(-50%) scale(0) rotate(-10deg);
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    background-color: transparent;
    background-image: var(--goathead-image) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) {
    .main-menu-link::before {
        left: -1.75rem;
        width: 1.5rem;
        height: 1.5rem;
    }
}

.main-menu-link:hover,
.main-menu-link.active {
    color: var(--gold);
    padding-left: 1rem;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

@media (min-width: 768px) {
    .main-menu-link:hover,
  .main-menu-link.active {
        padding-left: 1.5rem;
    }
}

.main-menu-link.active::before {
    transform: translateY(-50%) scale(1) rotate(0deg);
}

@media (max-width: 767px) {
    .main-menu-link:active {
        background: rgba(212, 175, 55, 0.1);
    }
}

/* Subcategories */
.subcategories {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-left: 1.5rem;
    margin-top: 0.25rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 500ms ease;
}

@media (min-width: 768px) {
    .subcategories {
        padding-left: 2.5rem;
        margin-top: 0.5rem;
        gap: 0.25rem;
    }
}

.subcategories.expanded {
    max-height: 500px;
    opacity: 1;
}

.subcategory-link {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 300;
    color: rgba(245, 245, 220, 0.5);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 300ms ease;
    cursor: pointer;
    position: relative;
    padding: 0.25rem 0;
    padding-left: 0;
}

@media (min-width: 768px) {
    .subcategory-link {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .subcategory-link {
        font-size: 1.875rem;
    }
}

.subcategory-link::before {
    content: "";
    position: absolute;
    left: -1.2rem;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 0.9rem;
    height: 0.9rem;
    display: block;
    background-color: transparent;
    background-image: var(--goathead-image) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 300ms ease;
}

@media (min-width: 768px) {
    .subcategory-link::before {
        left: -1.5rem;
        width: 1.2rem;
        height: 1.2rem;
    }
}

.subcategory-link:hover,
.subcategory-link.active {
    color: var(--gold);
    padding-left: 0.75rem;
}

@media (min-width: 768px) {
    .subcategory-link:hover,
  .subcategory-link.active {
        padding-left: 1rem;
    }
}

.subcategory-link.active::before {
    transform: translateY(-50%) scale(1);
}

/* Widgets Base Styles */
.widget {
    position: fixed;
    z-index: 30;
    background: rgba(26, 26, 26, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    transition: all 500ms ease-out;
    opacity: 0;
    pointer-events: none;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

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

/* Mobile Widget Styles */
@media (max-width: 767px) {
    .widget {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-radius: 1rem 1rem 0 0;
        transform: translateY(100%);
        max-height: 85vh;
        touch-action: none;
    }

    #cta-widget.cta-enlarged {
        max-height: 95vh;
    }

    .widget.visible {
        transform: translateY(0);
    }

  /* Swipe handle indicator for mobile */
    .widget::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background: rgba(245, 245, 220, 0.4);
        border-radius: 3px;
        z-index: 20;
    }

  /* Add top padding to accommodate swipe handle */
    .widget > .cta-box,
  .widget > .map-widget-header,
  .widget > .events-widget-header {
        padding-top: 1.5rem;
    }

  /* Transition for swipe gesture */
    .widget.swiping {
        transition: none !important;
    }

  /* Mobile Social Icons - smaller sizing */
    .social-icons-mini {
        top: 0.5rem;
        right: 0.75rem;
        gap: 0.35rem;
    }

    .social-icon-mini {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    .social-icon-mini svg {
        width: 22px;
        height: 22px;
    }
}

/* Desktop Widget Styles */
@media (min-width: 768px) {
    .widget {
        position: absolute;
        width: 28rem;
        right: 4rem;
        top: 18rem;
        transform: translateX(2rem);
    }

    .widget.visible {
        transform: translateX(0);
    }

    .widget {
        max-height: none;
        overflow: visible;
    }

    .widget#events-widget {
        width: 34rem;
    }

    .widget#map-widget {
        width: 32rem;
    }
}

@media (min-width: 1024px) {
    .widget {
        right: 6rem;
        top: 20rem;
    }

    .widget#events-widget {
        width: 38rem;
    }

    .widget#map-widget {
        width: 36rem;
    }
}

/* CTA Box */
.cta-box {
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .cta-box {
        padding: 2rem;
    }

    .cta-box.cta-enlarged {
        width: 42rem;
        padding: 2.25rem;
    }

    .cta-box.cta-enlarged .cta-title {
        font-size: 2.25rem;
        margin-bottom: 0.75rem;
    }

    .cta-box.cta-enlarged .cta-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .cta-box.cta-enlarged .cta-button {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }

    .cta-box.cta-enlarged .cta-image {
        margin-top: 1.25rem;
    }

    .cta-box.cta-enlarged .cta-image img {
        max-height: none;
        object-fit: contain;
    }

    .cta-box.cta-compact {
        width: 28rem;
        padding: 1.75rem;
    }

    .cta-box.cta-compact .cta-title {
        font-size: 1.95rem;
        margin-bottom: 0.65rem;
    }

    .cta-box.cta-compact .cta-description {
        font-size: 0.975rem;
        margin-bottom: 1.25rem;
    }

    .cta-box.cta-compact .cta-image img {
        max-height: none;
        object-fit: contain;
    }
}

@media (min-width: 1024px) {
    .cta-box.cta-enlarged {
        width: 45rem;
    }
}

/* CTA Logo */
.cta-logo {
    display: none;
    text-align: center;
    margin-bottom: 1rem;
}

.cta-logo.visible {
    display: block;
}

.cta-logo img {
    max-width: 180px;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .cta-logo img {
        max-width: 220px;
    }

    .cta-box.cta-menu-enlarged {
        margin-top: -6rem;
    }

    .cta-box.cta-menu-enlarged .cta-image {
        margin-top: 1rem;
    }

    .cta-box.cta-menu-enlarged .cta-image img {
        max-height: 320px;
        object-fit: contain;
    }
}

@media (min-width: 1024px) {
    .cta-box.cta-menu-enlarged {
        margin-top: -8rem;
    }

    .cta-box.cta-menu-enlarged .cta-image img {
        max-height: 400px;
    }

    .cta-box.cta-catering-enlarged {
        width: 52rem;
        margin-top: 0;
    }

    .cta-box.cta-catering-enlarged .cta-image {
        margin-top: 1.5rem;
    }

    .cta-box.cta-catering-enlarged .cta-image img {
        max-height: 700px;
        object-fit: contain;
    }
}

.cta-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--cream);
    margin-bottom: 0.5rem;
    padding-right: 2rem;
}

@media (min-width: 768px) {
    .cta-title {
        font-size: 1.875rem;
        margin-bottom: 0.75rem;
        padding-right: 0;
    }
}

.cta-description {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--cream-80);
    margin-bottom: 1rem;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .cta-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
}

.cta-subdescription {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--cream-60);
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(198, 168, 124, 0.2);
    line-height: 1.7;
}

@media (min-width: 768px) {
    .cta-subdescription {
        font-size: 0.875rem;
        margin-top: 1.25rem;
        padding-top: 1rem;
    }
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .cta-buttons {
        gap: 0.75rem;
    }
}

.cta-button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    min-height: 44px;
    background-color: var(--charcoal);
    color: var(--cream);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: 2px solid var(--gold);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    background-color: rgba(45, 45, 45, 1);
    border-color: var(--gold);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.cta-button:active {
    transform: translateY(0) scale(0.98);
}

.cta-button.cta-button-secondary {
    background-color: var(--gold);
    color: var(--charcoal);
    border: 2px solid var(--charcoal);
}

.cta-button.cta-button-secondary:hover {
    background-color: var(--gold-light);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

/* Takeout CTA Button - Dark green variant */
.cta-button.cta-button-takeout {
    background-color: #15251F;
    color: var(--cream);
    border: 2px solid var(--gold);
}

.cta-button.cta-button-takeout:hover {
    background-color: #1d332a;
    border-color: var(--gold);
}

/* CTA Image */
.cta-image {
    margin-top: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(198, 168, 124, 0.3);
}

.cta-image a {
    display: block;
}

.cta-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 300ms ease,
    opacity 300ms ease;
}

.cta-image:hover img {
    transform: scale(1.02);
    opacity: 0.9;
}

/* Menu Gallery Carousel */
.menu-gallery {
    margin-top: 1.5rem;
    display: none;
}

.menu-gallery.visible {
    display: block;
}

.menu-gallery-label {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--gold);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
}

.menu-gallery-container {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(26, 26, 26, 0.5);
}

.menu-gallery-viewport {
    position: relative;
    overflow: hidden;
    height: 450px;
  /* Prevent native horizontal scrolling on Android */
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: auto;
}

@media (min-width: 768px) {
    .menu-gallery-viewport {
        height: 550px;
    }
}

@media (min-width: 1024px) {
    .menu-gallery-viewport {
        height: 700px;
    }
}

.menu-gallery-track {
    display: flex;
    transition: transform 400ms ease-out;
    height: 100%;
  /* Prevent any native scrolling behavior */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.menu-gallery-track.swiping {
    transition: none;
}

.menu-gallery-slide {
    min-width: 100%;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.menu-gallery-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.menu-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid var(--gold);
    color: var(--gold);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms ease;
    z-index: 10;
}

.menu-gallery-nav:hover {
    background: var(--gold);
    color: var(--charcoal);
}

.menu-gallery-nav.prev {
    left: 0.75rem;
}

.menu-gallery-nav.next {
    right: 0.75rem;
}

.menu-gallery-nav svg {
    width: 1.25rem;
    height: 1.25rem;
}

.menu-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(26, 26, 26, 0.5);
}

.menu-gallery-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(245, 245, 220, 0.3);
    border: none;
    cursor: pointer;
    transition: all 300ms ease;
}

.menu-gallery-dot.active {
    background: var(--gold);
    transform: scale(1.2);
}

.menu-gallery-dot:hover {
    background: var(--gold-light);
}

/* Menu CTA footer button */
.cta-footer {
    display: none;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(198, 168, 124, 0.2);
}

.cta-footer.visible {
    display: block;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, rgba(26, 26, 26, 0.98), rgba(26, 26, 26, 0.72));
    padding-bottom: 0.5rem;
}

.cta-footer .cta-button {
    display: block;
    margin: 0 auto;
    max-width: 220px;
}

/* Side-by-side buttons for menu */
.cta-buttons.menu-layout {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.cta-buttons.menu-layout .cta-button {
    flex: 1;
}

/* Larger CTA widget for menu */
@media (min-width: 768px) {
    .widget.cta-box.menu-active {
        width: 46rem;
    }
}

@media (min-width: 1024px) {
    .widget.cta-box.menu-active {
        width: 56rem;
    }
}

/* Events CTA Footer */
.events-cta-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(198, 168, 124, 0.2);
}

@media (min-width: 768px) {
    .events-cta-footer {
        flex-direction: row;
        gap: 0.75rem;
    }

    .events-cta-footer .cta-button {
        flex: 1;
    }
}

/* Map Widget */
#map-widget {
    background: rgba(26, 26, 26, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1),
    inset 0 0 0 1px rgba(212, 175, 55, 0.1);
}

.map-widget-header {
    padding: 1rem 1.5rem;
}

@media (min-width: 768px) {
    .map-widget-header {
        padding: 1.75rem 2rem;
    }
}

.map-widget-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--cream);
    margin-bottom: 0.5rem;
    padding-right: 2rem;
}

@media (min-width: 768px) {
    .map-widget-title {
        font-size: 2.25rem;
        padding-right: 0;
        margin-bottom: 0.75rem;
    }
}

.map-widget-address {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: rgba(245, 245, 220, 0.7);
}

@media (min-width: 768px) {
    .map-widget-address {
        font-size: 1rem;
    }
}

.map-widget-phone {
    font-family: var(--font-sans);
    font-size: 1rem;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .map-widget-phone {
        font-size: 1.125rem;
        margin-top: 0.75rem;
    }
}

.map-widget-phone a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 500;
}

.map-widget-phone a:hover {
    text-decoration: underline;
}

.map-widget-hours-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 0 1.5rem 0.5rem;
}

@media (min-width: 768px) {
    .map-widget-hours-container {
        gap: 1.5rem;
        padding: 0 2rem 0.75rem;
    }
}

.map-widget-hours-column {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: rgba(245, 245, 220, 0.8);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .map-widget-hours-column {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

.map-widget-hours-column strong {
    color: var(--cream);
    display: block;
    margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
    .map-widget-hours-column strong {
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }
}

.map-widget-footer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 1.5rem 1rem;
}

@media (min-width: 768px) {
    .map-widget-footer-row {
        gap: 1.5rem;
        padding: 0.75rem 2rem 1.25rem;
    }
}

.map-widget-closed-note {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--gold);
    font-style: italic;
    margin: 0;
}

@media (min-width: 768px) {
    .map-widget-closed-note {
        font-size: 0.875rem;
    }
}

.contact-cta-button {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--charcoal);
    background: var(--gold);
    padding: 0.4rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .contact-cta-button {
        font-size: 0.875rem;
        padding: 0.6rem 1.25rem;
        border-radius: 6px;
    }
}

.contact-cta-button:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

.map-container {
    width: 100%;
    height: 10rem;
    border: 4px solid #000000;
}

@media (min-width: 768px) {
    .map-container {
        height: 18rem;
        border-width: 6px;
    }
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) contrast(1.25);
}

.map-widget-footer {
    padding: 0.75rem 1rem 1rem;
}

@media (min-width: 768px) {
    .map-widget-footer {
        padding: 1rem 2rem 1.75rem;
    }
}

.directions-button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    min-height: 44px;
    background-color: var(--gold);
    color: var(--charcoal);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
    .directions-button {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        border-radius: 8px;
    }
}

.directions-button:hover {
    background-color: var(--gold-light);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

.directions-button:active {
    transform: translateY(0) scale(0.98);
}

/* Events Widget */
.events-widget-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

@media (min-width: 768px) {
    .events-widget-content {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
        max-height: none;
        overflow: visible;
    }
}

.events-widget-header {
    position: relative;
    padding: 1rem 1.5rem 0;
}

@media (min-width: 768px) {
    .events-widget-header {
        padding: 1.5rem 1.5rem 0;
    }
}

.events-widget-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--cream);
    margin-bottom: 0.5rem;
    padding-right: 5rem;
}

@media (min-width: 768px) {
    .events-widget-title {
        font-size: 1.875rem;
        padding-right: 5rem;
    }
}

.events-widget-description {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: rgba(245, 245, 220, 0.7);
}

/* Mini Social Icons */
.social-icons-mini {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    display: flex;
    gap: 0.5rem;
}

.social-icon-mini {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(198, 168, 124, 0.2);
    border-radius: 12px;
    transition: all 300ms ease;
}

.social-icon-mini:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(198, 168, 124, 0.4);
    transform: translateY(-2px);
}

.social-icon-mini svg {
    width: 60px;
    height: 60px;
}

.social-icon-mini.instagram svg {
    fill: url(#instagram-gradient);
}

.social-icon-mini.facebook svg {
    fill: #1877f2;
}

/* Mobile overrides (keep icons compact + aligned) */
@media (max-width: 767px) {
    .social-icons-mini {
        top: 0.5rem;
        right: 3rem;
        gap: 0.35rem;
    }

    .social-icon-mini {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .social-icon-mini svg {
        width: 22px;
        height: 22px;
    }
}

/* Events Calendar Box */
.events-calendar-box {
    width: 100%;
}

.events-calendar-box h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--cream);
    margin-bottom: 0.75rem;
}

.events-container {
    width: 100%;
    height: 260px;
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(198, 168, 124, 0.2);
}

@media (min-width: 768px) {
    .events-container {
        height: 320px;
    }
}

.events-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: invert(0.88) hue-rotate(180deg);
    opacity: 0.95;
}

/* VIP Box Full Width */
.vip-box-full {
    width: 100%;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(198, 168, 124, 0.3);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 300ms ease;
    overflow: hidden;
}

.vip-box-full:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(198, 168, 124, 0.5);
    transform: translateY(-2px);
}

.vip-box-full img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease;
}

.vip-box-full:hover img {
    transform: scale(1.02);
}

@media (min-width: 768px) {
    .vip-box-full {
        height: 320px;
    }
}

.social-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(198, 168, 124, 0.2);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100px;
}

.social-box:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}

.social-box svg {
    width: 32px;
    height: 32px;
    margin-bottom: 0.5rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-box:hover svg {
    transform: scale(1.15) rotate(5deg);
}

.social-box.instagram:hover svg {
    filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.5));
}

.social-box.facebook:hover svg {
    filter: drop-shadow(0 0 8px rgba(24, 119, 242, 0.5));
}

.social-box.instagram svg {
    fill: url(#instagram-gradient);
}

.social-box.facebook svg {
    fill: #1877f2;
}

.social-box span {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--cream-80);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.social-box:hover span {
    color: var(--cream);
}

/* VIP Loyalty Box */
.vip-box {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(198, 168, 124, 0.3);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 300ms ease;
    min-height: 140px;
    overflow: hidden;
}

.vip-box:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(198, 168, 124, 0.5);
    transform: translateY(-2px);
}

.vip-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.vip-box:hover img {
    transform: scale(1.05);
}

@media (min-width: 768px) {
    .vip-box {
        min-height: 120px;
        flex: 2;
    }

    .social-box {
        min-height: 60px;
        padding: 0.75rem;
        flex: 0.5;
    }

    .social-box svg {
        width: 28px;
        height: 28px;
        margin-bottom: 0.25rem;
    }

    .social-box span {
        font-size: 0.65rem;
    }
}

/* VIP Popup Modal */
.vip-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.vip-popup-overlay.active {
    display: flex;
}

.vip-popup-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 90vh;
    max-height: 773px;
    background: var(--charcoal);
    border: 1px solid rgba(198, 168, 124, 0.3);
    border-radius: 0.5rem;
    overflow: hidden;
}

.vip-popup-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms ease;
}

.vip-popup-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.vip-popup-close svg {
    width: 16px;
    height: 16px;
    stroke: var(--cream);
}

@media (min-width: 768px) {
    .social-box {
        min-height: 80px;
        padding: 1.25rem;
    }

    .social-box svg {
        width: 36px;
        height: 36px;
    }
}

/* Close Button (Mobile) */
.close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    display: block;
}

@media (min-width: 768px) {
    .close-button {
        display: none;
    }
}

.close-button svg {
    width: 20px;
    height: 20px;
    stroke: rgba(245, 245, 220, 0.7);
    transition: stroke 300ms ease;
}

.close-button:hover svg {
    stroke: var(--cream);
}

/* Events List */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

@media (min-width: 768px) {
    .events-list {
        max-height: 400px;
    }
}

.events-list::-webkit-scrollbar {
    width: 4px;
}

.events-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.events-list::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.4);
    border-radius: 2px;
}

.events-list::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.6);
}

/* Event Card */
.event-card {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(198, 168, 124, 0.2);
    border-left: 3px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(198, 168, 124, 0.4);
    border-left-color: var(--gold);
    transform: translateY(-3px) translateX(2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15);
}

/* Event Date Badge */
.event-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 0.375rem;
}

.event-date-badge .month {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
}

.event-date-badge .day {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cream);
    line-height: 1;
}

.event-date-badge .weekday {
    font-family: var(--font-sans);
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(245, 245, 220, 0.6);
}

/* Event Card Details */
.event-card-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.event-card-title {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cream);
    line-height: 1.3;
}

.event-card-time,
.event-card-location {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: rgba(245, 245, 220, 0.6);
}

/* Event Flyer Badge */
.event-flyer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 0.25rem;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gold);
    margin-top: 0.25rem;
    width: fit-content;
}

.event-flyer-badge svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
}

/* Events Loading/Empty States */
.events-loading,
.events-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: rgba(245, 245, 220, 0.6);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

/* Event Modal Overlay */
.event-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.event-modal-overlay.active {
    display: flex;
}

/* Event Modal */
.event-modal {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--charcoal);
    border: 1px solid rgba(198, 168, 124, 0.3);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.event-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms ease;
}

.event-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.event-modal-close svg {
    width: 16px;
    height: 16px;
    stroke: var(--cream);
}

.event-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(198, 168, 124, 0.2);
}

.event-modal-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--cream);
    margin-bottom: 0.75rem;
    padding-right: 2rem;
}

.event-modal-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: rgba(245, 245, 220, 0.7);
    margin-bottom: 0.375rem;
}

.event-modal-info-row svg {
    width: 16px;
    height: 16px;
    stroke: var(--gold);
    flex-shrink: 0;
}

.event-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.event-modal-description {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: rgba(245, 245, 220, 0.8);
    line-height: 1.6;
}

.event-modal-footer {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(198, 168, 124, 0.2);
}

.event-modal-flyer-btn {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--gold);
    color: var(--charcoal);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 300ms ease;
}

.event-modal-flyer-btn:hover {
    background-color: var(--gold-light);
}


@media (max-width: 1024px) {
  #section-0OT_W6yvOT,
  #row-nnJitW9bml,
  #col-FjCQH1evmJ {
    animation: none !important;
  }
}

/* ==========================================================================
   ZIPPI CONVERSION (2026-09-23) — everything below this line is new.
   Above: the original Lovable stylesheet from the GHL page settings,
   unchanged except the goathead icon, which now points at a relative image.
   (Never write the literal url-paren sequence in a comment here: the
   platform's CSS filter tokenizes it and logs a stripped url on every save.)
   The page runs no JavaScript: every panel is pre-rendered, and the state
   block at the very end switches them with :target + :has().
   ========================================================================== */

/* --- 1. GHL host-page parity ----------------------------------------------
   On the live site GHL's own stylesheet wrapped this design and overrode
   parts of it. The design was tuned against that result, so reproduce it. */
body {
  line-height: normal;       /* GHL: line-height: unset !important */
  font-weight: normal;       /* GHL: font-weight: unset !important */
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  body {
    padding-top: 0;          /* GHL zeroed the banner offset on desktop */
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;          /* GHL heading weight */
}

img {
  border-style: none;
  vertical-align: middle;    /* GHL */
}

/* GHL: an empty heading/paragraph keeps one line of height (a non-breaking
   space; a plain space collapses to nothing). The Menu panel's title is
   deliberately empty and relies on this for its spacing. */
h1:empty::after,
h2:empty::after,
h3:empty::after,
h4:empty::after,
h5:empty::after,
h6:empty::after,
p:empty::after {
  content: "\00a0";
}

.hero-section {
  /* GHL's section/row/column padding put 40px above and below the hero.
     The 100vw full-bleed hack only escaped page-builder side padding (and
     scrolls sideways under classic scrollbars), so it is dropped. */
  width: auto;
  margin: 40px 0;
}

/* --- 2. Panel layout (replaces the JS positioner) --------------------------
   The old script measured the menu, absolutely positioned the open panel
   level with it, then stretched the hero to fit. Here the panels live in one
   stack that shares the hero's grid cell with the menu, right-aligned at the
   same offsets, so the hero grows with whichever panel is open. Hidden panels
   are display:none, so they take no clicks and no tab focus. */
.panel-stack > .widget {
  display: none;
  animation: zippi-panel-in 500ms ease-out;
}

@keyframes zippi-panel-in {
  from {
    opacity: 0;
    transform: translateX(2rem);
  }
}

@keyframes zippi-sheet-in {
  from {
    transform: translateY(100%);
  }
}

@media (min-width: 768px) {
  .hero-section {
    display: grid;
    grid-template-areas: "stack";
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-section > .menu-navigation,
  .hero-section > .panel-stack {
    grid-area: stack;
  }

  .panel-stack {
    justify-self: end;
    align-self: start;
    padding: 16rem 4rem 3rem 0;   /* the script's top offset + 48px bottom room */
    pointer-events: none;
  }

  .panel-stack > .widget {
    position: relative;
    top: auto;
    right: auto;
  }
}

@media (min-width: 1024px) {
  .panel-stack {
    padding: 18rem 6rem 3rem 0;
  }
}

@media (max-width: 767px) {
  .panel-stack > .widget {
    animation-name: zippi-sheet-in;   /* bottom sheet slides up */
  }

  /* touch-action:none only served the removed swipe-to-dismiss script;
     it would block native scrolling inside a sheet. */
  .widget {
    touch-action: auto;
  }

  /* Was #cta-widget.cta-enlarged: one JS-driven box then, one per panel now. */
  .widget.cta-box.cta-enlarged {
    max-height: 95vh;
  }

  /* The close control is a link now; centre its icon as the <button> did. */
  .close-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- 3. Menu pages: native scroll-snap strip (was a JS slider) ------------
   Swipe on phones; trackpad, shift-wheel or the scrollbar on desktop. No
   prev/next anchors: an anchor would take over :target and close the panel. */
.menu-gallery-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  touch-action: auto;
}

.menu-gallery-track {
  touch-action: auto;
  -webkit-user-select: auto;
  user-select: auto;
  transition: none;
}

.menu-gallery-slide {
  /* Exactly one strip wide. Otherwise a height-limited page image widens its
     slide past the strip on phones (351px in 346px) and the snap drifts. */
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.menu-gallery-viewport::-webkit-scrollbar {
  height: 6px;
}

.menu-gallery-viewport::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.menu-gallery-viewport::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.5);
  border-radius: 3px;
}

@supports not selector(::-webkit-scrollbar) {
  .menu-gallery-viewport {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.5) rgba(0, 0, 0, 0.2);
  }
}

/* Replaces the dot row: same footprint, tells people the strip moves. */
.menu-gallery-hint {
  padding: 0.75rem;
  background: rgba(26, 26, 26, 0.5);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-60);
}

/* --- 4. Events: one static card that expands in place ---------------------
   (was a JS-rendered list whose cards opened a modal) */
details.event-card {
  display: block;
  padding: 0;
}

.event-card > summary {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  list-style: none;
  cursor: pointer;
}

.event-card > summary::-webkit-details-marker,
.event-flyer > summary::-webkit-details-marker,
.cta-apply > summary::-webkit-details-marker {
  display: none;
}

.event-card[open] {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(198, 168, 124, 0.4);
  border-left-color: var(--gold);
}

.event-card-body {
  padding: 0.25rem 0.75rem 0.75rem;
}

.event-flyer {
  margin-top: 0.75rem;
}

.event-flyer > summary {
  list-style: none;
}

.event-flyer img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.75rem;
  border: 1px solid rgba(198, 168, 124, 0.3);
  border-radius: 0.375rem;
}

/* The list's scroll box existed for a long JS-rendered list; one card now. */
.events-list {
  max-height: none;
  overflow: visible;
}

.events-social-line {
  display: block;
  padding: 0.625rem 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(198, 168, 124, 0.2);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: rgba(245, 245, 220, 0.6);
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.events-social-line span {
  color: var(--gold);
  white-space: nowrap;
}

.events-social-line:hover {
  color: var(--cream);
  border-color: rgba(212, 175, 55, 0.5);
}

/* --- 5. Instagram icon gradient --------------------------------------------
   The original filled the glyph with an SVG <linearGradient>, which the
   platform sanitizer drops (camelCase SVG element). Same five stops, same
   bottom-left to top-right direction, painted as a CSS gradient and cut to
   the glyph with a mask. Browsers without CSS masks get the solid brand pink. */
.social-icon-mini.instagram svg {
  fill: transparent;
  background: linear-gradient(45deg, #ffdc80 0%, #f77737 25%, #e1306c 50%, #c13584 75%, #833ab4 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .social-icon-mini.instagram svg {
    fill: #e1306c;
    background: none;
  }
}

/* --- 6. Popups that became inline content ---------------------------------- */
.cta-callout {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(26, 26, 26, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
}

.cta-callout a {
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}

.cta-apply > summary {
  list-style: none;
}

.cta-apply-body {
  padding: 1.5rem 0 0.5rem;
  text-align: center;
  color: #fff;
}

/* Contact: the form button is a phone link now; keep it in the right column. */
.map-widget-footer-row > .contact-cta-button {
  grid-column: 2;
  display: block;
  text-align: center;
}

/* ==========================================================================
   ZIPPI CONVERSION — NAVIGATION STATE (replaces the click/hover script)
   The empty anchors at the very top of <body> are the only state:
     #home #menu #reservations #order-online #gift-cards #careers #contact
     #close
   Nav links point at them, :target marks the current one, and :has() lets
   the page react. Because the anchors sit at the top, following a nav link
   scrolls to the top instead of into a panel.
     no target, #home  → Home: events panel + events background
     #menu … #contact  → that panel + its background + its nav item
     #close            → phones: sheet dismissed (the close button);
                         desktop shows no close button, so there it is Home
   ========================================================================== */
.state-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Home is the resting state (and what a browser without :has() shows). */
#events-widget {
  display: block;
}

#bg-events {
  opacity: 1;
  visibility: visible;
}

body:has(.panel-anchor:target) #events-widget {
  display: none;
}

body:has(.panel-anchor:target) #bg-events {
  opacity: 0;
}

@media (max-width: 767px) {
  body:has(#close:target) #events-widget {
    display: none;
  }
}

/* The chosen panel … */
body:has(#menu:target) #menu-panel,
body:has(#reservations:target) #reservations-panel,
body:has(#order-online:target) #order-online-panel,
body:has(#gift-cards:target) #gift-cards-panel,
body:has(#careers:target) #careers-panel,
body:has(#contact:target) #map-widget {
  display: block;
}

/* … its background … */
body:has(#menu:target) #bg-menu,
body:has(#reservations:target) #bg-reservations,
body:has(#order-online:target) #bg-order-online,
body:has(#gift-cards:target) #bg-gift-cards,
body:has(#careers:target) #bg-careers,
body:has(#contact:target) #bg-contact {
  opacity: 1;
  visibility: visible;
}

/* … and its nav item, styled as the old .active class. */
body:not(:has(.panel-anchor:target)) .main-menu-link[href="#home"],
body:has(#menu:target) .main-menu-link[href="#menu"],
body:has(#reservations:target) .main-menu-link[href="#reservations"],
body:has(#order-online:target) .main-menu-link[href="#order-online"],
body:has(#gift-cards:target) .main-menu-link[href="#gift-cards"],
body:has(#careers:target) .main-menu-link[href="#careers"],
body:has(#contact:target) .main-menu-link[href="#contact"] {
  color: var(--gold);
  padding-left: 1rem;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

body:not(:has(.panel-anchor:target)) .main-menu-link[href="#home"]::before,
body:has(#menu:target) .main-menu-link[href="#menu"]::before,
body:has(#reservations:target) .main-menu-link[href="#reservations"]::before,
body:has(#order-online:target) .main-menu-link[href="#order-online"]::before,
body:has(#gift-cards:target) .main-menu-link[href="#gift-cards"]::before,
body:has(#careers:target) .main-menu-link[href="#careers"]::before,
body:has(#contact:target) .main-menu-link[href="#contact"]::before {
  transform: translateY(-50%) scale(1) rotate(0deg);
}

@media (min-width: 768px) {
  body:not(:has(.panel-anchor:target)) .main-menu-link[href="#home"],
  body:has(#menu:target) .main-menu-link[href="#menu"],
  body:has(#reservations:target) .main-menu-link[href="#reservations"],
  body:has(#order-online:target) .main-menu-link[href="#order-online"],
  body:has(#gift-cards:target) .main-menu-link[href="#gift-cards"],
  body:has(#careers:target) .main-menu-link[href="#careers"],
  body:has(#contact:target) .main-menu-link[href="#contact"] {
    padding-left: 1.5rem;
  }

  /* Menu only: the page logo steps aside for the one inside the panel. */
  body:has(#menu:target) .logo-container {
    opacity: 0;
    pointer-events: none;
  }
}


/* --- Menu pages: arrows + dots (2026-10-09) ---------------------------------
   Driven by the platform carousel behavior in /assets/site.js, which adds .has-mjs to <html>.
   Without it they stay hidden and the strip still swipes and scrolls. Arrows on 768px+ as the
   original slider had them; dots everywhere. */
.menu-gallery-nav, .menu-gallery-dots { display: none; }
.has-mjs .menu-gallery-dots { display: flex; }
.has-mjs .menu-gallery-hint { display: none; }
.menu-gallery-nav { z-index: 2; }
.menu-gallery-dot[aria-current="true"] { background: var(--gold); transform: scale(1.2); }
@media (min-width: 768px) { .has-mjs .menu-gallery-nav { display: flex; } }

/* --- Catering panel (2026-10-09) ----------------------------------------------
   Same state machine as the other panels (see NAVIGATION STATE above): #catering anchor → panel,
   background, and nav item. */
body:has(#catering:target) #catering-panel { display: block; }
body:has(#catering:target) #bg-catering { opacity: 1; visibility: visible; }
body:has(#catering:target) .main-menu-link[href="#catering"] {
  color: var(--gold);
  padding-left: 1rem;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}
body:has(#catering:target) .main-menu-link[href="#catering"]::before { transform: translateY(-50%) scale(1) rotate(0deg); }
.main-menu-item:nth-child(9) { animation-delay: 0.5s; }
@media (min-width: 768px) {
  body:has(#catering:target) .main-menu-link[href="#catering"] { padding-left: 1.5rem; }
}