.vettica-header,
.vettica-header *,
.vettica-menu-shell,
.vettica-menu-shell *,
.vettica-nav,
.vettica-nav * {
    box-sizing: border-box;
}

/*
 * Values taken from the reference header on vettica.hosteria.ch.
 * The plugin deliberately uses its own scoped values so Elementor/theme
 * typography and link styles cannot alter the navigation.
 */
.vettica-header,
.vettica-menu-shell,
.vettica-nav {
    --vettica-foreground: #2d3e2d;
    --vettica-primary: #124f1a;
    --vettica-primary-foreground: #ffffff;
    --vettica-border: #e3ebe3;
    --vettica-surface: #f7f9f7;
    --vettica-secondary: #58705a;
    --vettica-header-bg: rgba(255, 255, 255, .90);
    --vettica-font: "Figtree", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --vettica-header-height: 72px;
    --vettica-page-padding: 24px;
    --vettica-page-max-width: 1280px;
    --vettica-mobile-top: 72px;
}

/* Full header shortcode. */
.vettica-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    margin: 0;
    color: var(--vettica-foreground);
    background: var(--vettica-header-bg);
    border: 0;
    border-bottom: 1px solid var(--vettica-border);
    font-family: var(--vettica-font);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

body.admin-bar .vettica-header {
    top: var(--wp-admin--admin-bar--height, 32px);
}

.vettica-header__inner {
    width: 100%;
    max-width: var(--vettica-page-max-width);
    height: var(--vettica-header-height);
    min-height: var(--vettica-header-height);
    margin: 0 auto;
    padding: 0 var(--vettica-page-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.vettica-header__brand-wrap {
    flex: 0 0 auto;
    min-width: 0;
}

.vettica-brand,
.elementor .vettica-brand,
.elementor-shortcode .vettica-brand {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--vettica-primary) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.vettica-brand__image {
    display: block;
    width: auto;
    height: 44px;
    max-width: 150px;
    margin: 0;
    padding: 0;
    object-fit: contain;
}

.vettica-brand--text {
    color: var(--vettica-primary) !important;
    font-family: var(--vettica-font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.vettica-header__navigation-wrap {
    min-width: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Standalone shortcode [vettica_menu]. */
.vettica-menu-shell {
    position: relative;
    z-index: 50;
    width: 100%;
    min-width: 0;
    min-height: var(--vettica-header-height);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--vettica-foreground);
    font-family: var(--vettica-font);
}

.vettica-nav {
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--vettica-foreground);
    font-family: var(--vettica-font);
}

.vettica-nav__inner,
.vettica-nav .menu,
.vettica-nav ul {
    margin: 0 !important;
    padding: 0 !important;
}

.vettica-nav--standalone,
.vettica-nav--standalone .vettica-nav__inner {
    width: auto;
}

.vettica-menu__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.vettica-menu__list > li {
    position: relative;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}

.vettica-menu__list > li::marker {
    content: "";
}

.vettica-menu__list a,
.elementor .vettica-menu__list a,
.elementor-shortcode .vettica-menu__list a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--vettica-foreground) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: var(--vettica-font) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap;
    box-shadow: none !important;
    outline-offset: 3px;
    transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}

.vettica-menu__list > li:not(.vettica-menu__cta-item) > a:hover,
.vettica-menu__list > li:not(.vettica-menu__cta-item) > a:focus-visible {
    color: var(--vettica-secondary) !important;
}

/* CTA = rounded-md bg-primary px-4 py-2.5 text-sm font-semibold. */
.vettica-menu__list > li.vettica-menu__cta-item > a,
.elementor .vettica-menu__list > li.vettica-menu__cta-item > a,
.elementor-shortcode .vettica-menu__list > li.vettica-menu__cta-item > a {
    min-height: 40px !important;
    padding: 10px 16px !important;
    color: var(--vettica-primary-foreground) !important;
    background: var(--vettica-primary) !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.vettica-menu__list > li.vettica-menu__cta-item > a:hover,
.vettica-menu__list > li.vettica-menu__cta-item > a:focus-visible {
    color: var(--vettica-primary-foreground) !important;
    background: var(--vettica-secondary) !important;
}

/* Submenus are not used by the reference navigation, but remain usable. */
.vettica-menu__list .sub-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: -12px;
    z-index: 60;
    min-width: 210px;
    margin: 0 !important;
    padding: 8px !important;
    display: none;
    background: #ffffff;
    border: 1px solid var(--vettica-border);
    border-radius: 6px;
    list-style: none !important;
    box-shadow: 0 12px 30px rgba(45, 62, 45, .08);
}

.vettica-menu__list li:hover > .sub-menu,
.vettica-menu__list li:focus-within > .sub-menu {
    display: block;
}

.vettica-menu__list .sub-menu li,
.vettica-menu__list .sub-menu a {
    width: 100%;
}

.vettica-menu__list .sub-menu a,
.elementor .vettica-menu__list .sub-menu a,
.elementor-shortcode .vettica-menu__list .sub-menu a {
    padding: 8px !important;
    justify-content: flex-start !important;
    white-space: normal;
}

/* Exact Lucide menu/X button used in the reference. */
.vettica-menu-toggle,
.elementor .vettica-menu-toggle,
.elementor-shortcode .vettica-menu-toggle {
    display: none;
    flex: 0 0 auto;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    color: var(--vettica-foreground) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.vettica-menu-toggle:hover,
.vettica-menu-toggle:focus,
.vettica-menu-toggle:active {
    color: var(--vettica-foreground) !important;
    background: transparent !important;
}

.vettica-menu-toggle svg {
    display: block;
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vettica-menu-toggle__close {
    display: none !important;
}

.vettica-header.is-open .vettica-menu-toggle__menu,
.vettica-menu-shell.is-open .vettica-menu-toggle__menu {
    display: none !important;
}

.vettica-header.is-open .vettica-menu-toggle__close,
.vettica-menu-shell.is-open .vettica-menu-toggle__close {
    display: block !important;
}

.vettica-menu__missing {
    margin: 0;
    padding: 8px 12px;
    color: var(--vettica-foreground);
    border: 1px dashed var(--vettica-border);
    font: 500 14px/20px var(--vettica-font);
}

/* Mobile dropdown. It is rendered server-side inside the shortcode/header,
 * so opening it does not depend on JavaScript initialization or DOM cloning. */
.vettica-mobile-panel {
    --vettica-foreground: #2d3e2d;
    --vettica-primary: #124f1a;
    --vettica-primary-foreground: #ffffff;
    --vettica-border: #e3ebe3;
    --vettica-surface: #f7f9f7;
    --vettica-secondary: #58705a;
    --vettica-font: "Figtree", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --vettica-page-max-width: 1280px;
    box-sizing: border-box;
    position: fixed !important;
    top: 72px !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2147483000 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--vettica-foreground) !important;
    background: #ffffff !important;
    border: 0 !important;
    border-top: 1px solid var(--vettica-border) !important;
    border-bottom: 1px solid var(--vettica-border) !important;
    font-family: var(--vettica-font) !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch;
}

body.admin-bar .vettica-mobile-panel {
    top: calc(72px + var(--wp-admin--admin-bar--height, 32px)) !important;
}

.vettica-mobile-panel *,
.vettica-mobile-panel *::before,
.vettica-mobile-panel *::after {
    box-sizing: border-box;
}

.vettica-header.is-open .vettica-mobile-panel,
.vettica-menu-shell.is-open .vettica-mobile-panel,
.vettica-mobile-panel.is-open {
    display: block !important;
}

.vettica-mobile-panel__inner {
    width: 100% !important;
    max-width: var(--vettica-page-max-width) !important;
    margin: 0 auto !important;
    padding: 16px 24px !important;
}

.vettica-mobile-panel .vettica-menu__list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    list-style: none !important;
}

.vettica-mobile-panel .vettica-menu__list > li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}

.vettica-mobile-panel .vettica-menu__list > li::marker {
    content: "";
}

.vettica-mobile-panel .vettica-menu__list > li > a,
.elementor .vettica-mobile-panel .vettica-menu__list > li > a,
.elementor-shortcode .vettica-mobile-panel .vettica-menu__list > li > a {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    color: var(--vettica-foreground) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-family: var(--vettica-font) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: normal !important;
    box-shadow: none !important;
}

.vettica-mobile-panel .vettica-menu__list > li > a:hover,
.vettica-mobile-panel .vettica-menu__list > li > a:focus-visible {
    color: var(--vettica-foreground) !important;
    background: var(--vettica-surface) !important;
}

/* The reference mobile navigation contains only the four normal links. */
.vettica-mobile-panel .vettica-menu__list > li.vettica-menu__cta-item {
    display: none !important;
}

.vettica-mobile-panel .vettica-menu__list .sub-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
}

/* Source breakpoint: Tailwind md = 768px. */
@media (max-width: 767px) {
    .vettica-header__inner {
        height: var(--vettica-header-height);
        min-height: var(--vettica-header-height);
        padding-right: var(--vettica-page-padding);
        padding-left: var(--vettica-page-padding);
    }

    .vettica-brand__image {
        height: 44px;
        max-width: 150px;
    }

    .vettica-header__navigation-wrap {
        margin-left: auto;
    }

    .vettica-menu-shell {
        min-height: var(--vettica-header-height);
    }

    .vettica-menu-toggle,
    .elementor .vettica-menu-toggle,
    .elementor-shortcode .vettica-menu-toggle {
        display: inline-flex !important;
    }

    /* The desktop list is replaced by the body-mounted mobile panel. */
    .vettica-header .vettica-nav,
    .vettica-menu-shell .vettica-nav--standalone {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .vettica-header .vettica-nav,
    .vettica-menu-shell .vettica-nav--standalone {
        display: block !important;
    }

    .vettica-mobile-panel {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vettica-header *,
    .vettica-menu-shell *,
    .vettica-nav * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}