/*
Theme Name: Ville de Saint-Donat
Theme URI: http://activis.ca
Author: Activis
Author URI: http://activis.ca
Description: A design system to build Wordpress site
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: activis
Template:    act-wp-base-designsystem

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/*@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700;800&family=Roboto:wght@400;700&display=swap');*/

html body, :root {

    --layout--content-size: 850px;
    --layout--wide-size: 1280px;

    --color--primary: #828282;
    --color--primary--hover: #404040;
    --color--secondary: #a0d683;
    --color--secondary--hover: #55823c;
    --color--tertiary: #4dc0e8;
    --color--tertiary--hover: #0e4a5e;
    --color--accent: #13799b;
    --color--accent--hover: #13799b;
    --color--error: #DA1E28;
    --color--black: #000;

    --color--grey-90: #1A1A1A;
    --color--grey-80: #333333;
    --color--grey-70: #534545;
    --color--grey-60: #666666;
    --color--grey-50: #808080;
    --color--grey-40: #C4C4C4;
    --color--grey-30: #B3B3B3;
    --color--grey-20: #CCCCCC;
    --color--grey-10: #E5E5E5;
    --color--grey-05: #F2F2F2;
    --color--grey-03: #F7F7F7;
    --color--white: #fff;
    --white: #fff;

    --focus--outline: 2px solid var(--color--primary);
    --active--outline: 2px solid var(--color--primary--hover);

    --background: var(--color--white);
    --color--meta: var(--color--grey-70);
    --color--text: var(--color--primary--hover);
    --color--interactive: var(--color--secondary);
    --color--emphasis: var(--color--primary);
    --color--heading: var(--color--primary--hover);

    --color--facebook:#3B5999;
    --color--youtube:#CD201F;
    --color--linkedin :#0077B5;
    --color--twitter :#55ACEE;
    --color--instagram :#E4405F;

    --gaps--columns: 1.5rem;
    --gaps--grid: 2rem;
    --gaps--list: 1.5rem;
    --gaps--sides: 2.25rem;
    --gaps--boxed: 1.5rem;

    --gaps--text: 1.5rem;
    --gaps--block: 2.5rem;
    --gaps--section: 5rem;

    --gaps--inline: 1rem;
    --gaps--inline--large: 1em;
    --gaps--menu: 2.5rem;

    --padding--none: 0;
    --padding--xx-small: 0.25rem;
    --padding--x-small: 0.5rem;
    --padding--small: 1rem;
    --padding--medium: 1.25rem;
    --padding--x-medium: 1.5rem;
    --padding--xx-medium: 1.75rem;
    --padding--large: 2rem;
    --padding--x-large: 2.5rem;
    --padding--xx-large: 5rem;

    --margin--none: 0;
    --margin--xxx-small: 0.5rem;
    --margin--xx-small: 1rem;
    --margin--x-small: 1.5rem;
    --margin--small: 2rem;
    --margin--medium: 2.5rem;
    --margin--large: 3rem;
    --margin--x-large: 4rem;
    --margin--xx-large: 5rem;
    --margin--xxx-large: 7rem;

    --layer--behind: -1;
    --layer--set: 1;
    --layer--overlay: 800;
    --layer--menu: 900;
    --layer--header: 1000;
    --layer--modal: 1100;
    --layer--veil: 9000;
    --layer--always-on-top: 99999999;

    --line-height--text: 1.5;
    --line-height--x-small: 1.6;
    --line-height--small: 1.4285;
    --line-height--x-large: 1.25;

    --font-family--heading: 'Nunito', sans-serif;
    /*--font-family--text: 'jaf-domus',sans-serif;*/
    --font-family--text: 'Nunito',sans-serif;

    --font-size--x-small: 0.625rem;
    --font-size--small: 0.75rem;
    --font-size--medium: 1rem;
    --font-size--large: 1.5rem;
    --font-size--x-large: 2rem;

    --font-size--h1: 3rem;
    --font-size--h2: 2.5rem;
    --font-size--h3: 2rem;
    --font-size--h4: 1.5rem;
    --font-size--h5: 1.25rem;
    --font-size--h6: 1.125rem;
    --line-height--heading: 1.3333;
    --line-height--h1: 1.14;
    --line-height--h2: 1.17;
    --line-height--h3: 1.2;
    --line-height--h4: 1.25;
    --line-height--h5: 1.33;
    --line-height--h6: 1.3333;

    --easing--state: ease-in-out;
    --easing--entrance: ease-in;
    --easing--exit: ease-out;

    --duration--slowest: 1s;
    --duration--slower: 750ms;
    --duration--slow: 500ms;
    --duration--fast: 300ms;
    --duration--faster: 200ms;
    --duration--fastest: 100ms;
    --duration--none: 0;

    --icon--xx-small: 1rem;
    --icon--x-small: 1.25rem;
    --icon--small: 1.5rem;
    --icon--medium: 2rem;
    --icon--large: 2.5rem;
    --icon--x-large: 4rem;
    --icon--xx-large: 5rem;
    --icon--xxx-large: 6rem;

    --font-weight--heading: 700;
    --font-weight--text: 400;

    --link--decoration: underline;
    --link--decoration-color: currentColor;
    --link--duration: var(--duration--fastest);
    --link--easing: var(--easing--state);
    --link--color: var(--color--tertiary--hover);
    --link--hover--decoration: underline;
    --link--hover--decoration-color: currentColor;
    --link--hover--color: var(--color--tertiary);

    /*
    To edit see enqueues.php
    --list--bullet: url("../../assets/icons/SVG/bullet.svg");
*/
    --caption--font: normal var(--font-weight--text) 0.875rem/1.5rem var(--font-family--text);

    --lead--font: normal 400 2rem/1.25 var(--font-family--text);
    --lead--color: var(--color--tertiary--hover);

    --quote--font: normal bold 2rem/1.25 var(--font-family--heading);
    --quote--color: var(--color--white);
    --quote--background: var(--color--primary);

    --button--radius: 1rem;
    --button--height:3.5rem;
    --button--padding:1rem 1.5rem;
    --button--font: 800 1rem/1.5rem var(--font-family--heading);
    --button--border:1px solid transparent;

    --button--text--font: var(--button--font);

    --button--background:var(--color--secondary);
    --button--border-color:var(--color--secondary);
    --button--color:var(--color--white);

    /* non scopé, peut etre utilisé a beaucoup de places */
    --social--facebook:#3B5999;
    --social--youtube:#CD201F;
    --social--twitter:#55ACEE;
    --social--linkedin:#0077B5;
    --social--instagram:#E4405F;

    --button--background--hover:var(--color--primary--hover);
    --button--border-color--hover:var(--color--primary--hover);
    --button--color--hover:var(--color--white);

    --button--background--active:var(--color--primary--hover);
    --button--border-color--active:var(--color--primary--hover);
    --button--color--active:var(--color--white);

    --button--background--disabled:#ededed;
    --button--border-color--disabled:#ededed;
    --button--color--disabled:#bcbcbc;

    --icon-button--color: var(--color--white);
    --icon-button--background: var(--color--black);

    --icon-button--color--hover: var(--color--black);
    --icon-button--background--hover: var(--color--white);

    --logo--primary--filter: invert(51%) sepia(61%) saturate(495%) hue-rotate(79deg) brightness(93%) contrast(92%);

    --back-to-top--background--hover:var(--color--tertiary--hover);
    --back-to-top--color--hover:var(--color--secondary);
    --back-to-top--background:var(--color--secondary);
    --back-to-top--color:var(--color--tertiary--hover);
}

@media (max-width: 781px) {

    html body {
        --gaps--text: 1rem;
        --gaps--block: 2rem;
        --gaps--section: 3.75rem;
        --gaps--sides: 1.5rem;

        --font-size--h1: 2rem;
        --font-size--h2: 1.5rem;
        --font-size--h3: 1.375rem;
        --font-size--h4: 1.25rem;
        --font-size--h5: 1.125rem;
        --font-size--h6: 1.0625rem;
    }
}

.l-header {
    --icon-button--color: var(--color--black);
    --icon-button--background: var(--color--grey-05);
    --icon-button--color--hover: var(--color--white);
    --icon-button--background--hover: var(--color--primary);
}

.post-navigation-link {
    --link--color: var(--color--primary);
}

.act-page-tree-menu {
    --menu-btn-border: 1px solid #E5E5E5;
    --menu-btn-padding: var(--padding--xx-small);
    --menu-btn-size: var(--icon--large);
    --menu-btn-open-size: var(--icon--x-small);
    --menu-btn-close-size: var(--icon--small);
    /* btn à gérer plus tard avec les bouton par defaut du site */
    --level-1--btn-padding: var(--padding--x-small) var(--padding--small);

    --level-1--btn-border: 1px solid var(--color--primary);
    --level-1--btn-border-hover: 1px solid var(--color--secondary);
    --level-1--btn-border-radius: 50px;
    --level-1--btn-color: #fff;
    --level-1--btn-color-hover: #fff;
    --level-1--btn-background: var(--color--primary);
    --level-1--btn-background-hover: var(--color--secondary);

    --level-1--font: 700 1.125rem/1.2 var(--font-family--heading);
    /* padding des liens de premier niveau */
    --level-1--padding: var(--padding--x-small) 0;
    --level-1--padding-mobile: .5rem 0;

    --level-1--color: var(--color--primary--hover);
    --level-1--color--hover: var(--color--accent);
    --level-1--color--active: var(--color--accent);
    --level-1--icon--color: currentColor;
    --level-1--icon--size: var(--icon--xx-small);
    --level-1--icon--gap:.875rem;
    /* separateur pour les premier niveau en mobile */
    --level-1--border-mobile: 1px solid #E5E5E5;

    /* border hover premier niveau */
    --level-1--border-height: 2px;
    --level-1--border-color: currentColor;
    --level-1--border-width: calc(100% + 32);

    /* gap entre les item de menu de premier niveau */
    --level-1--gap--item: 0 var(--gaps--menu);

    --level-2--icon--color: var(--color--white);
    --level-2--font: 800 1.125rem/1.33 var(--font-family--heading);
    --level-2--color: var(--color--white);
    --level-2--color--hover: var(--color--secondary);
    --level-2--color--active: var(--color--white);

    /* padding des items de menu 2iem niveau */
    --level-2--item-padding: var(--padding--x-small) 0;
    --level-2--padding-mobile: var(--padding--small) 0 0 0;

    /* marges pour le panel dropdown (souvent moins d espace que le panel pleine largeur) */
    --level-2--margin-dropdown: var(--margin--large) var(--margin--medium) var(--margin--large) var(--margin--xx-small);

    /* position du dropdwon par rapport à son parent - decalage negatif vers la gauche pour aligner le texte avec le parent */
    --level-2--dropdown-position: calc((var(--margin--xx-small) + var(--icon--small)) * -1);

    /* largeur du dropdown, si on le met à 100% il ne sera pas plus large que son parent */
    --level-2--dropdown-width: 250px;

    /* margin top pour les colonne de menu 2ieme niveau */
    --level-2--margin-top: var(--margin--xx-small);

    /* largeur des item de menu 2ieme niveau selon la resolution */
    /* mobile */
    --level-2--flexbasis--item-small: calc(263 / 544 * 100%);
    /* > 960 */
    --level-2--flexbasis--item-medium: calc(263 / 928 * 100%);
    /* > 1440 */
    --level-2--flexbasis--item-large: calc(263 / 1310 * 100%);

    /* gap entre les item de menu 2ieme niveau selon la resolution */
    --level-2--gap--item-medium: 5.5rem;
    --level-2--gap--item-large: 5.5rem;


    --level-3--icon--color: var(--color--white);
    --level-3--font: normal 1rem/1.5em var(--font-family--heading);
    --level-3--color: var(--color--white);
    --level-3--color--hover: var(--color--secondary);
    --level-3--color--active: var(--color--white);
    /* pour differencier le 2 level du 3ieme */
    --level-3--padding-mobile: var(--padding--small) 0 0 var(--padding--small);
    --level-3--margin-top: var(--margin--xx-small);
    --level-3--margin-top-item: var(--margin--xx-small);

    /* overlay */
    --overlay--background: var(--color--secondary);
    --overlay--opacity: 0;

    --panel--border: none;
    --panel--radius: 0;
    --panel--margin: calc(var(--margin--xx-large) - var(--margin--small)) var(--margin--xxx-large) var(--margin--xx-large) var(--margin--xxx-large);
    --panel--background: var(--color--tertiary--hover);
    --panel--shadow: inset 0 4px 29px hsl(0deg 0% 49% / 15%);

    /* taille de l image dans le panel */
    --panel--prepend-width: calc(384 / 1920 * 100%);

    /* taille du panel si pas d image */
    --panel-without-prepend-medium-width: 100vw;
    --panel-without-prepend-large-width: 100vw;

    /* wrapper du menu */
    --wrapper--shadow: inset 0 4px 29px hsl(0deg 0% 49% / 15%);
    --wrapper--padding: var(--padding--large) var(--gaps--sides);
    --wrapper--padding-mobile: 0 var(--gaps--sides) var(--padding--large) var(--gaps--sides);
    --wrapper--background: var(--color--white);
}

.barba-integration {
    --config--transition-color: var(--color--accent);
}

.barba-integration-progress-bar {
    --config--transition-color: var(--color--accent);
}

.act-quick-links {
    --color--background: var(--color--primary);
    --color--background--hover: var(--color--tertiary);
    --color--text: var(--color--white);
    --color--text--hover: var(--color--white);
}

.wp-block-cover, .act-gallery-cover {
    --cover-heading-color: var(--color--white);
    --cover-heading-font: normal 800 var(--font-size--h1)/var(--line-height--heading) var(--font-family--heading);
    --cover-heading-align: left;
    --cover-heading-valign: center;
    --cover-container-width: var(--layout--wide-size);
    --cover-overlay-background: var(--color--black);
    --cover-overlay-opacity: 0.35;
    --cover-height: 500px;

}


.gform_wrapper,form{
    --form--gap-x:var(--gaps--grid);
    --form--gap-y:var(--gaps--grid);
    --label--font:normal 0.875rem/1rem var(--font-family--text);
    --label--color:inherit;
    --input--height:3rem;
    --input--padding:var(--padding--x-small) var(--padding--small);
    --input--textarea--height:8.1rem;
    --input--radius:0;
    --input--background:var(--color--grey-05);
    --input--border:1px solid var(--color--black);
    --input--font:normal 1rem/1.5rem var(--font-family--text);
}

.wp-block-query-pagination {

    --number--size: 3rem;
    --number--gap: 0.625rem;
    --number--color: var(--color--tertiary--hover);
    --number--background: transparent;
    --number--color--hover: var(--color--white);
    --number--background--hover: var(--color--secondary);
    --number--color--active: var(--color--white);
    --number--background--active: var(--color--grey-60);
    --number--color--current: var(--color--white);
    --number--background--current: var(--color--accent);
    --number--radius: 999vw;

    --button--color: var(--color--white);
    --button--background: var(--color--primary);
    --button--color--hover: var(--color--white);
    --button--background--hover: var(--color--secondary);
    --button--color--active: var(--color--white);
    --button--background--active: var(--color--grey-60);
    --button--radius: 0.25rem;
    --font: 700 .875rem/1.5rem var(--font-family--text);
}

.yoast-breadcrumbs {
    --crumb--gap: var(--padding--x-small);
    --crumb--color: var(--color--white);
    --crumb--font: normal 700 var(--font-size--medium)/1em var(--font-family--text);
    --crumb--color--current: var(--color--white);
    --crumb--font--current: normal 500 var(--font-size--medium)/1em var(--font-family--text);
    --crumb--color--separator: var(--color--white);
    --crumb--size--separator: var(--font-size--medium);
}

.wp-block-post-template {
    --img--height: 200px;
}


.alerte-banner{
    --avis--title-color:#ffffff;
    --avis--color:#ffffff;
    --avis--bg-color:#D22E3E;
    --annonce--title-color:#000000;
    --annonce--color:#000000;
    --annonce--bg-color:#FFB529;
    --information--title-color:#000000;
    --information--color:#000000;
    --information--bg-color:#758E4F;
}

.act-galerie-slider{
    --nav--dots--height:0.5rem;
    --nav--dots--width:0.5rem;
    --nav--dots--margin:0 0.5rem;
    --nav--dots--shadow:0px 0.25rem 0.25rem rgb(0 0 0 / 25%);
    --nav--dots--bg-color:#fff;
    --nav--dots--border-color:#fff;
    --nav--dots--border-size:2px;
    --nav--controls--padding:0 1.5rem;
    --nav--controls--height:1.5rem;
    --nav--controls--width:1.5rem;
    --nav--controls--color:#fff;
    --nav--controls--bg-color:rgba(0, 0, 0, 0.4);
    --nav--controls--bg-color--hover:rgba(0, 0, 0, 1);
    --items-height:400px;
}

.act-page-404{
    --page-404--bg--color:var(--color--primary);
    --page-404--text--color:var(--color--white);

    --button--background:#fff;
    --button--border-color:#fff;
    --button--color:var(--color--primary);

    --button--background--hover:#dcdcdc;
    --button--border-color--hover:#dcdcdc;
    --button--color--hover:var(--color--primary);

    --button--background--active:#dcdcdc;
    --button--border-color--active:#dcdcdc;
    --button--color--active:var(--color--primary);

    --button--background--disabled:#ededed;
    --button--border-color--disabled:#ededed;
    --button--color--disabled:#bcbcbc;
}

.l-footer{
    --footer--background:var(--color--black);
    --footer--text-color:var(--color--white);
    --footer--font:normal 400 1rem/1.5rem var(--font-family--heading);
    --footer--spacing-y:var(--padding--none);
    --footer--content-spacing-y:var(--padding--xx-large);
    --footer--gap-x:92px;
    --footer--gap-y:var(--margin--large);
    --footer--font-level1:normal 700 1.125rem/1.25em var(--font-family--heading);
    --footer--font-level2:normal 400 1.125rem/1.25em var(--font-family--heading);
}

.act-share{
    --network--color:var(--color--secondary);
    --network--color--hover:var(--color--secondary);
    --toggle--color:var(--color--secondary);
}

.wp-block-archive-filtres{
    --filtres--padding:1.5rem;
    --filtres--background:var(--color--tertiary--hover);
    --filtres--title--font:700 normal 1.25rem/1.14em var(--font-family--heading);
    --filtres--label--font:700 normal 1rem/1.5em var(--font-family--heading);
    --filtres--field--font:400 normal 1rem/1.5em var(--font-family--font-family--heading);
    --filtres--field--color: #223654;
    --filtres--label--text-color: #fff;
    --filtres--form--gap:1rem;
    --button--color:var(--color--tertiary--hover);
}
.act-reveal-card {
    --card--height:400px;
    --color--text:#fff;
    --color--background--reveal:var(--color--secondary);
    --color--background-opacity--reveal:0.9;
    --color--text--reveal:#404040;
    --font--normal: 700 normal 2.5rem/1.20em var(--font-family--heading);
}