/*
 * NOVVIA Menu Types — Frontend-CSS
 * Fullscreen-Overlay · Command Palette · Slide-Drawer · Bottom-Tabs · FAB · Brand-Grid-Mega
 */

/* ═══════════════════════════════════════════════════════════════
   1. FULLSCREEN-OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.nv-fs-overlay {
    position: fixed; inset: 0;
    z-index: 9998;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s, transform .35s cubic-bezier(.4,0,.2,1);
}
.nv-fs-overlay.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .35s ease, visibility 0s, transform .45s cubic-bezier(.4,0,.2,1);
}
.nv-fs-overlay[data-animation="fade_scale"] { transform: scale(.97); }
.nv-fs-overlay[data-animation="fade_scale"].is-open { transform: scale(1); }
.nv-fs-overlay[data-animation="slide_down"] { transform: translateY(-30px); }
.nv-fs-overlay[data-animation="slide_down"].is-open { transform: translateY(0); }
.nv-fs-overlay[data-animation="slide_right"] { transform: translateX(60px); }
.nv-fs-overlay[data-animation="slide_right"].is-open { transform: translateX(0); }

/* Hintergrund-Schicht: separat vom Overlay, damit Opacity wirkt ohne Text/Menü zu beeinflussen */
.nv-fs-overlay .nv-fs-bg-layer {
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
}

.nv-fs-img-dim {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
}
.nv-fs-close {
    position: absolute; top: 24px; right: 32px;
    z-index: 3;
    background: transparent; border: 0;
    color: var(--nv-fs-text, #fff);
    font-size: 40px; line-height: 1;
    cursor: pointer;
    padding: 0; width: 48px; height: 48px;
    transition: transform .2s ease, opacity .2s ease;
}
.nv-fs-close:hover { transform: rotate(90deg); color: var(--nv-fs-hover, #2bbcc4); }

.nv-fs-nav {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 80px 32px;
}
.nv-fs-menu {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: clamp(12px, 2vh, 28px);
    text-align: center;
}
.nv-fs-menu > li > a {
    display: block;
    color: var(--nv-fs-text, #fff);
    text-decoration: none;
    font-size: clamp(32px, var(--nv-fs-size, 56px), 10vw);
    font-weight: var(--nv-fs-weight, 700);
    line-height: 1.05;
    letter-spacing: -.015em;
    transition: color .2s ease, transform .3s cubic-bezier(.4,0,.2,1);
    opacity: 0;
    transform: translateY(16px);
}
.nv-fs-overlay.is-open .nv-fs-menu > li > a {
    opacity: 1;
    transform: translateY(0);
}
.nv-fs-menu > li { --i: 0; }
.nv-fs-menu > li:nth-child(1) { --i: 1; }
.nv-fs-menu > li:nth-child(2) { --i: 2; }
.nv-fs-menu > li:nth-child(3) { --i: 3; }
.nv-fs-menu > li:nth-child(4) { --i: 4; }
.nv-fs-menu > li:nth-child(5) { --i: 5; }
.nv-fs-menu > li:nth-child(6) { --i: 6; }
.nv-fs-menu > li:nth-child(7) { --i: 7; }
.nv-fs-menu > li:nth-child(8) { --i: 8; }
.nv-fs-overlay.is-open .nv-fs-menu > li > a {
    transition-delay: calc(var(--i) * .05s + .12s);
}
.nv-fs-overlay.nv-fs-overlay .nv-fs-menu > li > a:hover,
.nv-fs-overlay.nv-fs-overlay .nv-fs-menu > li > a:focus,
.nv-fs-overlay.nv-fs-overlay .nv-fs-menu > li > a:active,
.nv-fs-overlay.nv-fs-overlay .nv-fs-menu > li.current-menu-item > a,
.nv-fs-overlay.nv-fs-overlay .nv-fs-menu > li.current-menu-parent > a,
.nv-fs-overlay.nv-fs-overlay .nv-fs-menu > li.current-menu-ancestor > a,
body.nv-fs-open .nv-fs-overlay .nv-fs-menu > li > a:hover,
body.nv-fs-open .nv-fs-overlay .nv-fs-menu > li > a:focus {
    color: var(--nv-fs-hover, #2bbcc4) !important;
    transform: translateX(6px);
}
.nv-fs-menu .sub-menu {
    list-style: none;
    margin: 10px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.nv-fs-menu .sub-menu > li > a {
    display: inline-block;
    color: var(--nv-fs-text, #fff);
    opacity: .65;
    font-size: 16px; font-weight: 400;
    text-decoration: none;
    padding: 4px 12px;
    transition: opacity .15s ease, color .15s ease;
}
.nv-fs-overlay.nv-fs-overlay .nv-fs-menu .sub-menu > li > a:hover,
.nv-fs-overlay.nv-fs-overlay .nv-fs-menu .sub-menu > li > a:focus,
.nv-fs-overlay.nv-fs-overlay .nv-fs-menu .sub-menu > li > a:active,
.nv-fs-overlay.nv-fs-overlay .nv-fs-menu .sub-menu > li.current-menu-item > a,
body.nv-fs-open .nv-fs-overlay .nv-fs-menu .sub-menu > li > a:hover,
body.nv-fs-open .nv-fs-overlay .nv-fs-menu .sub-menu > li > a:focus {
    opacity: 1 !important;
    color: var(--nv-fs-hover, #2bbcc4) !important;
}

/* Close-Button: gleiche Verstaerkung */
.nv-fs-overlay.nv-fs-overlay .nv-fs-close:hover,
.nv-fs-overlay.nv-fs-overlay .nv-fs-close:focus {
    color: var(--nv-fs-hover, #2bbcc4) !important;
}

body.nv-fs-open { overflow: hidden; }

/* Trigger — wir fügen eine spezielle Klasse zum Hamburger hinzu */
.novvia-mobile-toggle.nv-fs-trigger {
    display: inline-flex !important; /* auch auf Desktop wenn aktiv */
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0,0,0,.04);
    color: var(--novvia-text, #0f172a);
    border: 1px solid rgba(0,0,0,.08);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.novvia-mobile-toggle.nv-fs-trigger:hover {
    background: rgba(0,0,0,.08);
    color: var(--novvia-accent, #2bbcc4);
}
.novvia-mobile-toggle.nv-fs-trigger svg,
.novvia-mobile-toggle.nv-fs-trigger .dashicons {
    color: inherit;
    fill: currentColor;
}
/* Auf dunklem Header (z.B. Hero-Overlay) invertieren */
.novvia-header-transparent .novvia-mobile-toggle.nv-fs-trigger,
.nv-header-on-hero .novvia-mobile-toggle.nv-fs-trigger {
    background: rgba(255,255,255,.15);
    color: #fff;
    border-color: rgba(255,255,255,.25);
}

/* ═══════════════════════════════════════════════════════════════
   2. COMMAND PALETTE
   ═══════════════════════════════════════════════════════════════ */

.nv-cmd-palette {
    position: fixed; inset: 0;
    z-index: 9997;
    background: rgba(0, 0, 0, var(--nv-cmd-overlay, .6));
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh; padding-left: 16px; padding-right: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.nv-cmd-palette.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s;
}
.nv-cmd-panel {
    background: var(--nv-cmd-bg, #fff);
    color: var(--nv-cmd-text, #0f172a);
    width: min(640px, 100%);
    max-height: 70vh;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    overflow: hidden;
    display: flex; flex-direction: column;
    transform: translateY(-12px) scale(.98);
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.nv-cmd-palette.is-open .nv-cmd-panel {
    transform: translateY(0) scale(1);
}
.nv-cmd-input-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--nv-cmd-text, #0f172a) 10%, transparent);
}
.nv-cmd-input-wrap svg { color: var(--nv-cmd-text, #0f172a); opacity: .5; flex-shrink: 0; }
.nv-cmd-input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-size: 16px; color: var(--nv-cmd-text, #0f172a);
    font-family: inherit;
}
.nv-cmd-input::placeholder { color: var(--nv-cmd-text, #0f172a); opacity: .4; }
.nv-cmd-esc {
    font-size: 10px; font-family: ui-monospace, "SFMono-Regular", monospace;
    padding: 3px 8px;
    background: color-mix(in srgb, var(--nv-cmd-text, #0f172a) 8%, transparent);
    border-radius: 4px;
    color: var(--nv-cmd-text, #0f172a);
    opacity: .7;
}
.nv-cmd-results { flex: 1; overflow-y: auto; padding: 6px; }
.nv-cmd-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nv-cmd-text, #0f172a);
    opacity: .5;
    padding: 10px 12px 4px;
    font-weight: 700;
}
.nv-cmd-result {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    color: var(--nv-cmd-text, #0f172a);
    text-decoration: none;
    font-size: 14px;
}
.nv-cmd-result .nv-cmd-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--nv-cmd-accent, #2bbcc4) 12%, transparent); border-radius: 6px; color: var(--nv-cmd-accent, #2bbcc4); flex-shrink: 0; }
.nv-cmd-result .nv-cmd-content { flex: 1; min-width: 0; }
.nv-cmd-result .nv-cmd-title { font-weight: 600; }
.nv-cmd-result .nv-cmd-sub { font-size: 11px; opacity: .6; margin-top: 1px; }
.nv-cmd-result.is-active, .nv-cmd-result:hover {
    background: color-mix(in srgb, var(--nv-cmd-accent, #2bbcc4) 10%, transparent);
    color: var(--nv-cmd-accent, #2bbcc4);
}
.nv-cmd-result mark {
    background: color-mix(in srgb, var(--nv-cmd-accent, #2bbcc4) 28%, transparent);
    color: var(--nv-cmd-accent, #2bbcc4);
    padding: 0 2px; border-radius: 2px;
}
.nv-cmd-footer {
    display: flex; gap: 16px; padding: 8px 14px;
    border-top: 1px solid color-mix(in srgb, var(--nv-cmd-text, #0f172a) 10%, transparent);
    font-size: 10px; color: var(--nv-cmd-text, #0f172a); opacity: .55;
}
.nv-cmd-footer kbd {
    font-family: ui-monospace, "SFMono-Regular", monospace;
    padding: 1px 5px;
    background: color-mix(in srgb, var(--nv-cmd-text, #0f172a) 8%, transparent);
    border-radius: 3px;
    margin-right: 4px;
}

/* Header-Trigger Button */
.nv-cmd-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
    transition: background .15s;
}
.nv-cmd-trigger:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.nv-cmd-trigger kbd {
    font-family: ui-monospace, monospace;
    padding: 1px 5px;
    background: rgba(0,0,0,.1);
    border-radius: 3px;
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   3. SLIDE-DRAWER
   ═══════════════════════════════════════════════════════════════ */

.nv-slide-drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(380px, 85vw);
    background: var(--nv-sd-bg, #fff);
    color: var(--nv-sd-text, #0f172a);
    z-index: 9996;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 6px 0 24px rgba(0,0,0,.12);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.nv-slide-drawer.is-open { transform: translateX(0); }

.nv-sd-header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--nv-sd-divider, #e2e8f0);
    flex-shrink: 0;
}
.nv-sd-back, .nv-sd-close {
    background: transparent; border: 0;
    color: var(--nv-sd-text, #0f172a);
    cursor: pointer;
    padding: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
.nv-sd-back:hover, .nv-sd-close:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.nv-sd-close { font-size: 24px; line-height: 1; margin-left: auto; }
.nv-sd-breadcrumb { font-weight: 600; font-size: 14px; }

.nv-sd-pane-wrap {
    position: relative;
    flex: 1; overflow: hidden;
}
.nv-sd-root, .nv-sd-pane {
    list-style: none; margin: 0; padding: 0;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: auto;
    background: var(--nv-sd-bg, #fff);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.nv-sd-pane { transform: translateX(100%); }
.nv-sd-pane.is-active { transform: translateX(0); }

.nv-sd-item {
    border-bottom: 1px solid var(--nv-sd-divider, #e2e8f0);
}
.nv-sd-link {
    display: flex; align-items: center;
    padding: 0 18px;
    min-height: var(--nv-sd-h, 52px);
    text-decoration: none;
    color: inherit;
    font-size: 15px;
}
.nv-sd-link:hover { background: color-mix(in srgb, var(--nv-sd-accent, #2bbcc4) 6%, transparent); }
.nv-sd-label { flex: 1; }
.nv-sd-caret {
    font-size: 20px; color: var(--nv-sd-accent, #2bbcc4);
    line-height: 1;
    flex-shrink: 0;
}
.nv-sd-item.has-children > .nv-sd-link { cursor: pointer; }
.nv-sd-item.is-current > .nv-sd-link { color: var(--nv-sd-accent, #2bbcc4); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   4. BOTTOM-TABS
   ═══════════════════════════════════════════════════════════════ */

.nv-bottom-tabs {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 9995;
    height: var(--nv-bt-h, 60px);
    background: var(--nv-bt-bg, #fff);
    border-top: 1px solid var(--nv-bt-border, #e2e8f0);
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 12px rgba(0,0,0,.05);
}
.nv-bt-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--nv-bt-text, #64748b);
    transition: color .15s;
    position: relative;
    min-width: 0;
}
.nv-bt-item:hover { color: var(--nv-bt-active, #2bbcc4); }
.nv-bt-item.is-active { color: var(--nv-bt-active, #2bbcc4); }
.nv-bt-item.is-active::before {
    content: '';
    position: absolute; top: 0; left: 20%; right: 20%; height: 2px;
    background: var(--nv-bt-active, #2bbcc4);
    border-radius: 0 0 2px 2px;
}
.nv-bt-icon {
    width: var(--nv-bt-icon, 22px);
    height: var(--nv-bt-icon, 22px);
    display: flex; align-items: center; justify-content: center;
}
.nv-bt-icon svg { width: 100%; height: 100%; }
.nv-bt-label {
    font-size: var(--nv-bt-label, 10px);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
}
.nv-bt-badge {
    position: absolute; top: 6px; right: 22%;
    background: var(--nv-bt-active, #2bbcc4);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Bottom-Tabs sind nur Mobile */
@media (min-width: 1024px) {
    .nv-bottom-tabs { display: none; }
}

/* Wenn Bottom-Tabs aktiv: body bekommt padding unten, damit Content nicht verdeckt wird */
body.nv-has-bottom-tabs {
    padding-bottom: var(--nv-bt-h, 60px);
}
@media (min-width: 1024px) {
    body.nv-has-bottom-tabs { padding-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   5. FAB (Floating Action Button)
   ═══════════════════════════════════════════════════════════════ */

.nv-fab-wrap {
    position: fixed;
    z-index: 9994;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.nv-fab-wrap[data-position="bottom_right"]  { bottom: var(--nv-fab-y, 24px); right: var(--nv-fab-x, 24px); }
.nv-fab-wrap[data-position="bottom_left"]   { bottom: var(--nv-fab-y, 24px); left:  var(--nv-fab-x, 24px); }
.nv-fab-wrap[data-position="bottom_center"] { bottom: var(--nv-fab-y, 24px); left: 50%; transform: translateX(-50%); }

/* Wenn Bottom-Tabs + FAB beide aktiv, FAB nach oben schieben */
body.nv-has-bottom-tabs .nv-fab-wrap {
    bottom: calc(var(--nv-fab-y, 24px) + var(--nv-bt-h, 60px));
}

.nv-fab-main {
    width: var(--nv-fab-size, 56px);
    height: var(--nv-fab-size, 56px);
    border-radius: 50%;
    background: var(--nv-fab-bg, #2bbcc4);
    color: var(--nv-fab-color, #fff);
    border: 0;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .2s;
    position: relative;
    z-index: 2;
}
.nv-fab-main:hover { box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.nv-fab-main svg { width: 55%; height: 55%; }
.nv-fab-icon-close { display: none; }
.nv-fab-wrap.is-open .nv-fab-main { transform: rotate(135deg); }
.nv-fab-wrap.is-open .nv-fab-icon-open { display: none; }
.nv-fab-wrap.is-open .nv-fab-icon-close { display: flex; }

.nv-fab-actions {
    display: flex; flex-direction: column; gap: 10px;
    align-items: center;
    pointer-events: none;
}
.nv-fab-action {
    width: calc(var(--nv-fab-size, 56px) * .75);
    height: calc(var(--nv-fab-size, 56px) * .75);
    border-radius: 50%;
    background: var(--nv-fab-bg, #2bbcc4);
    color: var(--nv-fab-color, #fff);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
    opacity: 0;
    transform: translateY(20px) scale(.7);
    pointer-events: none;
    transition: opacity .2s, transform .25s cubic-bezier(.4,0,.2,1);
    transition-delay: 0s;
}
.nv-fab-action svg { width: 50%; height: 50%; }
.nv-fab-wrap.is-open .nv-fab-action {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: calc(var(--nv-fab-i, 0) * .04s);
}
.nv-fab-action:hover { transform: translateY(-2px) scale(1.05); }

/* ═══════════════════════════════════════════════════════════════
   6. BRAND-GRID MEGA
   ═══════════════════════════════════════════════════════════════ */

.nv-bgm {
    padding: 8px 4px;
}
.nv-bgm-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 12px;
    color: var(--nv-text, #0f172a);
}
.nv-bgm-grid {
    display: grid;
    grid-template-columns: repeat(var(--nv-bgm-cols, 5), 1fr);
    gap: 8px;
}
.nv-bgm-tile {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 10;
    background: var(--nv-bgm-tile-bg, #fff);
    border: 1px solid var(--nv-border, #e2e8f0);
    border-radius: var(--nv-bgm-radius, 12px);
    padding: 12px;
    transition: transform .2s, border-color .2s, box-shadow .2s, filter .3s;
    overflow: hidden;
}
.nv-bgm-tile img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    transition: filter .3s;
}
.nv-bgm-tile.is-grayscale img { filter: grayscale(100%) opacity(.75); }
.nv-bgm-tile.hover-colorize:hover img { filter: none; }
.nv-bgm-tile:hover {
    transform: translateY(-2px);
    border-color: var(--novvia-accent, #2bbcc4);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
}