/*
Theme Name: Open Builder WP - Nightshade
Template: Page-Builder-Wordpress
Description: Thème enfant pour Open Builder WP - Personnalisations client
Author: Votre Nom
Version: 1.0.0
Text Domain: openbuilderWP-child
*/

/* 
 * Vos styles personnalisés ici
 * Le thème parent sera chargé automatiquement
 */

/* THEME */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');

/* MAIN COLORS */
:root {
    /* COULEURS D'ORIGINE */
/*     --surface-base: #08423e;
    --surface-light: #2e5f54;
    --content-default: #e8ecc3;
    --content-light: #edf0d8;
    --accented: #831b42; */

    /* PROPOSITIONS */
    --surface-base: #08423e;
    --surface-light: #2e5f54;
    --surface-trans: #8fb6a3a8;
    --surface-trans-dark: #08413dab;

    --content-default: #e8ecc3;
    --content-light: #edf0d8;
    --accented: #831b42;
    --accented-dark: #64102f;
    --outline: #e8ecc3;

    --accent-background: #8fb6a3;
    --gradient-background: linear-gradient(0deg,rgba(143, 182, 163, 0.91) 0%, rgba(143, 182, 163, 0.06) 100%);

    /* SIZES */
    --main-window-width: 1200px;
    --small-window-width: 900px;

    --header-height: 55.5px;

    /* BREAKPOINTS */
    --BP-1275: 1275px;
    --BP-1050: 1050px;
    --BP-756: 756px;
}
/* COLOR PROFILES */
.block.color-inverted {
    --context-bg: var(--accented);
    --context-text: var(--light);
    --context-span: var(--light);
    --context-heading: var(--light);
    --context-accent: var(--color2);
}

body {
    background-color: var(--surface-base);
}

* {
    font-family: "Quicksand", sans-serif;
}
h1, h2, h3, h4, h5, span {
    font-family: 'Anton', Times;

    font-weight: 100;
    color: var(--accented-dark);

/*     text-shadow:
        -1px -1px 0 var(--outline),
        1px -1px 0 var(--outline),
        -1px  1px 0 var(--outline),
        1px  1px 0 var(--outline); */

}

h1 {
    font-size: 4.5rem;
}
h2 {
    font-size: 3.2rem;
    font-weight: 100;
}
p, ul {
    color: var(--content-default);
    font-size: 1rem;
}

/* -------------------------- CLASSES --------------------------- */

.shadowed {
    text-shadow: 1px 1px 3px #000;
}

.main-title {
    background: var(--gradient-background);
    background: var(--accent-background);
    border-radius: 3px;
    padding: 0 20px;
    width: fit-content;
}

/* ----------- ELEMENTS ----------- */

.button{
    padding: 6px 12px;
    width: fit-content;
    margin: auto;

    border-style: solid;
    border-width: 1px;
    border-color: var(--accented);
    border-radius: 20px;

    text-decoration: none;
    text-align: center;
    transition: 0.3s ease;

    background: var(--accented);
    color: #f2e4e9;
}

.button:hover {
    color: white;
    background-color: var(--accented-dark);
}





/* -------------------------------------------------- HEADER -------------------------------------------------- */
header,
header nav,
header ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
    margin: 0;
}

header {
    position: fixed;
    top: var((--wp-admin--admin-bar--height), 0);
    z-index: 100;
    width: 100%;
    background-color: var(--surface-base);
    box-shadow: 2px 5px 31px 5px rgba(0, 0, 0, 0.24);

    transition: 0.7s;
}
/* header.background {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.841);
} */

header h1 {
    font-size: 1.7rem;
    margin: 0;
    /* color: var(--content-default); */
}
header a {
    text-decoration: none;
}
header nav {
    position: relative;
}

header ul {
    list-style: none;
    padding: 0;
}

.menu-principal {
    gap: 0;
}

.menu-principal a {
    text-decoration: none;
    font-size: 1rem;
    padding: 15px;
    border: solid #ffffff00;
    border-width: 0 0 1px 0;
    display: flex;
    transition: 0.2s;
    color: var(--content-default);
}
.menu-principal a:hover {
    border-color: var(--content-light);
    color: var(--content-light);
}

nav a.active {
    border-color: var(--content-light);
    color: var(--content-light);
    border-width: 0 0 1px 0;
}

header ul svg {
    height: 30px;
    display: block;
    width: fit-content;
    transition: filter 0.3s ease;
}
header .menu-social {
    padding: 0 15px;
}

/* POUR SAFARI */
header svg {
    max-width: 35px;
}

header .menu-social svg {
    filter: grayscale(100%);
}
header .menu-social a:hover svg {
    filter: grayscale(0%);
}

header .menu-social a {
    display: block;
    height: fit-content;
    width: fit-content;
}

.lang-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 50px;
    transform: translateX(40%);
    background: black;
    padding: 0 15px;
}
@media (min-width: 1050px) {
    .menu-lang:hover .lang-dropdown {
        display: block;
    }
    .menu-lang:hover .lang-dropdown p {
        color: var(--content-default);
    }
}

.phone-hamburger {
    display: none;
}

@media screen and (max-width: 1050px) {

    .phone-hamburger {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        display: block;
    }

    .phone-hamburger .burger-btn.hidden-btn {
        display: none;
    }

    .phone-hamburger svg {
        width: 40px;
        height: auto;
        padding: 5px;
        background-color: rgba(0, 0, 0, 0.566);
    }
    .phone-hamburger svg:hover {
        cursor: pointer;
    }
    .phone-hamburger path {
        color: #fff;
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: space-evenly;
    }
    
    header.hidden {
        opacity: 0;
        pointer-events: none;
    }

    body.menu-open {
        overflow: hidden;
    }

    header nav,
    header nav .menu-principal {
        flex-direction: column;
    }

    header .menu-principal a {
        font-size: 1.4rem;
    }
}


/* -------------------------------------------------- FOOTER -------------------------------------------------- */
footer {
    height: 300px;
    box-shadow: 2px 5px 31px 5px rgba(0, 0, 0, 0.24);
    border: solid var(--accent-background);
    border-width: 1px 0 0 0;
}