/*
Theme Name:     Yoowit
Theme URI:      n/a
Template:       kadence
Author:         Treserras Multimedia SL
Author URI:     https://treserras.net/
Description:    Aquest theme de WordPress, creat per Treserras Multimedia específicament per a Yoowitt Tech SL, està dissenyat per potenciar la presència digital de l'empresa. Adaptat a les necessitats d’un projecte que ofereix solucions tecnològiques a mida en cloud, seguretat, intel·ligència artificial, web i assessorament informàtic, aquest theme combina un disseny minimalista amb funcionalitats avançades. Proporciona una experiència d’usuari òptima i és totalment personalitzable, facilitant la connexió amb els clients i mostrant els serveis de manera clara i eficient.
Version:        1
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/
.site-header-item {
    margin-right: 40px;
}


h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
	  text-wrap: balance;
}

p {
    text-wrap: pretty;
    hyphens: auto;
    word-wrap: break-word;
}


#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap) {
    background: #1A202C;
}

/* Aplica color elementos de menú */
#primary-menu li:nth-child(1) a:hover {
    color: #E6EB8D;
}

#primary-menu li:nth-child(2) a:hover {
    color: #98FF98;
}

#primary-menu li:nth-child(3) a:hover {
    color: #40E0D0;
}

#primary-menu li:nth-child(4) a:hover {
    color: #002FA7;
}

#primary-menu li:nth-child(5) a:hover {
    color: #E6E6FA;
}

#primary-menu li:nth-child(6) a:hover {
    color: #FF007F;
}

#primary-menu li:nth-child(7) a:hover {
    color: #FF6F61;
}


/* Efecto arcoíris para todos los elementos */
.rainbow-text, .rainbow-div, .rainbow-text .kb-adv-text-inner {
    background: linear-gradient(
        to right,
        #FFB500, #78D64B, #4EC3E0, #AD96DC, #FB637E, #FF6A39, #FFB500
    );
    background-size: 200% auto;
    animation: rainbow-animation 8s linear infinite;
}

/* Específico para textos */
.rainbow-text, .rainbow-text .kb-adv-text-inner {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
	  text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);

}
.rainbow-div {
    background-clip: border-box;
    color: inherit;
}


/* Aplicar el efecto arcoíris al ::after de portada */

.rainbow-overlay {
    position: relative;
}

.rainbow-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        #FFB500, #78D64B, #4EC3E0, #AD96DC, #FB637E, #FF6A39, #FFB500
    );
    background-size: 200% auto;
    -webkit-animation: rainbow-animation 8s linear infinite;
    animation: rainbow-animation 8s linear infinite;
    opacity: 0.5;
    -webkit-mix-blend-mode: color; 
    mix-blend-mode: color;
    pointer-events: none;
    z-index: 1;
}

.rainbow-overlay > * {
    position: relative;
    z-index: 2;
}



/* Aplicar el efecto arcoíris al ::after del figure Soluciones con la clase init-img-color */
figure.init-img-color::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        #FFB500, #78D64B, #4EC3E0, #AD96DC, #FB637E, #FF6A39, #FFB500
    );
    background-size: 200% auto;
    animation: rainbow-animation 8s linear infinite;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: color;
}

figure.init-img-color {
    position: relative;
    z-index: 0;
}

@keyframes rainbow-animation {
    0% { background-position: 0% center; }
    100% { background-position: -200% center; }
}