/* This stylesheet serves as basis for the design of passage-org
   websites; with the aim of a global consistency. */
:root {
    /* This color palette comes from https://www.nordtheme.com/ */
    --polar-night-1: #2e3440; --polar-night-2: #3b4252; --polar-night-3: #434c5e; --polar-night-4: #4c566a;
    --snow-storm-1: #d8dee9; --snow-storm-2: #e5e9f0; --snow-storm-3: #eceff4;
    --frost-1: #8fbcbb; --frost-2: #88c0d0; --frost-3: #81a1c1; --frost-4: #5e81ac;
    --aurora-1: #bf616a; --aurora-2: #d08770; --aurora-3: #ebcb8b; --aurora-4: #a3be8c; --aurora-5: #b48ead;

    color-scheme: light dark; /* need this to be enabled for light dark */
    &:has(input[name="dark-light-toggle"]:checked) { color-scheme: dark; }; /* TODO toggle between 3 states */
    &:not(:has(input[name="dark-light-toggle"]:checked)) { color-scheme: light; /* Force dark mode */ }
    --logo-color              : light-dark(var(--frost-1), var(--aurora-3));
    --inverted-logo-color     : light-dark(var(--aurora-3), var(--frost-1));
    --background-color        : light-dark(white, var(--polar-night-1));
    --inverted-background-color : light-dark(var(--polar-night-1), white);
    --header-background-color : light-dark(var(--snow-storm-3), var(--polar-night-3));
    --text-header-color       : var(--inverted-background-color);
    --text-subheader-color    : light-dark(var(--polar-night-4), var(--snow-storm-3));
    --text-color              : light-dark(var(--polar-night-4), var(--snow-storm-2));
    --text-faded-color        : light-dark(var(--snow-storm-2), var(--polar-night-2));
    --border-color            : light-dark(var(--snow-storm-1), var(--polar-night-4));


    --logo-cell-width: 160px;
    --logo-cell-height: 66px;
    --logo-base-font-size: 129px;
    
    --left-margin: 58px; /*value left for the navigation bar*/
    --comment-width: 200px;
    --base-font-family: "Roboto";
    --base-font-size: large;
    --code-font-family: "Courier New";
    --code-font-size: medium;
}



/* navigation bar style, which should be common to every passage-org web page */

#preamble {
    top: 0;
    position: sticky;
    overflow: hidden;
    z-index: 1;
}

.header-bar {
    top: 0;
    position: sticky;
    overflow: hidden;
    z-index: 1; /* properties are repeated so it is self-contained */
    border-bottom: 1px solid var(--border-color);
    background-color: var(--header-background-color);
    font-family: var(--base-font-family);
    height: 50px;
}

.navigation-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    height: 100%;
}

.navigation-bar li {
    float: left;
    height: 100%;
}

.logo {
    background: var(--logo-color);
    border: none;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
    text-decoration: none;
    display: inline-block;
    height: 100%;
}

.logo:hover { background-color: var(--inverted-logo-color); }

.header_button {
    background-color: var(--header-background-color);
    border: none;
    color: var(--text-color);
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    height:100%;
    font-family: var(--base-font-family);
}

.header_button:visited { color: var(--text-color); }
.header_button:link { color: var(--text-color); }
.header_button:hover {
    background-color: var(--logo-color);
    color: var(--snow-storm-3);
}

.underlined { text-decoration: underline dotted !important; }

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown_content {
    display: none;
    position: absolute;
    background-color: var(--snow-storm-3) ;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
    list-style-type: none;
    padding: 0;
}

.dropdown_content li {
    list-style-type: none;
    position: relative;
    padding: 0px;
    text-decoration: none;
    display: block;
    z-index: 1;
    width:100%;
}

.dropdown_content li button { width:100%; }

.dropdown:hover .dropdown_content {display: block;}

.examples_dialog_content,
.examples_dialog_content table,
.examples_dialog_content tbody,
.examples_dialog_content tr,
.examples_dialog_content td,
.examples_dialog_content button {
    display: block;
    width:100%;
}


.examples_dialog_button {
    background-color: var(--frost-3);
    width:100%;
    border: none;
    color: white;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    font-family: var(--base-font-family);
}

.examples_dialog_button:hover {
    background-color: var(--frost-1);
}



.github {
    float: right;
    transform: translateY(11px);
    margin-right: 11px;
}

.about {
    float: right;
    transform: translateY(9px);
    margin-right: 15px;
}

.logo_about > g > path, .logo_github > path {
    fill: var(--text-color);
    stroke : var(--text-color);
}

.logo_about:hover > g > path, .logo_github:hover > path {
    fill: var(--logo-color);
    stroke : var(--logo-color);
}


.timestamp { color: var(--text-faded-color); }