/* ========================================================================== 
   PREZRTI – NAVIGATION
   File: wwwroot/css/Components/sv_nav.css
   ========================================================================== */


/* --------------------------------------------------------------------------
   Component variables
   -------------------------------------------------------------------------- */

.sv_nav {
    --nav_row_height: var(--space_6_5); /* 26px */
    --nav_row_height_compact: calc(var(--nav_row_height) * 0.88); /* približno 23px */
    --nav_gap: var(--space_1); /* 4px */
    --nav_icon_width: var(--space_12); /* 48px */
    --nav_arrow_width: var(--space_2_5); /* 10px */
    --nav_logo_height: calc(var(--nav_row_height) * 5); /* 130px */
    --nav_transition_fast: 180ms;
    --nav_transition_normal: 200ms;
    /* Fallback values; SS_VCM.css jih lahko prepiše. */
    --nav_text_color: var(--color_LunarGreen);
    --nav_text_hover_color: var(--color_LunarGreen);
    --nav_background_hover: var(--color_RockBlue_50);
    --nav_level_1_open_text: var(--color_Bush);
    --nav_level_1_open_background: var(--color_RockBlue_75);
    --nav_level_2_active_text: var(--color_Bush);
    --nav_level_2_active_background: var(--color_RockBlue_50);
    --nav_level_3_active_text: var(--color_Bush);
    --nav_level_3_active_background: var(--color_RockBlue_25);
    --nav_level_3_active_border: var(--color_Bush);
}


/* --------------------------------------------------------------------------
   Root
   -------------------------------------------------------------------------- */

.sv_nav {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    color: var(--nav_text_color);
    background-color: transparent;
}

    .sv_nav *,
    .sv_nav *::before,
    .sv_nav *::after {
        box-sizing: border-box;
    }

    .sv_nav ul,
    .sv_nav li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sv_nav button,
    .sv_nav a {
        color: inherit;
        font: inherit;
        text-decoration: none;
    }

    .sv_nav button {
        padding: 0;
        border: 0;
        background-color: transparent;
        cursor: pointer;
    }

    .sv_nav [hidden] {
        display: none !important;
    }

/* --------------------------------------------------------------------------
   Logo – fixed at the top
   -------------------------------------------------------------------------- */

.sv_nav_logo {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    width: 100%;
    height: var(--nav_logo_height);
    min-width: 0;
    padding: var(--space_2) var(--space_2) 0;
}

.sv_nav_logo_link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.sv_nav_logo_text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    font-family: var(--font_BovinoLight);
    font-size: clamp(var(--font_size_32), 3.3vw, var(--font_size_56));
    line-height: var(--line_height_none);
    color: var(--color_LunarGreen);
    text-align: center;
}


/* --------------------------------------------------------------------------
   Menu viewport
   -------------------------------------------------------------------------- */

.sv_nav_menu {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding-inline: var(--space_2);
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Shared menu levels
   -------------------------------------------------------------------------- */

.sv_nav_level_1,
.sv_nav_level_2,
.sv_nav_level_3 {
    width: 100%;
    min-width: 0;
}


/* --------------------------------------------------------------------------
   Level 1
   -------------------------------------------------------------------------- */

.sv_nav_level_1 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

    .sv_nav_level_1 > li {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding-block: var(--space_0_5);
        overflow-x: hidden;
        transition: padding-block var(--nav_transition_fast) ease, background-color var(--nav_transition_normal) ease;
    }


/* --------------------------------------------------------------------------
   Navigation group
   -------------------------------------------------------------------------- */

.sv_nav_group {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

/* Odprta skupina se raztegne samo toliko, kolikor potrebuje.
   Če prostora zmanjka, se njen level 2 skrči in scrolla. */
.sv_nav_level_1 > .sv_nav_group.is_open {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    background-color: var(--nav_level_1_open_background);
}


/* --------------------------------------------------------------------------
   Navigation item
   -------------------------------------------------------------------------- */

.sv_nav_item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: var(--nav_row_height);
    color: var(--nav_text_color);
    fill: currentColor;
    text-align: left;
    transition: min-height var(--nav_transition_fast) ease, padding var(--nav_transition_fast) ease, color var(--nav_transition_normal) ease, background-color var(--nav_transition_normal) ease, font-size var(--nav_transition_fast) ease, font-weight var(--nav_transition_normal) ease, fill var(--nav_transition_normal) ease, border-color var(--nav_transition_normal) ease;
}

    .sv_nav_item:hover,
    .sv_nav_item:focus-visible {
        color: var(--nav_text_hover_color);
        fill: currentColor;
        background-color: var(--nav_background_hover);
        font-weight: var(--font_weight_bold);
        outline: none;
    }


/* --------------------------------------------------------------------------
   Item levels
   -------------------------------------------------------------------------- */

.sv_nav_item_level_1 {
    padding-block: var(--space_0_5);
}

.sv_nav_item_level_2 {
    padding-block: var(--space_0_25);
}

.sv_nav_item_level_3 {
    padding-block: var(--space_0_25);
}


/* --------------------------------------------------------------------------
   Compact first-level rows
   -------------------------------------------------------------------------- */

.sv_nav_level_1.has_open_group > li:not(.is_open) {
    padding-block: var(--space_0_25);
}

    .sv_nav_level_1.has_open_group > li:not(.is_open) > .sv_nav_item_level_1 {
        min-height: var(--nav_row_height_compact);
        padding-block: var(--space_0_25);
    }

        .sv_nav_level_1.has_open_group > li:not(.is_open) > .sv_nav_item_level_1
        .sv_nav_text_level_1 {
            font-size: 0.94em;
        }


/* --------------------------------------------------------------------------
   OPEN LEVEL 1 WITH SUBMENU

   Temno ozadje, temen span, SVG in puščica.
   -------------------------------------------------------------------------- */

.sv_nav_level_1 > .sv_nav_group.is_open > .sv_nav_item_level_1 {
    flex: 0 0 auto;
    padding-top: var(--space_0_75);
    color: var(--nav_level_1_open_text);
    fill: currentColor;
    background-color: var(--nav_level_1_open_background);
}

    .sv_nav_level_1 > .sv_nav_group.is_open > .sv_nav_item_level_1 > .sv_nav_text,
    .sv_nav_level_1 > .sv_nav_group.is_open > .sv_nav_item_level_1 > .sv_nav_icon,
    .sv_nav_level_1 > .sv_nav_group.is_open > .sv_nav_item_level_1 > .sv_nav_arrow {
        color: var(--nav_level_1_open_text);
        fill: currentColor;
    }

        .sv_nav_level_1 > .sv_nav_group.is_open > .sv_nav_item_level_1 > .sv_nav_icon
        .svg_icon,
        .sv_nav_level_1 > .sv_nav_group.is_open > .sv_nav_item_level_1 > .sv_nav_arrow
        .svg_icon {
            color: var(--nav_level_1_open_text);
            fill: currentColor;
        }


/* --------------------------------------------------------------------------
   ACTIVE LEVEL 1 WITHOUT SUBMENU

   Osebe, Iskanje, Trenutki ...
   Enak videz kot odprti level 1.
   -------------------------------------------------------------------------- */

.sv_nav_level_1 > li > .sv_nav_item_level_1.is_active,
.sv_nav_level_1 > li > .sv_nav_item_level_1[aria-current="page"] {
    color: var(--nav_level_1_open_text);
    fill: currentColor;
    background-color: var(--nav_level_1_open_background);
}

    .sv_nav_level_1 > li > .sv_nav_item_level_1.is_active > .sv_nav_text,
    .sv_nav_level_1 > li > .sv_nav_item_level_1[aria-current="page"] > .sv_nav_text,
    .sv_nav_level_1 > li > .sv_nav_item_level_1.is_active > .sv_nav_icon,
    .sv_nav_level_1 > li > .sv_nav_item_level_1[aria-current="page"] > .sv_nav_icon,
    .sv_nav_level_1 > li > .sv_nav_item_level_1.is_active > .sv_nav_arrow,
    .sv_nav_level_1 > li > .sv_nav_item_level_1[aria-current="page"] > .sv_nav_arrow {
        color: var(--nav_level_1_open_text);
        fill: currentColor;
    }

        .sv_nav_level_1 > li > .sv_nav_item_level_1.is_active > .sv_nav_icon
        .svg_icon,
        .sv_nav_level_1 > li > .sv_nav_item_level_1[aria-current="page"] > .sv_nav_icon
        .svg_icon {
            color: var(--nav_level_1_open_text);
            fill: currentColor;
        }


/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */

.sv_nav_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--nav_icon_width);
    width: var(--nav_icon_width);
    height: var(--nav_row_height);
    padding-inline: var(--space_2);
    color: currentColor;
    fill: currentColor;
}

    .sv_nav_icon .svg_icon {
        display: block;
        width: 100%;
        height: 100%;
        max-width: var(--nav_arrow_width);
        max-height: var(--nav_row_height);
        color: currentColor;
        fill: currentColor;
    }


/* --------------------------------------------------------------------------
   Cover images
   -------------------------------------------------------------------------- */

.sv_nav_cover {
    overflow: hidden;
}

    .sv_nav_cover img {
        display: block;
        width: auto;
        height: calc(var(--nav_row_height) * 0.75);
        max-width: 100%;
        object-fit: cover;
    }


/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */

.sv_nav_text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sv_nav_text_level_1 {
    font-family: var(--font_BovinoLight);
    font-size: var(--font_size_18);
    font-weight: var(--font_weight_black);
}

.sv_nav_text_level_2 {
    font-family: var(--font_BovinoMedium);
    font-size: var(--font_size_14);
    font-weight: var(--font_weight_regular);
}

.sv_nav_text_level_3 {
    font-family: var(--font_BovinoLight);
    font-size: var(--font_size_12);
    font-weight: var(--font_weight_regular);
}


/* --------------------------------------------------------------------------
   Dropdown arrow
   -------------------------------------------------------------------------- */

.sv_nav_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--nav_arrow_width);
    width: var(--nav_arrow_width);
    height: var(--nav_row_height);
    margin-right: var(--space_2);
    color: currentColor;
    fill: currentColor;
    transition: transform var(--nav_transition_normal) ease, color var(--nav_transition_normal) ease, fill var(--nav_transition_normal) ease;
}

    .sv_nav_arrow .svg_icon {
        width: 100%;
        height: 100%;
        color: currentColor;
        fill: currentColor;
    }

.sv_nav_item[aria-expanded="true"] .sv_nav_arrow,
.sv_nav_group.is_open > .sv_nav_item .sv_nav_arrow {
    transform: rotate(180deg);
}


/* --------------------------------------------------------------------------
   Level 2
   -------------------------------------------------------------------------- */

.sv_nav_level_2 {
    display: none;
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    padding-block: var(--space_0_5);
    color: var(--nav_text_color);
    fill: currentColor;
    background-color: var(--color_RockBlue);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sv_nav_level_2::-webkit-scrollbar {
        display: none;
    }

.sv_nav_level_1 > .sv_nav_group.is_open > .sv_nav_level_2 {
    display: block;
}

.sv_nav_level_2 > li {
    width: 100%;
    min-width: 0;
}


/* --------------------------------------------------------------------------
   ACTIVE LEVEL 2 WITHOUT SUBMENU

   Svetlejše ozadje, temen span in SVG. Parent level 1 ostane odprt.
   -------------------------------------------------------------------------- */

.sv_nav_level_2
.sv_nav_item_level_2.is_active,
.sv_nav_level_2
.sv_nav_item_level_2[aria-current="page"] {
    color: var(--nav_level_2_active_text);
    fill: currentColor;
    background-color: var(--color_LighterCyan);
    border-top: 0;
    border-bottom: var(--space_0_25) solid var(--color_White);
}

    .sv_nav_level_2
    .sv_nav_item_level_2.is_active > .sv_nav_text,
    .sv_nav_level_2
    .sv_nav_item_level_2[aria-current="page"] > .sv_nav_text,
    .sv_nav_level_2
    .sv_nav_item_level_2.is_active > .sv_nav_icon,
    .sv_nav_level_2
    .sv_nav_item_level_2[aria-current="page"] > .sv_nav_icon {
        color: var(--nav_level_2_active_text);
        fill: currentColor;
    }

        .sv_nav_level_2
        .sv_nav_item_level_2.is_active > .sv_nav_icon
        .svg_icon,
        .sv_nav_level_2
        .sv_nav_item_level_2[aria-current="page"] > .sv_nav_icon
        .svg_icon {
            color: var(--nav_level_2_active_text);
            fill: currentColor;
        }


/* --------------------------------------------------------------------------
   Level 2 group with level 3 – Albumi

   .is_open, parent level 1 ostane odprt.
   -------------------------------------------------------------------------- */

.sv_nav_level_2 > .sv_nav_group.is_open > .sv_nav_item_level_2 {
    color: var(--nav_level_2_active_text);
    fill: currentColor;
    background-color: var(--nav_level_2_active_background);
}

    .sv_nav_level_2 > .sv_nav_group.is_open > .sv_nav_item_level_2 > .sv_nav_text,
    .sv_nav_level_2 > .sv_nav_group.is_open > .sv_nav_item_level_2 > .sv_nav_icon,
    .sv_nav_level_2 > .sv_nav_group.is_open > .sv_nav_item_level_2 > .sv_nav_arrow {
        color: var(--nav_level_2_active_text);
        fill: currentColor;
    }

        .sv_nav_level_2 > .sv_nav_group.is_open > .sv_nav_item_level_2 > .sv_nav_icon
        .svg_icon,
        .sv_nav_level_2 > .sv_nav_group.is_open > .sv_nav_item_level_2 > .sv_nav_arrow
        .svg_icon {
            color: var(--nav_level_2_active_text);
            fill: currentColor;
        }


/* --------------------------------------------------------------------------
   Level 2 hover / active priority
   -------------------------------------------------------------------------- */

.sv_nav_level_2 .sv_nav_item:hover,
.sv_nav_level_2 .sv_nav_item:focus-visible {
    color: var(--nav_text_hover_color);
    fill: currentColor;
    background-color: var(--nav_background_hover);
}

.sv_nav_level_2 .sv_nav_item_level_2.is_active:hover,
.sv_nav_level_2 .sv_nav_item_level_2.is_active:focus-visible,
.sv_nav_level_2 .sv_nav_item_level_2[aria-current="page"]:hover,
.sv_nav_level_2 .sv_nav_item_level_2[aria-current="page"]:focus-visible,
.sv_nav_level_2 > .sv_nav_group.is_open > .sv_nav_item_level_2:hover,
.sv_nav_level_2 > .sv_nav_group.is_open > .sv_nav_item_level_2:focus-visible {
    color: var(--nav_level_2_active_text);
    fill: currentColor;
    background-color: var(--nav_level_2_active_background);
}


/* --------------------------------------------------------------------------
   Level 3
   -------------------------------------------------------------------------- */

.sv_nav_level_3 {
    display: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    background-color: var(--color_RockBlue_50);
    overflow: hidden;
}

.sv_nav_level_2 > .sv_nav_group.is_open > .sv_nav_level_3 {
    display: block;
}


/* --------------------------------------------------------------------------
   ACTIVE LEVEL 3

   Svetlejše ozadje, temen span in SVG, border top/bottom.
   Parent Albumi in parent Zapuščina ostaneta odprta.
   -------------------------------------------------------------------------- */

.sv_nav_level_3
.sv_nav_item_level_3.is_active,
.sv_nav_level_3
.sv_nav_item_level_3[aria-current="page"] {
    color: var(--nav_level_3_active_text);
    fill: currentColor;
    background-color: var(--nav_level_3_active_background);
    border-top: var(--space_0_25) solid var(--nav_level_3_active_border);
    border-bottom: var(--space_0_25) solid var(--nav_level_3_active_border);
}

    .sv_nav_level_3
    .sv_nav_item_level_3.is_active > .sv_nav_text,
    .sv_nav_level_3
    .sv_nav_item_level_3[aria-current="page"] > .sv_nav_text,
    .sv_nav_level_3
    .sv_nav_item_level_3.is_active > .sv_nav_icon,
    .sv_nav_level_3
    .sv_nav_item_level_3[aria-current="page"] > .sv_nav_icon {
        color: var(--nav_level_3_active_text);
        fill: currentColor;
    }

        .sv_nav_level_3
        .sv_nav_item_level_3.is_active > .sv_nav_icon
        .svg_icon,
        .sv_nav_level_3
        .sv_nav_item_level_3[aria-current="page"] > .sv_nav_icon
        .svg_icon {
            color: var(--nav_level_3_active_text);
            fill: currentColor;
        }


/* --------------------------------------------------------------------------
   Level 3 hover / active priority
   -------------------------------------------------------------------------- */

.sv_nav_level_3 .sv_nav_item:hover,
.sv_nav_level_3 .sv_nav_item:focus-visible {
    color: var(--nav_text_hover_color);
    fill: currentColor;
    background-color: var(--color_DirtyBlue);
}

.sv_nav_level_3 .sv_nav_item_level_3.is_active:hover,
.sv_nav_level_3 .sv_nav_item_level_3.is_active:focus-visible,
.sv_nav_level_3 .sv_nav_item_level_3[aria-current="page"]:hover,
.sv_nav_level_3 .sv_nav_item_level_3[aria-current="page"]:focus-visible {
    color: var(--nav_level_3_active_text);
    fill: currentColor;
    background-color: var(--nav_level_3_active_background);
    border-top: var(--space_0_25) solid var(--nav_level_3_active_border);
    border-bottom: var(--space_0_25) solid var(--nav_level_3_active_border);
}


/* --------------------------------------------------------------------------
   Social / hosting links – fixed at the bottom
   -------------------------------------------------------------------------- */

.sv_nav_social {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--nav_row_height) + var(--space_0_25));
    padding-inline: var(--space_3);
    color: var(--color_LunarGreen);
    background-color: transparent;
    transition: background-color var(--nav_transition_normal) ease;
}

    .sv_nav_social > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--nav_row_height);
        height: var(--nav_row_height);
        fill: currentColor;
        transition: color var(--nav_transition_normal) ease, fill var(--nav_transition_normal) ease, transform var(--nav_transition_normal) ease;
    }

        .sv_nav_social > a:hover,
        .sv_nav_social > a:focus-visible {
            color: var(--color_RockBlue_75);
            fill: currentColor;
            transform: translateY(calc(var(--space_0_5) * -1));
            outline: none;
        }

    .sv_nav_social .svg_icon {
        width: 100%;
        height: 100%;
        fill: currentColor;
    }


/* --------------------------------------------------------------------------
   Tablet – začasno ohranjeno
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 64em) {
    .sv_nav_icon {
        display: none;
    }

    .sv_nav_item {
        justify-content: space-between;
        padding-left: var(--space_1);
    }

    .sv_nav_item_level_3 {
        padding: var(--space_1);
    }

    .sv_nav_text_level_1 {
        font-size: var(--font_size_26);
    }

    .sv_nav_text_level_2,
    .sv_nav_text_level_3 {
        width: 100%;
        font-size: var(--font_size_20);
    }
}


/* --------------------------------------------------------------------------
   Mobile – 
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 48em) {

        .sv_nav_toggle input {
            display: block;
            position: absolute;
            width: var(--space_0_25); /* var(--space_0_25) */
            height: var(--space_0_25); /* var(--space_0_25) */
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
            
        }

    .sv_nav_social {
        display: none;
    }

    .sv_nav_logo {
        height: calc(var(--nav_row_height) * 4);
    }

    .sv_nav_menu {
        padding-inline: var(--space_1);
    }
}