/* Copied from local menu-style.css to preserve exact look */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

/* BACKGROUND GRID SECTION */
.background-grid-section {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Grid that scrolls with page using CSS variables */
html,
body {
    background-color: #fff;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--anchor-offset);
}

body {
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, var(--grid-opacity)) 0, rgba(0, 0, 0, var(--grid-opacity)) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, var(--grid-opacity)) 0, rgba(0, 0, 0, var(--grid-opacity)) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    background-attachment: scroll;
}

a {
    color: var(--grün);
}

h1 {
    font-weight: 300;
}

:root {
    --desktop-spacing: 64px;
    --grün: #173C18;
    --tablet-spacing: 32px;
    --mobile-spacing: 16px;
    --grid-opacity: 0.05;
    --grid-size: 150px;
    /* Single value used for anchor offset; JS updates this to the exact bar height */
    --anchor-offset: 24px;
}

/* Allgemein */
.shadow {
    box-shadow: 5px 5px rgba(0, 0, 0, 0.2);
    /* Limit transition to box-shadow so GSAP transform/opacity aren't double-animated */
    transition: box-shadow 0.2s ease-in-out;
}

.outline-button.shadow:hover {
    box-shadow: none;
}

.outline-button {
    font-family: anton, sans-serif;
    display: inline;
    background-color: white;
    font-size: 1.5em;
    line-height: 2em;
    text-transform: uppercase;
    text-decoration: none;
    columns: var(--grün);
    padding: 6px 48px 10px 48px;
    border: 5px solid var(--grün);
    border-radius: 999px;
    letter-spacing: 0.5px;
    /* Restrict to intended hover effects */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

}

.outline-button:hover {
    transform: translateX(5px) translateY(5px);

}

@media screen and (max-width: 1100px) {
    :root {
        --grid-size: 100px;
        --anchor-offset: 48px;
    }

    .outline-button {
        border: 3px solid var(--grün);
        padding: 2px 30px 6px 30px;
    }

    .shadow {
        box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
    }
}


/* BACK LINK SECTION */
.back-link-section {
    padding: 32px;
    padding-bottom: 0;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    background-color: transparent; /* animated to white */
    border-bottom: 2px solid transparent; /* animated to black */
}

.back-link-container {
    margin: 0 auto;
    padding-bottom: 32px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #000;
    
}

.back-link:hover,
.back-link:focus {
    color: var(--grün);
    outline: none;
}

.back-link-icon {
    width: 36px;
    height: auto;
    display: block;
    margin-top: 6px;
}

.back-link-icon path {
    fill: currentColor;
}

.back-link-label {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.9em, 6vw, 3.2em);
    letter-spacing: 1px;
    line-height: 1em;
}

/* Ensure anchor targets account for fixed back bar */
#menu { scroll-margin-top: var(--anchor-offset); }

@media screen and (max-width: 1100px) {
    .back-link-section {
        padding: calc(var(--mobile-spacing) + env(safe-area-inset-top)) var(--mobile-spacing) 0 var(--mobile-spacing);
        position: fixed; /* ensure fixed on touch devices */
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    .back-link-container {
        padding-bottom: 16px;
        width: 100%;
        
    }
}

/* PRODUCT TICKER SECTION */
.product-ticker-section {
    width: 100%;
    overflow: hidden;
    padding: 100px var(--desktop-spacing) 32px var(--desktop-spacing);

}

.product-ticker {
    position: relative;
    width: 100%;
}

.product-ticker-track {
    display: flex;
    width: max-content;
    animation: product-ticker-scroll var(--ticker-duration, 16s) linear infinite;
    cursor: grab;               /* indicate interactivity on desktop */
    user-select: none;          /* avoid text selection while dragging */
}

.product-ticker-track.is-interactive {
    animation: none !important; /* pause during drag/swipe without changing layout */
}

.product-ticker-track.is-dragging {
    cursor: grabbing;
}

.product-ticker-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.product-item {
    position: relative;
    display: inline-block;
}

.product-image {
    width: 600px;
    height: auto;
    display: block;
    -webkit-user-drag: none;    /* prevent default image drag ghost */
    user-drag: none;
    user-select: none;
}

.product-label {
    position: absolute;
    right: 100px;
    top: 70%;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    background-color: var(--grün);
    color: white;
    font-size: 2.5em;
    line-height: 1em;
    font-style: normal;
    padding: 6px 24px 14px 24px;

}

@keyframes product-ticker-scroll {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@media screen and (max-width: 1100px) {
    .product-ticker-group {
        gap: 0;
        padding: 0;
    }

    .product-image {
        width: 70vw;
    }

    .product-label {
        right: 7vw;
        top: 60%;
        padding: 4px 20px 10px 20px;
        font-size: 1.5em;
    }
}

/* HERO SECTION */

.menu-heading {
    font-family: 'anton', sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    font-size: clamp(6em, 10vw, 10em);
    color: black;
    

}

/* Neutralize reset margins from Elementor for headings used here */
.hero-section .menu-heading,
.menu-container .category-title,
.menu-container .item-title {
    margin-block-end: 0 !important;
}

.hero-section {
    padding: 0 var(--desktop-spacing);
    width: 100%;
}

.hero-section-container {
    margin: 0 auto;
    max-width: 800px;
}

.language-button-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.active {
    background-color: var(--grün);

}

.active>a {
    color: white;
}

/* Language buttons: active = white text, inactive = green */
.language-button-container .outline-button {
    color: var(--grün) !important; /* inactive */
}
.language-button-container .outline-button.active {
    color: #fff !important; /* active */
}
.language-button-container .outline-button a,
.language-button-container .outline-button a:hover,
.language-button-container .outline-button a:focus,
.language-button-container .outline-button a:active {
    color: inherit !important; /* follow container color */
}

/* Prevent movement on press/hover for language buttons (mobile + desktop) */
.language-button-container .outline-button,
.language-button-container .outline-button:hover,
.language-button-container .outline-button:active,
.language-button-container .outline-button:focus {
    transform: none !important;
    box-shadow: inherit;
}

/* FILTER BAR */
.filter {
    margin-top: 48px;
    position: relative;
    /* anchor for absolute arrows */
}

.filter-container {
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 16px 0;
}

.filter-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.filter-svg {
    width: 38px;
    height: auto;
    margin-top: 6px;
}

.filter-track {
    flex: 1 1 auto;
    display: flex;
    gap: clamp(24px, 6vw, 32px);
    overflow-x: auto;
    overflow-y: hidden; /* never scroll vertically */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    touch-action: pan-x; /* only horizontal panning on touch */
    /* Hide scrollbars cross-browser while keeping scroll */
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
    user-select: none;
}

.filter-track::-webkit-scrollbar {
    display: none;
}


.filter-item {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.8em, 4vw, 2.6em);
    letter-spacing: 1px;
    color: #bdbdbd;
    /* inactive grey */
    transition: none;
    padding: 0 !important; /* no padding like original */
}

.filter-item.is-active {
    color: #000 !important;
}

/* Filter arrows */
.filter-navs {
    position: absolute;
    right: 0;
    top: -60px;
    /* place above the bar like screenshot */
    display: flex;
    gap: 12px;
    z-index: 3;
}

.filter-nav {
    background: var(--grün);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 0;
    transition: none;
    line-height: 0; /* ensure icon centering without baseline offset */
    padding: 0 !important; /* override Elementor/reset button padding */
}

.filter-item:hover,
.filter-nav:hover {
    transform: none;
}

.filter-nav:disabled {
    background-color: white;
    border: 2px solid var(--grün);
    color: var(--grün);
    cursor: default;
}


/* Hide arrows on touch devices */
@media (pointer: coarse) {
    .filter-navs {
        display: none;
    }
}

@media screen and (max-width: 1100px) {
    .hero-section {
        padding: 0 var(--mobile-spacing);
    }

    .filter-container {
        gap: 16px;
        padding: 8px 0 12px 0;
        border-top: 2px solid black;
        border-bottom: 2px solid black;
    }

    .filter-svg {
        width: 22px;
    }

    /* scrollbars already hidden globally */
}

/* -------------------------------------------------
   Elementor overrides: remove pink/accent interactions
   ------------------------------------------------- */
.filter-item,
.filter-item:hover,
.filter-item:focus,
.filter-item:active,
.filter-item:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    color: inherit !important; /* keep current color (active or inactive) */
}

.filter-nav,
.filter-nav:hover,
.filter-nav:focus,
.filter-nav:active,
.filter-nav:focus-visible {
    background: var(--grün) !important;
    color: #fff !important;
    border-color: var(--grün) !important;
    box-shadow: none !important;
    outline: none !important;
}

.filter-nav:disabled,
.filter-nav:disabled:hover,
.filter-nav:disabled:focus,
.filter-nav:disabled:active {
    background-color: white !important;
    border: 2px solid var(--grün) !important;
    color: var(--grün) !important;
    box-shadow: none !important;
}

.category-title,
.category-title:hover,
.category-title:focus,
.category-title:active {
    background-color: var(--grün) !important;
    color: #fff !important;
}

/* ensure chevron svgs are visually centered identically */
.filter-nav svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* Ensure inactive filters are grey regardless of Elementor */
.filter-item:not(.is-active) { color: #bdbdbd !important; }

/* Language buttons: do not change text color on hover */
.language-button-container .outline-button a,
.language-button-container .outline-button a:hover,
.language-button-container .outline-button a:focus,
.language-button-container .outline-button a:active {
    color: inherit !important;
}

/* MENU CONTENT */
.menu-content {
    padding: 48px var(--desktop-spacing) 120px;
}

.menu-container {
    margin: 0 auto;
    max-width: 800px;
}

.category-title {
    display: inline-block;
    margin: 36px 0 16px;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    background-color: var(--grün);
    font-weight: 300;
    color: #fff;
    font-size: clamp(2.2em, 5vw, 3.5em);
    line-height: 1em;
    padding: 6px 24px 16px 24px;
    letter-spacing: 0.5px;
    margin-bottom: 32px;
}

.menu-items {
    display: flex;
    flex-direction: column;
}

.menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    margin-bottom: 64px;
    border-top: 3px solid #000;
    margin-top: 32px;
}

.item-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.item-title {
    font-family: martian-mono-variable, sans-serif;
    font-weight: 400;
    font-size: clamp(1.3em, 3vw, 1.8em);
    letter-spacing: -0.06em;
    line-height: 1em;
    color: black
}

.item-price {
    justify-self: end;
    padding-left: 12px;
    border-left: 3px solid #000;
    font-family: martian-mono-variable, sans-serif;
    font-weight: 400;
    font-size: clamp(1.3em, 3vw, 1.8em);
    letter-spacing: -0.06em;
    line-height: 1em;
    padding: 16px 0 16px 32px;
    color: black

}

.item-details {
    grid-column: 1 / -1;
    display: grid;
    row-gap: 8px;
    font-weight: 300;
    font-family: martian-mono-variable, sans-serif;
    color: #646464;
    letter-spacing: -0.1em;
    max-width: 600px;
    font-size: clamp(0.9em, 1.3vw, 1.3em);
}

.detail-row {
    display: grid;
    grid-template-columns: 160px 1fr;
}

.detail-row dt {
    font-weight: 500;
}

.detail-row dd {
    margin: 0;
}

/* filtering */
.is-hidden {
    display: none !important;
}

.menu-category.is-empty {
    display: none;
}

@media screen and (max-width: 1100px) {
    .menu-content {
        padding: 32px var(--mobile-spacing) 80px;
    }

    .detail-row {
        grid-template-columns: 110px 1fr;
    }

    .category-title {
        padding-bottom: 12px;
        margin: 24px 0 24px;
    }

    .item-price {
        padding: 8px 0 8px 16px;
        border-left: 2px solid black;
    }

    .menu-item {
        border-top: 2px solid black;
        margin-bottom: 32px;

    }

    .item-details {
        font-weight: 200;
    }

    .detail-row dt {
        font-weight: 400;
    }


}

/* CONTACT SECTION */
.fancy-title {
    display: inline-block;
    grid-column: 1 / span 1;
    line-height: 1.1;
    font-family: 'Anton', sans-serif;
    font-size: 3.2em;
    font-weight: 600;
}

.fancy-title.about-title {
    grid-column: 1 / span 1;
}


.fancy-line {
    display: block;
    margin-left: var(--indent, 0);
    padding: 0.05em 0.2em 0.2em 0.2em;
    background-color: #223F1F;
    color: #fff;
    width: max-content;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.fancy-line:not(:first-child) {
    padding-top: 0;
}

.contact-section {
    padding: 200px var(--desktop-spacing);
    display: flex;
    gap: 64px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

p {
    font-family: 'Martian Mono', sans-serif;

}

.fresh-title-container{
    margin-bottom: 32px;
}
.reviews-images {
    grid-column: 2 / span 10;
    grid-row: 2;
    width: 100%;
    display: flex;
    margin-bottom: 120px;
}

.reviews-image-1 {
    width: 50%;
    transform: rotate(6deg);
    object-fit: cover;
    margin-bottom: 80px;
}

.reviews-image-2 {
    width:60%;
    transform: rotate(-6deg);
    object-fit: cover;
    margin-top: 80px;
}

.menu-contact-container{
    display: flex;
    gap: 64px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1000px;

}

.contact-text-container{
    max-width: 500px;
    
}

.arrow{
    width: 200px;
    margin-top: 100px;
}

.contact-details-container{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 auto;
    
}


@media screen and (max-width: 1100px){
    .contact-section{
        flex-direction: column;
        gap: 0;
        padding: 100px var(--mobile-spacing);
    }
    .arrow-container {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding-right: 10vw;
    }
    .arrow{
        width: 100px;
        margin-top: 50px;
    }    
    .menu-contact-container {
        flex-direction: column;
        gap: 0;
        padding: 50px var(--mobile-spacing);
    }
    .fancy-title {
        font-size: 2.3em;
    }


    .reviews-images {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-top: 0;
    }

    
    .reviews-image-2 {
        width: 85%;
        margin-top: 0;
        margin-left: 5vw;
        margin-top: -32px;
        
    }

    .reviews-image-1 {
        width: 85%;
        margin-bottom: 0;
        margin-right: 5vw;
    }    
    .contact-details-container{
        max-width: 500px;
        margin: 0 auto;
    }
    
}