/*
 * Salaamat blocks: base styles.
 * Colours, fonts and motion come from the active theme where it provides them
 * (the --wp--preset--* and --wp--custom--* values), with sensible fallbacks for any other theme.
 */

.salaamat-downloads,
.salaamat-filters,
.salaamat-related,
.salaamat-series-info,
.salaamat-share,
.salaamat-stats,
.salaamat-collection-links,
.salaamat-collection-kitaabs {
	--salaamat-accent: var(--wp--preset--color--accent, #3E5126);
	--salaamat-accent-bright: var(--wp--preset--color--accent-bright, #D2A746);
	--salaamat-accent-deep: color-mix(in srgb, var(--salaamat-accent) 78%, #000);
	--salaamat-accent-contrast: var(--wp--preset--color--accent-contrast, #ffffff);
	--salaamat-focus: var(--wp--preset--color--blue, var(--salaamat-accent));
	--salaamat-ink: var(--wp--preset--color--contrast, #1D2A21);
	--salaamat-muted: var(--wp--preset--color--muted, #555F51);
	--salaamat-line: var(--wp--preset--color--line, #DDE3D5);
	--salaamat-subtle: var(--wp--preset--color--subtle, #EEF2E9);
	--salaamat-surface: var(--wp--preset--color--surface, #ffffff);
	--salaamat-radius: var(--wp--custom--radius--medium, 10px);
	--salaamat-ease: var(--wp--custom--motion--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	--salaamat-fast: var(--wp--custom--motion--fast, 160ms);
	--salaamat-base: var(--wp--custom--motion--base, 260ms);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------- Icons (drawn in the current text colour) ---------- */

.salaamat-icon {
	display: inline-block;
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: var(--salaamat-icon) center / contain no-repeat;
	mask: var(--salaamat-icon) center / contain no-repeat;
	transition: transform var(--salaamat-base) var(--salaamat-ease);
}
.salaamat-icon--read {
	--salaamat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 5.5c3-1.4 6-1.2 9.5 1 3.5-2.2 6.5-2.4 9.5-1v13c-3-1.4-6-1.2-9.5 1-3.5-2.2-6.5-2.4-9.5-1z'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/svg%3E");
}
.salaamat-icon--download {
	--salaamat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11.5'/%3E%3Cpath d='M7 10.5l5 5 5-5'/%3E%3Cpath d='M4.5 20.5h15'/%3E%3C/svg%3E");
}
.salaamat-icon--arrow {
	--salaamat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14.5'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.salaamat-icon--email {
	--salaamat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7.5l8.5 6 8.5-6'/%3E%3C/svg%3E");
}
.salaamat-icon--link {
	--salaamat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.2 4.2 0 0 0 6 0l3.2-3.2a4.2 4.2 0 0 0-6-6l-1 1'/%3E%3Cpath d='M14 10a4.2 4.2 0 0 0-6 0l-3.2 3.2a4.2 4.2 0 0 0 6 6l1-1'/%3E%3C/svg%3E");
}
.salaamat-icon--check {
	--salaamat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-10.5'/%3E%3C/svg%3E");
}
.salaamat-icon--share {
	--salaamat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11'/%3E%3Cpath d='M7.5 8l4.5-4.5L16.5 8'/%3E%3Cpath d='M5 12.5v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E");
}
.salaamat-icon--whatsapp {
	--salaamat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.7.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35M12.05 21.78h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.89-9.88 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.88 9.88m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.68 1.45h.01c6.55 0 11.89-5.34 11.89-11.89 0-3.18-1.24-6.16-3.48-8.41z'/%3E%3C/svg%3E");
}

/* ---------- Buttons used inside the blocks ---------- */

.salaamat-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.6em 1.2em;
	border: 2px solid var(--salaamat-accent);
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--salaamat-base) var(--salaamat-ease),
		box-shadow var(--salaamat-base) var(--salaamat-ease),
		background-color var(--salaamat-base) var(--salaamat-ease),
		border-color var(--salaamat-base) var(--salaamat-ease),
		color var(--salaamat-base) var(--salaamat-ease);
}
.salaamat-button::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}
.salaamat-button--solid {
	background: var(--salaamat-accent);
	color: var(--salaamat-accent-contrast);
}
/* A soft sheen that sweeps across the solid button. */
.salaamat-button--solid::after {
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
	transform: translateX(-130%);
	transition: transform 700ms var(--salaamat-ease);
}
.salaamat-button--outline {
	background: transparent;
	color: var(--salaamat-ink);
}
/* The outline button fills with the button colour from the left. */
.salaamat-button--outline::after {
	background: var(--salaamat-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--salaamat-base) var(--salaamat-ease);
}
.salaamat-button:hover,
.salaamat-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 22px -12px rgba(22, 38, 28, 0.7);
}
.salaamat-button--solid:hover,
.salaamat-button--solid:focus-visible {
	background: var(--salaamat-accent-deep);
	border-color: var(--salaamat-accent-deep);
	color: var(--salaamat-accent-contrast);
}
.salaamat-button--solid:hover::after,
.salaamat-button--solid:focus-visible::after {
	transform: translateX(130%);
}
.salaamat-button--outline:hover,
.salaamat-button--outline:focus-visible {
	color: var(--salaamat-accent-contrast);
}
.salaamat-button--outline:hover::after,
.salaamat-button--outline:focus-visible::after {
	transform: scaleX(1);
}
.salaamat-button:active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
	transition-duration: var(--salaamat-fast);
}
.salaamat-button:hover .salaamat-icon--download {
	transform: translateY(2px);
}
.salaamat-button:hover .salaamat-icon--read {
	transform: scale(1.1);
}
.salaamat-button:focus-visible {
	outline: 2px solid var(--salaamat-focus);
	outline-offset: 3px;
}

/* ---------- Kitaab downloads ---------- */

.salaamat-downloads__heading {
	margin: 0 0 0.75em;
	font-size: var(--wp--preset--font-size--large, 1.4rem);
}
.salaamat-downloads__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--salaamat-line);
	border-radius: var(--salaamat-radius);
	background: var(--salaamat-surface);
	overflow: hidden;
}
.salaamat-downloads__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding: 1rem 1.25rem;
	margin: 0;
	transition: background-color var(--salaamat-base) var(--salaamat-ease);
}
.salaamat-downloads__item:hover {
	background-color: color-mix(in srgb, var(--salaamat-subtle) 55%, transparent);
}
.salaamat-downloads__item + .salaamat-downloads__item {
	border-top: 1px solid var(--salaamat-line);
}
.salaamat-downloads__lang {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.6rem;
}
.salaamat-downloads__name {
	font-weight: 700;
	font-size: 1.1em;
}
.salaamat-downloads__native {
	font-size: 1.1em;
	color: var(--salaamat-muted);
}
.salaamat-downloads__meta {
	flex-basis: 100%;
	font-size: 0.875em;
	color: var(--salaamat-muted);
}
.salaamat-downloads__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ---------- Kitaab search and filters ---------- */

.salaamat-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	align-items: end;
	padding: 1.25rem;
	border: 1px solid var(--salaamat-line);
	border-radius: var(--salaamat-radius);
	background: var(--salaamat-surface);
}
.salaamat-filters__field--search {
	grid-column: 1 / -1;
}
.salaamat-filters label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875em;
	font-weight: 600;
	color: var(--salaamat-ink);
}
.salaamat-filters input[type="search"],
.salaamat-filters select {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--salaamat-line);
	border-radius: calc(var(--salaamat-radius) / 1.5);
	background-color: #fff;
	color: var(--salaamat-ink);
	font: inherit;
	transition: border-color var(--salaamat-base) var(--salaamat-ease), box-shadow var(--salaamat-base) var(--salaamat-ease);
}
.salaamat-filters input[type="search"]:hover,
.salaamat-filters select:hover {
	border-color: var(--salaamat-accent-bright);
}
.salaamat-filters input[type="search"]:focus,
.salaamat-filters select:focus {
	outline: none;
	border-color: var(--salaamat-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--salaamat-focus) 22%, transparent);
}
.salaamat-filters__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.salaamat-filters__clear {
	color: var(--salaamat-muted);
}

/* ---------- Cards (related kitaabs) ---------- */

.salaamat-related__heading {
	margin: 0 0 1rem;
}
.salaamat-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1.5rem;
}
.salaamat-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.salaamat-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	color: inherit;
	text-decoration: none;
}
.salaamat-card__cover {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1.414;
	overflow: hidden;
	border-radius: 3px 6px 6px 3px;
	background: var(--salaamat-line);
	box-shadow: 0 1px 1px rgba(22, 38, 28, 0.08), 0 6px 12px -4px rgba(22, 38, 28, 0.2), 0 16px 28px -14px rgba(22, 38, 28, 0.35);
	transition: transform 450ms var(--salaamat-ease), box-shadow 450ms var(--salaamat-ease);
}
/* Spine shading so covers read as books. */
.salaamat-card__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0, rgba(0, 0, 0, 0.06) 2.5%, rgba(255, 255, 255, 0.16) 3.6%, rgba(255, 255, 255, 0) 7%);
}
.salaamat-card__cover-img,
.salaamat-card__no-cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.salaamat-card__link:hover .salaamat-card__cover,
.salaamat-card__link:focus-visible .salaamat-card__cover {
	transform: translateY(-6px) perspective(900px) rotateY(-7deg);
	box-shadow: 0 2px 2px rgba(22, 38, 28, 0.08), 0 14px 22px -8px rgba(22, 38, 28, 0.28), 0 28px 40px -18px rgba(22, 38, 28, 0.45);
}
.salaamat-card__title {
	font-weight: 700;
	line-height: 1.3;
	transition: color var(--salaamat-base) var(--salaamat-ease);
}
.salaamat-card__link:hover .salaamat-card__title,
.salaamat-card__link:focus-visible .salaamat-card__title {
	color: var(--salaamat-accent);
}
.salaamat-card__meta {
	font-size: 0.875em;
	color: var(--salaamat-muted);
}

/* ---------- Collections: links (Kitaabs page) and a scholar's kitaabs in a collection ---------- */

.salaamat-collection-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.9rem;
}
.salaamat-collection-links__label,
.salaamat-collection-kitaabs__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red, var(--salaamat-accent));
}
.salaamat-collection-kitaabs__eyebrow::before {
	content: "";
	width: 2.25em;
	height: 2px;
	background: var(--salaamat-accent-bright);
}
.salaamat-collection-links__link {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	max-width: 100%;
	padding: 0.75rem 1rem 0.75rem 1.1rem;
	border: 1px solid var(--salaamat-line);
	border-left: 4px solid var(--salaamat-accent-bright);
	border-radius: var(--salaamat-radius);
	background: var(--salaamat-surface);
	color: var(--salaamat-ink);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(22, 38, 28, 0.06);
	transition:
		transform var(--salaamat-base) var(--salaamat-ease),
		box-shadow var(--salaamat-base) var(--salaamat-ease),
		border-color var(--salaamat-base) var(--salaamat-ease);
}
.salaamat-collection-links__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.salaamat-collection-links__name {
	display: block;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
}
.salaamat-collection-links__count {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.85rem;
	color: var(--salaamat-muted);
}
.salaamat-collection-links__arrow {
	flex: none;
	font-size: 1.2rem;
	color: var(--salaamat-accent);
	transition: transform var(--salaamat-base) var(--salaamat-ease);
}
.salaamat-collection-links__link:hover,
.salaamat-collection-links__link:focus-visible {
	transform: translateY(-2px);
	border-color: var(--salaamat-accent);
	border-left-color: var(--salaamat-accent-bright);
	box-shadow: 0 12px 22px -14px rgba(22, 38, 28, 0.55);
	color: var(--salaamat-ink);
}
.salaamat-collection-links__link:hover .salaamat-collection-links__arrow,
.salaamat-collection-links__link:focus-visible .salaamat-collection-links__arrow {
	transform: translateX(4px);
}
.salaamat-collection-links__link:focus-visible {
	outline: 2px solid var(--salaamat-focus);
	outline-offset: 3px;
}

.salaamat-collection-kitaabs__group + .salaamat-collection-kitaabs__group {
	margin-top: 3rem;
}
.salaamat-collection-kitaabs__heading {
	margin: 0.5rem 0 0.25rem;
}
.salaamat-collection-kitaabs__heading a {
	color: inherit;
	text-decoration: none;
}
.salaamat-collection-kitaabs__heading a:hover,
.salaamat-collection-kitaabs__heading a:focus-visible {
	color: var(--salaamat-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.salaamat-collection-kitaabs__count {
	margin: 0 0 1.5rem;
	color: var(--salaamat-muted);
}
.salaamat-collection-kitaabs__more {
	margin: 2rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.salaamat-collection-links__link,
	.salaamat-collection-links__arrow {
		transition: none;
	}
	.salaamat-collection-links__link:hover,
	.salaamat-collection-links__link:focus-visible,
	.salaamat-collection-links__link:hover .salaamat-collection-links__arrow,
	.salaamat-collection-links__link:focus-visible .salaamat-collection-links__arrow {
		transform: none;
	}
}

/* ---------- Series position ---------- */

.salaamat-series-info {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0;
}
.salaamat-series-info__position {
	font-weight: 700;
}

/* ---------- Library numbers ---------- */

.salaamat-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.salaamat-stats__item {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 0.35em;
	margin: 0;
}
.salaamat-stats__item + .salaamat-stats__item::before {
	content: "";
	position: absolute;
	left: -0.95rem;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--salaamat-accent-bright);
	transform: translateY(-50%);
}
.salaamat-stats__number {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.45em;
	font-weight: 600;
	line-height: 1;
}

/* ---------- Share buttons ---------- */

.salaamat-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
}
.salaamat-share__label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--salaamat-muted);
}
.salaamat-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.salaamat-share__list > li {
	margin: 0;
}
.salaamat-share__list > li[hidden] {
	display: none;
}
.salaamat-share__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.45em 0.95em;
	border: 1px solid var(--salaamat-line);
	border-radius: 999px;
	background: var(--salaamat-surface);
	color: var(--salaamat-ink);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--salaamat-base) var(--salaamat-ease),
		box-shadow var(--salaamat-base) var(--salaamat-ease),
		border-color var(--salaamat-base) var(--salaamat-ease),
		color var(--salaamat-base) var(--salaamat-ease);
}
.salaamat-share__link:hover,
.salaamat-share__link:focus-visible {
	border-color: var(--salaamat-accent-bright);
	color: var(--salaamat-accent);
	transform: translateY(-2px);
	box-shadow: 0 10px 18px -12px rgba(22, 38, 28, 0.4);
}
.salaamat-share__link:active {
	transform: translateY(0) scale(0.98);
}
.salaamat-share__link:focus-visible {
	outline: 2px solid var(--salaamat-focus);
	outline-offset: 3px;
}
.salaamat-share__link--whatsapp .salaamat-icon {
	color: #1fa855;
}
.salaamat-share__copy.is-copied {
	border-color: #2f7a4f;
	color: #2f7a4f;
}
.salaamat-share__copy.is-copied .salaamat-icon {
	--salaamat-icon: var(--salaamat-icon-check);
}
.salaamat-share {
	--salaamat-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-10.5'/%3E%3C/svg%3E");
}

/* ---------- Editor previews ---------- */

.salaamat-placeholder {
	padding: 1rem;
	border: 1px dashed currentColor;
	border-radius: 6px;
	opacity: 0.7;
	font-size: 0.9em;
}

@media (prefers-reduced-motion: reduce) {
	.salaamat-card__cover,
	.salaamat-button,
	.salaamat-button::after,
	.salaamat-share__link,
	.salaamat-icon {
		transition: none;
	}
	.salaamat-button:hover,
	.salaamat-button:focus-visible,
	.salaamat-share__link:hover,
	.salaamat-card__link:hover .salaamat-card__cover {
		transform: none;
	}
}