/**
 * Forge Editor Tools — front-end styles.
 *
 * Every rule is keyed to a class the editor tools add, so a page that
 * uses none of the tools is completely unaffected.
 */

/* --- Show / hide per device -------------------------------------- */
@media (max-width: 767px) {
	.fet-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.fet-hide-tablet {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.fet-hide-desktop {
		display: none !important;
	}
}

/* --- Entrance animation ------------------------------------------ */
/* Subtle and one-time: a block eases in the first time it scrolls
   into view, then sits still. The front-end script adds .fet-in. */
.fet-anim {
	opacity: 0;
}

.fet-anim-fade {
	transition: opacity 0.8s ease;
}

.fet-anim-rise {
	transform: translateY(24px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}

.fet-anim-left {
	transform: translateX(-32px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}

.fet-anim-right {
	transform: translateX(32px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}

.fet-anim-zoom {
	transform: scale(0.94);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}

.fet-anim.fet-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fet-anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --- Hover colors ------------------------------------------------- */
/* Colors ride in as custom properties set inline by the editor, so
   only the sides the owner actually picked up get a rule. */
.fet-hover-bg {
	transition: background-color 0.25s ease;
}

.fet-hover-bg:hover {
	background-color: var(--fet-hover-bg);
}

.fet-hover-text {
	transition: color 0.25s ease;
}

.fet-hover-text:hover {
	color: var(--fet-hover-text);
}

/* Buttons carry their color on the inner link, so aim there too. */
.fet-hover-bg:hover .wp-block-button__link {
	background-color: var(--fet-hover-bg);
}

.fet-hover-text:hover .wp-block-button__link {
	color: var(--fet-hover-text);
}

/* --- Clickable groups / cards ------------------------------------- */
.fet-clickable {
	cursor: pointer;
}

/* --- Responsive controls ------------------------------------------ */
/* Per-device text size, alignment, and padding. Sizes and spacing
   ride in as custom properties that point at the theme's own
   presets, so the design's scale is respected at every size. */
@media (max-width: 767px) {
	.fet-fs-mobile {
		font-size: var(--fet-fs-mobile);
	}
	.fet-pad-mobile {
		padding: var(--fet-pad-mobile);
	}
	.fet-ta-mobile-left {
		text-align: left;
	}
	.fet-ta-mobile-center {
		text-align: center;
	}
	.fet-ta-mobile-right {
		text-align: right;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.fet-fs-tablet {
		font-size: var(--fet-fs-tablet);
	}
	.fet-pad-tablet {
		padding: var(--fet-pad-tablet);
	}
	.fet-ta-tablet-left {
		text-align: left;
	}
	.fet-ta-tablet-center {
		text-align: center;
	}
	.fet-ta-tablet-right {
		text-align: right;
	}
}

@media (min-width: 1025px) {
	.fet-fs-desktop {
		font-size: var(--fet-fs-desktop);
	}
	.fet-pad-desktop {
		padding: var(--fet-pad-desktop);
	}
	.fet-ta-desktop-left {
		text-align: left;
	}
	.fet-ta-desktop-center {
		text-align: center;
	}
	.fet-ta-desktop-right {
		text-align: right;
	}
}

/* --- Button icons -------------------------------------------------- */
/* The icon is a mask, so it always wears the button's own text
   color and follows hover and variation changes for free. */
.fet-has-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.fet-has-icon .wp-block-button__link::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: none;
	background-color: currentColor;
	-webkit-mask-image: var(--fet-icon);
	mask-image: var(--fet-icon);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.fet-icon-after .wp-block-button__link::before {
	order: 2;
}

.fet-icon-arrow {
	--fet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E");
}

.fet-icon-arrow-down {
	--fet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M5 12l7 7 7-7'/%3E%3C/svg%3E");
}

.fet-icon-external {
	--fet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}

.fet-icon-download {
	--fet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10m0 0 4-4m-4 4-4-4M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2'/%3E%3C/svg%3E");
}

.fet-icon-check {
	--fet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

.fet-icon-star {
	--fet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3l2.7 5.8 6.3.7-4.7 4.3 1.3 6.2L12 17l-5.6 3 1.3-6.2L3 9.5l6.3-.7z'/%3E%3C/svg%3E");
}

.fet-icon-heart {
	--fet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 20.5C7 16.6 3.5 13.4 3.5 9.4 3.5 6.5 5.7 4.5 8.2 4.5c1.5 0 3 .8 3.8 2 .8-1.2 2.3-2 3.8-2 2.5 0 4.7 2 4.7 4.9 0 4-3.5 7.2-8.5 11.1z'/%3E%3C/svg%3E");
}

.fet-icon-cart {
	--fet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 11.4A1.6 1.6 0 0 0 9.1 17h8.2a1.6 1.6 0 0 0 1.6-1.3L20.5 8H6'/%3E%3Ccircle cx='10' cy='21' r='1.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='17.5' cy='21' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.fet-icon-phone {
	--fet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.fet-icon-mail {
	--fet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='M3.5 6.5L12 13l8.5-6.5'/%3E%3C/svg%3E");
}

/* --- Video pop-up --------------------------------------------------- */
.fet-video-trigger {
	cursor: pointer;
}

.fet-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(10, 8, 6, 0.88);
}

.fet-lightbox-frame {
	width: min(960px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.fet-lightbox-frame iframe,
.fet-lightbox-frame video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.fet-lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.fet-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* --- Navigation extras ---------------------------------------------- */
/* Submenus that open on hover for mouse users. Keyboard and touch
   keep the standard click behavior underneath — hover is an extra,
   never a replacement. */
@media (hover: hover) and (min-width: 768px) {
	.fet-nav-hover .wp-block-navigation-item.has-child:hover
		> .wp-block-navigation__submenu-container,
	.fet-nav-hover .wp-block-navigation-item.has-child:focus-within
		> .wp-block-navigation__submenu-container {
		visibility: visible;
		opacity: 1;
		height: auto;
		width: auto;
		overflow: visible;
	}
}

/* The roomy phone menu: when the navigation's own overlay opens,
   links become full-width rows with real tap height. */
.fet-nav-sheet .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display: block;
	padding: 0.85rem 0.25rem;
	font-size: 1.125rem;
}

.fet-nav-sheet .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container
	> .wp-block-navigation-item {
	border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}