/* =============================================
   Meals & Memories - Custom Styles
   ============================================= */

:root {
    --cream:       #F8F3EA;
    --cardcream:   #FFFDF8;
    --charcoal:    #272726;
    --softchar:    #3A3935;
    --olive:       #636131;
    --darkolive:   #484A25;
    --sage:        #918F6B;
    --lightsage:   #D7D2B9;
    --terracotta:  #B5512E;
    --coral:       #C57253;
    --peach:       #D7AF9B;
    --beige:       #E7DACB;
}

* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
    font-family: 'Nunito', sans-serif;
    background: var(--cream);
    color: var(--charcoal);
}

::selection { background: var(--terracotta); color: #fff; }

/* ===== Typography helpers ===== */
.font-display { font-family: 'Playfair Display', serif; }
.font-body    { font-family: 'Nunito', sans-serif; }
.font-hand    { font-family: 'Caveat', cursive; }

.section-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.85rem, 3vw, 2.75rem);
    line-height: 1.15;
    color: var(--charcoal);
    font-weight: 600;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--olive);
    background: rgba(99, 97, 49, .08);
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(99, 97, 49, .15);
}

/* ===== Header / Nav ===== */
#site-header.scrolled {
    background: rgba(248, 243, 234, .92);
    box-shadow: 0 8px 30px -10px rgba(72, 74, 37, .15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nav-link {
    position: relative;
    font-weight: 600;
    color: var(--softchar);
    padding: .55rem .95rem;
    border-radius: 999px;
    transition: color .25s ease, background .25s ease;
}
.nav-link:hover { color: var(--terracotta); }
.nav-link.active { color: var(--terracotta); }
.nav-link.active::after {
    content: '\f004';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--terracotta);
    font-size: .55rem;
}

.mobile-link {
    padding: .85rem 1rem;
    font-weight: 600;
    color: var(--softchar);
    border-radius: .85rem;
    transition: background .2s ease, color .2s ease;
}
.mobile-link:hover, .mobile-link.active {
    background: rgba(181, 81, 46, .08);
    color: var(--terracotta);
}

#mobile-menu.open {
    /* Fill the screen below the header - covers any content behind */
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Lock body scroll when mobile menu (or any modal/lightbox) is open.
   Important: do NOT use touch-action:none here - it blocks taps and
   prevents scrolling inside the overlay itself on mobile. overflow:hidden
   is enough on modern iOS/Android. */
body.no-scroll,
html.no-scroll {
    overflow: hidden !important;
    overscroll-behavior: contain;
}

/* Mobile socials block inside the mobile menu */
.mobile-socials {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--beige);
    text-align: center;
}

/* Hamburger icon swap */
#mobile-toggle .icon-bars,
#mobile-toggle .icon-close {
    position: absolute;
    transition: opacity .25s ease, transform .25s ease;
}
#mobile-toggle .icon-close {
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
}
#mobile-toggle[aria-expanded="true"] .icon-bars {
    opacity: 0;
    transform: rotate(90deg) scale(.6);
}
#mobile-toggle[aria-expanded="true"] .icon-close {
    opacity: 1;
    transform: rotate(0) scale(1);
    color: var(--terracotta);
}

/* ===== Buttons ===== */
.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    transition: all .3s ease;
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: var(--terracotta);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(181, 81, 46, .55);
}
.btn-primary:hover {
    background: var(--coral);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -10px rgba(197, 114, 83, .65);
}

.btn-secondary {
    background: transparent;
    color: var(--olive);
    border-color: var(--lightsage);
    background: var(--cardcream);
}
.btn-secondary:hover {
    background: rgba(99, 97, 49, .08);
    border-color: var(--olive);
    color: var(--darkolive);
    transform: translateY(-2px);
}

.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

/* ===== Feature badges (hero) ===== */
.feature-badge {
    display: flex;
    gap: .8rem;
    align-items: center;
    background: var(--cardcream);
    padding: .85rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--beige);
    box-shadow: 0 6px 20px -10px rgba(72, 74, 37, .15);
    transition: transform .3s ease, box-shadow .3s ease;
}
.feature-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(72, 74, 37, .2);
}
.feature-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(99, 97, 49, .12);
    color: var(--olive);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ===== Decorative blobs / shapes ===== */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}
.blob-peach { background: rgba(215, 175, 155, .65); }
.blob-sage  { background: rgba(215, 210, 185, .65); }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-12px) rotate(3deg); }
}
.blob-float { animation: float 6s ease-in-out infinite; }

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
.heart-bounce { animation: heartbeat 2.4s ease-in-out infinite; }

.decorative-leaf, .decorative-heart {
    animation: float 7s ease-in-out infinite;
    z-index: 0;
}

/* ===== Organic image ===== */
.organic-image {
    border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%;
    overflow: hidden;
    background: var(--cardcream);
    border: 6px solid var(--cardcream);
    z-index: 1;
}
.organic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}
.organic-image:hover img { transform: scale(1.05); }

/* ===== Leaf dividers ===== */
.leaf-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;
    color: var(--olive);
    opacity: .55;
}
.leaf-divider span {
    display: inline-block;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sage), transparent);
}
.leaf-divider-small {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin-top: 1rem;
    color: var(--olive);
    font-size: .85rem;
    opacity: .85;
}

/* ===== Menu cards ===== */
.menu-card {
    background: var(--cardcream);
    border: 1px solid var(--beige);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
    box-shadow: 0 6px 18px -10px rgba(72, 74, 37, .15);
    position: relative;
}
.menu-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 40px -18px rgba(72, 74, 37, .35);
}

.menu-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.menu-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.menu-card:hover .menu-image img { transform: scale(1.08); }

.heart-badge {
    position: absolute;
    top: .9rem;
    right: .9rem;
    width: 38px; height: 38px;
    background: rgba(255, 253, 248, .9);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--terracotta);
    font-size: .9rem;
    box-shadow: 0 6px 14px -6px rgba(72, 74, 37, .3);
    transition: transform .25s ease, background .25s ease;
}
.menu-card:hover .heart-badge {
    transform: scale(1.15);
    background: var(--terracotta);
    color: #fff;
}

.popular-badge {
    position: absolute;
    top: .9rem;
    left: .9rem;
    background: var(--terracotta);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .75rem;
    border-radius: 999px;
    box-shadow: 0 4px 10px -2px rgba(181, 81, 46, .55);
}

.menu-body { padding: .9rem 1rem 1.1rem; }
.menu-category {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--sage);
    font-weight: 700;
}
.menu-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--charcoal);
    margin-top: .25rem;
}
.menu-price {
    margin-top: .45rem;
    color: var(--terracotta);
    font-weight: 700;
    font-size: 1rem;
}

@media (min-width: 640px) {
    .menu-body { padding: 1.25rem 1.4rem 1.5rem; }
    .menu-title { font-size: 1.35rem; line-height: 1.2; }
    .menu-price { font-size: 1.15rem; }
    .menu-category { font-size: .7rem; }
}

/* Compact popular/heart badges on small screens */
@media (max-width: 639px) {
    .popular-badge { font-size: .55rem; padding: .25rem .55rem; top: .55rem; left: .55rem; letter-spacing: .06em; }
    .heart-badge { width: 30px; height: 30px; font-size: .75rem; top: .55rem; right: .55rem; }
}

/* ===== Catering cards ===== */
.catering-card {
    background: var(--cardcream);
    border: 1px solid var(--beige);
    border-radius: 1.5rem;
    padding: 2rem 1.75rem;
    text-align: center;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    box-shadow: 0 8px 22px -14px rgba(72, 74, 37, .18);
}
.catering-card:hover {
    transform: translateY(-8px);
    border-color: var(--lightsage);
    box-shadow: 0 22px 40px -18px rgba(72, 74, 37, .3);
}
.catering-icon {
    width: 74px; height: 74px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(99, 97, 49, .1);
    color: var(--olive);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: background .35s ease, color .35s ease, transform .35s ease;
    border: 1px dashed rgba(99, 97, 49, .25);
}
.catering-card:hover .catering-icon {
    background: var(--terracotta);
    color: #fff;
    transform: rotate(-6deg) scale(1.06);
    border-color: transparent;
}
.catering-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--charcoal);
    font-weight: 600;
}
.catering-text {
    margin-top: .7rem;
    color: var(--softchar);
    opacity: .85;
    line-height: 1.6;
}
.catering-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.2rem;
    font-weight: 700;
    color: var(--terracotta);
    transition: gap .25s ease;
}
.catering-link:hover { gap: .65rem; color: var(--coral); }

/* ===== Review cards ===== */
.review-card {
    position: relative;
    background: var(--cardcream);
    border: 1px solid var(--beige);
    border-radius: 1.5rem;
    padding: 2rem 1.75rem;
    transition: transform .35s ease, box-shadow .35s ease;
    box-shadow: 0 8px 22px -14px rgba(72, 74, 37, .18);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px -18px rgba(72, 74, 37, .3);
}
.quote-icon {
    color: var(--terracotta);
    font-size: 1.5rem;
    opacity: .5;
}
.stars {
    color: #E8A23A;
    margin-top: .75rem;
    display: flex;
    gap: .15rem;
}
.review-text {
    margin-top: 1rem;
    color: var(--softchar);
    line-height: 1.7;
    font-style: italic;
    flex: 1;
}
.review-highlight {
    margin-top: .9rem;
    padding: .65rem .9rem;
    background: rgba(181, 81, 46, .08);
    border-left: 3px solid var(--terracotta);
    border-radius: .5rem;
    font-family: 'Caveat', cursive;
    font-size: 1.25rem;
    color: var(--terracotta);
    line-height: 1.35;
}
.review-user {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--beige);
}
.review-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--peach);
    flex-shrink: 0;
}
.review-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .03em;
    color: #fff;
    border: 2px solid var(--cardcream);
    box-shadow: 0 4px 10px -4px rgba(72, 74, 37, .35);
}
.avatar-terracotta { background: linear-gradient(135deg, var(--terracotta), var(--coral)); }
.avatar-olive      { background: linear-gradient(135deg, var(--olive), var(--sage)); }
.avatar-peach      { background: linear-gradient(135deg, var(--peach), var(--coral)); }

/* ===== Contact cards ===== */
.contact-card {
    background: var(--cardcream);
    border: 1px solid var(--beige);
    border-radius: 1.5rem;
    padding: 2rem 1.75rem;
    box-shadow: 0 8px 22px -14px rgba(72, 74, 37, .18);
    transition: box-shadow .3s ease;
}
.contact-card:hover { box-shadow: 0 18px 36px -16px rgba(72, 74, 37, .28); }

.contact-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--charcoal);
    font-weight: 600;
}

.contact-item {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}
.contact-ico {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(181, 81, 46, .1);
    color: var(--terracotta);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ===== Social buttons ===== */
.social-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--beige);
    color: var(--olive);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}
.social-btn:hover {
    background: var(--terracotta);
    color: #fff;
    border-color: var(--terracotta);
    transform: translateY(-3px) rotate(-6deg);
    box-shadow: 0 8px 16px -6px rgba(181, 81, 46, .55);
}
.social-btn-dark {
    background: rgba(255, 253, 248, .08);
    border-color: rgba(255, 253, 248, .15);
    color: var(--peach);
}
.social-btn-dark:hover {
    background: var(--peach);
    color: var(--darkolive);
    border-color: var(--peach);
}

/* ===== Form ===== */
.form-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sage);
    margin-bottom: .4rem;
}
.form-input {
    width: 100%;
    padding: .85rem 1rem;
    background: var(--cream);
    border: 1px solid var(--beige);
    border-radius: .85rem;
    font-family: inherit;
    color: var(--charcoal);
    transition: border .25s ease, box-shadow .25s ease, background .25s ease;
}
.form-input:focus {
    outline: none;
    border-color: var(--terracotta);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(181, 81, 46, .12);
}
.form-input.invalid {
    border-color: #c0392b;
    background: rgba(192, 57, 43, .04);
}

/* ===== Footer logo badge ===== */
/* The brand logo is dark, so on the dark-olive footer it disappears.
   Wrap it in a soft cream badge so it pops while still feeling warm and on-brand. */
.footer-logo-wrap {
    background: var(--cardcream);
    padding: .75rem 1.25rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(215, 175, 155, .35); /* faint peach edge */
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .4),
                inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: transform .3s ease, box-shadow .3s ease;
}
.footer-logo-wrap:hover {
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 0 18px 36px -10px rgba(0, 0, 0, .5),
                inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* ===== Footer links / icons ===== */
.footer-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: rgba(248, 243, 234, .8);
    font-size: .9rem;
    transition: color .25s ease, transform .25s ease;
}
.footer-link:hover {
    color: var(--peach);
    transform: translateX(3px);
}
.footer-ico {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(248, 243, 234, .08);
    color: var(--peach);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    border: 1px solid rgba(248, 243, 234, .12);
}

/* ===== Contact cards layout - equal heights ===== */
.contact-card form#contact-form,
.contact-card .space-y-4 {
    flex: 1;
}

/* ===== Modal ===== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal.open {
    display: flex;
    animation: modalFade .25s ease forwards;
}
@keyframes modalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(39, 39, 38, .55);
    backdrop-filter: blur(4px);
    cursor: pointer;
}
.modal-content {
    position: relative;
    background: var(--cardcream);
    border-radius: 1.5rem;
    padding: 2.5rem 1.75rem 2rem;
    max-width: 440px;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border: 1px solid var(--beige);
    box-shadow: 0 30px 60px -20px rgba(39, 39, 38, .4);
    transform: scale(.92) translateY(20px);
    animation: modalPop .35s cubic-bezier(.18, .89, .32, 1.28) forwards;
}
.modal-content-lg { max-width: 600px; }

/* ===== Full menu list inside modal ===== */
.menu-cat-head {
    display: flex;
    align-items: center;
    gap: .9rem;
}
.menu-cat-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lightsage), transparent);
}
.menu-cat-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--charcoal);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-list-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .55rem 0;
    border-bottom: 1px dashed rgba(215, 210, 185, .55);
}
.menu-list-item:last-child { border-bottom: none; }
.menu-list-name {
    font-weight: 600;
    color: var(--charcoal);
    font-size: .98rem;
}
.menu-list-dots {
    flex: 1;
    border-bottom: 2px dotted rgba(145, 143, 107, .4);
    margin: 0 .25rem;
    transform: translateY(-3px);
}
.menu-list-price {
    color: var(--terracotta);
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
}
@keyframes modalPop {
    to { transform: scale(1) translateY(0); }
}
.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
}
.modal-close:hover {
    background: var(--terracotta);
    color: #fff;
    transform: rotate(90deg);
}

/* ===== Gallery Lightbox ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 110; /* above other modals */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.lightbox.open {
    display: flex;
    animation: lightboxFade .25s ease forwards;
}
@keyframes lightboxFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(39, 39, 38, .94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: zoom-out;
}

.lightbox-content {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    animation: lightboxPop .35s cubic-bezier(.18, .89, .32, 1.28);
}
@keyframes lightboxPop {
    from { transform: scale(.92); }
    to   { transform: scale(1); }
}

.lightbox-content img {
    max-width: min(92vw, 1200px);
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 1rem;
    border: 4px solid var(--cardcream);
    box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .6);
    background: var(--cardcream);
    display: block;
}

.lightbox-caption {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: .55rem 1.15rem;
    border-radius: 999px;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, .15);
}
.lightbox-counter {
    font-family: 'Nunito', sans-serif;
    font-size: .75rem;
    color: rgba(255, 255, 255, .7);
    padding-left: .65rem;
    border-left: 1px solid rgba(255, 255, 255, .25);
    font-weight: 700;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all .25s ease;
}
.lightbox-close:hover { background: var(--terracotta); border-color: var(--terracotta); transform: rotate(90deg); }
.lightbox-nav:hover   { background: var(--terracotta); border-color: var(--terracotta); }

.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.08); }

/* Gallery cursor hint */
.gallery-item { cursor: zoom-in; }

@media (max-width: 640px) {
    .lightbox-close { width: 40px; height: 40px; font-size: 1rem; top: .65rem; right: .65rem; }
    .lightbox-nav   { width: 40px; height: 40px; font-size: .95rem; }
    .lightbox-prev  { left: .5rem; }
    .lightbox-next  { right: .5rem; }
    .lightbox-content img { max-width: calc(100vw - 1rem); max-height: 70vh; border-width: 3px; }
    .lightbox-caption { font-size: .9rem; padding: .45rem .9rem; }
}

/* ===== AOS reveal ===== */
/* Note: we intentionally do NOT set pointer-events:none on [data-aos]. That
   rule made elements unclickable until AOS animated them in - on mobile, if
   AOS hadn't fired (deep link, fast scroll, network hiccup), taps on menu
   cards, gallery items, FAQ items etc. would silently fail. */

/* ===== Responsive tweaks ===== */
@media (max-width: 640px) {
    .section-heading { font-size: 1.8rem; }
    .organic-image { width: 100%; }
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
    .feature-badge { width: 100%; }
}

/* ===== Skip-to-content link ===== */
.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 200;
    background: var(--terracotta);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 10px 24px -6px rgba(181, 81, 46, .5);
    transition: top .25s ease;
}
.skip-link:focus { top: 1rem; outline: 3px solid var(--olive); outline-offset: 2px; }

/* ===== Menu filter tabs ===== */
.menu-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}
.menu-filter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.2rem;
    border-radius: 999px;
    border: 1.5px solid var(--lightsage);
    background: var(--cardcream);
    color: var(--softchar);
    font-weight: 700;
    font-size: .9rem;
    transition: all .25s ease;
    cursor: pointer;
}
.menu-filter:hover { border-color: var(--olive); color: var(--darkolive); }
.menu-filter.is-active {
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(181, 81, 46, .5);
}
.menu-filter .filter-count {
    background: rgba(255, 255, 255, .25);
    color: inherit;
    font-size: .72rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    font-weight: 700;
    min-width: 1.2rem;
    text-align: center;
}
.menu-filter:not(.is-active) .filter-count {
    background: rgba(99, 97, 49, .12);
    color: var(--olive);
}

.menu-card.is-hidden {
    display: none;
}

/* ===== Menu card foot row (price + WhatsApp button) ===== */
.menu-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.menu-foot {
    margin-top: .65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.menu-foot .menu-price { margin-top: 0; }

.wa-order {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--terracotta), var(--coral));
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    font-family: inherit;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    box-shadow: 0 6px 14px -6px rgba(181, 81, 46, .55);
    white-space: nowrap;
    border: none;
    cursor: pointer;
}
.wa-order:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 10px 20px -6px rgba(181, 81, 46, .7);
}
.wa-order:focus-visible {
    outline: 2px solid var(--darkolive);
    outline-offset: 3px;
}
.wa-order i { font-size: .9rem; }

@media (max-width: 639px) {
    .wa-order { padding: .35rem .65rem; font-size: .7rem; }
    .menu-foot { gap: .35rem; }
}

/* ===== Order modal - contact speed-dial options ===== */
.order-options {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.order-option {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    background: var(--cream);
    border: 1px solid var(--beige);
    border-radius: 1rem;
    color: var(--charcoal);
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.order-option:hover {
    transform: translateY(-2px);
    border-color: var(--lightsage);
    background: var(--cardcream);
    box-shadow: 0 12px 22px -10px rgba(72, 74, 37, .28);
}
.order-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.opt-wa .order-icon      { background: #25D366; }
.opt-phone .order-icon   { background: var(--terracotta); }
.opt-email .order-icon   { background: var(--olive); }
.opt-message .order-icon { background: var(--coral); }

.order-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}
.order-label {
    font-weight: 700;
    font-size: .98rem;
    color: var(--charcoal);
    line-height: 1.2;
}
.order-hint {
    font-size: .76rem;
    color: var(--sage);
    margin-top: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-arrow {
    color: var(--sage);
    font-size: .8rem;
    transition: transform .25s ease, color .25s ease;
    flex-shrink: 0;
}
.order-option:hover .order-arrow {
    transform: translateX(4px);
    color: var(--terracotta);
}

/* ===== Dietary tags ===== */
.diet-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .2rem .5rem;
    border-radius: 999px;
    border: 1px solid;
}
.diet-veg {
    background: rgba(99, 97, 49, .08);
    color: var(--darkolive);
    border-color: rgba(99, 97, 49, .25);
}
.diet-spicy {
    background: rgba(181, 81, 46, .08);
    color: var(--terracotta);
    border-color: rgba(181, 81, 46, .25);
}

/* ===== Halal note ===== */
.halal-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    color: var(--olive);
    font-weight: 600;
    font-size: .95rem;
}
.halal-note i { color: var(--olive); }

/* ===== Open Now / Closed status badge ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid;
}
.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-loading {
    background: rgba(145, 143, 107, .12);
    color: var(--sage);
    border-color: rgba(145, 143, 107, .3);
}
.status-loading .status-dot { background: var(--sage); }

.status-open {
    background: rgba(99, 97, 49, .12);
    color: var(--darkolive);
    border-color: rgba(99, 97, 49, .35);
}
.status-open .status-dot {
    background: #2cb673;
    box-shadow: 0 0 0 0 rgba(44, 182, 115, .6);
    animation: status-pulse 2s infinite;
}
@keyframes status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(44, 182, 115, .6); }
    70%  { box-shadow: 0 0 0 8px rgba(44, 182, 115, 0); }
    100% { box-shadow: 0 0 0 0 rgba(44, 182, 115, 0); }
}

.status-closed {
    background: rgba(181, 81, 46, .08);
    color: var(--terracotta);
    border-color: rgba(181, 81, 46, .3);
}
.status-closed .status-dot { background: var(--terracotta); }

/* ===== Gallery ===== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    gap: 1rem;
}
@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 220px;
        gap: 1.25rem;
    }
}
@media (min-width: 1024px) {
    .gallery-grid {
        grid-auto-rows: 240px;
    }
}
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--beige);
    background: var(--cardcream);
    box-shadow: 0 8px 22px -14px rgba(72, 74, 37, .25);
    transition: transform .4s ease, box-shadow .4s ease;
    display: block;
}
.gallery-item.gallery-tall { grid-row: span 2; }
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -18px rgba(72, 74, 37, .4);
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-caption {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    background: rgba(255, 253, 248, .92);
    backdrop-filter: blur(6px);
    color: var(--charcoal);
    font-weight: 700;
    font-size: .78rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--beige);
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .15);
}

/* On very small screens, tall items become normal */
@media (max-width: 767px) {
    .gallery-item.gallery-tall { grid-row: span 1; }
}

/* ===== FAQ ===== */
.faq-item {
    background: var(--cardcream);
    border: 1px solid var(--beige);
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.faq-item[open] {
    border-color: var(--lightsage);
    box-shadow: 0 12px 28px -16px rgba(72, 74, 37, .25);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: var(--charcoal);
    font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(181, 81, 46, .1);
    color: var(--terracotta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: transform .35s ease, background .25s ease;
    flex-shrink: 0;
}
.faq-item[open] .faq-icon {
    background: var(--terracotta);
    color: #fff;
    transform: rotate(45deg);
}
.faq-answer {
    padding: 0 1.25rem 1.25rem;
    color: var(--softchar);
    line-height: 1.7;
    animation: faqSlide .25s ease;
}
@keyframes faqSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Floating Contact Speed-Dial ===== */
.float-contact {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
}

/* Main toggle button */
.float-toggle {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--terracotta);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 14px 28px -8px rgba(181, 81, 46, .65), 0 4px 10px -4px rgba(0, 0, 0, .2);
    transition: transform .3s cubic-bezier(.18, .89, .32, 1.28), background .25s ease, box-shadow .25s ease;
    cursor: pointer;
    border: none;
}
.float-toggle:hover {
    background: var(--coral);
    transform: scale(1.06);
}
.float-toggle:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 4px;
}

.float-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--terracotta);
    opacity: .35;
    animation: float-pulse 2.4s ease-out infinite;
    z-index: -1;
}
@keyframes float-pulse {
    0%   { transform: scale(1);   opacity: .45; }
    100% { transform: scale(1.85); opacity: 0; }
}

/* Icon swap */
.float-toggle .float-icon-open,
.float-toggle .float-icon-close {
    position: absolute;
    transition: opacity .3s ease, transform .3s ease;
}
.float-toggle .float-icon-close {
    opacity: 0;
    transform: rotate(-90deg) scale(.7);
}
.float-toggle[aria-expanded="true"] {
    background: var(--charcoal);
    transform: rotate(90deg);
}
.float-toggle[aria-expanded="true"] .float-icon-open {
    opacity: 0;
    transform: rotate(90deg) scale(.7);
}
.float-toggle[aria-expanded="true"] .float-icon-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}
.float-toggle[aria-expanded="true"] .float-ring {
    animation: none;
    opacity: 0;
}

/* Action panel */
.float-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .55rem;
    pointer-events: none;
    /* Fully hide from layout & taps until opened */
    visibility: hidden;
}
.float-contact.is-open .float-panel { visibility: visible; }
.float-action {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .55rem .4rem 1rem;
    background: var(--cardcream);
    border: 1px solid var(--beige);
    color: var(--charcoal);
    border-radius: 999px;
    box-shadow: 0 10px 24px -10px rgba(72, 74, 37, .35);
    transform: translateY(20px) scale(.85);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.18, .89, .32, 1.28), opacity .25s ease, box-shadow .25s ease;
    text-decoration: none;
}
.float-action:hover {
    transform: translateY(-2px) scale(1);
    box-shadow: 0 16px 30px -10px rgba(72, 74, 37, .45);
}
.action-label {
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .02em;
    white-space: nowrap;
}
.action-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}
.action-wa .action-icon      { background: #25D366; }
.action-phone .action-icon   { background: var(--terracotta); }
.action-email .action-icon   { background: var(--olive); }
.action-message .action-icon { background: var(--coral); }

/* Open state - stagger reveal */
.float-contact.is-open .float-panel { pointer-events: auto; }
.float-contact.is-open .float-action {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.float-contact.is-open .float-action:nth-child(1) { transition-delay: .05s; }
.float-contact.is-open .float-action:nth-child(2) { transition-delay: .10s; }
.float-contact.is-open .float-action:nth-child(3) { transition-delay: .15s; }
.float-contact.is-open .float-action:nth-child(4) { transition-delay: .20s; }

@media (max-width: 640px) {
    .float-contact { bottom: 1rem; right: 1rem; gap: .55rem; }
    .float-toggle  { width: 56px; height: 56px; font-size: 1.4rem; }
    .float-action  { padding: .35rem .45rem .35rem .85rem; }
    .action-icon   { width: 34px; height: 34px; font-size: .9rem; }
    .action-label  { font-size: .75rem; }
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}