/*
:filename: statics/clamming.css
:author: Brigitte Bigi
:contact: contact@sppas.org
:summary: Style to be used for WhakerKit documentations.

.. _This file is part of ClammingPy: https://clamming.sf.net
..
    -------------------------------------------------------------------------

    Copyright (C) 2023-2025 Brigitte Bigi
    Laboratoire Parole et Langage, Aix-en-Provence, France

    Use of this software is governed by the GNU Public License, version 3.

    ClammingPy is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    ClammingPy 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 General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with ClammingPy. If not, see <http://www.gnu.org/licenses/>.

    This banner notice must not be removed.

    -------------------------------------------------------------------------

*/

/* =======================================================================
                           VARIABLE RE-DEFINITIONS
  ======================================================================== */

:root {
    --toc-width: 18rem;
    --header-height: 25vh;
    --header-slidein: animDisabled;
}

html {
    margin-left: calc(var(--toc-width) + 1rem);
}


.light {
    --nav-bg-color: rgba(20, 20, 40, 90%);
    --nav-fg-color: rgb(250, 240, 196);
    --footer-bg-color: rgb(0, 100, 200);
    --footer-fg-color: rgb(255, 221, 51);
  --header-bg-color:
    /* Motif ponctuel très discret */
    url("data:image/svg+xml;charset=UTF-8,\
<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'>\
<defs>\
  <pattern id='dotPattern' width='25' height='25' patternUnits='userSpaceOnUse'>\
    <circle cx='12.5' cy='12.5' r='2' fill='%23ffffff0d'/>\
  </pattern>\
</defs>\
<rect width='50' height='50' fill='url(%23dotPattern)'/>\
</svg>")
    center/contain repeat,

    /* Reflet radial subtil */
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06) 0%, transparent 50%),

    /* Gradient multi-couleurs moderne */
    linear-gradient(
      135deg,
      #0f1d2f   0%,
      #3f2f57  20%,
      #6b3064  40%,
      #2f6f6f  60%,
      #0f1d2f  80%
    );
}

.dark {
    --header-fg-color: rgb(255, 221, 51);
    --header-bg-color: rgb(30, 30, 60);
}


/* too small titles ... make them bigger for a documentation */
h4 {
    font-size: calc(1.3 * var(--font-size));
    letter-spacing: calc(1.4*var(--letter-spacing));
    color: var(--h4-color);
    font-weight: var(--font-weight-semibold);
}

h5 {
    font-size: calc(1.1 * var(--font-size));
    letter-spacing: calc(1.2*var(--letter-spacing));
    color: var(--h5-color);
}

/* functions */
h4 {
    margin-top: calc(2 * var(--typography-spacing-vertical));
    color: #0066BB;  /* Name.function in code.css */
}


/* =======================================================================
                              OTHER DEFINITIONS
  ======================================================================== */

.small-logo  {
    max-height: 3.5rem;
    width: auto;
}


.card header span {
    font-size: 250%;
    position: relative;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin: auto;
    text-align: center;
}

/* =======================================================================
                              BOOK NAVIGATION
  ======================================================================== */

/* nav buttons used to browse throw modules/classes */

nav.side-nav > ul, nav.side-nav > hr, nav.side-nav > h1, nav.side-nav > h2 {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

nav.side-nav h1 {
    font-size: 130%;
    font-weight: var(--font-weight-black);
}

nav.side-nav h2 {
    font-size: 120%;
    font-weight: var(--font-weight-bold);
}

nav.side-nav a[role=button], nav.side-nav button {
    width: calc(0.75*var(--toc-width));
    height: calc(3*var(--font-size));
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 0.5rem;
}


/* =======================================================================
                              PRINTING
  ======================================================================== */

@media print {
    html {
        margin-left: unset;
    }

    body > header {
        display: none;
    }
    body > nav {
        display: none;
    }
    body > footer {
        display: none;
    }

    nav.side-nav {
        display: none;
        /* Migrate to a top nav for printing or small screens
        color: inherit;
        width: 100%;
        position: absolute;
        padding-top: 1rem;
        padding-bottom: 0.3rem;
        margin: 0 auto;
        font-size: 90%;
        overflow: unset; */
    }

    #toc-content {
        margin-left: 1rem;
    }
}
