/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1750716335
Updated: 2025-06-23 22:05:35

*/

/*--------------------------------------------Jelovnik Styles---------------------------------------*/

.manu-artikal-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}

.menu-artikal-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0px;
    justify-content: space-between;
}

.menu-price {
    font-size: 18px;
}

.menu-desc {
    color: #aaa;
    font-weight: 400;
}

.menu-artikal {
    border: 1px solid #eee;
    padding: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

h2.menu-kategorija-title {
    font-size: 28px;
    font-weight: 600;
}

.menu-kategorija {
    margin-top: 48px;
}

span.menu-price {
    min-width: 80px;
    justify-content: end;
    display: flex;
    ;
}



/* Nav */

/* Top-Navi */
nav.menu-nav {
    position: sticky;
    /* bleibt oben beim Scrollen */
    top: 0;
    z-index: 1000;
    background: #fff;
    padding: 8px;
    display: flex;
    gap: 8px;
    white-space: nowrap;
    /* alles in einer Zeile */
    overflow-x: auto;
    /* horizontaler Scroll */
    scrollbar-width: thin;
    /* Firefox */
    -webkit-overflow-scrolling: touch;
}

/* dezente Scrollbar (WebKit) */
nav.menu-nav::-webkit-scrollbar {
    height: 6px;
}

nav.menu-nav::-webkit-scrollbar-thumb {
    border-radius: 6px;
}

/* Links */
a.menu-nav-link {
    color: #888;
    padding: 4px 10px;
    border: 1px solid #eee;
    border-radius: 100px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* aktiver Link */
a.menu-nav-link.active {
    color: #111;
    border-color: #111;
}

/* damit Anker nicht unter der sticky Navi verschwinden */
.menu-kategorija {
    scroll-margin-top: calc(var(--menu-h, 56px) + 8px);
}

.jelovnik-wrap .menu-nav-wrap {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    padding: 6px 0;
    /* keine Pfeilspalte mehr */
    border-bottom: 1px solid #eee;
    --gap: 8px;
    position: relative;
    /* wichtig für absolute Pfeile */
}

.jelovnik-wrap nav.menu-nav {
    display: flex;
    gap: var(--gap);
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: visible;
    /* Y nicht scrollen */
    padding: 0 2px;
    scrollbar-width: none;
}

.jelovnik-wrap nav.menu-nav::-webkit-scrollbar {
    display: none;
}

.jelovnik-wrap a.menu-nav-link {
    color: #666;
    padding: 4px 10px;
    border: 1px solid #eee;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.jelovnik-wrap a.menu-nav-link.active {
    color: #111;
    border-color: #111;
}

.jelovnik-wrap .nav-arrow {
    all: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    background: #fff;
    font-size: 22px;
    line-height: 1;
    color: #333;
    display: grid;
    place-items: center;
}

.jelovnik-wrap .nav-left {
    left: -40px;
}

.jelovnik-wrap .nav-right {
    right: -40px;
}

.jelovnik-wrap .nav-arrow[hidden] {
    opacity: 0;
    pointer-events: none;
}

.jelovnik-wrap .nav-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

/* Anker-Offset für sticky Header */
.jelovnik-wrap .menu-kategorija {
    scroll-margin-top: calc(var(--menu-h, 56px) + 8px);
    padding: 16px 0;
}