/* Components: buttons, links, kicker pills, chips. */

/* CTA pill: text on one side, a circle with the curled arrow on the other. */
.wp-element-button,
.wp-block-button__link {
	--btn-bg: var(--wp--preset--color--terracotta);
	--btn-text: var(--wp--preset--color--cream);
	--btn-circle: var(--wp--preset--color--cream);
	--btn-arrow: var(--wp--preset--color--terracotta);
	--btn-size: 38px;
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 7px 24px 7px calc(var(--btn-size) + 7px + 14px);
	padding-inline: 24px calc(var(--btn-size) + 7px + 14px);
	background: var(--btn-bg);
	color: var(--btn-text);
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s var(--smh-ease), color 0.2s ease;
}

.wp-element-button::before,
.wp-block-button__link::before {
	content: "";
	position: absolute;
	inset-block-start: calc(50% - var(--btn-size) / 2);
	inset-inline-end: 7px;
	width: var(--btn-size);
	height: var(--btn-size);
	border-radius: 50%;
	background: var(--btn-circle);
	transition: transform 0.3s var(--smh-ease);
}

.wp-element-button::after,
.wp-block-button__link::after {
	content: "";
	position: absolute;
	inset-block-start: calc(50% - 8px);
	inset-inline-end: calc(7px + (var(--btn-size) - 22px) / 2);
	width: 22px;
	height: 16px;
	background: var(--btn-arrow);
	-webkit-mask: url("../img/arrow.svg") center / contain no-repeat;
	mask: url("../img/arrow.svg") center / contain no-repeat;
	transform: rotate(38deg);
	transition: transform 0.3s var(--smh-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	--btn-bg: var(--wp--preset--color--cocoa);
	color: var(--btn-text);
}

.wp-element-button:hover::before,
.wp-block-button__link:hover::before {
	transform: scale(1.06);
}

.wp-element-button:hover::after,
.wp-block-button__link:hover::after,
.wp-element-button:focus-visible::after,
.wp-block-button__link:focus-visible::after {
	transform: translateX(-2px) rotate(0deg);
}

/* Secondary: sand pill, terracotta circle. */
.is-style-secondary .wp-block-button__link {
	--btn-bg: var(--wp--preset--color--sand);
	--btn-text: var(--wp--preset--color--walnut);
	--btn-circle: var(--wp--preset--color--terracotta);
	--btn-arrow: var(--wp--preset--color--cream);
}

.is-style-secondary .wp-block-button__link:hover {
	--btn-bg: var(--wp--preset--color--field);
}

/* On dark surfaces and photos: cream pill, dark circle. */
.is-style-light .wp-block-button__link {
	--btn-bg: var(--wp--preset--color--cream);
	--btn-text: var(--wp--preset--color--espresso);
	--btn-circle: var(--wp--preset--color--espresso);
	--btn-arrow: var(--wp--preset--color--cream);
}

.is-style-light .wp-block-button__link:hover {
	--btn-bg: var(--wp--preset--color--white);
}

/* Dark pill for ״לכל המאמרים״. */
.is-style-dark .wp-block-button__link {
	--btn-bg: var(--wp--preset--color--espresso);
	--btn-text: var(--wp--preset--color--cream);
	--btn-circle: var(--wp--preset--color--terracotta);
	--btn-arrow: var(--wp--preset--color--cream);
}

.is-style-dark .wp-block-button__link:hover {
	--btn-bg: var(--wp--preset--color--walnut);
}

/* Play icon instead of the arrow (״לשיר שלנו״). */
.is-style-play .wp-block-button__link::after {
	width: 14px;
	height: 14px;
	inset-block-start: calc(50% - 7px);
	inset-inline-end: calc(7px + (var(--btn-size) - 14px) / 2);
	-webkit-mask-image: url("../img/play.svg");
	mask-image: url("../img/play.svg");
	transform: scaleX(-1);
}

.is-style-play .wp-block-button__link:hover::after {
	transform: scaleX(-1);
}

@media (max-width: 781px) {
	.wp-element-button,
	.wp-block-button__link {
		--btn-size: 34px;
		min-height: 48px;
	}

	/* A section's main CTA runs full width: text on one edge, circle on the other. */
	.smh-cta-full,
	.smh-cta-full .wp-block-button,
	.smh-cta-full .wp-block-button__link {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button::before,
	.wp-block-button__link::before,
	.wp-element-button::after,
	.wp-block-button__link::after {
		transition: none;
	}

	.wp-element-button:hover::before,
	.wp-block-button__link:hover::before {
		transform: none;
	}

	.wp-element-button:hover::after,
	.wp-block-button__link:hover::after {
		transform: rotate(38deg);
	}
}

/* ״להמשך קריאה״: a secondary pill. Same geometry as the buttons, core gives it its own class. */
.wp-block-read-more {
	--btn-size: 36px;
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 50px;
	padding-inline: 1.5rem calc(var(--btn-size) + 7px + 14px);
	border-radius: 999px;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--walnut);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.3s var(--smh-ease);
}

.wp-block-read-more::before {
	content: "";
	position: absolute;
	inset-block-start: calc(50% - var(--btn-size) / 2);
	inset-inline-end: 7px;
	width: var(--btn-size);
	height: var(--btn-size);
	border-radius: 50%;
	background: var(--wp--preset--color--terracotta);
	transition: transform 0.3s var(--smh-ease);
}

.wp-block-read-more::after {
	content: "";
	position: absolute;
	inset-block-start: calc(50% - 8px);
	inset-inline-end: calc(7px + (var(--btn-size) - 22px) / 2);
	width: 22px;
	height: 16px;
	background: var(--wp--preset--color--cream);
	-webkit-mask: url("../img/arrow.svg") center / contain no-repeat;
	mask: url("../img/arrow.svg") center / contain no-repeat;
	transform: rotate(38deg);
	transition: transform 0.3s var(--smh-ease);
}

.wp-block-read-more:hover {
	background: var(--wp--preset--color--field);
	color: var(--wp--preset--color--walnut);
}

.wp-block-read-more:hover::before {
	transform: scale(1.06);
}

.wp-block-read-more:hover::after {
	transform: translateX(-2px) rotate(0deg);
}

/* Text link with a curled arrow (להמשך קריאה, לכל הסיורים). */
.smh-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	font-weight: 700;
	color: var(--wp--preset--color--terracotta);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.smh-link::after {
	content: "";
	width: 40px;
	height: 13px;
	background: currentColor;
	-webkit-mask: url("../img/arrow-link.svg") center / contain no-repeat;
	mask: url("../img/arrow-link.svg") center / contain no-repeat;
	transition: transform 0.3s var(--smh-ease);
}

.smh-link:hover {
	text-decoration-thickness: 2px;
}

.smh-link:hover::after {
	transform: translateX(-4px);
}

/* Kicker pill above headings. Large bold text: terracotta on sand passes AA for large type. */
.is-style-kicker {
	display: inline-block;
	width: fit-content;
	padding: 0.25rem 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--terracotta);
	font-family: var(--wp--preset--font-family--hangar);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.5;
}

.is-style-kicker.has-text-align-center {
	display: block;
	margin-inline: auto;
}

/* Outlined chips (מתאים ל). */
.smh-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.smh-chips li {
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--wp--preset--color--clay);
	border-radius: 999px;
	color: var(--wp--preset--color--cocoa);
	font-size: 1.0625rem;
}

/* Reveal on scroll. Only applies once motion.js marked the page, so nothing hides without JS. */
.js .smh-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--smh-ease), transform 0.7s var(--smh-ease);
}

.js .smh-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .smh-reveal {
		transform: none;
	}
}