/**
 * Theme Name: la newbee
 * Template: popularfx
 * Theme URI: https://lanewbee.fr
 * Version: 1.0.0
 * Author: Nadia Meyer
 */

html {
    scroll-behavior: smooth;
}

::-moz-selection {
    color: #bb4d05ff;
    background-color: transparent;
}

::selection {
    color: #bb4d05ff;
    background-color: transparent;
}

a#pfx-scroll-top {
    right: 5% !important;
    left: auto !important;
}

a:hover {
    text-decoration: underline #bb4d05 !important;
}

a[target="_blank"]:hover {
    text-decoration: underline #3e7691 !important;
}

.pagelayer-terms a:not(:last-child)::after {
    content: "| ";
}

#post-title {
    margin-top: 0;
}

#post-title .pagelayer-post-title {
    color: #bb4d05;
    font-family: Brawler, serif;
    font-size: 36px !important;
    font-weight: 300 !important;
    font-variant: small-caps !important;
    text-transform: capitalize;
    line-height: 1.6;
}

.subtitle {
    text-align: center;
    font-style: italic;
    color: #bb4d05;
}

.orange {
    color: #bb4d05;
}

.term-description {
    font-style: italic;
    margin-bottom: 20px;
    padding: 10px;
    background: #fdf8f4;
    border-left: 4px solid #bb4d05;
}

.single .pagelayer-content h1,
.single .pagelayer-content h2,
.single .pagelayer-content h3,
.single .pagelayer-content h4,
.single .pagelayer-content h5,
.single .pagelayer-content h6 {
    margin: 50px 0 10px;
    line-height: 1.5 !important;
    letter-spacing: 1px;
}

.single .pagelayer-content p {
    margin: 10px 0 20px;
    line-height: 1.8 !important;
}


/* Do not underline header's links */
a:not(.pagelayer-text-holder a) {
    text-decoration: none;
}

/* Prepare headers with anchors to behave as links */

/* Anchor icon */
h1[id]::before,
h2[id]::before,
h3[id]::before,
h4[id]::before,
h5[id]::before,
h1[id]:hover::before,
h2[id]:hover::before,
h3[id]:hover::before,
h4[id]:hover::before,
h5[id]:hover::before {
    content: "\1f517";
    position: absolute;
}

h1[id]::before,
h2[id]::before,
h3[id]::before,
h4[id]::before,
h5[id]::before {
    opacity: 30%;
}

h1[id]:hover::before,
h2[id]:hover::before,
h3[id]:hover::before,
h4[id]:hover::before,
h5[id]:hover::before {
    opacity: 100%;
}

h1[id]::before,
h2[id]::before,
h3[id]::before,
h4[id]::before,
h1[id]:hover::before,
h2[id]:hover::before,
h3[id]:hover::before,
h4[id]:hover::before {
    text-indent: -40px;
}

h5[id]::before,
h5[id]:hover::before {
    text-indent: -30px;
}

/* INTERNAL LINKS CSS */

a[href*="/lanewbee.fr"],
a[href^="#"],
a[href^="/"] {
    text-decoration-thickness: 1px;
}

/* EXTERNAL LINKS CSS */

a[target="_blank"]:not(.pagelayer-btn a) {
    color: #3e7691 !important;
    text-decoration: none;
}

a[target="_blank"]:not(.pagelayer-btn a):hover,
.pagelayer-heading a[target="_blank"]:hover {
    color: #3e7691 !important;
    font-weight: bolder;
}

/* Add external link icon for textual links only */
a:not([href*="/lanewbee.fr"]):not([href^="#"]):not([href^="/"]):not(.pagelayer-btn a):not(.pagelayer-icon a):not(.pagelayer-service a):not(.pagelayer-accordion a):not(.pfx-scroll-top):not(.pagelayer-iconbox a)::after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' fill='none' stroke='%233e7691' stroke-linecap='round' stroke-width='1' viewBox='0 0 24 24'%3E%3Cpath d='M10.625 3.129H3a2 2 0 0 0-2 2V21a2 2 0 0 0 2 2h15.938a2 2 0 0 0 2-2v-7.935m-9.625 0L23 1m0 0h-7.562M23 1v7.097'/%3E%3C/svg%3E");
}

/* Change external links icon color on hover */
a:not([href*="/lanewbee.fr"]):not([href^="#"]):not([href^="/"]):not(.pagelayer-btn a):not(.pagelayer-icon a):not(.pagelayer-service a):not(.pagelayer-accordion a):not(.pfx-scroll-top):not(.pagelayer-iconbox a):hover::after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' fill='none' stroke='%233e7691' stroke-linecap='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M10.625 3.129H3a2 2 0 0 0-2 2V21a2 2 0 0 0 2 2h15.938a2 2 0 0 0 2-2v-7.935m-9.625 0L23 1m0 0h-7.562M23 1v7.097'/%3E%3C/svg%3E");
}

/* White external link icon on buttons */
.pagelayer-btn a[target="_blank"]::after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M10.625 3.129H3a2 2 0 0 0-2 2V21a2 2 0 0 0 2 2h15.938a2 2 0 0 0 2-2v-7.935m-9.625 0L23 1m0 0h-7.562M23 1v7.097'/%3E%3C/svg%3E");
}

/* Black external link icon on headers */
.pagelayer-heading a[target="_blank"]::after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1' viewBox='0 0 24 24'%3E%3Cpath d='M10.625 3.129H3a2 2 0 0 0-2 2V21a2 2 0 0 0 2 2h15.938a2 2 0 0 0 2-2v-7.935m-9.625 0L23 1m0 0h-7.562M23 1v7.097'/%3E%3C/svg%3E") !important;
}

/* Black and bolder external link icon on headers hover */
.pagelayer-heading a[target="_blank"]:hover::after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M10.625 3.129H3a2 2 0 0 0-2 2V21a2 2 0 0 0 2 2h15.938a2 2 0 0 0 2-2v-7.935m-9.625 0L23 1m0 0h-7.562M23 1v7.097'/%3E%3C/svg%3E") !important;
}

/* Fix external link icon on new line for page layers headers and list widgets */
.pagelayer-heading a, .pagelayer-list a {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

/* /EXTERNAL LINKS CSS */

/* /RESPONSIVE VIDEO FRAME */
/* Conteneur responsif avec aspect ratio pour vidéos sans overlay */
.responsive-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Conteneur responsif avec ratio d'aspect pour vidéos avec overlay */
.responsive-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
}

.responsive-video-container .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.responsive-video-container .video-preview {
    max-width: 100%;
    height: auto;
    display: block;
}

.responsive-video-container .play-button {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='40,30 70,50 40,70' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.responsive-video-container .play-button:hover {
    transform: scale(1.1);
}

.responsive-video-container .video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* /RESPONSIVE VIDEO FRAME */

/* REVERSE COLUMS ORDER ON TABLETS AND MOBILES */
@media only screen and (max-width: 780px) {
    .inverser-colonnes .pagelayer-row {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}

/* /REVERSE COLUMS ORDER ON TABLETS AND MOBILES */

/* Alert box for medias on homepage */
.alert-medias {
    text-align: center;
    color: white;
}

.alert-medias .pagelayer-alert-title a {
    color: white;
}

.alert-medias:hover {
    cursor: pointer;
    color: white;
    font-weight: bolder;
}

/* /Alert box for medias on homepage */

/* Media article */
.impact-story {
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.8;
    color: #333;
    margin: 0 auto;
    padding: 20px;
    /* background: #bb4d050d; */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.story-section {
    margin-bottom: 30px;
}

.story-section h4 {
    font-size: 1.4rem;
    color: #bb4d05;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.story-section p {
    font-size: 1rem;
    margin-bottom: 15px;
}

.story-section p br {
    display: block;
    margin-top: 10px;
}

/* /Media article */

/* WAVES */
/* https://codepen.io/goodkatz/pen/LYPGxQz */

.header-background {
    background: linear-gradient(90deg, rgba(14, 15, 17, 1) 0%, rgba(73, 30, 2, 1) 100%);
}

.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -8px; /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}

/* Animation */

.parallax > use {
    -webkit-animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax > use:nth-child(1) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}

.parallax > use:nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

.parallax > use:nth-child(3) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    -webkit-animation-duration: 13s;
    animation-duration: 13s;
}

.parallax > use:nth-child(4) {
    -webkit-animation-delay: -5s;
    animation-delay: -5s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
}

@-webkit-keyframes move-forever {
    0% {
        -webkit-transform: translate3d(-90px, 0, 0);
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(85px, 0, 0);
        transform: translate3d(85px, 0, 0);
    }
}

@keyframes move-forever {
    0% {
        -webkit-transform: translate3d(-90px, 0, 0);
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(85px, 0, 0);
        transform: translate3d(85px, 0, 0);
    }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }
}

/* /WAVES */

/* PENSEES
https://fr.w3docs.com/snippets/css/comment-creer-un-effet-de-papier-empile.html
https://www.transparenttextures.com/
 */

.pensees,
.pensees:before,
.pensees:after {
    background: #f9f9f9 url("https://lanewbee.fr/wp-content/themes/la-newbee/images/pensees.png");
}

.pensees {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 26px auto 0;
    max-width: 700px;
    min-height: 300px;
    padding: 24px;
    position: relative;
}

.pensees:before,
.pensees:after {
    content: "";
    height: 98%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.pensees:before {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    left: -5px;
    top: 4px;
    transform: rotate(-2.7deg);
    -webkit-transform: rotate(-2.7deg);
    -moz-transform: rotate(-2.7deg);
}

.pensees:after {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    right: -3px;
    top: 1px;
    transform: rotate(1.4deg);
    -webkit-transform: rotate(1.4deg);
    -moz-transform: rotate(1.4deg);
}

.pensees p {
    margin-bottom: 1.5em;
}

.pensees .highlight {
    display: block;
    margin: 2em 0;
    text-align: center;
    color: #444;
}

/* /PENSEES */


/* REPONSIVE TABS ON MOBILE */
@media (max-width: 768px) {
    .responsive-tabs.pagelayer-tabs {
        display: inline;
    }

    .responsive-tabs.pagelayer-tabs .pagelayer-tabs-holder {
        text-align: center;
    }

    .responsive-tabs.pagelayer-tabs .pagelayer-tabs-holder .pagelayer-tablinks {
        width: auto;
    }
}

/* REPONSIVE TABS ON MOBILE */

/* Force footer pages, articles and categories text in white */
footer .pagelayer-wp_categories,
footer .pagelayer-wp_categories ul,
footer .pagelayer-wp_categories ul li a,
footer .pagelayer-wp_recent-posts,
footer .pagelayer-wp_recent-posts ul,
footer .pagelayer-wp_recent-posts ul li a,
footer .pagelayer-wp_pages,
footer .pagelayer-wp_pages ul,
footer .pagelayer-wp_pages ul li a {
    color: #fff;
}