/*
:filename: statics/css/menu.css
:author: Brigitte Bigi
:contact: contact@sppas.org
:summary: a CSS framework to make accessible nav.

-------------------------------------------------------------------------

This file is part of Whakerexa: https://whakerexa.sf.net/

Copyright (C) 2023-2025 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.

-------------------------------------------------------------------------

*/


/* =======================================================================
                            VARIABLE DEFINITIONS
  ======================================================================== */


:root {
    /* Default behavior is an horizontal menu, with a min height and no
    min width. For a side menu, fix a min-height to 0 and the desired min
    width.  */
    --nav-min-height: max(calc(4rem / var(--size-divisor)), 3rem);
    --nav-min-width: 0;

    /* All menu items */
    --nav-item-min-height: max(calc(2rem / var(--size-divisor)), 2rem);
    --nav-item-height: max(calc(2.5rem / var(--size-divisor)), 2.5rem);
    --nav-item-max-height: max(calc(3rem / var(--size-divisor)), 3rem);

    --nav-item-min-width-h: max(calc(6rem / var(--size-divisor)), 4rem);
    --nav-item-width-h: max(calc(8rem / var(--size-divisor)), 6rem);
    --nav-item-max-width-h: max(calc(15rem / var(--size-divisor)), 12rem);

    /* Vertical side widths */
    --nav-expanded-width: max(calc(16rem / var(--size-divisor)), 14rem); /* open side */
    --nav-item-width-v-collapsed: var(--nav-min-width);
    --nav-item-width-v-expanded: var(--nav-expanded-width);

    --appmenu-position: left;
    --appmenu-align: left top;

    --menu-button-size: max(calc(4rem / var(--size-divisor)), 3rem);
}


/* =======================================================================
                            OVERRIDES STYLE
  ======================================================================== */

nav {
    min-height: var(--nav-min-height);
    min-width: var(--nav-min-width);
}

/* Reset margin and padding of all elements */
nav * {
    margin: 0;
    padding: 0;
}

/* Required for a submenu positioning */
nav ul > li {
    position: relative;
}

/* Hide checkboxes */
nav input[type=checkbox] {
    display: none;
}

/* =======================================================================
                            TARGETED STYLE
  ======================================================================== */

/* --------------------------------------------------------------------- */
/* Header navigation placement (#header-nav-content)                     */
/* --------------------------------------------------------------------- */

nav#header-nav-content {
    position: absolute;
    bottom: auto;
    top: 1rem;
    left: auto;
    right: 2rem;
    background: transparent;
    box-shadow: none;
}

/* ----------------------------------------------------------------------
   Main navigation placement (#nav-content)
   ---------------------------------------------------------------------
   Its default position in wexa.css is horizontal, sticky at top

   Below, it can be fixed at:
    - top (.top), horizontally,
    - bottom (.bottom), horizontally,  or
    - left-side (.side), vertically.

/* --------------------------------------------------------------------- */

nav {
    min-height: var(--nav-min-height);
    min-width: var(--nav-min-width);
}

.nav-wexa {
    color: var(--nav-fg-color);
    background: var(--nav-bg-color);
}

#nav-content {
    /* box-shadow: [h-offset] [v-offset] [blur-radius] [spread-radius] [color]; */
    box-shadow: 0 0.3rem 0.4rem 0.2rem var(--shadow-color);
}

/* -------- Fixed at the top of the page --------- */
nav.nav-wexa.top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-left: var(--typography-spacing-horizontal);
    padding-right: var(--typography-spacing-horizontal);
    padding-top: 0;
    padding-bottom: 0;
}

/* When the top menu is present, push down the page content */
body:has(nav.nav-wexa.top) {
    padding-top: var(--nav-min-height);
}

/* -------- Fixed at the bottom of the page -------- */
nav.nav-wexa.bottom {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    padding-left: var(--typography-spacing-horizontal);
    padding-right: var(--typography-spacing-horizontal);
    padding-top: 0;
    padding-bottom: 0;
}

/* When the bottom menu is present, push up the page content */
body:has(nav.nav-wexa.bottom) {
    padding-bottom: var(--nav-item-height);
}

nav.nav-wexa.top,
nav.nav-wexa.bottom {
    overflow-x: auto;
    max-width: 100vw;
}

/* -------- Fixed vertically on the left side --------- */
nav.nav-wexa.side {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: calc(2 * var(--typography-spacing-vertical) + var(--menu-button-size));
    padding-bottom: var(--typography-spacing-vertical);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    min-width: var(--nav-min-width);
    width: var(--nav-min-width);
    box-shadow: none;

    overflow-y: auto;
    max-height: 100vh;
}

/* When the side menu is collapsed */
nav.nav-wexa.side.collapsible {
    min-width: var(--nav-min-width);
    width: var(--nav-min-width);
}

body:has(nav.nav-wexa.side) {
    transition: padding-left 0.3s ease;
    padding-left: var(--nav-min-width);
    margin: 0;  /* avoid cumulative spacing */
    width: 100%;
}

/* When the side menu is pinned-expanded */
body:has(nav.nav-wexa.side.collapsible.expanded[aria-pinned="true"]) {
    padding-left: var(--nav-expanded-width);
}

/* When the side menu is expanded either with hover, focus, or .expanded */
/* Do not expand on hover/focus while a submenu inside nav is open */
nav.nav-wexa.side.collapsible:hover:not(:has(aside.appmenu.open)),
nav.nav-wexa.side.collapsible:has([role="menuitem"]:focus-visible):not(:has(aside.appmenu.open)),
nav.nav-wexa.side.collapsible.expanded {
    width: var(--nav-expanded-width);
}


/* =======================================================================
                            MENUITEM STYLE
  ======================================================================== */

/* -----------------------------------------------------------------------
    Base style for all nav menu items
   ----------------------------------------------------------------------- */

[role="menuitem"] {
    min-height: var(--nav-item-min-height);
    height:     var(--nav-item-height);
    max-height: var(--nav-item-max-height);

    /* Horizontal defaults (used when not overridden) */
    min-width: var(--nav-item-min-width-h);
    width:     var(--nav-item-width-h);
    max-width: var(--nav-item-max-width-h);
}

/* -------- the current nav item -------- */
[role="menuitem"].nav-current  {
    color: var(--a-color);
    background-color: var(--bg-color);
    opacity: 0.5;
}

/* -------- images in items -------- */
[role="menuitem"] > img,
[role="menuitem"] > svg {
    display: inline-block;
    width: calc(1.8rem / var(--size-divisor));
    height: calc(1.8rem / var(--size-divisor));
    cursor: pointer;
    padding: 0;
    margin: 0;
}

/* -------- text in items -------- */
[role="menuitem"]:not(img) {
    text-align: center;
    font-family: inherit;
    font-style: normal;
    font-variant: normal;
    font-weight: var(--font-weight-semibold);
    font-size: 0.9rem;  /* smaller size because in bold */
    overflow: hidden;
    position: relative;
}


/* -----------------------------------------------------------------------
    Specific style for the menu items of the main menu
   ----------------------------------------------------------------------- */

nav.nav-wexa [role="menuitem"],
aside.appmenu nav [role="menuitem"] {
    font-variant: small-caps;
    font-size: 0.8rem;
    opacity: 1;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-around;
    text-decoration: none;
    color: var(--nav-fg-color);
    background-color: var(--nav-bg-color);
}

/* ---- the menuitem is opening a submenu ---- */

[role="menuitem"][aria-haspopup="true"] {
    border-left: calc(4 * var(--border-width)) solid var(--a-color);
}


/* ---------------------- Vertical at side main menu ------------------- */

nav.nav-wexa.side [role="menuitem"] {
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

nav.nav-wexa.side [role="menuitem"]:hover,
nav.nav-wexa.side [role="menuitem"]:focus-visible {
    background-color: rgba(128, 128, 128, 0.5);
}

nav.nav-wexa [role="menuitem"] span {
    font-variant: small-caps;
    font-size: 0.8rem;
}

nav.nav-wexa [role=menuitem] * {
    color: inherit;
}

/* Fixed, non-collapsible: show labels and use expanded width */
nav.nav-wexa.side:not(.collapsible) [role="menuitem"] {
    min-width: var(--nav-item-width-v-expanded);
    width:     var(--nav-item-width-v-expanded);
    max-width: var(--nav-item-width-v-expanded);
}

/* ------------------ Expand side if collapsible --------------- */

/* Collapsible — collapsed = icons only, labels hidden */
nav.nav-wexa.side.collapsible:not(.expanded) > [role="menuitem"] {
    min-width: var(--nav-item-width-v-collapsed);
    width:     var(--nav-item-width-v-collapsed);
    max-width: var(--nav-item-width-v-collapsed);
}

nav.nav-wexa.side.collapsible:not(.expanded) [role="menuitem"] span {
    display: none;
}

/* Smooth transition for menu items and container */
nav.nav-wexa.side.collapsible,
nav.nav-wexa.side.collapsible [role="menuitem"] {
    transition: min-width 0.3s ease, width 0.3s ease, max-width 0.3s ease;
}

/* Do not expand items on hover/focus while a submenu inside nav is open */
nav.nav-wexa.side.collapsible:hover:not(:has(aside.appmenu.open)) [role="menuitem"],
nav.nav-wexa.side.collapsible:has([role="menuitem"]:focus-visible):not(:has(aside.appmenu.open)) [role="menuitem"],
nav.nav-wexa.side.collapsible.expanded [role="menuitem"] {
    min-width: var(--nav-item-width-v-expanded);
    width:     var(--nav-item-width-v-expanded);
    max-width: var(--nav-item-width-v-expanded);
}

nav.nav-wexa.side.collapsible:hover:not(:has(aside.appmenu.open)) [role="menuitem"] span,
nav.nav-wexa.side.collapsible:has([role="menuitem"]:focus-visible):not(:has(aside.appmenu.open)) [role="menuitem"] span,
nav.nav-wexa.side.collapsible.expanded [role="menuitem"] span {
    display: inline;
}

/* =======================================================================
                            SUBMENUS (for the default sticky)
  ======================================================================== */

.submenu {
    flex-direction: column;
    z-index: 100;
    padding-left: var(--typography-spacing-horizontal);
    padding-right: var(--typography-spacing-horizontal);
    padding-top: calc(0.3 * var(--typography-spacing-vertical));
    padding-bottom: calc(0.3 * var(--typography-spacing-vertical));
}

.submenu [role=menuitem] {
    background-color: var(--bg-color-alt);
    font-weight: var(--font-weight-normal);
}

.submenu {
    display: none;
}

body > nav > * *:hover .submenu,
body > nav > * *:focus-within .submenu {
    box-shadow: 0 0.3rem 0.4rem 0.2rem var(--shadow-color);  /* same as 'nav' */
    position: absolute;
    display: flex;
    top: 100%;
    min-width: 100%;
}

/* -------- Submenus background colors -------- */

.submenu-gray {
    background-color: rgba(128, 128, 128, 0.5);
}

.submenu-red {
    background-color: rgba(255, 50, 50, 0.5);
}

.submenu-green {
    background-color: rgba(29, 72, 18, 0.5);
}

.submenu-orange {
    background-color: rgba(154, 109, 38, 0.5);
}


/* ======================================================================= */
/*      Mobile menu toggle           */
/* ======================================================================= */

/* -------- via #mobile + .expanded  -------- */

#mobile {
    display: none;
}

#menu-button {
    position: fixed;
    top: var(--typography-spacing-vertical);
    left: var(--typography-spacing-horizontal);
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--menu-button-size);
    height: var(--menu-button-size);

    border-radius: 50%;
    border: var(--border-width) solid var(--buttons-bg-color);
    color: var(--fg-color);
    cursor: pointer;

    /*box-shadow: 0 0 0 3px var(--bg-color), 0 2px 6px var(--shadow-color);*/
    transition: background-color 0.2s ease, transform 0.1s ease;

    /* Look */
    background-color: var(--nav-bg-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Fond --%3E%3Ccircle cx='16' cy='16' r='15' fill='%230B0B1E'/%3E%3C!-- Ligne 1 --%3E%3Ccircle cx='8' cy='10' r='1' stroke='%23E84545' fill='none' stroke-width='2'/%3E%3Cline x1='13' y1='10' x2='24' y2='10' stroke='%23E84545' stroke-width='4'/%3E%3C!-- Ligne 2 --%3E%3Ccircle cx='8' cy='16' r='1' stroke='%239370DB' fill='none' stroke-width='2'/%3E%3Cline x1='13' y1='16' x2='24' y2='16' stroke='%239370DB' stroke-width='4'/%3E%3C!-- Ligne 3 --%3E%3Ccircle cx='8' cy='22' r='1' stroke='%23EA8533' fill='none' stroke-width='2'/%3E%3Cline x1='13' y1='22' x2='24' y2='22' stroke='%23EA8533' stroke-width='4'/%3E%3C/svg%3E");
    z-index: 100;
}

#menu-button:hover {
    background-color: var(--nav-fg-color);
    color: var(--bg-color);
    transform: scale(1.05);
}

/* -------- mobile screen and print -------- */
/* The code below is preserved but some is deprecated */
@media screen and (max-width: 896px) {
    #menu-button {
        display: inline-flex;
    }
    nav.nav-wexa.side #pin-menu {
        display: none;
    }
}

@media all and (max-width: 896px) {

    /* Hide expanded side menu */
    nav.nav-wexa.side {
        display: none;
    }
    nav.nav-wexa.side.expanded {
        display: flex;
    }
    /* Remove body left padding when side menu is hidden */
    body:has(nav.nav-wexa.side) {
        padding-left: 0;
    }
}

/* ----------------------- 'nav' wide screens ---------------------- */

@media only screen and (min-width: 896px) {
    #menu-button {
        display: none;
    }
}

/* Toggle to expand/collapse the 'nav' content. Invisible. */
body > nav label {
    display: none;
}

[role=menuitem].expand::after {
    content: " ▼";
}


/* ----------------------------------------------------------------------- */
/* ------------  Menu or Sub-Menu for mobile applications  --------------- */
/* ----------------------------------------------------------------------- */

aside.appmenu {
    position: fixed;
    z-index: 50; /* keep overlay priority */
    visibility: hidden;  /* Make it invisible by default */
    background: inherit;
    height: 100%;
}

aside.appmenu nav {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--typography-spacing-vertical);
    padding-bottom: var(--typography-spacing-vertical);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Alignment horizontal */
aside.appmenu[data-submenu-align-horizontal="left"]  nav {
    align-items: flex-start;
}
aside.appmenu[data-submenu-align-horizontal="center"]nav {
    align-items: center;
}
aside.appmenu[data-submenu-align-horizontal="right"] nav {
    align-items: flex-end;
}

/* Alignment vertical */
aside.appmenu[data-submenu-align-vertical="top"] nav {
    justify-content: flex-start;
}
aside.appmenu[data-submenu-align-vertical="center"] nav {
    justify-content: center;
}
aside.appmenu[data-submenu-align-vertical="bottom"] nav {
    justify-content: flex-end;
}

/* Size */
aside.appmenu nav [role="menuitem"] {
    min-width: var(--nav-item-width-v-expanded);
    width:     var(--nav-item-width-v-expanded);
    max-width: var(--nav-item-width-v-expanded);
}

/* Hover/Focus */
aside.appmenu [role="menuitem"]:hover,
aside.appmenu [role="menuitem"]:focus-visible {
    background-color: rgba(128, 128, 128, 0.5);
}

/* -------- Sub-menu positioning, initially hidden off-screen,
   with a smooth slide-in animation when opened. -------- */

aside.appmenu[data-submenu-position="left"] {
    top: 0;
    left: -100%;
    min-width: var(--nav-expanded-width);
    width: var(--nav-expanded-width);
    height: 100%;
    transition: left var(--transition), visibility 0s 0.3s;  /* Transition only position and visibility */
    box-shadow: 0.2rem 0 0.4rem var(--shadow-color);
}

aside.appmenu[data-submenu-position="right"] {
    top: 0;
    right: -100%;
    min-width: var(--nav-expanded-width);
    width: var(--nav-expanded-width);
    height: 100%;
    transition: right var(--transition), visibility 0s 0.3s;  /* Transition only position and visibility */
    box-shadow: 0 0.2rem 0.4rem var(--shadow-color);
}

aside.appmenu[data-submenu-position="bottom"] {
    top: auto;
    bottom: -100%;  /* Initially off-screen at the bottom */
    width: 100%;    /* Set the width for the bottom submenu */
    height: auto;   /* Auto height to fit content */
    transition: bottom var(--transition), visibility 0s 0.3s;
}

aside.appmenu[data-submenu-position="top"] {
    bottom: auto;
    top: -100%;    /* Initially off-screen at the top */
    width: 100%;   /* Set the width for the top submenu */
    height: auto;  /* Auto height to fit content */
    transition: top var(--transition), visibility 0s 0.3s;
}

/* -------------- Alignment of elements inside the submenu --------------- */

aside.appmenu[data-submenu-align-vertical="top"] nav {
    position: absolute;
    top: 0;
}

aside.appmenu[data-submenu-align-vertical="bottom"] nav {
    position: absolute;
    bottom: 0;
}

/* Optional: Align horizontally based on left/right */
aside.appmenu[data-submenu-align-horizontal="left"] nav {
    align-items: center;
}

aside.appmenu[data-submenu-align-horizontal="right"] nav {
    align-items: center;
}

aside.appmenu[data-submenu-align-horizontal="center"] nav {
    align-items: center;
}

/* ----------------- When submenu is open, slide it in ------------------- */

aside.appmenu.open {
    visibility: visible;
}

aside.appmenu.open[data-submenu-position="left"] {
    left: 0;
}

body:has(nav.nav-wexa.side) aside.appmenu.open[data-submenu-position="left"] {
    left: var(--nav-min-width);
    padding-left: 0;
    margin: 0; /* avoid cumulative spacing */
}

body:has(nav.nav-wexa.side.collapsible.expanded[aria-pinned="true"]) aside.appmenu.open[data-submenu-position="left"] {
    left: var(--nav-expanded-width);
    padding-left: 0;
    margin: 0; /* avoid cumulative spacing */
}

aside.appmenu.open[data-submenu-position="right"] {
    right: 0;
}

aside.appmenu.open[data-submenu-position="bottom"] {
    bottom: 0;
}

aside.appmenu.open[data-submenu-position="top"] {
    top: 0;
}

/* ----------------- #nav-content ------------------- */

@media (min-width: 920px) {

    nav#nav-content [role=menuitem] {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        flex-grow: 1;
        width: auto;
    }
}

@media (max-width: 920px) {

    nav#nav-content [role=menuitem] {
        flex-direction: column; /* Stack image and text vertically */
        gap: 0.5rem;
        width: 100%; /* Occupy the full width */
        flex-grow: 1; /* Make buttons take all available space */
        height: auto;
    }
}


/* =======================================================================
                            BUTTONS
  ======================================================================== */

/* --------------------- Skip button -------------------------------------
   Important for screen readers: it allows to skip to main content,
   ignoring the header and nav. It must have the highest priority:
   it must be over any other element.
   ----------------------------------------------------------------------- */

.skip,
.focus-visible-only {
    opacity: 0;
    background-color: var(--buttons-bg-color);
    position: fixed;
    top: var(--typography-spacing-vertical);
    left: calc(var(--menu-button-size) + 2 * var(--typography-spacing-horizontal));
    padding: 0.5rem;
    margin: 0;
    transition: opacity 0.3s ease;
    font-weight: var(--font-weight-semibold);
}

.skip:focus,
.focus-visible-only:focus {
    opacity: 1;
    z-index: 200;
}

/* ------------------ Pin button -----------------------------------------
  Optionally used by a side menu to pin it in expanded mode.
  It has the same sizing as other menu items.
  ------------------------------------------------------------------------ */

nav.nav-wexa.side [role=menuitem]#pin-menu {
    align-items: center;
    justify-content: center;
    color: var(--nav-fg-color);
}

nav.nav-wexa.side [role=menuitem]#pin-menu[aria-pressed="true"] {
    border-color: var(--nav-fg-color);
    box-shadow: inset 0 0 0 var(--border-width) var(--nav-fg-color);
    background-color: rgba(128, 128, 128, 0.5);
}
