/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 24 2025 | 17:05:44 */
/* BODY */
@media (max-width: 767px) {
	body {
		background-size: 200% auto;
	}
}


/* HEADER */
.site-logo {
    position: relative;
    top: 6px;
}
.site-header .header-image {
    max-width: calc(100vw - 70px);
}


/* MENU */
.menu-item.reacciona a,
.btn-reacciona {
	background-color: var(--accent);
    color: var(--base) !important;
	font-family: var(--gp-font--druk);
    font-weight: bold;
    font-size: 30px;
	padding: 1rem 2rem;
	text-transform: none !important;
	transform: rotate(0);
	transition: all .5s ease;
}
.menu-item.reacciona a:hover,
.btn-reacciona:hover {
    color: var(--base) !important;
	-webkit-animation-name: shake;
  	animation-name: shake;
  	animation-duration: 0.8s;      /* quant dura */
  	animation-timing-function: ease-in-out; /* opcional, suavitzat */
}
.main-navigation .btn-reacciona {
    margin-left: 5vw;
	padding: 10px 20px;
}
#generate-slideout-menu.main-navigation .btn-reacciona {
    font-size: 26px;
    margin-left: 0;
    padding: 10px;
    width: calc(100% - 40px);
}
.current-page-ancestor a {
	color: var(--accent) !important;
}

#primary-menu .dropdown-menu-toggle {
	display: none;
}
#primary-menu .menu-item-has-children {
	padding-right: 20px;
}
#mobile-menu-control-wrapper {
	background-color: transparent;
}
#generate-slideout-menu .inside-navigation {
	flex-direction: column-reverse;
}
.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
    top: 33px;
}
.slideout-navigation:not(.do-overlay) .main-nav {
	padding-top: 30px;	
}


/* SUBMENU */
.inside-navigation,
.main-navigation li {
    position: initial;
}
#primary-menu .sub-menu {
    border-top: 24px solid white;
    display: flex;
	padding: 40px 60px;
	justify-content: space-around;
	gap: 30px;
	left: 0;
	right: 0;
	width: 100vw !important;
	
	list-style: none;       /* treu els punts per defecte */
  	counter-reset: item;    /* reinicia el comptador a cada ul */
}
.main-navigation .sub-menu li {
	width: auto;
	counter-increment: item;   /* suma 1 automàticament per cada li */
}
.main-navigation .sub-menu li a::before {
  content: "#" counter(item); /* afegeix el # abans del número */
  margin-right: 14px;
  font-weight: bold;
}
.main-navigation .sub-menu li.proximament {
	position: relative;
	pointer-events: none;
}
.main-navigation .sub-menu li.proximament::before {
	content: "Pròximament";
	background-color: var(--accent);
	color: var(--base);
	font-size: 46%;
	font-weight: 500;
	padding: 0px 2px;
	position: absolute;
	right: 12px;
	top: -3px;
	z-index: 1;
	
	transform: rotate(-6deg);
}
@media (min-width: 1024) {
	.main-navigation .sub-menu li.proximament::before {
		font-size: 75%;
		padding: 1px 5px;
		right: 20px;
		top: -15px;
	}
}
.main-navigation .sub-menu li.proximament a {
	opacity: .5;
}


/* PAGE HEADER */
.page_header:before {
	background: linear-gradient(
	  to bottom,
	  rgba(0,0,0,0.1) 0%,   /* més clar a dalt */
	  rgba(0,0,0,0.9) 100%  /* més fosc a baix */
	);
	content: ' ';
	display: inline-block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;	
}
.page_header.short:before {
	background: linear-gradient(
	  to bottom,
	  rgba(0,0,0,0.0) 0%,   /* més clar a dalt */
	  rgba(0,0,0,0.8) 100%  /* més fosc a baix */
	);
}
.page_header:after {
	position: absolute;
	top: 80%;
	left: calc(50% - 30px);
	transform: translateX(-50%);
	content: " ";
	display: block;
	background-image: url("/wp-content/uploads/fletxa-vertical01.png");
	background-repeat: no-repeat;
	background-size: contain;
	animation: bounce 2s infinite;
	width: 140px;
    height: 104px;
	z-index: 2;
	filter: invert(1);
}
.page_header.short:after {
	display: none;
}


/* LINKS DECORATION*/
a[href][style*="text-decoration: underline"],
a[href]:not([style]) {
  text-decoration-style: dashed;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


/* BG VIDEO */
.video-bg {
	position: relative;
	padding-top: 56.25%; /* Relació d'aspecte 16:9 */
	overflow: hidden;
}
.video-bg__iframe-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}
.video-bg__iframe-container:before {
	background-color: rgba(0,0,0,.35);
	content: ' ';
	display: inline-block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;	
}
.video-bg__iframe-container iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 120vw;
	min-height: 120vh;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border: none;
	--aspect-ratio: 16 / 9;	
	min-width: max(calc(100cqh * var(--aspect-ratio)), 100vw);
	aspect-ratio: var(--aspect-ratio);
}
.video-bg__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 80vw;
    text-align: center;
	z-index: 2;
}
.video-bg__content h1 {	
	font-size: clamp(2rem,1.3rem + 4.8vw,7rem);
	line-height: clamp(2rem,1.3rem + 4.8vw,7rem);
	font-family: var(--gp-font--bobagum);
}
@media (min-width: 1024px) {
	.video-bg:before {
		position: absolute;
		top: 70%;
		left: calc(50% - 30px);
		transform: translateX(-50%);
		content: " ";
		display: block;
		background-image: url("/wp-content/uploads/fletxa-vertical01.png");
		background-repeat: no-repeat;
		background-size: contain;
		animation: bounce 2s infinite;
		width: 180px;
		height: 144px;
		z-index: 2;
		filter: invert(1);
	}
}


/* SLIDER */
.slider-episodi:has(.slider-episodi-img-proximament):before {
	content: "Pròximament";
    background-color: var(--accent);
    color: var(--base);
    font-weight: 500;
    padding: 4px 20px;
    padding-right: 10%;
    position: absolute;
    right: 0;
    top: 20px;
    z-index: 2;
}


/* DONACIONS */
iframe#iframeSc {
	filter: saturate(1.5) hue-rotate(322deg);
}


/* ANIMACIONS */
/* Animació opcional per la fletxa */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.boto-shake:hover {
	-webkit-animation-name: shake;
	animation-name: shake;
	animation-duration: 0.8s;      /* quant dura */
	animation-timing-function: ease-in-out; /* opcional, suavitzat */
}