/*
Theme Name: Le Cri du Son WP
Description: This is the theme for Le Cri du Son website
Theme URI:   https://www.lecriduson.com/
Author: Le Cri du SOn
Author URI:  https://www.lecriduson.com/
Template: salient
Version: 1.0
*/

:root {
    --color-primary: #24224f;
    --color-secondary: #a61713;
    --color-tertiary: #f2ba3d;
    --color-quaternary: #f3983f;
    --color-cinquaternary: #c594c3;
    --font-family-main: 'Louis George Cafe', sans-serif;
    --font-family-spectacle: 'Chinese Rocks Rg', sans-serif;
}

@font-face {
    font-family: 'Louis George Cafe';
    src: url('fonts/LouisGeorgeCafe-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Louis George Cafe';
    src: url('fonts/LouisGeorgeCafeLight-Italic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Louis George Cafe';
    src: url('fonts/LouisGeorgeCafe-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Louis George Cafe';
    src: url('fonts/LouisGeorgeCafeLight.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Louis George Cafe';
    src: url('fonts/LouisGeorgeCafe.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Louis George Cafe';
    src: url('fonts/LouisGeorgeCafe-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Chinese Rocks Rg';
    src: url('fonts/ChineseRocksRg-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: var(--font-family-main);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-spectacle);
    font-weight: 400;
    letter-spacing: 2px;
}

/*
*   Custom styles for creation blocks
*/

.block__presentation img {
    transition: all .3s ease;
}

.block__presentation:hover h2 {
    transform: scale(1.1);
}


.block__presentation.spectacles:hover h2 {
    color: var(--color-secondary) !important;
}

.block__presentation.formations:hover h2 {
    color: var(--color-tertiary) !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) !important;
}

.block__presentation.agenda:hover h2 {
    color: var(--color-quaternary) !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) !important;
}

.block__presentation.compagnie:hover h2 {
    color: var(--color-cinquaternary) !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) !important;

}

.block__presentation:hover h2 {
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7) !important;
}

.block__titre h2 {
    position: absolute;
    right: 50px;
    top: 175px;
    margin: 0;
    transition: all .3s ease;
}

/*
*   Custom styles for home page
*/

/* .home {
    background: white url('img/chifonnade.jpg') center top / 100% repeat;
} */

.home .sf-menu li.accueil {
    display: none !important;
}

.home .container-wrap {
    /* background: transparent url(img/illust-portrait.png) left bottom no-repeat; */
    background-image: url(img/illust-paysage.png), url(img/illust-gauche.png);
    background-position: right bottom, left 35%;
    background-size: auto, 230px auto;
    background-repeat: no-repeat;
}

.home #intro .wpb_wrapper>div {
    margin: 0;
}

/*
*   Custom styles for portfolio single page
*/

body.single-portfolio .container-wrap {
    background: white url('img/chifonnade.jpg') center top / cover no-repeat;
    background-attachment: fixed;
    color: var(--color-primary);
}

body.single-portfolio .container-wrap .fiche-technique table,
body.single-portfolio .container-wrap .fiche-technique table tr,
body.single-portfolio .container-wrap .fiche-technique table tr td {
    background-color: transparent !important;
    border: none;
    padding-inline: 0;
}

body.single-portfolio .container-wrap .fiche-technique table a {
    color: white;
}

.fiche-technique h3,
.block__agenda h3,
.block__telechargements h4 {
    color: var(--color-tertiary) !important;
}

.fiche-technique {
    background-color: var(--color-primary);
}

.block__agenda {
    margin-block-start: 2rem;
}

.block__telechargements {
    margin-block-start: 1rem;
}

.block__telechargements .bi-filetype-pdf {
    margin-inline-start: .5rem
}

.nectar-flickity[data-controls=touch_total] .visualized-total span {
    background-color: var(--color-secondary) !important;
}

body.single-portfolio .agenda-filter__creation,
body.single-portfolio .agenda-table__creation {
    display: none;
    visibility: hidden;
}

.nectar-post-grid .nectar-post-grid-item .content .meta-category a.spectacles {
    display: none;
    visibility: hidden;
}

.divider__section .nectar-shape-divider-wrap::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 410px;
    background: url(img/illust-gauche.png) left bottom no-repeat;
    background-size: 260px;
    z-index: -1;
    top: -180px;
    transform: rotate(-90deg);
}

.home .divider__section .nectar-shape-divider-wrap::after {
    top: -230px
}

/* 
* Agenda 
*/

.agenda-table {
    width: 100%;
    border-collapse: collapse;
}

.agenda-table th,
.agenda-table td {
    border: 1px solid #ddd;
    padding: .5rem;
    text-align: left;
}

.agenda-table thead th {
    background: #f5f5f5;
    font-weight: bold;
}

.section__agenda--accueil .agenda-filter__dates,
.section__agenda--spectacles .agenda-filter__categorie,
.section__agenda--formations .agenda-filter__categorie,
.section__agenda--mediations .agenda-filter__categorie {
    display: none;
    visibility: hidden;
}


/* 
* responsive 
*/

@media only screen and (max-width: 768px) {
    .agenda-filter {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .agenda-filter__creation label,
    .agenda-filter__lieux label,
    .agenda-filter__categorie label,
    .agenda-filter__dates label {
        display: block;
        margin: 0 0 .25rem 0 !important;
    }

    .agenda-filter select {
        width: 100%;
        max-width: 100%;
    }

    .agenda-table,
    .agenda-table thead,
    .agenda-table tbody,
    .agenda-table tr,
    .agenda-table td {
        display: block;
        width: 100%;
    }

    .agenda-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .agenda-table tbody tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        background: #fff;
    }

    .agenda-table tbody td {
        border: 0;
        border-bottom: 1px solid #eee;
        padding: .625rem .75rem;
    }

    .agenda-table tbody td:last-child {
        border-bottom: 0;
    }

    .agenda-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        margin-bottom: .25rem;
    }
}

@media only screen and (min-width: 1000px) {

    .container {
        padding-inline: 1rem;
    }

    #header-outer #logo,
    #header-outer .logo-clone,
    #header-outer .logo-spacing {
        margin-top: 10px;
        margin-bottom: 10px;

    }

    #header-outer:not([data-format=left-header]) #top>.container>.row nav {
        align-items: flex-end;
    }

    .wp-singular:not(.home) #header-outer:not([data-format=left-header]) #top>.container>.row nav,
    #header-outer.scrolling #top>.container>.row nav {
        align-items: center;
    }

    .wp-singular #header-outer[data-box-shadow="large"]:not(.scrolling) {
        box-shadow: none;
    }
}