/*
Theme Name: Indice
Theme URI: https://wordpress.com/theme/indice
Author: Automattic
Author URI: https://automattic.com/
Description: Indice is a tribute to the iconic indexhibit, an archetypal open source CMS that was heavily used by a generation of designers in the early web due to its simplicity and charm.
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: indice
Tags: blog, portfolio, two-columns, block-styles, featured-images, full-site-editing, rtl-language-support, style-variations, translation-ready
*/


/* Add this to prevent horizontal scrolling */
body, html {
  overflow-x: hidden;
	overflow-x: clip;
  max-width: 100vw;
}

.wp-site-blocks {
	overflow-x: hidden;
	overflow-x: clip;
}

/* Ensure all elements respect viewport width */
* {
  box-sizing: border-box;
  max-width: 100%;
}

/*----*/
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

@media (max-width: 781px) {
	.wp-block-columns > .wp-block-column {
		min-width: 0;
	}

	.wp-block-post-content,
	.wp-block-post-content > * {
		box-sizing: border-box;
		max-width: 100%;
		min-width: 0;
	}

	.wp-block-post-content {
		overflow-wrap: anywhere;
	}

	.wp-block-post-content .wp-block-embed,
	.wp-block-post-content .wp-block-embed__wrapper,
	.wp-block-post-content iframe,
	.wp-block-post-content img,
	.wp-block-post-content svg,
	.wp-block-post-content video {
		height: auto;
		max-width: 100%;
	}

	.wp-block-post-content .wp-block-embed iframe {
		width: 100%;
	}

	.wp-block-post-content pre,
	.wp-block-post-content .wp-block-table {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
	}

	.lyte-wrapper {
		width: 100% !important;
		margin: 0 !important;
	}

	.wp-block-embed-youtube {
		width: 100% !important;
		overflow-x: hidden;
	}

}

/* =============Wiggle animation for button links on hover ================ */
.wp-block-button .wp-block-button__link {
	display: inline-block;
	transform-origin: center;
}

.wp-block-button .wp-block-button__link:hover {
	animation: button-wiggle 0.45s ease-in-out;
}

@keyframes button-wiggle {
	0%,
	100% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(-3deg);
	}
	50% {
		transform: rotate(3deg);
	}
	75% {
		transform: rotate(-2deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-block-button__link:hover {
		animation: none;
	}
}

/* ============= Dashed underline draw animation for post title ================ */
h2.wp-block-post-title,
h2.wp-block-post-title a {
	text-decoration: none;
}

h2.wp-block-post-title a:hover,
h2.wp-block-post-title a:focus {
	text-decoration: none;
}

h2.wp-block-post-title a {
	display: inline;
	background-image: repeating-linear-gradient(
		to right,
		currentColor 0 10px,
		transparent 10px 16px
	);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 2px;
	padding-bottom: 0.12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	animation: post-title-dash-draw 0.35s ease-in-out 0.15s forwards;
}

@keyframes post-title-dash-draw {
	from {
		background-size: 0 2px;
	}
	to {
		background-size: 100% 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	h2.wp-block-post-title a {
		animation: none;
		background-size: 100% 2px;
	}
}

/* ============= Cursor style ================ */

@media (hover: hover) and (pointer: fine) {
	body,
	body * {
		cursor: var(--indice-cursor), auto; /* --indice-cursor defined in function.php  $cursor_svg_url = get_stylesheet_directory_uri() . '/assets/images/cursor-blue.svg'; */
	}

	body.has-custom-cursor {
		cursor: none;
	}

	body.has-custom-cursor * {
		cursor: none;
	}

	body.has-custom-cursor a,
	body.has-custom-cursor a *,
	body.has-custom-cursor button,
	body.has-custom-cursor button *,
	body.has-custom-cursor [role="button"],
	body.has-custom-cursor [role="button"] *,
	body.has-custom-cursor input[type="button"],
	body.has-custom-cursor input[type="submit"],
	body.has-custom-cursor .wp-block-button__link,
	body.has-custom-cursor .wp-block-button__link * {
		cursor: pointer;
	}
}

.custom-cursor {
	position: fixed;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	max-width: none;
	border: 2px solid #0000FF;
	border-radius: 50%;
	background: #0000FF;
	pointer-events: none;
	z-index: 10000;
	opacity: 0;
	transform: translate(-50%, -50%);
}

.custom-cursor.is-visible {
	opacity: 1;
}

.custom-cursor.is-link {
	border-color: #FFFFFF;
}

.custom-cursor.is-bouncing {
	animation: cursor-bounce 520ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

@keyframes cursor-bounce {
	0% {
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}
	10% {
		transform: translate(-50%, calc(-50% + 1px)) scaleX(1.08) scaleY(0.92);
	}
	28% {
		transform: translate(-50%, calc(-50% - 16px)) scaleX(0.97) scaleY(1.03);
	}
	44% {
		transform: translate(-50%, calc(-50% + 5px)) scaleX(1.14) scaleY(0.86);
	}
	58% {
		transform: translate(-50%, calc(-50% - 8px)) scaleX(0.98) scaleY(1.02);
	}
	70% {
		transform: translate(-50%, calc(-50% + 2px)) scaleX(1.08) scaleY(0.92);
	}
	82% {
		transform: translate(-50%, calc(-50% - 3px)) scaleX(0.99) scaleY(1.01);
	}
	90% {
		transform: translate(-50%, calc(-50% + 1px)) scaleX(1.04) scaleY(0.96);
	}
	100% {
		transform: translate(-50%, -50%) scaleX(1) scaleY(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-cursor.is-bouncing {
		animation: none;
	}
}