/*
Theme Name: Aux Fils du Temps
Theme URI: https://www.auxfilsdutemps.be/
Description: Wordpress theme for Aux Fils du Temps.
Author: Laurent MENTEN
Template: twentytwentyfour
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: aux-fils-du-temps
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Les personnalisations CSS du site seront ajoutées ci-dessous.
 */

:root {
    --site-width: 1024px;

    --center-background: #faf8f1;
    --left-background: #d8ddd5;
    --right-background: #dcdfd5;

    --gold: #8f7437;
    --edge-gradient-width: 130px;
}


/*
 * Décors latéraux fixes.
 */
html {
    background-color: #f5f2e8;
}

body {
    margin: 0;
    background-color: transparent;
    background-image:
            url("assets/images/background/background_left.png"),
            url("assets/images/background/background_right.png");
    background-position:
            left center,
            right center;
    background-repeat: no-repeat;
    background-size:
            auto 100vh,
            auto 100vh;
    background-attachment: fixed;
}

/*
 * Partie centrale du site.
 */
.wp-site-blocks {
    width: min(100%, var(--site-width));
    min-height: 100vh;
    margin-inline: auto;

    background:
            linear-gradient(
                    to right,
                    var(--left-background) 0,
                    #e7e8df 35%,
                    var(--center-background) 100%
            )
            left / var(--edge-gradient-width) 100% no-repeat,

            linear-gradient(
                    to left,
                    var(--right-background) 0,
                    #e9e9df 35%,
                    var(--center-background) 100%
            )
            right / var(--edge-gradient-width) 100% no-repeat,

            var(--center-background);

    border-left: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
}

/* Les grandes zones du template ne masquent plus la texture. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part {
    background-color: transparent;
}

/*
 * Sur petit écran, les décors latéraux disparaissent puisque la partie
 * centrale occupe toute la largeur.
 */
@media (max-width: 1180px) {
    body {
        background-image: none;
    }

    .wp-site-blocks {
        box-shadow: none;
    }
}