/*
 :filename: bigi_hdr.css
 :author: Brigitte Bigi
 :contact: contact@sppas.org

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

 Copyright (C) 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.

 -------------------------------------------------------------------------
*/

/* Override some wexa.css variable for a custom look. */
:root {
	--toc-width: max(calc(21 * var(--font-size)), 45vw);

    --nav-min-height: 0;
    --nav-min-width: calc(4rem / 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));

    --header-slidein: none;
    --header-height: 4rem;
    --footer-height: 6rem;

    --card-border-radius: calc(0.8 * var(--font-size));
    --card-border-width: 0;
}

/* Hauteur des items du menu top seul  */
nav.nav-wexa.top :is([role="menuitem"], .menuitem) {
    --nav-min-height: max(calc(var(--font-size) * 1.6 / var(--size-divisor)), calc(var(--font-size) * 1));
    --nav-item-min-height: calc(var(--font-size) * 1.2);
    --nav-item-height: calc(var(--font-size) * 1.4);
    --nav-item-max-height: calc(var(--font-size) * 1.6);

}

/* Sous 1024px, la table des matières ouverte se comporte comme un menu et
   couvre la page, au lieu de la moitié qu'elle occupe sur écran large. */
@media screen and (max-width: 1024px) {

    :root {
        --toc-width: 100vw;
    }

}

:root:not(.contrast) {
    --border-radius: calc(0.5 * var(--font-size));
    --dialog-border-radius: calc(0.8 * var(--font-size));
}

.contrast {
    --border-radius: calc(0.4 * var(--font-size));
    --dialog-border-radius: calc(1.0 * var(--font-size));
}

/* ---------------------------------------------------------------- */

@media screen {

    /* Le corps du document est traité comme la page de garde : même largeur,
       même fond, posé sur le dégradé porté par html. */
    body {
        background: none;
    }

    body > header {
        width: min(90rem, 100%);
        margin: auto;
    }

    body > main {
        width: min(90rem, 100%);
        background: var(--bg-color-alt);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--typography-spacing-horizontal);
        padding-right: var(--typography-spacing-horizontal);
    }

    body > footer {
        width: min(90rem, 100%);
        margin-left: auto;
        margin-right: auto;
    }
}

@media print {
    body {
        font-family: Calibri, Carlito, Arial, Helvetica, sans-serif;
    }
}

#header-content h1 {
    margin-top: calc(0.5 * var(--typography-spacing-vertical));
    margin-bottom: calc(0.5 * var(--typography-spacing-vertical));
    padding-bottom: 0;
}

#header-content h2 {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: calc(0.5 * var(--typography-spacing-vertical));
}

/* Les filets des titres de chapitre reprennent le fond du header. Sur un thème
   dont le fond est une couleur unie, plutôt qu'un dégradé, la déclaration est
   invalide donc ignorée : les filets gardent la couleur d'accent de book.css. */
.chapter > h1 {
    border-image: var(--body-bg-color) 1;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

main p {
    text-align: justify;
}

/*
figcaption {
    color: var(--fg-color-alt);
    font-size: calc(0.9 * var(--font-size));
}
*/

/* ---------------------------------------------------------------- */
/* Page de garde */
/* ---------------------------------------------------------------- */

body > header {
    padding-top: calc(2 * var(--typography-spacing-vertical));
    padding-right: calc(2 * var(--typography-spacing-horizontal));
    padding-bottom: var(--typography-spacing-vertical);
    padding-left: calc(2 * var(--typography-spacing-horizontal));
}

/* An image is drawn for a light page, and cannot invert its colors. */
img {
    padding: calc(0.3 * var(--typography-spacing-horizontal));
    /*border-radius: var(--border-radius);
    background-color: var(--img-bg-color);*/
}

body > header > * {
    margin-top: calc(1.25 * var(--typography-spacing-vertical));
    margin-bottom: var(--typography-spacing-vertical);
    padding-top: 0;
}

/* Aux bords du header, le retrait suffit : les marges s'y ajouteraient. */
body > header > *:first-child {
    margin-top: 0;
}

body > header > *:last-child {
    margin-bottom: 0;
}


body > header .wrap-item {
    padding-left: var(--typography-spacing-horizontal);
    padding-right: var(--typography-spacing-horizontal);
    width: auto;
    max-height: calc(4 * var(--font-size));
}

@media screen and (max-width: 1024px) {
    body > header .wrap-item {
        width: auto;
        max-height: calc(2 * var(--font-size));
    }

    /* Titre du mémoire. */
    body > header > h1 {
        font-size: calc(1.5 * var(--font-size));
        line-height: 1.4;
        letter-spacing: calc(1.5 * var(--letter-spacing));
    }

    /* Nom de l'auteure. */
    body > header > h2 {
        font-size: calc(1.15 * var(--font-size));
        letter-spacing: calc(2 * var(--letter-spacing));
    }
}

/* Composition du jury. */
body > header table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    text-align: left;
}

body > header td {
    font-size: var(--font-size);
    padding-top: calc(0.5 * var(--typography-spacing-vertical));
    padding-right: calc(2 * var(--typography-spacing-horizontal));
    padding-bottom: calc(0.5 * var(--typography-spacing-vertical));
    padding-left: 0;
    background: transparent;
}

body > header tr + tr td {
    border-top: var(--border-width) solid var(--hr-color);
}

/* Licence, en bas de la page. Les conditions de réutilisation sont détaillées
   en pied de document, où elles disposent de la place nécessaire. */
.licence {
    justify-content: flex-end;
    align-items: center;
    font-size: calc(0.8 * var(--font-size));
}

.licence img {
    max-height: calc(2 * var(--font-size));
    width: auto;
}

@media print {

    body > header {
        border-top: none;
        border-bottom: none;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    body > header p {
        margin-top: var(--typography-spacing-vertical);
    }
}

/* ---------------------------------------------------------------- */
/* Overrides */
/* ---------------------------------------------------------------- */

code {
    padding: calc(0.1 * var(--typography-spacing-horizontal));
    border-radius: 0;
}

/* ---------------------------------------------------------------- */
/* Mention de licence, en pied de document */
/* ----------------------------------------------------------------*/

body > footer {
    padding-top: var(--typography-spacing-vertical);
    padding-right: calc(3 * var(--typography-spacing-horizontal));
    padding-bottom: var(--typography-spacing-vertical);
    padding-left: calc(3 * var(--typography-spacing-horizontal));
}

@media print {

    /* print.css masque le pied de page, qui ne porte d'ordinaire que de la
       navigation. Ici il porte la licence du mémoire, qui doit être imprimée. */
    body > footer {
        display: block;
        break-inside: avoid;
        page-break-inside: avoid;
    }

}

/* ----------------------------------------------------------------------- */
/* Custom */
/* ----------------------------------------------------------------------- */

dl.transcription div {
    display: flex;
}

.small-logo {
    max-height: calc(3.5 * var(--font-size));
    width: auto;
}

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

/* When the square is the link, the drawing it holds fills it: an image keeps
   its own size otherwise, and overflows a square of 2rem. */
a.socialnet {
    padding: 0;
    display: inline-block;
    /* The ground a picture is given, and not the one of a button: these
       logos are drawn for a pale ground, and the page is a dark red.
       --img-bg-color is the pale veil this theme gives to its images, and it
       follows the light and the dark mode. */
    background: var(--img-bg-color);
}

a.socialnet > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.email {
    font-family: var(--font-family-mono);
}