/* ==========================================================================
   CATCH Theme — Elementor overrides + nav layout glue
   ==========================================================================
   These rules (1) win against Elementor defaults inside widgets, and
   (2) make sure the persistent right-side nav items (RESERVATIONS button,
   ES/EN switcher, ☰ hamburger) align inside .nav__links as flex children.
   Loaded on the front-end AND inside the Elementor editor preview.
*/

/* ---------- Nav: persistent right-side items ---------- */
.nav__links li,
.nav__links > li {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__item--reserve a.nav__reserve {
    text-decoration: none;
}

.nav__item--lang .nav__lang {
    cursor: pointer;
}

.nav__item--hamburger .nav__hamburger-desktop {
    display: flex;
}

/* On narrow screens hide the in-list hamburger; the floating one shows instead. */
@media (max-width: 1024px) {
    .nav__item--reserve,
    .nav__item--lang,
    .nav__item--hamburger {
        display: none !important;
    }
}

/* ---------- Menus widget: filter states ---------- */
.menu-section__tag {
    background: var(--color-accent, #bfad91);
    color: var(--color-primary, #000);
    border: 1px solid var(--color-accent, #bfad91);
    border-radius: 6px;
    padding: 10px 22px;
    font-family: 'Brandon Grotesque', 'Cabin', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.menu-section__tag:hover,
.menu-section__tag.is-active,
.menu-section__tag--primary {
    background: var(--color-primary, #000) !important;
    color: var(--color-text-light, #fff) !important;
    border-color: var(--color-primary, #000) !important;
}
.menu-section__tag.is-active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.full-menu__item.is-hidden {
    display: none !important;
}

/* Smooth fade-out for filtered items (when JS toggles the class) */
.full-menu__item {
    transition: opacity 0.2s ease;
}

/* ---------- Events form: skin CF7 and WPForms to match the design ---------- */
.events .wpcf7-form,
.events .wpforms-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.events .wpcf7-form p,
.events .wpforms-form .wpforms-field {
    margin: 0;
    padding: 0;
}
.events .wpcf7-form input[type="text"],
.events .wpcf7-form input[type="email"],
.events .wpcf7-form input[type="tel"],
.events .wpcf7-form input[type="url"],
.events .wpcf7-form input[type="number"],
.events .wpcf7-form textarea,
.events .wpforms-form input[type="text"],
.events .wpforms-form input[type="email"],
.events .wpforms-form input[type="tel"],
.events .wpforms-form input[type="url"],
.events .wpforms-form input[type="number"],
.events .wpforms-form textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    color: #fff !important;
    font-family: 'Brandon Grotesque', 'Cabin', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
    width: 100%;
}
.events .wpcf7-form textarea,
.events .wpforms-form textarea {
    grid-column: span 2;
    resize: none;
    min-height: 60px;
}
.events .wpcf7-form input::placeholder,
.events .wpforms-form input::placeholder,
.events .wpcf7-form textarea::placeholder,
.events .wpforms-form textarea::placeholder {
    color: #B0A89F !important;
    opacity: 1;
}
.events .wpcf7-form label,
.events .wpforms-form .wpforms-field-label {
    color: #B0A89F !important;
    font-size: 11px !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 4px;
}
.events .wpcf7-submit,
.events .wpforms-submit,
.events input[type="submit"],
.events button[type="submit"] {
    grid-column: span 2;
    justify-self: start;
    padding: 14px 32px !important;
    background: #bfad91 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Brandon Grotesque', 'Cabin', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-top: 8px !important;
    transition: background 0.3s ease !important;
}
.events .wpcf7-submit:hover,
.events .wpforms-submit:hover,
.events input[type="submit"]:hover,
.events button[type="submit"]:hover {
    background: #a08e72 !important;
}
.events .wpcf7-response-output,
.events .wpforms-confirmation-container-full {
    grid-column: span 2;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #bfad91 !important;
    border-radius: 4px;
    padding: 12px 16px;
    margin-top: 8px;
}

/* Events split layout: stack on mobile */
@media (max-width: 1024px) {
    .events {
        grid-template-columns: 1fr !important;
        direction: ltr !important;
    }
    .events__content { padding: 40px 24px !important; }
    .events__image { min-height: 320px; }
}
@media (max-width: 640px) {
    .events .wpcf7-form,
    .events .wpforms-form,
    .events__form {
        grid-template-columns: 1fr !important;
    }
    .events .wpcf7-form textarea,
    .events .wpforms-form textarea,
    .events__textarea,
    .events__submit,
    .events__input--full {
        grid-column: span 1 !important;
    }
}

/* ---------- OpenTable widget container ---------- */
.elementor-widget-catch-opentable .catch-opentable {
    display: block;
    width: 100%;
}
.elementor-widget-catch-opentable iframe {
    max-width: 100%;
    border: none;
}

/* ==========================================================================
   MOBILE FIXES — defensive overrides for 3 widgets that should collapse
   gracefully on phones (some clients ignore Elementor responsive controls)
   ========================================================================== */

@media (max-width: 768px) {
    /* ---------- About / Feature Cards: 1 column, smaller heading ---------- */
    .about {
        padding: 60px 20px !important;
    }
    .about__grid {
        grid-template-columns: 1fr !important;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        gap: 28px !important;
    }
    .about__heading {
        font-size: clamp(20px, 6vw, 30px) !important;
        letter-spacing: 1.5px !important;
        line-height: 1.3 !important;
        padding: 0 4px;
        max-width: 100% !important;
    }
    .about__label {
        margin-bottom: 24px !important;
    }
    .about__subheading {
        margin-bottom: 30px !important;
    }
    .about__card-title {
        font-size: 16px !important;
    }

    /* ---------- History: smaller heading, narrower border, padded body ---------- */
    .history {
        padding: 40px 16px 50px !important;
    }
    .catch-borders {
        padding: 28px 16px !important;
        margin: 0 !important;
        border-width: 4px !important;
    }
    .history__heading {
        font-size: clamp(28px, 9vw, 44px) !important;
        letter-spacing: 2px !important;
        margin: 16px 0 24px !important;
        line-height: 1.1 !important;
    }
    .history__text {
        font-size: 11px !important;
        letter-spacing: 0.8px !important;
        line-height: 1.9 !important;
        max-width: 100% !important;
        padding: 0 4px;
        margin-bottom: 20px !important;
    }

    /* ---------- Menus: single-column flow, smaller MENUS heading ---------- */
    .menu-section {
        padding: 60px 16px 20px !important;
    }
    .menu-section__heading {
        font-size: clamp(48px, 15vw, 80px) !important;
        letter-spacing: 3px !important;
    }
    .menu-section__tags {
        gap: 8px !important;
        margin-bottom: 40px !important;
    }
    .menu-section__tag {
        padding: 8px 16px !important;
        font-size: 10px !important;
        letter-spacing: 1.5px !important;
    }
    .full-menu {
        padding: 24px 16px !important;
    }
    .full-menu__grid {
        column-count: 1 !important;
        column-gap: 0 !important;
        max-width: 420px;
        margin: 0 auto;
    }
    .full-menu__category {
        margin-bottom: 32px;
    }
    .full-menu__cat-title {
        font-size: clamp(22px, 6vw, 30px) !important;
        letter-spacing: 3px !important;
    }
    .full-menu__subheading {
        font-size: clamp(18px, 5vw, 24px) !important;
        letter-spacing: 2px !important;
    }
    .menu-section__dishes {
        grid-template-columns: 1fr !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        gap: 32px !important;
    }
    .dish-card__category {
        font-size: 11px !important;
    }
    .dish-card__name {
        font-size: 18px !important;
    }

    /* ---------- Hero: title scales down ---------- */
    .hero__title {
        font-size: clamp(36px, 12vw, 56px) !important;
    }
    .hero__logo-icon {
        max-width: 80vw;
    }
}

/* ---------- OpenTable: per-widget mobile behavior (controlled by [data-mobile-behavior]) ---------- */
@media (max-width: 768px) {
    /* Hidden on mobile */
    .catch-ot-wrapper[data-mobile-behavior="hidden"] .catch-ot-floating-btn,
    .catch-ot-wrapper[data-mobile-behavior="hidden"] .catch-ot-modal {
        display: none !important;
    }

    /* Inline on mobile: strip the modal styling, hide the floating button, show modal body in place */
    .catch-ot-wrapper[data-mobile-behavior="inline"] .catch-ot-floating-btn {
        display: none !important;
    }
    .catch-ot-wrapper[data-mobile-behavior="inline"] .catch-ot-modal {
        position: static !important;
        inset: auto !important;
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: auto !important;
        animation: none !important;
        opacity: 1 !important;
    }
    .catch-ot-wrapper[data-mobile-behavior="inline"] .catch-ot-modal__dialog {
        background: transparent !important;
        padding: 16px !important;
        box-shadow: none !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    .catch-ot-wrapper[data-mobile-behavior="inline"] .catch-ot-modal__close,
    .catch-ot-wrapper[data-mobile-behavior="inline"] .catch-ot-modal__dialog > h3 {
        display: none !important;
    }
    .catch-ot-wrapper[data-mobile-behavior="inline"] .catch-ot-modal__body {
        background: #fff !important;
        border-radius: 8px;
        padding: 12px;
    }
    /* Disable body scroll-lock on mobile when inline (otherwise body gets locked from JS if modal accidentally opens) */
    body.catch-ot-modal-open .catch-ot-wrapper[data-mobile-behavior="inline"] {
        pointer-events: auto;
    }
}


/* ---------- Widgets render edge-to-edge inside their column ---------- */
.elementor-widget-catch-hero,
.elementor-widget-catch-marquee,
.elementor-widget-catch-info-bar,
.elementor-widget-catch-feature-cards,
.elementor-widget-catch-press-logos,
.elementor-widget-catch-testimonial,
.elementor-widget-catch-cta-banner,
.elementor-widget-catch-map,
.elementor-widget-catch-full-menu {
    width: 100%;
}

.elementor-widget-catch-hero .elementor-widget-container,
.elementor-widget-catch-marquee .elementor-widget-container,
.elementor-widget-catch-info-bar .elementor-widget-container,
.elementor-widget-catch-feature-cards .elementor-widget-container,
.elementor-widget-catch-press-logos .elementor-widget-container,
.elementor-widget-catch-testimonial .elementor-widget-container,
.elementor-widget-catch-cta-banner .elementor-widget-container,
.elementor-widget-catch-map .elementor-widget-container,
.elementor-widget-catch-full-menu .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Force the .hero section to take full viewport even inside Elementor */
.elementor-widget-catch-hero .hero { width: 100%; }
.elementor-widget-catch-hero .hero__content { width: 100%; max-width: 720px; }

/* ---------- Buttons: defeat Elementor's default link/button styles ---------- */
.elementor a.hero__cta,
.elementor-element a.hero__cta,
a.hero__cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 32px !important;
    background: var(--color-accent, #bfad91) !important;
    color: var(--color-primary, #000) !important;
    font-family: var(--font-primary, 'Brandon Grotesque', 'Cabin', sans-serif) !important;
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    min-width: 160px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}
.elementor a.hero__cta:hover,
a.hero__cta:hover {
    background: var(--color-primary, #000) !important;
    color: var(--color-text-light, #fff) !important;
}

.elementor a.nav__reserve,
a.nav__reserve {
    background: var(--color-accent, #bfad91) !important;
    color: var(--color-primary, #000) !important;
    text-decoration: none !important;
}

.elementor a.btn,
a.btn {
    text-decoration: none !important;
}

.elementor a.menu-section__tag,
a.menu-section__tag {
    text-decoration: none !important;
    color: var(--color-primary, #000) !important;
    background: var(--color-accent, #bfad91) !important;
}
.elementor a.menu-section__tag--primary,
a.menu-section__tag--primary,
.elementor a.menu-section__tag:hover,
a.menu-section__tag:hover {
    background: var(--color-primary, #000) !important;
    color: var(--color-text-light, #fff) !important;
}

.elementor a.map-section__directions,
a.map-section__directions {
    background: var(--color-accent, #bfad91) !important;
    color: var(--color-primary, #000) !important;
    text-decoration: none !important;
}

/* Submit button in events form */
.events__submit {
    background: var(--color-accent, #bfad91) !important;
    color: var(--color-primary, #000) !important;
    border: none !important;
}

/* ---------- Editor-only safety: ensure body background is dark ---------- */
.elementor-editor-active .elementor-element-catch-hero {
    background: var(--color-dark-bg, #1A0A0A);
}

/* ---------- Catch sections: never let Elementor reset their inner padding ---------- */
.elementor .hero,
.elementor .about,
.elementor .menu-section,
.elementor .full-menu,
.elementor .events,
.elementor .history,
.elementor .map-section,
.elementor .press,
.elementor .testimonials,
.elementor .info-bar,
.elementor .marquee-bar,
.elementor .ambience {
    box-sizing: border-box;
}

/* Inside Elementor preview, link colors should not be overridden by global page link styles */
.elementor a.dish-card__name,
.elementor .dish-card a,
.dish-card a {
    color: inherit !important;
    text-decoration: none !important;
}