/*
 * file: sppas_web.css
 * author: Brigitte Bigi
 * Copyright 2011-2026  Brigitte Bigi, CNRS
 *
 * Override definitions of both Whakerexa and SPPAS main_swapp.css,
 * and create new ones allowing a customized style for the website.
 *
 */

/* ---------------- Set existing variables to custom values --------------- */

:root:not(.contrast) {
    --font-size: calc(15px / var(--fontsize-divisor));
    --line-height: 1.3;
}

/* ----------------------- Override wexa body definitions ----------------- */

body {
    margin: 0 auto;
    width: 100%;
}

body > main {
    margin: 0;
    padding: 0;
}

body > main > * {
    padding-left: calc((100% - var(--screen-width)) / 2);
    padding-right: calc((100% - var(--screen-width)) / 2);
}

figure img {
    border-radius: 6px;
    box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,0.12);
}

/* ------------------------------------------------------------------------
                         Body > Header
--------------------------------------------------------------------------- */

.skip {
    position: fixed;
    top: var(--border-width);
    left: var(--border-width);
    width: calc(100% - 2 * (var(--border-width)));
    text-align: center;
    margin: auto;
    border: none;
    border-radius: 0;
    height: 1rem;
}

#header-content {
    padding-top: 1rem;
    padding-left: var(--typography-spacing-horizontal);
}

#home-link-logo {
    width: calc(4 * var(--font-size));
    height: auto;
    padding: var(--border-width);
    filter: brightness(0) invert(1);
}

#link-title-header {
    display: flex;
    flex-direction: row;
    align-items: center;     /* vertical */
    justify-content: flex-start;
    gap: 1.5rem;
    font-size: calc(3 * var(--font-size));
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#link-title-header > a {
    padding: 0;
    margin: 0;
    background: transparent;
}

#header-content h2 {
    margin-top: 0;
    padding-top: 0;
}

nav.side-nav {
    color: var(--header-fg-color);
    background: var(--header-bg-color);
}

/* ------------------------------------------------------------------------
                                   Elements
--------------------------------------------------------------------------- */


a[role="button"] svg { width: 2rem; height: 2rem; display: block; }

figcaption {
    margin-top: 0.9rem;
    font-size: 85%;
    color: var(--fg-color-alt);
    text-align: center;
}


/* ------------------------------------------------------------------------
                                   Layout
--------------------------------------------------------------------------- */

.dark .app-background-img {
    filter: brightness(1.4);
    border-radius: calc(3*var(--border-radius));
    box-shadow: 0 0 0 100vw white inset;
}

/* Overrides */

.panel-item {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: var(--typography-spacing-horizontal);
    padding-right: var(--typography-spacing-horizontal);
}

/* New definitions */

.center {
    margin: auto;
    text-align: center;
}

.width-full {
    width: 100%;
}

.width-three-quarters {
    width: 74%;
}

.width-half {
    width: 48%;
}

.width-quarter {
    width: 24%;
}

.width-third {
    width: 31%;
}

.width-two-third {
    width: 65%;
}


/******************* TEMPORAIRE *****************************

#masection-superfond {
    position: relative;
    background: image-set(
            url('bg.avif') type('image/avif'),
            url('bg.webp') type('image/webp')
    ) center / cover no-repeat;
}

#masection-superfond::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
}

.dark #masection-superfond::before {
    background: rgba(0, 0, 0, 0.55);
}

#masection-superfond > * {
    position: relative;
    z-index: 1;
}
*/

.flex-border-left {
    padding-left: 0.6rem;
}
/* ------------------------------------------------------------------------
                         Pages specific definitions
--------------------------------------------------------------------------- */

/*  ----------- index.html ------------- */

.full-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#panel-hero {
    padding-top: var(--typography-spacing-vertical);
    padding-left: var(--typography-spacing-horizontal);
    padding-bottom: 1rem;
}

#overview ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

#overview li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.5rem;
}

#overview li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: var(--a-color);
    font-size: 0.8rem;
}

#overview li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--a-color);
    font-weight: bold;
}

#overview ul {
    column-count: 2;
}

.support-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    border-radius: var(--border-radius);
}

.support-card img {
    height: 4.5rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin-bottom: 0.5rem;
}

.support-card h4 {
    margin: 0;
}

.support-card .support-period {
    margin: 0;
    font-weight: var(--font-weight-black);
}

.support-card .support-link {
    margin-top: auto;
}

.support-link {
    color: var(--a-color);
    padding: 0.5rem;
    margin: 0.5rem;
}

/*  ----------- download.html ------------- */

.sppas-download {
    margin: 0 auto;
    max-width: 72rem;
}

.sppas-download > article {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(1.25 * var(--typography-spacing-vertical));
}

.sppas-download > article :last-child {
    margin-bottom: 0;
}

.sppas-logos {
    align-items: center;
    justify-content: center;
    row-gap: var(--typography-spacing-vertical);
    column-gap: var(--typography-spacing-horizontal);
    margin-bottom: calc(1.5 * var(--typography-spacing-vertical));
}

.sppas-license-note * {
    font-size: calc(var(--font-size) * 1.2);
}

.sppas-download-intro,
.sppas-download-install {
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
}

.download-button:hover {
    scale: 1.1;
    border-radius: 6rem;
    box-shadow: 0 4px 12px var(--outline-color);
}

.download-button img {
    height: 4rem;
    border-radius: 6rem;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.sppas-download-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}

.sppas-download-links a {
    font-weight: var(--font-weight-semibold);
}

.sppas-citation-text {
    max-width: 62ch;
}

.sppas-help-call {
    max-width: 56rem;
    margin: 0 auto;
    padding: var(--typography-spacing-vertical) var(--typography-spacing-horizontal);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
}


/*  ----------- book.html ------------- */

li.enumerate-cards-item * {
    font-weight: var(--font-weight-black);
    font-size: calc(var(--font-size) * 1.25);
}

.sppas-help-item {
    flex: 1 1 18rem;
    margin: 0;
    padding: calc(0.6 * var(--typography-spacing-vertical))
             calc(0.8 * var(--typography-spacing-horizontal));
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
}