/*
Theme Name: Catherine
Theme URI: https://github.com/4ntigona/catherine
Author: RIVERA
Author URI: https://pedrorivera.me
Description: Tema para o Catherine
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: catherine
Tags: Uma coluna, Cores personalizadas, custom-menu, Logo personalizada, Estilo do editor, Imagens de destaque, Editor do site, Padrões do editor de blocos, rtl-language-support, Post fixo, threaded-comments, translation-ready, Blocos amplos, Estilos do editor de blocos, Variações de estilo, Com suporte a acessibilidade, Blog, Portfólio, Notícias
*/

/* View Transitions */
@view-transition {
	navigation: auto;
}

* {
	box-sizing: border-box;
}

/* keyframes */

@keyframes move {
	to {
		translate: 0px 0px;
		opacity: 1;
	}
}

@keyframes growFigureOnGrid {
	to {
		padding: 0px 0px 0px 0px;
	}
}

@keyframes imageParallax {
	to {
		object-position: 50% 70%;
	}
}

@keyframes paddingBorder {
	55.55% {
		clip-path: inset(var(--wp--preset--spacing--30) round var(--wp--preset--spacing--30));
	}

	95%,
	100% {
		clip-path: inset(calc(var(--wp--preset--spacing--30) * 2) var(--wp--preset--spacing--30) 0px var(--wp--preset--spacing--30) round var(--wp--preset--spacing--30));
	}
}

@keyframes moveLeft {
	to {
		/* Move horizontally so that right edge is aligned against the viewport */
		transform: translateX(calc(-100% + 100vw));
	}
}

@keyframes shrinkHeight {

	/* 50% {
		clip-path: inset(0px round 0px);
	} */
	100% {
		clip-path: inset(0px var(--wp--preset--spacing--30) 100% var(--wp--preset--spacing--30) round 0px 0px var(--wp--preset--spacing--30) var(--wp--preset--spacing--30));
	}
}

/*
 * 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-style: solid;
	outline-width: 2px;
}

/* 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;
}

/*
 * 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;
}

/* make a tags inherit font family */
a:where(:not(.wp-element-button)) {
	font-family: inherit;
}

/* visual debug */
/* * {
	outline: 1px solid red;
} */

html {
	overflow: hidden;

	&.no-scroll {
		/* height: 100vh !important; */
		overflow: hidden !important;

		body {
			/* height: 100vh !important; */
			overflow: hidden !important;
		}
	}

	&.loaded {
		overflow: unset;

		#hero-section {
			*:not([class*=has-background-dim-]) {
				opacity: 1;
			}
		}

		header.wp-block-group {
			.is-invisible {
				transform: translate3d(0rem, 0rem, 0rem);
				opacity: 1;
				transition: all 1500ms var(--_delay, 1500ms) linear(0, -0.006 11.9%, -0.041 28.3%, -0.035 32.3%, -0.012 35.7%, 0.057 40.1%, 0.172 44%, 0.331 47.4%, 0.77 54.6%, 0.898 58.1%, 0.983 62%, 1.026 66%, 1.041 70.8%, 1.006 88.3%, 1);
			}

			.wp-block-group:has(>.wp-block-site-logo) {
				--_delay: 1500ms;
			}

			.meta-text {
				--_delay: 3000ms;
			}

			#menuWrapper {
				--_delay: 2250ms;
			}
		}
	}
}

/* clickable elements */
.is-clickable {
	pointer-events: all;
}

.wp-site-blocks {
	.wp-block-column {
		&:empty {
			pointer-events: none;
		}
	}

	main {
		.wp-block-columns:has(>.wp-block-column:empty) {
			pointer-events: none;
			/* * {
				pointer-events: none;
			} */
		}
	}
}

/* header */
.wp-site-blocks {
	>header {
		box-sizing: border-box;
		width: min(100%, 100vw);
		pointer-events: none;

		.is-invisible {
			opacity: 0;
			transition: all 1500ms linear(0, -0.006 11.9%, -0.041 28.3%, -0.035 32.3%, -0.012 35.7%, 0.057 40.1%, 0.172 44%, 0.331 47.4%, 0.77 54.6%, 0.898 58.1%, 0.983 62%, 1.026 66%, 1.041 70.8%, 1.006 88.3%, 1);
		}

		.bottomRow {
			>p {
				flex-basis: 3rem;
				/* width: ; */
			}

			.menuTrigger {
				cursor: pointer;
			}
		}

		.midnightHeader {
			margin-top: 0;
			max-width: unset;

			&.white {
				img[src*=".svg"] {
					filter: invert(1);
				}
			}
		}
	}
}

/* hero section */
#hero-section {
	@media screen and (max-width: 768px) {
		.grids-s-w_i {
			display: grid;
		}
	}

	* {
		transition: opacity 1250ms ease;
	}

	.grids-area:not(:first-child) {
		clip-path: inset(calc(66vh - var(--wp--preset--spacing--40)) calc(50vw - var(--wp--preset--spacing--40)) calc(34vh - var(--wp--preset--spacing--40)) round var(--wp--preset--spacing--40));
		transition: clip-path 1500ms linear(0, -0.006 11.9%, -0.041 28.3%, -0.035 32.3%, -0.012 35.7%, 0.057 40.1%, 0.172 44%, 0.331 47.4%, 0.77 54.6%, 0.898 58.1%, 0.983 62%, 1.026 66%, 1.041 70.8%, 1.006 88.3%, 1);
	}

	&.active {
		.grids-area:not(:first-child) {
			clip-path: inset(var(--wp--preset--spacing--30) round var(--wp--preset--spacing--30));
		}
	}
}

/* heading block */
.wp-block-heading {
	&.has-border-color {
		border: none;

		@supports (-webkit-text-stroke: 2px) {
			-webkit-text-stroke: 1.5px var(--borderColor, var(--wp--preset--color--orange-100));
			color: var(--textColor, transparent) !important;

			@media (width > 50rem) {
				-webkit-text-stroke: 2px var(--borderColor, var(--wp--preset--color--orange-100));
			}
		}

		&:last-of-type {
			@media (width < 50rem) {
				display: none;
			}
		}
	}
}

/* layered heading */
[class*="layer-heading-"] {
	margin-inline: auto !important;
	width: fit-content;
}

.layer-heading-background {
	--_translateY: calc(1.125em + 2px);
	top: calc(var(--topValue) + var(--_translateY)) !important;
	transform-origin: center center;
	translate: -.5em calc(var(--_translateY) * -1);
	scale: 1.5;
	color: var(--textColor) !important;
	font-weight: 400 !important;
	font-family: 'Dulcinea', cursive;
}

.layer-heading-border {
	--_translateY: 1.125em;
	top: calc(var(--topValue) + var(--_translateY)) !important;
	translate: 0 -1.125em;
	margin-bottom: -1.125em;
	color: var(--originalColor) !important;

	@supports (-webkit-text-stroke: 2px) {
		-webkit-text-stroke: 1.5px var(--borderColor, var(--wp--preset--color--orange-100));
		color: var(--textColor) !important;

		@media (width > 50rem) {
			-webkit-text-stroke: 2px var(--borderColor, var(--wp--preset--color--orange-100));
		}
	}
}

/* slider de eventos */
.eventos-slider {
	.swiper-slide {
		clip-path: inset(0px round var(--wp--preset--spacing--20));
		transition: translate 500ms 0ms ease, scale 500ms 0ms ease, clip-path 500ms 150ms ease, transform-origin 500ms 0ms ease;

		&.swiper-slide-next {
			clip-path: inset(0px round var(--wp--preset--spacing--30));
		}
	}

	+.ghub-slider-navigation-wrapper {
		align-items: center;
		padding-inline: var(--wp--preset--spacing--40);
		padding-block: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--60));
		height: 100%;

		>* {
			--ghub-slider-navigation-size: 26%;
			position: relative;
			outline: none;

			&:before {
				display: flex;
				position: absolute;
				justify-content: center;
				align-items: start;
				rotate: 90deg;
				inset: 0;
				content: "\02c6";
				color: var(--wp--preset--color--salmon-100);
				font-weight: bold;
				font-size: var(--wp--preset--font-size--heading-h-2);
				line-height: 1;
				font-family: var(--wp--preset--font-family--playfair-display);
			}

			svg {
				display: none;
			}
		}
	}

	@media screen and (min-width: 30rem) {
		.swiper-slide {
			&:not(:first-child, :last-child) {
				&:before {
					position: absolute;
					opacity: 0;
					transition: opacity 500ms 0ms ease;
					inset: 0;
					background-color: var(--wp--preset--color--salmon-1000);
					content: "";
				}
			}

			&:not(.swiper-slide-next) {
				position: relative;
				transform-origin: center left;
				scale: 0.75;
				overflow: hidden;

				&:before {
					opacity: 0.75;
				}
			}

			&.swiper-slide-next {
				transform-origin: center center;
				translate: 0px 0px;
				scale: 1.25;

				&+.swiper-slide {
					transform-origin: center right;
					translate: calc(var(--wp--preset--spacing--40) * -1) 0px;
				}
			}

			&:has(+ .swiper-slide-next) {
				translate: var(--wp--preset--spacing--40) 0px;
			}
		}
	}
}

/* responsive menu */
.mobileMenuWrapper {
	translate: 0 calc(var(--wp--preset--spacing--20) * -1);
	opacity: 0;
	transition: translate 500ms ease, opacity 500ms ease;
	pointer-events: none;
	
	&.active {
		translate: 0 0;
		opacity: 1;

		>* {
			pointer-events: all;
		}
	}

	>* {
		margin-bottom: calc(var(--wp--preset--spacing--40) + 42px + calc(var(--wp--preset--spacing--40) - var(--wp--preset--spacing--30))) !important;
		pointer-events: none;
		-webkit-backdrop-filter: blur(7.5px);
	}
}

.menuTrigger {
	svg {
		path {
			transform-origin: center center;
			translate: 0% 0%;
			rotate: 0deg;
			transition: translate 500ms ease, rotate 500ms ease;
		}
	}

	&:hover {
		svg {
			path {
				&:first-of-type {
					translate: 0% 2.5%;
				}

				&:last-of-type {
					translate: 0% -2.5%;
				}
			}
		}
	}

	&.active {
		svg {
			path {
				&:first-of-type {
					translate: 0% 5%;
					rotate: .375turn;
				}

				&:last-of-type {
					translate: 0% -5%;
					rotate: -.375turn;
				}
			}
		}
	}
}

/* menu */
#menuWrapper {
	-webkit-backdrop-filter: blur(7.5px);
	.wp-block-navigation-item {
		&.current-menu-item {
			.wp-block-navigation-item__label {
				font-weight: 650;
			}
		}
	}
}

/* tags */
.wp-block-post-terms {
	a {
		pointer-events: none;
		font-weight: inherit;
		text-decoration: inherit;
	}
}

/* menu panel */
#menuPanel {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 500ms ease;
	width: 100vw;
	height: 100vh;
	pointer-events: none;

	>.panelWrapper {
		transform-origin: bottom center;
		scale: 0.99;
		transition: translate 500ms 0ms ease, scale 500ms 0ms ease, box-shadow 500ms 250ms ease;
		box-shadow: 1px 2px 8px -1px color-mix(in hsl, var(--wp--preset--color--green-1000), transparent 25%);

		.insert-page {
			>.wp-block-group {
				>* {
					width: 100%;
				}

				@media (width < 50rem) {
					.is-layout-grid {
						flex-direction: column;
					}
				}
			}
		}
	}

	&.active {
		opacity: 1;
		pointer-events: all;

		* {
			pointer-events: all;
		}

		>.panelWrapper {
			translate: 0 0;
			scale: 1;
			box-shadow: 1px 8px 32px -4px var(--wp--preset--color--green-1000);
		}
	}
}

.menuPanelTrigger {
	a {
		cursor: pointer;
	}
}

#closeMenu {
	>div {
		display: grid;
		place-items: center;
		-webkit-backdrop-filter: blur(7.5px);
		backdrop-filter: blur(7.5px);
		transition: all 500ms ease;
		cursor: pointer;
		box-shadow: 1px 4px 8px -2px var(--wp--preset--color--green-300);
		aspect-ratio: 1;

		&:hover {
			box-shadow: 2px 8px 16px -4px var(--wp--preset--color--green-200);
			background-color: color-mix(in hsl, var(--wp--preset--color--green-1000), transparent 25%) !important;

			svg {
				fill: var(--wp--preset--color--green-100);
			}
		}
	}

	svg {
		display: block;
		transition: fill 500ms ease;
		width: 1.5rem;
		height: 1.5rem;
	}
}

.wp-block-group:has(>#closeMenu) {
	position: absolute;
	bottom: calc(var(--wp--preset--spacing--70) + var(--wp--preset--spacing--20));
	left: 50%;
	translate: -50% 0;
}

.wp-block-ghub-scroll-box {
	pointer-events: none;
}

#abrirReservas {
	cursor: pointer;
}

.catherine-modal-overlay {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	z-index: 99998;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
}

.catherine-modal-overlay.active {
	visibility: visible;
	opacity: 1;
}

.catherine-modal-content {
	position: relative;
	border-radius: 8px;
	background-color: #fff;
	padding: 20px;
	width: 500px;
	max-width: 90%;
	max-height: 90%;
	overflow-y: auto;
}

.catherine-modal-close {
	position: absolute;
	top: 10px;
	right: 15px;
	z-index: 99999;
	cursor: pointer;
	border: none;
	background: none;
	font-size: 28px;
	line-height: 1;
}

#catherine-planne-widget-target .planne-widget-product-adder {
	width: 100%;
}

.pin-spacer:has(.scroll-animation--horizontal-left) {
	margin-inline: calc(var(--wp--style--root--padding-right) * -1) !important;
	.scroll-animation--horizontal-left {
		left: 0 !important;
		width: 100% !important;
		max-width: unset !important;
		> .wp-block-group {
			overflow: hidden;
		}
	}
}

/* --- INÍCIO DA CORREÇÃO PARA SAFARI: SCROLL-DRIVEN ANIMATIONS --- */
/* Envolve todas as animações scroll-driven em uma query @supports para
   que sejam aplicadas apenas em navegadores compatíveis. O fallback em JS
   cuidará dos outros. O aninhamento original do CSS é preservado. */
@supports (animation-timeline: --anything) {

	/* Mosaico */
	@media screen and (min-width: 50rem) {
		.mosaico-pin {
			view-timeline-name: --section-pin-tl;
			view-timeline-axis: block;

			.mosaico-sticky {
				.mosaico-menu {
					position: relative;
					grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
					height: calc(100vh - calc(var(--wp--preset--spacing--30) * 2));

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center center;
					}

					.targetItem {
						position: absolute;
						grid-row: 1 / span 2;
						grid-column: 1 / -1;

						animation: linear growFigureOnGrid 1s forwards;
						transition: all 1500ms ease;
						will-change: padding;


						padding: calc(calc(calc(calc(calc(100vh - calc(var(--wp--preset--spacing--30) * 2)) - var(--wp--preset--spacing--20)) / 5) * 2) + var(--wp--preset--spacing--20)) calc(calc(calc(calc(100% - calc(var(--wp--preset--spacing--20) * 28)) / 29) * 7) + calc(var(--wp--preset--spacing--20) * 7)) 0px calc(calc(calc(calc(100% - calc(var(--wp--preset--spacing--20) * 28)) / 29) * 8) + calc(var(--wp--preset--spacing--20) * 8));
						width: 100%;
						height: 100%;
						animation-timeline: --section-pin-tl;
						animation-range: contain 20% contain 80%;

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							object-position: center center;
						}

						+figure {
							grid-column: 23 / span 7;
						}
					}
				}
			}
		}
	}

	/* Espera */
	.espera-pin {
		view-timeline-name: --section-espera-tl;
		view-timeline-axis: block;

		.espera-sticky {
			.wp-block-columns {
				>.wp-block-column {
					translate: 0px var(--wp--preset--spacing--20);
					opacity: 0;

					animation: linear move 1s forwards;
					transition: all 1500ms ease;
					will-change: opacity, translate;
					animation-timeline: --section-espera-tl;

					&:nth-child(1) {
						animation-range: contain 0% contain 60%;
					}

					&:nth-child(2) {
						animation-range: contain 20% contain 80%;
					}
				}
			}
		}

		.wp-block-cover {
			>img {
				animation: imageParallax linear 1s forwards;
				transition: object-position 1500ms ease;
				object-position: 50% 30%;
				animation-timeline: --section-espera-tl;
				animation-range: entry-crossing 0% contain 60%;
			}
		}
	}

	/* Outras Animações Genéricas */
	.scroll-animation--padding-border {
		view-timeline-name: --section-pin-tl;
		view-timeline-axis: block;

		>* {
			clip-path: inset(0px round 0px);
			animation: paddingBorder linear 1s forwards;
			transition: clip-path 1500ms ease;
			animation-timeline: --section-pin-tl;
			animation-range: contain 0% contain 180%;
			will-change: clip-path;
		}
	}

	.scroll-animation--horizontal-left {
		view-timeline-name: --section-pin-tl;
		view-timeline-axis: block;

		figure {
			flex: none;
			min-width: min-content;
		}

		>* {
			overflow-x: hidden;
		}

		.scroll-animation--horizontal-left__target {
			animation: linear moveLeft forwards;
			will-change: transform;
			animation-timeline: --section-pin-tl;
			animation-range: contain 0% contain 100%;
		}
	}

	.scroll-animation--shrink-height {
		clip-path: inset(0px round 0px);
		view-timeline-name: --section-pin-tl;
		view-timeline-axis: block;
		animation: linear shrinkHeight forwards;
		will-change: clip-path;
		animation-timeline: --section-pin-tl;
		animation-range: cover 100vh cover 70%;
	}
}

/* --- FIM DA CORREÇÃO PARA SAFARI --- */