/*
:filename: statics/css/bigi.css
:author: Brigitte Bigi
:contact: contact@sppas.org
:summary: Overrides Whakerexa rules for B. Bigi web pages.

-------------------------------------------------------------------------

This file is part of SPPAS: https://sppas.org/

Copyright (C) 2011-2026 Brigitte Bigi, CNRS
Laboratoire Parole et Langage, Aix-en-Provence, France

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

This banner notice must not be removed.

-------------------------------------------------------------------------

*/

:root {
    --header-slidein: none;
    --header-height: 18rem;
    --footer-height: 6rem;

    --nav-min-height: 0;
    --nav-min-width: calc(11rem / var(--size-divisor));

    --nav-item-min-width-h: max(calc(4rem / var(--size-divisor)), 3rem);
    --nav-item-width-h:    calc(6rem / var(--size-divisor));
    --nav-item-max-width-h: calc(10rem / var(--size-divisor));

    --nav-expanded-width: calc(10rem / var(--size-divisor));
    --nav-item-width-v-collapsed: calc(var(--nav-min-width) - var(--typography-spacing-horizontal));
    --nav-item-width-v-expanded: calc(var(--nav-expanded-width) - var(--typography-spacing-horizontal));

    --appmenu-position: left;
    --appmenu-align: left top;
}

:root:not([data-theme=dark]), [data-theme=light], .light {
    --header-bg-color: linear-gradient(90deg, rgb(197, 133, 240) 0%, rgb(111, 104, 197) 50%, rgb(128,233,236) 100%);
    --header-fg-color: rgb(10, 15, 25);

    --footer-bg-color: linear-gradient(180deg, var(--bg-color) 0%, rgb(141, 144, 237) 30%, rgb(197, 133, 240) 60%, rgb(167, 187, 207) 100%);
    --footer-fg-color: rgb(10, 15, 25);

    --nav-fg-color: rgb(10, 15, 25);
    --nav-bg-color:  linear-gradient(180deg, rgb(97,33,140) 0%, rgb(111, 104, 197) 30%, rgb(28,133,136) 60%, #8574ea 80%, rgb(167, 187, 207) 100%);

    --bg-color: rgb(230, 230, 255);
    --border-color: rgb(50, 20, 85);

}

@media not print {
    .dark {
        --header-bg-color: linear-gradient(90deg, rgb(97, 33, 140) 0%, rgb(11, 4, 97) 50%, rgb(28, 133, 136) 100%);
        --header-fg-color: rgb(210, 215, 225);

        --footer-bg-color: linear-gradient(180deg, var(--bg-color) 0%, rgb(11, 4, 97) 20%, #5951ad 40%, #8574ea 60%, rgb(97,33,140) 100.000%);
        --footer-fg-color: rgb(210, 215, 225);

        --nav-fg-color: rgb(210, 215, 225);
        --nav-bg-color:  linear-gradient(180deg, rgb(97,33,140) 0%, rgb(11, 4, 97) 30%, rgb(28,133,136) 60%, #8574ea 80%, rgb(97, 33, 140) 100%);

        --bg-color: rgb(5, 5, 50);
        --border-color: rgb(225, 195, 225);

    }
}
:root:not(.contrast) {
    --border-radius: 0.4rem;
}
.contrast {
    --border-radius: 0.4rem;
}

body {
    width: 100%;
}

body > header {
    background-image:
        /* stack of backgrounds */
            url("../images/background-header.png"),
            var(--header-bg-color);
    align-items: self-start;
    padding-left: 1rem;
}

body > footer {
    padding-bottom: 1rem;
}

nav.nav-wexa [role="menuitem"][aria-current] {
    text-decoration: underline;
}

nav#nav-content {
    justify-content: space-around;
}

/* always look the same, in light and dark, because SVG is always black.*/
#btn-contrast.accessibility {
    background-color: rgba(240, 240, 240, 0.65);
}
#btn-theme.accessibility {
    background-color: rgba(240, 240, 240, 0.65);
}

[role='menuitem'] {
    background: linear-gradient(90deg, rgb(158,225,255) 0%, rgb(138,205,225) 50%, rgb(158,225,255) 100%);
    transition: background 0.25s ease, transform 0.15s ease, color 0.25s ease;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.dark [role='menuitem'] {
    background: linear-gradient(90deg,rgb(31,34,127) 0%, rgb(11,4,97) 50%, rgb(31,34,127) 100%);
}

/* New definitions */

.width_75 {
    width: 75%;
}

.socialnet {
    width:  2rem;
    height: 2rem;
    vertical-align: middle;
    margin: 0.5rem;
}