﻿/* --------------------------------------------------------------------------
   Theme variables
   -------------------------------------------------------------------------- */

.SS_VCM {
    --nav_text_color: var(--color_LunarGreen);
    --nav_text_hover_color: var(--color_LunarGreen);
    --nav_background_hover: var(--color_RockBlue_50);
    /* Level 1: odprt ali aktiven samostojni element */
    --nav_level_1_open_text: var(--color_Bush);
    --nav_level_1_open_background: var(--color_RockBlue_75);
    /* Level 2: aktiven element ali odprti Albumi */
    --nav_level_2_active_text: var(--color_Bush);
    --nav_level_2_active_background: var(--color_RockBlue_50);
    /* Level 3: aktiven album */
    --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);
}


    /* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

    .SS_VCM.prezrti-shell,
    .SS_VCM .prezrti-shell {
        --shell_side_L: var(--layout_side_L); /* 256px */
    }


    /* --------------------------------------------------------------------------
   Central panel
   -------------------------------------------------------------------------- */

    .SS_VCM .c_panel {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: var(--space_3) var(--space_5);
        overflow-y: auto;
        box-sizing: border-box;
    }

        /* Začetna vsebina panela in partial brez article ovoja */

        .SS_VCM .c_panel > p {
            margin: 0;
            padding-top: var(--space_3);
        }

        /* Standardna struktura SPA partialov */

        .SS_VCM .c_panel > article {
            width: 100%;
            min-width: 0;
        }

            .SS_VCM .c_panel > article > header {
                width: 100%;
                min-width: 0;
            }

                .SS_VCM .c_panel > article > header h2 {
                    margin: 0;
                    font-family: var(--font_heading_light);
                    font-weight: normal;
                    line-height: 1.1;
                }

            .SS_VCM .c_panel > article > section {
                width: 100%;
                min-width: 0;
                padding-top: var(--space_3);
            }

                .SS_VCM .c_panel > article > section > p:first-child {
                    margin-top: 0;
                }

    /* --------------------------------------------------------------------------
   Central panel — home
   -------------------------------------------------------------------------- */

        .SS_VCM .c_panel:has(> article.sv_home) {
            position: relative;
            padding: 0;
            overflow: hidden;
        }

        .SS_VCM .c_panel > article.sv_home {
            position: absolute;
            inset: 0;
            margin: 0;
            overflow: hidden;
        }

            .SS_VCM .c_panel > article.sv_home > picture {
                position: absolute;
                inset: 0;
                display: block;
            }

                .SS_VCM .c_panel > article.sv_home > picture > img {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    height: auto;
                    max-width: none;
                }


    .SS_VCM .side_bottom {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100vh;
        top: 100vh;
        transition: top .5s ease;
    }


        .SS_VCM .side_bottom.is_open {
            top: 0;
        }


    .SS_VCM .side_bottom_toggle {
        position: absolute;
        top: calc(var(--space_5) * -1);
        height: var(--space_5);
        right: var(--space_20);
        background-color: var(--color_LightCyan);
        z-index: 5;
        padding-left: var(--space_2);
        padding-right: var(--space_2);

    }

    .SS_VCM .side_bottom.is_open .side_bottom_toggle {
        top: 0;
        border-left: 1px solid var(--color_LunarGreen);
        border-right: 1px solid var(--color_LunarGreen);
        border-bottom: 1px solid var(--color_LunarGreen);
        border-radius: 0 0 10px 10px;
    }


    .SS_VCM .side_bottom.is_closed .icon_up {
        display: block;
    }


    .SS_VCM .side_bottom.is_closed .icon_down {
        display: none;
      
    }

.SS_VCM.side_bottom.is_open .icon_up {
    display: none;
}


    .SS_VCM .side_bottom.is_open .icon_down {
        display: block;
    }

    .SS_VCM .side_bottom_content {
        background-color: var(--color_LightCyan);
        padding-top: var(--space_6);
        height: 100vh;
        opacity: 75%;
    }

        .SS_VCM .side_bottom_content p {
            font-family: var(--font_BovinoMedium);
            font-size: var(--font_size_18);
            text-align: justify;
            padding-bottom: var(--space_6);
            padding-left: var(--space_6);
            padding-right: var(--space_6);
            text-indent: var(--space_6);
        }
