/*
Theme Name: Acttiv
Theme URI: https://lostium.com
Author: Lostium
Author URI: https://lostium.com
Description: Acttiv Theme 2025
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.3
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: acttiv
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/* Alignment of wp-block-embed legend */
.wp-block-embed {
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
	iframe {
		border-radius: 24px;
	}
}
.wp-block-embed.aligncenter figcaption {
	text-align: center;
}

.wp-block-embed.alignright figcaption {
	text-align: right;
}

.wp-block-embed.alignleft figcaption {
	text-align: left;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Custom styles for Acttiv
 */
:root {
	--wp--custom--carousel-block--navigation-size: 2rem;
	--wp--custom--carousel-block--navigation-sides-offset: 1rem;
	--wp--custom--carousel-block--pagination-bullet-size: 1rem;
	--wp--custom--carousel-block--pagination-bullet-active-color: var(--wp--preset--color--accent-1);
	--wp--custom--carousel-block--pagination-bullet-horizontal-gap: 1rem;
}

/* Fix para el scrollbar cuando se abre el modal de contacto */
body.modal-open{
    overflow:hidden;
}

/* Fix para el plugin de inline svg V2.3.2 */
.safe-svg-cover svg {
    fill: none;
}

 /* Responsive menu icons size */
 .wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
	width: 36px;
	height: 36px;
 }

 .custom-logo-link {
	outline: none;
 }

 .is-style-card-actividad {
	a {
		outline: none;
	}
 }

 header {
	.menu-header {
		nav {
			justify-content: flex-end !important;
			/* Remove outline from header buttons and links */
			button, a {
				outline: none;
			}
			.wp-block-navigation__container.is-responsive {
				background-color: var(--wp--preset--color--base);
			}
			.menu-header-contact-btn {
				/* Botón contacto del menú */
				a {
					margin-top: 30px;
					padding: .5rem 1rem !important;
					text-align: center;
					background-color: var(--wp--preset--color--base);
					color: var(--wp--preset--color--accent-1) !important;
					border-radius: 20px;
					text-decoration: none;
					border: 1px solid var(--wp--preset--color--accent-1);
					transition: all 0.3s ease;
					&:hover {
						background-color: var(--wp--preset--color--accent-1);
						color: var(--wp--preset--color--base) !important;
					}
				}
			}
		}
	}
	.top-bar-client-access-btn {
		a {
			transition: all 0.3s ease;
			&:hover {
				background-color: var(--wp--preset--color--white) !important;
				color: var(--wp--preset--color--accent-1) !important;
			}
		}
		&.hide-on-mobile {
			@media (max-width: 600px) {
				display: none;
			}
		}
		&:not(.hide-on-mobile) {
			a:hover {
				color: var(--wp--preset--color--contrast) !important;
			}
		}
	}
 }

 /** Hero Grid Home */
 .hero-grid-home {
	& > .wp-block-column {
		& > .wp-block-group {
			height: 100%;
		}
	}
	.claim-h1 {
		padding-left: var(--wp--preset--spacing--20) !important;
		padding-right: var(--wp--preset--spacing--20) !important;
		@media (min-width: 782px) {
			height: calc(100% - 450px - 1.2rem);
		}
		@media (min-width: 992px) {
			padding-left: var(--wp--preset--spacing--40) !important;
			padding-right: var(--wp--preset--spacing--40) !important;
		}
	}
	.connect-btn-wrap {
		flex-wrap: nowrap;
		& > .wp-block-lostium-hover-block {
			height: calc(100% - 63px - 1.2rem);
			& > .hover-block-content {
				height: 100%;
				& > .wp-block-cover {
					height: 100%;
				}
			}
			& > .hover-block-hover {
				height: 100%;
			}
		}
	}
	h1 {
		font-size: var(--wp--preset--font-size--x-large);
		@media (min-width: 1280px) {
			font-size: var(--wp--preset--font-size--xx-large);
		}
	}
	h2 {
		font-size: var(--wp--preset--font-size--large);
		@media (min-width: 1280px) {
			font-size: var(--wp--preset--font-size--x-large);
		}
	}
	.img-height-100 {
		& > .wp-block-lostium-hover-block {
			& > .hover-block-content, .hover-block-hover {
				height: 100%;
				& > .wp-block-cover {
					height: 100%;
				}
			}
		}
	}
 }

 /* Hero Grid Home Animations */
 .hero-grid-home {
	/* Initial state for all animated blocks */
	& > .wp-block-column {
		opacity: 0;
		transform: translateY(50px);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out;
		will-change: opacity, transform;

		/* Stagger animation delays for different columns */
		&:nth-child(1) {
			transition-delay: 0.1s;
		}
		&:nth-child(2) {
			transition-delay: 0.3s;
		}
		&:nth-child(3) {
			transition-delay: 0.5s;
		}
		&:nth-child(4) {
			transition-delay: 0.7s;
		}
		&:nth-child(5) {
			transition-delay: 0.9s;
		}
		&:nth-child(6) {
			transition-delay: 1.1s;
		}
	}

	/* Animated state when page loads */
	&.animate-in > .wp-block-column {
		opacity: 1;
		transform: translateY(0);
	}

	/* Specific animations for different block types */
	.claim-h1 {
		transform: translateX(-50px);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out;
		transition-delay: 0.2s;

		.hero-grid-home.animate-in & {
			transform: translateX(0);
		}
	}

	.connect-btn-wrap {
		transform: translateX(50px);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out;
		transition-delay: 0.4s;

		.hero-grid-home.animate-in & {
			transform: translateX(0);
		}
	}

	/* Image blocks slide from bottom */
	.img-height-100 {
		transform: translateY(50px);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out;
		transition-delay: 0.6s;

		.hero-grid-home.animate-in & {
			transform: translateY(0);
		}
	}

	/* Text content slides from top */
	h1, h2, p {
		transform: translateY(-30px);
		transition: opacity 0.6s ease-out, transform 0.6s ease-out;
		opacity: 0;

		.hero-grid-home.animate-in & {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Stagger text animations */
	h1 {
		transition-delay: 0.3s;
	}
	h2 {
		transition-delay: 0.5s;
	}
	p {
		transition-delay: 0.7s;
	}
 }

  /* Animation trigger classes for different directions */
 .hero-grid-home {
	/* Slide from left */
	&.slide-from-left > .wp-block-column {
		transform: translateX(-100px);

		&.animate-in {
			transform: translateX(0);
		}
	}

	/* Slide from right */
	&.slide-from-right > .wp-block-column {
		transform: translateX(100px);

		&.animate-in {
			transform: translateX(0);
		}
	}

	/* Slide from top */
	&.slide-from-top > .wp-block-column {
		transform: translateY(-100px);

		&.animate-in {
			transform: translateY(0);
		}
	}

	/* Slide from bottom */
	&.slide-from-bottom > .wp-block-column {
		transform: translateY(100px);

		&.animate-in {
			transform: translateY(0);
		}
	}

	/* Fade in */
	&.fade-in > .wp-block-column {
		transform: none;
		opacity: 0;

		&.animate-in {
			opacity: 1;
		}
	}
 }

 /* Individual block animations - for blocks with animation classes */
 .hero-grid-home {
	/* Individual blocks with slide-from-left */
	.slide-from-left {
		opacity: 0;
		transform: translateX(-100px);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out;
		will-change: opacity, transform;

		&.animate-in {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* Individual blocks with slide-from-right */
	.slide-from-right {
		opacity: 0;
		transform: translateX(100px);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out;
		will-change: opacity, transform;

		&.animate-in {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* Individual blocks with slide-from-top */
	.slide-from-top {
		opacity: 0;
		transform: translateY(-100px);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out;
		will-change: opacity, transform;

		&.animate-in {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Individual blocks with slide-from-bottom */
	.slide-from-bottom {
		opacity: 0;
		transform: translateY(100px);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out;
		will-change: opacity, transform;

		&.animate-in {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Individual blocks with fade-in */
	.fade-in {
		opacity: 0;
		transition: opacity 0.8s ease-out;
		will-change: opacity;

		&.animate-in {
			opacity: 1;
		}
	}
 }

 /* Responsive adjustments for animations */
 @media (prefers-reduced-motion: reduce) {
	.hero-grid-home {
		& > .wp-block-column,
		.claim-h1,
		.connect-btn-wrap,
		.img-height-100,
		h1, h2, p,
		.slide-from-left,
		.slide-from-right,
		.slide-from-top,
		.slide-from-bottom,
		.fade-in {
			transition: none !important;
			transform: none !important;
			opacity: 1 !important;
		}
	}
 }

  @media (max-width: 781px) {
	.hero-grid-home {
		/* Reduce animation distances on mobile */
		& > .wp-block-column {
			transform: translateY(30px);
		}

		.claim-h1 {
			transform: translateX(-30px);
		}

		.connect-btn-wrap {
			transform: translateX(30px);
		}

		.img-height-100 {
			transform: translateY(30px);
		}

		h1, h2, p {
			transform: translateY(-20px);
		}

		/* Reduce individual block animation distances on mobile */
		.slide-from-left {
			transform: translateX(-50px);
		}

		.slide-from-right {
			transform: translateX(50px);
		}

		.slide-from-top {
			transform: translateY(-50px);
		}

		.slide-from-bottom {
			transform: translateY(50px);
		}
	}
 }

 p, li {
	strong {
		font-weight: 700;
	}
 }

 .page-post-content {
	.blog-post-category a:hover {
		color: var(--wp--preset--color--accent-5);
	}
	/* Hide the header cover overlay if there is no image */
	.header-cover {
		span:not(:has(+ img)) {
			opacity: 0 !important;
		}
	}
 }

 .animajobs-bg {
	background-image: url('data:image/svg+xml,<svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2359_3699)"><path d="M74.2857 110C115.313 110 148.571 76.3035 148.571 34.7368C148.571 -6.82986 115.313 -40.5263 74.2857 -40.5263C33.2588 -40.5263 0 -6.82986 0 34.7368C0 76.3035 33.2588 110 74.2857 110Z" fill="%23FBFC35"/></g><defs><clipPath id="clip0_2359_3699"><rect width="110" height="110" fill="white"/></clipPath></defs></svg>');
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 110px 110px;
}

.quote-begin {
	position: absolute;
	top: -1rem;
	left: 2rem;
}

.quote-end {
	position: absolute;
	bottom: -1rem;
	right: 2rem;
}

.testimonial-wrapper {
	div:first-child {
		order: 2;
	}
	div:last-child {
		order: 1;
	}
	.testimonial-container {
		position: relative;
		&:before {
			content: '';
			position: absolute;
			right: 25%;
			bottom: -50px;
			width: 96px;
			height: 74px;
			transform: translateY(-50%);
			background-color: var(--wp--preset--color--base);
			mask: url("data:image/svg+xml,%3Csvg width='74' height='96' viewBox='0 0 74 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.00921 95.5745C0.900361 95.5745 -1.45461 90.8935 0.994425 87.5943L63.9978 2.71921C66.8693 -1.14915 73.0127 0.881885 73.0125 5.69954L73.0103 90.5746C73.0102 93.3359 70.7717 95.5744 68.0103 95.5744L5.00921 95.5745Z' fill='black'/%3E%3C/svg%3E");
			-webkit-mask: url("data:image/svg+xml,%3Csvg width='74' height='96' viewBox='0 0 74 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.00921 95.5745C0.900361 95.5745 -1.45461 90.8935 0.994425 87.5943L63.9978 2.71921C66.8693 -1.14915 73.0127 0.881885 73.0125 5.69954L73.0103 90.5746C73.0102 93.3359 70.7717 95.5744 68.0103 95.5744L5.00921 95.5745Z' fill='black'/%3E%3C/svg%3E");
			transform: rotate(180deg);
		}
	}
}

/* Big Number Format */
.acttiv-big-number, .acttiv-animated-big-number {
	display: block;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
}

.activity-template {
	.wp-block-embed.is-type-video {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		iframe {
			border-radius: 24px;
		}
	}
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	border-radius: 24px;
	overflow: hidden;
}

/* Contact Modal Header (pill naranja) */
.contact-modal-header {
	position: absolute;
    right: 0;
    z-index: 1;
    border: solid 5px white;
    border-radius: 20px;
    left: 0;
}

.max-width-fit-content {
	max-width: fit-content !important;
	margin: 0 auto !important;
}

.hide-until-desktop {
	@media (max-width: 1200px) {
		display: none;
	}
}

.post-type-archive-activity, .wp-block-cb-carousel-v2 {
	.has-detail {
		position: relative;
		&:after {
			content: '+ INFO';
			position: absolute;
			top: 10px;
			right: 10px;
			background-color: var(--wp--preset--color--base);
			color: var(--wp--preset--color--contrast);
			padding: 2px 10px;
			border-radius: 20px;
			font-size: 12px;
			font-weight: 600;
		}
	}
}

/* Ajustes footer */
.contact-btn-footer a {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-1) !important;
	border-radius: 20px;
	padding: 5px 15px;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--base);
	transition: all 0.3s ease;
	&:hover {
		background-color: var(--wp--preset--color--accent-1);
		color: var(--wp--preset--color--base) !important;
	}
}

footer a {
	outline: none;
	text-decoration: none;
}

footer li.wp-block-navigation-item.wp-block-navigation-link.has-small-font-size {
	padding-left: 1rem;
}

footer .animajobs-footer-banner {
	position:absolute;
	bottom:0;
	right:var(--wp--style--root--padding-right);
	transition: all 0.3s ease;
	svg {
		transition: all 0.3s ease;
	}
	&:hover {
		padding-bottom: 5px !important;
		svg {
			transform: scale(1.2);
		}
	}
}

/* Cambiamos el breakpoint de responsive menu */
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: block !important;
}
body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: none !important;
}

/* Variable para identificar el breakpoint del menu */
:root {
	--menu-breakpoint-status: "mobile";
}


@media (min-width: 782px) {
	.testimonial-wrapper {
		div:first-child {
			order: 1;
		}
		div:last-child {
			order: 2;
		}
		.testimonial-container {
			&:before {
				content: '';
				position: absolute;
				top: 25%;
				left: -50px;
				width: 74px;
				height: 96px;
				transform: translateY(-50%);
				background-color: var(--wp--preset--color--base);
				mask: url("data:image/svg+xml,%3Csvg width='74' height='96' viewBox='0 0 74 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.00921 95.5745C0.900361 95.5745 -1.45461 90.8935 0.994425 87.5943L63.9978 2.71921C66.8693 -1.14915 73.0127 0.881885 73.0125 5.69954L73.0103 90.5746C73.0102 93.3359 70.7717 95.5744 68.0103 95.5744L5.00921 95.5745Z' fill='black'/%3E%3C/svg%3E");
				-webkit-mask: url("data:image/svg+xml,%3Csvg width='74' height='96' viewBox='0 0 74 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.00921 95.5745C0.900361 95.5745 -1.45461 90.8935 0.994425 87.5943L63.9978 2.71921C66.8693 -1.14915 73.0127 0.881885 73.0125 5.69954L73.0103 90.5746C73.0102 93.3359 70.7717 95.5744 68.0103 95.5744L5.00921 95.5745Z' fill='black'/%3E%3C/svg%3E");
			}
		}
	}
	.max-width-fit-content {
		max-width: 450px !important;
	}
}

@media (min-width: 992px) {
	/* Variable para identificar el breakpoint del menu, en la mediaquery de 992px pasamos a desktop */
	:root {
		--menu-breakpoint-status: "desktop";
	}
	/* Ocultamos el botón de responsive menu en el breakpoint de 992px */
	body .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;;
	}
	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
	}

	header {
		.menu-header {
			nav {
				justify-content: space-between !important;
				.menu-header-contact-btn {
					a {
						margin-top: 0;
						padding: 3px 15px !important;
					}
				}
			}
		}
	}
}