/*
Theme Name: Salaamat
Theme URI: https://salaamatpublication.com/
Author: Salaamat Publications
Description: A light, block-based theme for the Salaamat Publications library of free Islamic kitaabs, lessons and bayaans. Brand colours (logo green, gold, blue and red), fonts and spacing live in theme.json and can be changed in Appearance → Editor → Styles. Ready-made sections are in the block inserter under "Salaamat". Works with the Salaamat Kitaabs plugin.
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.3.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salaamat
Tags: block-patterns, full-site-editing, style-variations, rtl-language-support, translation-ready, accessibility-ready
*/

/*
 * Most of the design is in theme.json (colours, fonts, sizes, spacing, motion timings).
 * This file holds what theme.json cannot express: hover and focus animations, the block
 * style variations listed in functions.php, the header and footer, and Arabic/Urdu text.
 *
 * Colours each have one job (1.2):
 *   Green (the logo)  the brand: buttons, the deep green banner and footer, the phone menu.
 *   Gold              highlights only: ornaments, the italic phrase in the home banner, the soft gold band.
 *   Blue              links, keyboard focus, and learning resources (Hifz, the series panel).
 *   Red               the small labels above headings (like the red-ink headings of old manuscripts) and audio.
 *
 * Geometric pattern: one faint star medallion (assets/images/medallion.svg) behind the books in the home
 * banner and at the right-hand edge of page banners. It never sits behind text. There is no wallpaper pattern.
 *
 * Handy classes (add them under Block → Advanced → Additional CSS class):
 *   has-arrow     on a Button: adds an arrow that slides on hover.
 *   hero-home     on the top banner group: gold glow, star medallion behind the books, gold phrase in <em>, fade-in.
 *   page-banner   on a Soft green banner group: adds the faint star medallion on the right. (The first
 *                 Soft green panel at the top of a page gets it automatically.)
 *   resource-card on a Card group with a linked heading: the whole card becomes the link. The card takes its
 *                 colour from its icon (kitaabs green, hifz blue, audio red); add card-green, card-blue,
 *                 card-red or card-gold to choose one yourself.
 *   cta-band      on the call-to-action band (kept for older content; it no longer adds a pattern).
 *
 * Every movement is switched off for people who ask their device for reduced motion.
 */

/* =========================================================================
   0. Motion and shared values
   ========================================================================= */

:root {
	--sal-ease: var(--wp--custom--motion--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	--sal-spring: var(--wp--custom--motion--ease-spring, cubic-bezier(0.34, 1.4, 0.64, 1));
	--sal-fast: var(--wp--custom--motion--fast, 160ms);
	--sal-base: var(--wp--custom--motion--base, 260ms);
	--sal-slow: var(--wp--custom--motion--slow, 480ms);
	--sal-highlight: color-mix(in srgb, var(--wp--preset--color--accent-bright) 26%, transparent);
	--sal-book-shadow: var(--wp--preset--shadow--book, 0 8px 14px -6px rgba(22, 38, 28, 0.22));
	--sal-book-shadow-lifted: 0 2px 2px rgba(22, 38, 28, 0.08), 0 16px 24px -8px rgba(22, 38, 28, 0.28), 0 32px 46px -20px rgba(22, 38, 28, 0.5);
	--sal-focus: var(--wp--preset--color--blue, var(--wp--preset--color--accent));
	--sal-medallion: url(assets/images/medallion.svg);
	--sal-arrow: 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");
	--sal-arrow-up: 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 19.5V5'/%3E%3Cpath d='M6 11l6-6 6 6'/%3E%3C/svg%3E");
}

@keyframes sal-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

@keyframes sal-drop {
	from {
		opacity: 0;
		transform: translateY(36px) rotate(0deg) scale(0.96);
	}
}

/* =========================================================================
   1. Text
   ========================================================================= */

html {
	scroll-behavior: smooth;
}
/* Room for the sticky header when the page jumps to a section (#bayaans, a heading link ...).
   Set on the jump targets, not as scroll-padding on the page: with scroll-padding the browser counted
   the header's own search box as hidden behind the header and scrolled the page up on every key typed. */
:where([id]):not(input, textarea, select, button) {
	scroll-margin-top: 6.5rem;
}
.wp-site-blocks > header [id] {
	scroll-margin-top: 0;
}
:where(h1, h2, h3, .wp-block-post-title) {
	text-wrap: balance;
}
:where(p, li, blockquote) {
	text-wrap: pretty;
}
::selection {
	background: color-mix(in srgb, var(--wp--preset--color--accent-bright) 38%, transparent);
	color: inherit;
}

/* Arabic and Urdu */
:lang(ar),
.is-arabic {
	font-family: var(--wp--preset--font-family--arabic);
	line-height: 1.9;
}
:lang(ur),
.is-urdu {
	font-family: var(--wp--preset--font-family--urdu);
	line-height: 2.3;
}
:where(h1, h2, h3, h4, h5, h6):lang(ur) {
	line-height: 2;
}
[dir="rtl"]:where(p, h1, h2, h3, h4, h5, h6, li, blockquote) {
	text-align: right;
}
.has-text-align-center[dir="rtl"] {
	text-align: center;
}

/* =========================================================================
   2. Links: a soft gold highlight fills in behind the words on hover
   ========================================================================= */

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
:is(p, li, dd, figcaption, td, .wp-block-post-terms, .wp-block-breadcrumbs li) > a:not([class*="button"]):not(.wp-block-navigation-item__content) {
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	background-image: linear-gradient(var(--sal-highlight), var(--sal-highlight));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 0;
	border-radius: 0.2em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition:
		background-size var(--sal-base) var(--sal-ease),
		text-decoration-color var(--sal-fast) var(--sal-ease),
		color var(--sal-fast) var(--sal-ease);
}
:is(p, li, dd, figcaption, td, .wp-block-post-terms, .wp-block-breadcrumbs li) > a:not([class*="button"]):not(.wp-block-navigation-item__content):hover {
	background-size: 100% 100%;
	text-decoration-color: transparent;
}
.is-style-dark-panel {
	--sal-highlight: rgba(210, 167, 70, 0.24);
}

/* Keyboard focus: a clear blue ring that follows the shape of the element (gold on deep green).
   It shows only when someone moves around with the keyboard, not after a click or a tap. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--sal-focus);
	outline-offset: 3px;
}
.is-style-dark-panel :where(a, button):focus-visible,
.wp-block-cover.is-dark :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--accent-bright);
}

/* =========================================================================
   3. Buttons: lift, sheen, fill and arrow
   ========================================================================= */

.wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition:
		transform var(--sal-base) var(--sal-ease),
		box-shadow var(--sal-base) var(--sal-ease),
		background-color var(--sal-base) var(--sal-ease),
		border-color var(--sal-base) var(--sal-ease),
		color var(--sal-base) var(--sal-ease);
}
/* Filled buttons: a soft sheen sweeps across, like light catching the page. */
.wp-block-button__link::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.34) 50%, transparent 70%);
	transform: translateX(-130%);
	transition: transform 700ms var(--sal-ease);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 24px -14px rgba(22, 38, 28, 0.8);
}
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after {
	transform: translateX(130%);
}
.wp-block-button__link:active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
	transition-duration: var(--sal-fast);
}

/* Outline buttons: the button colour fills in from the left and the text turns white. */
.wp-block-button.is-style-outline > .wp-block-button__link::after {
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--sal-base) var(--sal-ease);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: transparent;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover::after,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible::after {
	transform: scaleX(1);
}
/* Outline buttons on dark panels */
.is-style-dark-panel .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--on-night);
	border-color: var(--wp--preset--color--accent-bright);
}
.is-style-dark-panel .wp-block-button.is-style-outline > .wp-block-button__link::after {
	background: var(--wp--preset--color--accent-bright);
}
.is-style-dark-panel .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.is-style-dark-panel .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--accent-bright);
	color: var(--wp--preset--color--contrast);
}

/* "has-arrow": an arrow after the text that slides forward on hover. */
.wp-block-button.has-arrow > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
}
.wp-block-button.has-arrow > .wp-block-button__link::before {
	content: "";
	order: 2;
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask: var(--sal-arrow) center / contain no-repeat;
	mask: var(--sal-arrow) center / contain no-repeat;
	transition: transform var(--sal-base) var(--sal-spring);
}
.wp-block-button.has-arrow > .wp-block-button__link:hover::before,
.wp-block-button.has-arrow > .wp-block-button__link:focus-visible::before {
	transform: translateX(4px);
}

/* =========================================================================
   4. Header
   ========================================================================= */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	view-transition-name: site-header;
}
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}
.site-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition:
		padding var(--sal-slow) var(--sal-ease),
		background-color var(--sal-slow) var(--sal-ease),
		box-shadow var(--sal-slow) var(--sal-ease),
		border-color var(--sal-slow) var(--sal-ease);
}
/* Once the page moves: a soft shadow and frosted glass (no change in size) */
html.is-scrolled .site-header {
	border-bottom-color: transparent;
	box-shadow: 0 10px 30px -22px rgba(22, 38, 28, 0.55);
}
/* Once the page has scrolled past the header: a slimmer header (see assets/js/salaamat.js) */
html.is-compact .site-header {
	padding-top: 0.55rem !important;
	padding-bottom: 0.55rem !important;
}
@supports (backdrop-filter: blur(1px)) {
	html.is-scrolled .site-header.has-base-background-color {
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent) !important;
		-webkit-backdrop-filter: saturate(160%) blur(14px);
		backdrop-filter: saturate(160%) blur(14px);
	}
}

/* Logo */
.site-header .wp-block-site-logo img {
	display: block;
	width: clamp(168px, 44vw, 236px);
	height: auto;
	transition: width var(--sal-slow) var(--sal-ease), opacity var(--sal-base) var(--sal-ease);
}
html.is-compact .site-header .wp-block-site-logo img {
	width: clamp(150px, 40vw, 204px);
}
.site-header .wp-block-site-logo a:hover img {
	opacity: 0.85;
}

/* Menu links: a soft pill grows behind the word on hover; a gold dot marks the current page. */
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	isolation: isolate;
	padding: 0.45em 0.95em;
	border-radius: 999px;
	transition: color var(--sal-base) var(--sal-ease);
}
.site-header .wp-block-navigation .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background: var(--wp--preset--color--subtle);
	opacity: 0;
	transform: scale(0.8);
	transition: opacity var(--sal-base) var(--sal-ease), transform var(--sal-base) var(--sal-spring);
}
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
}
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover::before,
.site-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible::before {
	opacity: 1;
	transform: scale(1);
}
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0.05em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-bright);
	transform: translateX(-50%);
}
.site-header .wp-block-navigation-submenu__toggle {
	transition: transform var(--sal-base) var(--sal-ease);
}
.site-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation-submenu__toggle {
	transform: translateY(1px);
}

/* Drop-down menu */
.site-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--lifted);
	padding: 0.4rem !important;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55em 1em;
	border-radius: var(--wp--custom--radius--small);
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	transform: scale(0.96);
}
/* Room for a longer item, such as a scholar's collection under Kitaabs, to sit on two lines (1.3.5).
   Not in the phone menu, where items already have the full width. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	min-width: 17.5rem !important; /* WordPress sets 200px while the menu is open */
}

/* Search button: a round icon button */
.site-header .wp-block-search__button {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--sal-base) var(--sal-ease), color var(--sal-base) var(--sal-ease), transform var(--sal-base) var(--sal-spring);
}
.site-header .wp-block-search__button:hover,
.site-header .wp-block-search__button:focus-visible {
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--accent);
	transform: scale(1.06);
}

/* Phone menu: a full-screen deep green panel with large links that rise in one by one */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--night) !important;
	color: var(--wp--preset--color--on-night) !important;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--70);
	align-items: flex-start;
}
.site-header .is-menu-open .wp-block-navigation__container {
	gap: 0.35rem;
}
.site-header .is-menu-open .wp-block-navigation__container,
.site-header .is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
}
.site-header .is-menu-open .wp-block-navigation-item__content {
	padding: 0.25em 0.6em;
	color: var(--wp--preset--color--on-night);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.6rem, 7vw, 2.1rem);
	font-weight: 600;
}
.site-header .is-menu-open .wp-block-navigation-item__content::before {
	background: rgba(244, 242, 233, 0.08);
}
.site-header .is-menu-open .wp-block-navigation-item__content:hover,
.site-header .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-bright);
}
.site-header .is-menu-open .current-menu-item > .wp-block-navigation-item__content::after {
	left: auto;
	right: -0.25em;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}
.site-header .is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 0.4rem 0.9rem !important;
	border: 0 !important;
	box-shadow: none;
	background: transparent !important;
}
.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.15rem;
	opacity: 0.85;
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--on-night);
}
/* Keyboard focus inside the deep green phone menu: gold, like the other deep green panels */
.site-header .is-menu-open :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--accent-bright);
}
.site-header .is-menu-open .wp-block-navigation-item {
	animation: sal-rise 520ms var(--sal-ease) backwards;
}
.site-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 50ms; }
.site-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 100ms; }
.site-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 150ms; }
.site-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 200ms; }
.site-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 250ms; }
.site-header .wp-block-navigation__responsive-container-open {
	padding: 0.55rem;
	border-radius: 50%;
	transition: background-color var(--sal-base) var(--sal-ease);
}
.site-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--subtle);
}

/* Tablets held upright (600 to 899 pixels wide) get the phone menu button too. WordPress shows the full
   menu from 600 pixels, but the logo and five links only fit on one line from about 900. */
@media (min-width: 600px) and (max-width: 899px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* =========================================================================
   5. Top of each page: gentle fade-in, and the home page banner
   ========================================================================= */

:is(.wp-block-post-content, main) > .alignfull:first-child .is-style-eyebrow {
	animation: sal-rise 700ms var(--sal-ease) 40ms backwards;
}
:is(.wp-block-post-content, main) > .alignfull:first-child h1 {
	animation: sal-rise 800ms var(--sal-ease) 110ms backwards;
}
:is(.wp-block-post-content, main) > .alignfull:first-child h1 + p {
	animation: sal-rise 800ms var(--sal-ease) 200ms backwards;
}
:is(.wp-block-post-content, main) > .alignfull:first-child .wp-block-buttons {
	animation: sal-rise 800ms var(--sal-ease) 290ms backwards;
}
:is(.wp-block-post-content, main) > .alignfull:first-child .salaamat-stats {
	animation: sal-rise 800ms var(--sal-ease) 380ms backwards;
}

.hero-home {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
/* The deep green brightens a touch towards the books */
.hero-home.is-style-dark-panel {
	background-image: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--wp--preset--color--on-night) 6%, transparent) 100%);
}
/* A warm glow (::before) and one faint star medallion (::after): a shamsa, like the rosette on the
   opening page of an illuminated manuscript. In the home banner both are centred on the fanned books;
   a banner without books keeps them at its right-hand side, away from the words. */
.hero-home::before,
.hero-home::after,
.hero-home .cover-fan::before,
.hero-home .cover-fan::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	aspect-ratio: 1;
	pointer-events: none;
}
.hero-home::before,
.hero-home .cover-fan::before {
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(210, 167, 70, 0.26), rgba(210, 167, 70, 0.07) 55%, rgba(210, 167, 70, 0));
}
.hero-home::after,
.hero-home .cover-fan::after {
	background-color: var(--wp--preset--color--accent-bright);
	-webkit-mask: var(--sal-medallion) center / contain no-repeat;
	mask: var(--sal-medallion) center / contain no-repeat;
	opacity: 0.1;
}
/* Banner without books */
.hero-home::before {
	right: -16rem;
	width: 62rem;
	transform: translateY(-50%);
}
.hero-home::after {
	right: -3rem;
	width: 46rem;
	transform: translateY(-50%);
}
/* Banner with the fanned books: the glow and the medallion are centred on the books */
.hero-home:has(.cover-fan)::before,
.hero-home:has(.cover-fan)::after {
	content: none;
}
.hero-home .cover-fan {
	position: relative;
}
.hero-home .cover-fan::before,
.hero-home .cover-fan::after {
	top: 48%; /* the middle book sits a little higher than the other two */
	left: 50%;
	transform: translate(-50%, -50%);
}
.hero-home .cover-fan::before {
	width: min(180%, 58rem);
}
/* The medallion is sized from the covers, so it frames the three books at every screen width */
.hero-home .cover-fan::after {
	width: calc(var(--sal-cover-w) * 3.4);
}
.hero-home h1 em {
	font-style: italic;
	font-weight: 500;
	color: var(--wp--preset--color--accent-bright);
}
.hero-home .salaamat-stats {
	margin-top: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--on-night);
	font-size: 0.95rem;
}
.hero-home .salaamat-stats__number {
	color: var(--wp--preset--color--accent-bright);
}
.hero-home .salaamat-stats__item--extra {
	opacity: 0.85;
}

/* Fanned book covers: they settle into place on load and spread apart on hover */
.cover-fan {
	--sal-cover-w: clamp(96px, 13vw, 190px);
	justify-content: center;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--40) 0;
}
.cover-fan > .wp-block-image {
	position: relative;
	margin: 0 !important;
	flex: 0 1 auto;
	border-radius: 3px 6px 6px 3px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12), 0 20px 34px -12px rgba(0, 0, 0, 0.55);
	transition: transform var(--sal-slow) var(--sal-spring), box-shadow var(--sal-slow) var(--sal-ease);
	animation: sal-drop 900ms var(--sal-ease) backwards;
}
.cover-fan > .wp-block-image img {
	display: block;
	width: var(--sal-cover-w);
	height: auto;
	aspect-ratio: 1 / 1.414;
	object-fit: cover;
	border-radius: inherit;
	box-shadow: none;
}
.cover-fan > .wp-block-image:nth-child(1) {
	transform: rotate(-7deg) translateX(22%);
	z-index: 1;
	animation-delay: 160ms;
}
.cover-fan > .wp-block-image:nth-child(2) {
	transform: translateY(-8%);
	z-index: 3;
	animation-delay: 300ms;
}
.cover-fan > .wp-block-image:nth-child(3) {
	transform: rotate(7deg) translateX(-22%);
	z-index: 2;
	animation-delay: 440ms;
}
.cover-fan:hover > .wp-block-image:nth-child(1) {
	transform: rotate(-11deg) translateX(8%) translateY(2%);
}
.cover-fan:hover > .wp-block-image:nth-child(2) {
	transform: translateY(-12%) scale(1.03);
}
.cover-fan:hover > .wp-block-image:nth-child(3) {
	transform: rotate(11deg) translateX(-8%) translateY(2%);
}

/* =========================================================================
   6. Books: covers look like real books everywhere
   ========================================================================= */

.kitaab-card .wp-block-post-featured-image,
.kitaab-cover-frame .wp-block-post-featured-image,
.cover-fan > .wp-block-image,
.wp-block-image.is-style-book-cover {
	position: relative;
	overflow: hidden;
	border-radius: 3px 6px 6px 3px;
}
/* Spine shading on the left edge */
.kitaab-card .wp-block-post-featured-image::after,
.kitaab-cover-frame .wp-block-post-featured-image::after,
.cover-fan > .wp-block-image::after,
.wp-block-image.is-style-book-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0, rgba(0, 0, 0, 0.06) 2.4%, rgba(255, 255, 255, 0.18) 3.6%, rgba(255, 255, 255, 0) 7.5%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0.06) 100%);
}
.kitaab-card .wp-block-post-featured-image img,
.kitaab-cover-frame .wp-block-post-featured-image img {
	border-radius: inherit;
}

/* Search results: the small cover keeps its 72px beside a long title instead of being squeezed. */
.search .wp-block-post-template .wp-block-post-featured-image {
	flex: none;
}

/* Image style: Book cover */
.wp-block-image.is-style-book-cover {
	width: fit-content;
	max-width: 100%;
	box-shadow: var(--sal-book-shadow);
}
.wp-block-image.is-style-book-cover img {
	display: block;
	border-radius: inherit;
}

/* =========================================================================
   7. Kitaab cards (Query Loop with the "kitaab-grid" class)
   ========================================================================= */

.kitaab-grid .wp-block-post-template {
	row-gap: var(--wp--preset--spacing--60);
}
.kitaab-card > * {
	margin-block-start: 0;
}
.kitaab-card > * + * {
	margin-block-start: 0.4rem;
}
.kitaab-card .wp-block-post-featured-image {
	margin-bottom: 0.6rem;
	background: var(--wp--preset--color--line);
	box-shadow: var(--sal-book-shadow);
	transform-origin: left center;
	transition: transform 520ms var(--sal-ease), box-shadow 520ms var(--sal-ease);
}
.kitaab-card:hover .wp-block-post-featured-image,
.kitaab-card:focus-within .wp-block-post-featured-image {
	transform: translateY(-6px) perspective(900px) rotateY(-8deg);
	box-shadow: var(--sal-book-shadow-lifted);
}
.kitaab-card .wp-block-post-featured-image img {
	transition: transform 700ms var(--sal-ease);
}
.kitaab-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.kitaab-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kitaab-card .wp-block-post-title a {
	transition: color var(--sal-base) var(--sal-ease);
}
.kitaab-card:hover .wp-block-post-title a,
.kitaab-card:focus-within .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
}
.kitaab-card .wp-block-post-terms {
	color: var(--wp--preset--color--muted);
}
/* The scholar's name under each cover is in the brand green (blue is kept for links in running text) */
.kitaab-card .taxonomy-scholar a {
	color: var(--wp--preset--color--accent);
}
/* A list of terms given its own text colour (like the scholar above a kitaab's title) keeps that colour for its links */
.wp-block-post-terms.has-text-color a {
	color: inherit;
}
.kitaab-card .taxonomy-kitaab_language a {
	display: inline-block;
	margin: 0.15em 0.15em 0 0;
	padding: 0.05em 0.6em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
	transition: border-color var(--sal-base) var(--sal-ease), color var(--sal-base) var(--sal-ease);
}
.kitaab-card .taxonomy-kitaab_language a:hover {
	border-color: var(--wp--preset--color--accent-bright);
	color: var(--wp--preset--color--accent);
	background-size: 100% 0;
}
.kitaab-card .taxonomy-kitaab_language .wp-block-post-terms__separator {
	display: none;
}

/* Single kitaab: the cover sits beside the text and follows it down the page */
.kitaab-cover-frame .wp-block-post-featured-image {
	box-shadow: var(--sal-book-shadow-lifted);
	background: var(--wp--preset--color--line);
	transform-origin: left center;
	transition: transform 600ms var(--sal-ease);
	animation: sal-rise 800ms var(--sal-ease) 80ms backwards;
}
.kitaab-cover-frame:hover .wp-block-post-featured-image {
	transform: perspective(1100px) rotateY(-6deg);
}
@media (min-width: 782px) {
	.kitaab-cover-frame {
		position: sticky;
		top: 7rem;
	}
}

/* =========================================================================
   8. Block style variations (registered in functions.php)
   ========================================================================= */

/* Group: Card */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--50);
}
/* Group: Soft green panel. (The style's internal name is still "pattern-panel" so older content keeps working;
   since 1.2 it is plain colour with no pattern.) */
.wp-block-group.is-style-pattern-panel,
.wp-block-cover.is-style-pattern-panel {
	background-color: var(--wp--preset--color--subtle);
}
/* Page banners: a faint star medallion at the right-hand edge, away from the words.
   The first Soft green panel at the top of a page is its banner; "page-banner" adds the medallion anywhere else. */
:is(.wp-block-post-content, main, .is-root-container) > .wp-block-group.is-style-pattern-panel:first-child,
.wp-block-group.page-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
:is(.wp-block-post-content, main, .is-root-container) > .wp-block-group.is-style-pattern-panel:first-child::after,
.wp-block-group.page-banner::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -7rem;
	width: 28rem;
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: var(--sal-medallion) center / contain no-repeat;
	mask: var(--sal-medallion) center / contain no-repeat;
	opacity: 0.08;
	transform: translateY(-50%);
	pointer-events: none;
}
/* Group: Soft blue panel. Buttons inside it turn blue unless they have their own colour. */
.wp-block-group.is-style-blue-panel {
	background-color: var(--wp--preset--color--subtle-blue);
	--sal-panel-accent: var(--wp--preset--color--blue);
	--sal-panel-accent-deep: color-mix(in srgb, var(--wp--preset--color--blue) 78%, #000);
}
.is-style-blue-panel .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) {
	background-color: var(--sal-panel-accent);
}
.is-style-blue-panel .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):is(:hover, :focus-visible) {
	background-color: var(--sal-panel-accent-deep);
}
.is-style-blue-panel .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	border-color: var(--sal-panel-accent);
}
.is-style-blue-panel .wp-block-button.is-style-outline > .wp-block-button__link::after {
	background: var(--sal-panel-accent);
}
/* Group: Deep green panel */
.wp-block-group.is-style-dark-panel {
	background-color: var(--wp--preset--color--night);
	color: var(--wp--preset--color--on-night);
}
.wp-block-group.is-style-dark-panel :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--on-night);
}
.wp-block-group.is-style-dark-panel a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-bright);
}

/* Heading: Eyebrow (small label above a heading) */
.wp-block-heading.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red, var(--wp--preset--color--accent));
}
.wp-block-heading.is-style-eyebrow::before {
	content: "";
	width: 2.25em;
	height: 2px;
	background: var(--wp--preset--color--accent-bright);
}
.wp-block-heading.is-style-eyebrow.has-text-align-center {
	justify-content: center;
}
.wp-block-heading.is-style-eyebrow.has-text-align-center::after {
	content: "";
	width: 2.25em;
	height: 2px;
	background: var(--wp--preset--color--accent-bright);
}
.is-style-dark-panel .wp-block-heading.is-style-eyebrow,
.wp-block-cover.is-dark .wp-block-heading.is-style-eyebrow {
	color: var(--wp--preset--color--accent-bright);
}

/* Separator: Ornament (a small eight-pointed star between two lines) */
.wp-block-separator.is-style-ornament {
	position: relative;
	height: 1.5rem;
	border: 0 !important;
	background: linear-gradient(currentColor, currentColor) left center / calc(50% - 1.5rem) 1px no-repeat,
		linear-gradient(currentColor, currentColor) right center / calc(50% - 1.5rem) 1px no-repeat;
	color: var(--wp--preset--color--accent-bright);
	opacity: 1;
	max-width: 22rem;
}
.wp-block-separator.is-style-ornament::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.1rem;
	height: 1.1rem;
	background: currentColor;
	-webkit-mask: url(assets/images/star.svg) center / contain no-repeat;
	mask: url(assets/images/star.svg) center / contain no-repeat;
}

/* Image: Arch (a tall window with a round top, like a mihrab, with a gold outline set behind it).
   The frame is 5:8, so a photo cropped to 5:8 shows whole; the round top is a half circle. */
.wp-block-image.is-style-arch {
	position: relative;
	isolation: isolate;
	max-width: 24rem;
	margin-inline: auto;
	margin-bottom: 1.6rem;
}
.wp-block-image.is-style-arch img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 8;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: 50% 50% 14px 14px / 31.25% 31.25% 14px 14px !important;
	box-shadow: 0 30px 50px -28px rgba(22, 38, 28, 0.5);
}
.wp-block-image.is-style-arch::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 1.1rem -1.1rem -1.1rem 1.1rem;
	border: 1.5px solid var(--wp--preset--color--accent-bright);
	border-radius: 50% 50% 16px 16px / 31.25% 31.25% 16px 16px;
	transition: transform 700ms var(--sal-ease);
}
.wp-block-image.is-style-arch::after {
	content: "";
	position: absolute;
	top: 1.1rem;
	left: calc(50% + 1.1rem);
	width: 1.5rem;
	height: 1.5rem;
	background: var(--wp--preset--color--accent-bright);
	-webkit-mask: url(assets/images/star.svg) center / contain no-repeat;
	mask: url(assets/images/star.svg) center / contain no-repeat;
	transform: translate(-50%, -50%);
	transition: transform 700ms var(--sal-ease);
}
.wp-block-image.is-style-arch:hover::before {
	transform: translate(-0.45rem, -0.45rem);
}
.wp-block-image.is-style-arch:hover::after {
	transform: translate(calc(-50% - 0.45rem), calc(-50% - 0.45rem)) rotate(45deg);
}
.wp-block-image.is-style-arch figcaption {
	margin-top: 1.6rem;
	text-align: center;
}

/* Quote: Hadith / verse (centred, gold frame) */
.wp-block-quote.is-style-hadith {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-top: 3px solid var(--wp--preset--color--accent-bright) !important;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) !important;
	text-align: center;
	font-style: normal;
}
.wp-block-quote.is-style-hadith :lang(ar) {
	font-size: 1.6em;
	line-height: 2;
	font-style: normal;
}
.wp-block-quote.is-style-hadith cite {
	display: block;
	margin-top: 1rem;
}

/* List: Ticks */
.wp-block-list.is-style-ticks {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-ticks li {
	position: relative;
	padding-left: 1.7em;
	margin-bottom: 0.5em;
}
.wp-block-list.is-style-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1em;
	height: 1em;
	background: var(--wp--preset--color--accent-bright);
	-webkit-mask: url(assets/images/star.svg) center / contain no-repeat;
	mask: url(assets/images/star.svg) center / contain no-repeat;
}

/* =========================================================================
   9. Cards you can click: resources, scholars, series
   ========================================================================= */

/* Resource cards: the whole card is the link. Each card has its own colour, taken from its icon. */
.resource-card {
	--sal-card-color: var(--wp--preset--color--accent);
	--sal-card-tint: var(--wp--preset--color--subtle);
	position: relative;
	transition:
		transform var(--sal-slow) var(--sal-ease),
		box-shadow var(--sal-slow) var(--sal-ease),
		border-color var(--sal-slow) var(--sal-ease);
}
.resource-card:has(img[src*="hifz"]),
.resource-card.card-blue {
	--sal-card-color: var(--wp--preset--color--blue);
	--sal-card-tint: var(--wp--preset--color--subtle-blue);
}
.resource-card:has(img[src*="audio"]),
.resource-card.card-red {
	--sal-card-color: var(--wp--preset--color--red);
	--sal-card-tint: color-mix(in srgb, var(--wp--preset--color--red) 9%, var(--wp--preset--color--surface));
}
.resource-card.card-green {
	--sal-card-color: var(--wp--preset--color--accent);
	--sal-card-tint: var(--wp--preset--color--subtle);
}
.resource-card.card-gold {
	--sal-card-color: var(--wp--preset--color--contrast);
	--sal-card-tint: color-mix(in srgb, var(--wp--preset--color--accent-bright) 22%, var(--wp--preset--color--surface));
}
.resource-card:hover,
.resource-card:focus-within {
	transform: translateY(-5px);
	border-color: color-mix(in srgb, var(--sal-card-color) 40%, var(--wp--preset--color--line));
	box-shadow: var(--wp--preset--shadow--lifted);
}
.resource-card .resource-card__icon {
	display: grid;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	margin: 0;
	border-radius: 50%;
	background: var(--sal-card-tint);
	transition: transform var(--sal-slow) var(--sal-spring), background-color var(--sal-slow) var(--sal-ease);
}
.resource-card .resource-card__icon img {
	width: 2rem !important;
	height: auto;
	border-radius: 0;
}
.resource-card:hover .resource-card__icon {
	background: color-mix(in srgb, var(--sal-card-color) 14%, var(--sal-card-tint));
	transform: rotate(-8deg) scale(1.08);
}
.resource-card h3 {
	transition: color var(--sal-base) var(--sal-ease);
}
.resource-card h3 a {
	color: inherit;
	text-decoration: none;
}
.resource-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.resource-card h3::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.4em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask: var(--sal-arrow) center / contain no-repeat;
	mask: var(--sal-arrow) center / contain no-repeat;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--sal-base) var(--sal-ease), transform var(--sal-base) var(--sal-spring);
}
.resource-card:hover h3,
.resource-card:focus-within h3 {
	color: var(--sal-card-color);
}
.resource-card:hover h3::after,
.resource-card:focus-within h3::after {
	opacity: 1;
	transform: none;
}
.resource-card h3 a:focus-visible {
	outline: none;
}
.resource-card:has(a:focus-visible) {
	outline: 2px solid var(--sal-focus);
	outline-offset: 4px;
}

/* Scholar and series lists: each card is one link */
.wp-block-term-template > li {
	position: relative;
	list-style: none;
}
.wp-block-term-template .is-style-card {
	height: 100%;
	box-sizing: border-box;
	transition:
		transform var(--sal-slow) var(--sal-ease),
		box-shadow var(--sal-slow) var(--sal-ease),
		border-color var(--sal-slow) var(--sal-ease);
}
.wp-block-term-template > li:hover .is-style-card,
.wp-block-term-template > li:focus-within .is-style-card {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-bright) 55%, var(--wp--preset--color--line));
	box-shadow: var(--wp--preset--shadow--lifted);
}
.wp-block-term-template .wp-block-term-name a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: color var(--sal-base) var(--sal-ease);
}
.wp-block-term-template .wp-block-term-name a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.wp-block-term-template > li:hover .wp-block-term-name a,
.wp-block-term-template > li:focus-within .wp-block-term-name a {
	color: var(--wp--preset--color--accent);
}
.wp-block-term-count {
	min-width: 2.2em;
	padding: 0.1em 0.65em;
	border-radius: 999px;
	background: var(--wp--preset--color--subtle);
	text-align: center;
	font-weight: 600;
	transition: background-color var(--sal-base) var(--sal-ease), color var(--sal-base) var(--sal-ease);
}
.wp-block-term-template > li:hover .wp-block-term-count {
	background: var(--wp--preset--color--accent-bright);
	color: var(--wp--preset--color--contrast);
}

/* =========================================================================
   10. Bands and sections
   ========================================================================= */

/* Call-to-action band (Soft gold since 1.2). The class stays for older content; it no longer adds a pattern. */
.cta-band {
	position: relative;
}

/* Resource rows (PDF sheets, audio) */
.resource-row {
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.resource-row:last-child {
	border-bottom: 0;
}
.resource-row .wp-block-image img {
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform var(--sal-slow) var(--sal-ease), box-shadow var(--sal-slow) var(--sal-ease);
}
.resource-row:hover .wp-block-image img {
	transform: translateY(-3px) rotate(-1.5deg);
	box-shadow: var(--wp--preset--shadow--lifted);
}
.wp-block-audio audio {
	width: 100%;
}

/* Breadcrumbs */
.wp-block-breadcrumbs {
	color: var(--wp--preset--color--muted);
}
.wp-block-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}
.wp-block-breadcrumbs a:hover {
	color: var(--wp--preset--color--accent);
}

/* =========================================================================
   11. Forms (Contact Form 7, Mailchimp)
   ========================================================================= */

.wpcf7 form,
.mc4wp-form {
	display: grid;
	gap: 1rem;
}
.wpcf7 label,
.mc4wp-form label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
}
.wpcf7 input:where([type="text"], [type="email"], [type="tel"], [type="url"]),
.wpcf7 select,
.wpcf7 textarea,
.mc4wp-form input[type="email"],
.mc4wp-form input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	transition: border-color var(--sal-base) var(--sal-ease), box-shadow var(--sal-base) var(--sal-ease);
}
.wpcf7 :is(input, select, textarea):hover,
.mc4wp-form input:hover {
	border-color: var(--wp--preset--color--accent-bright);
}
/* Fields (not the send buttons) keep a highlight while you type in them */
.wpcf7 :is(input:not([type="submit"]), select, textarea):focus,
.mc4wp-form input:not([type="submit"]):focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sal-focus) 22%, transparent);
}
.wpcf7 textarea {
	min-height: 10rem;
}
.wpcf7 input[type="submit"],
.mc4wp-form input[type="submit"] {
	justify-self: start;
	padding: 0.75em 1.75em;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: transform var(--sal-base) var(--sal-ease), box-shadow var(--sal-base) var(--sal-ease), background-color var(--sal-base) var(--sal-ease);
}
.wpcf7 input[type="submit"]:hover,
.mc4wp-form input[type="submit"]:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 78%, #000);
	transform: translateY(-2px);
	box-shadow: 0 14px 24px -14px rgba(22, 38, 28, 0.8);
}
.wpcf7 input[type="submit"]:active,
.mc4wp-form input[type="submit"]:active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
}
.wpcf7 .wpcf7-not-valid-tip {
	font-size: 0.875rem;
	color: var(--wp--preset--color--red, #A5352B);
}
.wpcf7 .wpcf7-response-output {
	margin: 0 !important;
	border-radius: var(--wp--custom--radius--small);
}
.wpcf7 .form-hint {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 400;
}

/* =========================================================================
   12. Footer
   ========================================================================= */

.site-footer a {
	color: inherit;
}
.site-footer__logo {
	margin-bottom: 1.25rem;
}
.site-footer__logo img {
	display: block;
	height: auto;
	transition: opacity var(--sal-base) var(--sal-ease);
}
.site-footer__logo a:hover img {
	opacity: 0.85;
}
.site-footer .footer-links {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.site-footer .footer-links li {
	margin: 0 0 0.45em;
}
/* Footer links: a short gold line draws in and the word steps forward */
.site-footer .footer-links a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	background: none;
	transition: color var(--sal-base) var(--sal-ease);
}
.site-footer .footer-links a::before {
	content: "";
	width: 0;
	height: 1.5px;
	margin-right: 0;
	background: var(--wp--preset--color--accent-bright);
	transition: width var(--sal-base) var(--sal-ease), margin-right var(--sal-base) var(--sal-ease);
}
.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
	color: var(--wp--preset--color--accent-bright);
}
.site-footer .footer-links a:hover::before,
.site-footer .footer-links a:focus-visible::before {
	width: 0.9em;
	margin-right: 0.5em;
}
.site-footer .footer-bottom {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(244, 242, 233, 0.18);
	opacity: 0.9;
}
.site-footer .footer-bottom a {
	text-decoration: none;
}
.site-footer .back-to-top a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	background: none;
	transition: color var(--sal-base) var(--sal-ease);
}
.site-footer .back-to-top a::after {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--sal-arrow-up) center / contain no-repeat;
	mask: var(--sal-arrow-up) center / contain no-repeat;
	transition: transform var(--sal-base) var(--sal-spring);
}
.site-footer .back-to-top a:hover {
	color: var(--wp--preset--color--accent-bright);
}
.site-footer .back-to-top a:hover::after {
	transform: translateY(-3px);
}

/* =========================================================================
   13. Sections appear gently as you scroll (assets/js/salaamat.js adds the classes)
   ========================================================================= */

.sal-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 800ms var(--sal-ease), transform 800ms var(--sal-ease);
	transition-delay: var(--sal-delay, 0ms);
}
.sal-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media print {
	.sal-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Smooth cross-fade between pages in browsers that support it */
@view-transition {
	navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 260ms;
}

/* =========================================================================
   14. Layout helpers
   ========================================================================= */

/* Sections sit flush against each other and against the header and footer */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}
.wp-block-post-content > .alignfull:first-child,
.wp-block-post-content > .alignfull + .alignfull,
main > .alignfull:first-child {
	margin-block-start: 0;
}
.wp-block-post-content > .alignfull:last-child {
	margin-block-end: 0;
}

/* Keep the footer at the bottom on short pages */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Library filter button stays on one line; related-kitaab cards match the grid cards */
.salaamat-filters .salaamat-button {
	white-space: nowrap;
}
.salaamat-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
}
.salaamat-card__meta {
	color: var(--wp--preset--color--accent);
}

/* Read and Download buttons match each other */
.salaamat-downloads .salaamat-button {
	font-size: 0.95rem;
	padding: 0.6em 1.15em;
}

/* Small screens */
@media (max-width: 600px) {
	.salaamat-stats__item--extra {
		flex-basis: 100%;
	}
	.salaamat-stats__item--extra::before {
		display: none;
	}
	.kitaab-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
	}
	.is-urdu.has-x-large-font-size,
	.is-arabic.has-x-large-font-size {
		font-size: 1.3rem !important;
	}
	.wp-block-image.is-style-arch {
		max-width: 19rem;
	}
	.hero-home::before {
		right: -30rem;
		top: 70%;
	}
}

/* Tablets and phones: the columns stack. The books get a little more room so their medallion fits
   between the words above and the bottom of the banner; a banner without books keeps its medallion low
   and centred; the page banner medallion tucks into the top corner, clear of the title. */
@media (max-width: 781px) {
	/* A kitaab's cover above its text: book-sized, not the full width of a tablet. */
	.kitaab-cover-frame {
		max-width: 17rem;
		margin-inline: auto;
	}
	.hero-home .cover-fan {
		padding-block: clamp(2.25rem, 10vw, 3.5rem);
	}
	.hero-home::after {
		top: auto;
		right: 50%;
		bottom: -7rem;
		width: 30rem;
		transform: translateX(50%);
	}
	:is(.wp-block-post-content, main, .is-root-container) > .wp-block-group.is-style-pattern-panel:first-child::after,
	.wp-block-group.page-banner::after {
		top: -5rem;
		right: -7rem;
		width: 17rem;
		opacity: 0.07;
		transform: none;
	}
}

/* =========================================================================
   15. Reduced motion: everything stays still
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible,
	.kitaab-card:hover .wp-block-post-featured-image,
	.kitaab-card:hover .wp-block-post-featured-image img,
	.kitaab-cover-frame:hover .wp-block-post-featured-image,
	.resource-card:hover,
	.resource-card:hover .resource-card__icon,
	.wp-block-term-template > li:hover .is-style-card,
	.resource-row:hover .wp-block-image img {
		transform: none;
	}
	.sal-reveal {
		opacity: 1;
		transform: none;
	}
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------- */
/* Audio (1.3): recording and course pages. The player, lesson lists and   */
/* library are styled by the Salaamat Kitaabs plugin (assets/audio.css).   */
/* ---------------------------------------------------------------------- */

/* Recording page: the course picture on the left, square with soft corners. */
.audio-artwork img {
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 2px 4px rgba(22, 38, 28, 0.12), 0 24px 44px -24px rgba(22, 38, 28, 0.55);
}
@media (max-width: 781px) {
	.audio-layout__art {
		max-width: 12rem;
	}
}

/* Course page banner: picture and title side by side; on phones the picture is smaller and on top. */
.course-banner .wp-block-breadcrumbs {
	margin-bottom: 0;
}
.course-banner .wp-block-query-title {
	margin-top: var(--wp--preset--spacing--20);
}
@media (max-width: 781px) {
	.course-banner__art {
		max-width: 14rem;
	}
}

/* Search results: recordings show their course picture square (kitaab covers stay book-shaped). */
.search .type-audio .wp-block-post-featured-image,
.search .type-audio .wp-block-post-featured-image img {
	aspect-ratio: 1 !important;
	height: auto !important;
}


/* =====================================================================
   Salaamat theme 1.3.1 (patch). Paste at the very END of style.css.
   Nothing above it needs deleting: these rules win by coming later.

   A. Phone menu: shows every item even after the page has scrolled.
   B. Home banner books: any number from 1 to 8, same animation.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. Header frosted glass
   backdrop-filter on the header made it the "container" of the full-screen
   phone menu, which is position: fixed. The menu shrank to the header's
   height, so only "Home" showed once the page had scrolled. The glass now
   lives on a background layer (::before), so the header itself has no
   backdrop-filter and the menu can cover the whole screen again.
   --------------------------------------------------------------------- */
.site-header {
	position: relative;
	isolation: isolate;
}
@supports (backdrop-filter: blur(1px)) {
	html.is-scrolled .site-header.has-base-background-color {
		background-color: transparent !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	html.is-scrolled .site-header.has-base-background-color::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
		-webkit-backdrop-filter: saturate(160%) blur(14px);
		backdrop-filter: saturate(160%) blur(14px);
	}
}

/* ---------------------------------------------------------------------
   B. Cover fan: add or remove books freely
   Put Image blocks directly inside the "cover-fan" group (1 to 8 of them).
   Each book works out its own tilt, overlap, height, layering and
   drop-in delay from its position (--i) and the number of books (--n).
   With three books the result is the same as before.
   --------------------------------------------------------------------- */

/* How many books (the group counts its own books; "of .wp-block-image" skips the editor's + button). */
.cover-fan { --n: 3; }
.cover-fan:has(> .wp-block-image:nth-child(1 of .wp-block-image):nth-last-child(1 of .wp-block-image)) { --n: 1; }
.cover-fan:has(> .wp-block-image:nth-child(2 of .wp-block-image):nth-last-child(1 of .wp-block-image)) { --n: 2; }
.cover-fan:has(> .wp-block-image:nth-child(3 of .wp-block-image):nth-last-child(1 of .wp-block-image)) { --n: 3; }
.cover-fan:has(> .wp-block-image:nth-child(4 of .wp-block-image):nth-last-child(1 of .wp-block-image)) { --n: 4; }
.cover-fan:has(> .wp-block-image:nth-child(5 of .wp-block-image):nth-last-child(1 of .wp-block-image)) { --n: 5; }
.cover-fan:has(> .wp-block-image:nth-child(6 of .wp-block-image):nth-last-child(1 of .wp-block-image)) { --n: 6; }
.cover-fan:has(> .wp-block-image:nth-child(7 of .wp-block-image):nth-last-child(1 of .wp-block-image)) { --n: 7; }
.cover-fan:has(> .wp-block-image:nth-child(8 of .wp-block-image):nth-last-child(1 of .wp-block-image)) { --n: 8; }

/* Book size: the whole fan keeps about the width three books had (2.56 is
   three books' width once they overlap), so more books means slightly
   smaller books. One or two books stay at the three-book size. */
.cover-fan {
	--sal-cover-w: clamp(
		calc(96px * 2.56 / max(2.56, var(--n) * 0.78 + 0.22)),
		calc(13vw * 2.56 / max(2.56, var(--n) * 0.78 + 0.22)),
		calc(190px * 2.56 / max(2.56, var(--n) * 0.78 + 0.22))
	);
}

/* The star medallion behind the books grows with the number of books. */
.hero-home .cover-fan::after {
	width: calc(var(--sal-cover-w) * (var(--n) * 0.8 + 1));
}

/* Each book's position (1st, 2nd, ...). */
.cover-fan > .wp-block-image:nth-child(1 of .wp-block-image) { --i: 1; }
.cover-fan > .wp-block-image:nth-child(2 of .wp-block-image) { --i: 2; }
.cover-fan > .wp-block-image:nth-child(3 of .wp-block-image) { --i: 3; }
.cover-fan > .wp-block-image:nth-child(4 of .wp-block-image) { --i: 4; }
.cover-fan > .wp-block-image:nth-child(5 of .wp-block-image) { --i: 5; }
.cover-fan > .wp-block-image:nth-child(6 of .wp-block-image) { --i: 6; }
.cover-fan > .wp-block-image:nth-child(7 of .wp-block-image) { --i: 7; }
.cover-fan > .wp-block-image:nth-child(8 of .wp-block-image) { --i: 8; }

/* The rules for every book.
   --o: distance from the middle book (-1, 0, 1 for three books)
   --c: 1 for the middle book, falling to 0 for the outer ones */
.cover-fan > .wp-block-image:nth-child(n) {
	--o: calc(var(--i, 2) - (var(--n) + 1) / 2);
	--c: calc(1 - var(--o) * var(--o) / max(1, (var(--n) - 1) * (var(--n) - 1) / 4));
	transform:
		rotate(calc(var(--o) * 21deg / max(3, var(--n))))
		translate(calc(var(--o) * -22%), calc(var(--c) * -8%));
	z-index: calc(20 - abs(var(--o)) * 2);
	animation-delay: calc(20ms + var(--i, 2) * 140ms);
}

/* On hover the fan opens a little wider and the middle book lifts. */
.cover-fan:hover > .wp-block-image:nth-child(n) {
	transform:
		rotate(calc(var(--o) * 21deg / max(3, var(--n)) * 11 / 7))
		translate(calc(var(--o) * -8%), calc(2% - 14% * var(--c)))
		scale(calc(1 + 0.03 * var(--c)));
}

/* ---------------------------------------------------------------------
   C. Cover fan: simple choices in the editor (theme 1.3.4)

   Click any book in the home banner (or the row around them). The
   right-hand panel "Book fan" has:
     Look     Fan (automatic) / Arch / Row / Stack
     Spacing  Tighter / Normal / Wider
     Add books, and for the selected book "Bring to front".
   The choices are saved as ordinary CSS classes on the blocks
   (assets/js/cover-fan-editor.js writes them), so nothing breaks if the
   editor script is missing:
     row:  fan-look-arch, fan-look-row, fan-look-stack,
           fan-space-tight, fan-space-wide
     book: book-front
   No class = the automatic fan.
   --------------------------------------------------------------------- */

.cover-fan {
	/* arch height, as a % of a book's height: 8 with three books, +6 for each extra book, at most 34 */
	--auto-arch: min(34, calc(8 + (var(--n) - 3) * 6));
	--arch: var(--auto-arch);
	/* how far the outer books lean (1 = normal); a taller arch leans a little more */
	--spread: calc(1 + max(0, var(--arch) - 8) / 50);
	/* how much each book slides over its neighbour, as a % of a book's width */
	--look-lap: 10;
	--space-lap: 0;
	--lap: calc(var(--look-lap) + var(--space-lap));
}
/* The books sit right next to each other and the overlap above does the spacing, so it looks the
   same on every screen and with any number of books (the row's own block gap is not used). */
.wp-block-group.cover-fan {
	gap: 0;
}

/* Look */
.cover-fan.fan-look-arch {
	--arch: calc(var(--auto-arch) + 14);
}
.cover-fan.fan-look-row {
	--arch: 0;
	--spread: 0;
	--look-lap: -6;
}
.cover-fan.fan-look-stack {
	--arch: 3;
	--spread: 0.45;
	--look-lap: 30;
}

/* Spacing */
.cover-fan.fan-space-tight {
	--space-lap: 14;
}
.cover-fan.fan-space-wide {
	--space-lap: -12;
}

/* Book size: the whole fan keeps about the width three books have, so more books, or more space
   between them, means slightly smaller books. --units is the fan's width counted in books. */
.cover-fan {
	--units: max(2.8, calc(var(--n) - (var(--n) - 1) * var(--lap) / 100));
	--sal-cover-w: clamp(
		calc(96px * 2.8 / var(--units)),
		calc(13vw * 2.8 / var(--units)),
		calc(190px * 2.8 / var(--units))
	);
}

/* Room above the books for a taller arch, so it never touches the text above. */
.cover-fan {
	padding-top: calc(var(--wp--preset--spacing--40) + var(--sal-cover-w) * 1.414 * max(0, var(--arch) - 8) / 100);
}

/* Each book's position from the choices above. */
.cover-fan > .wp-block-image:nth-child(n) {
	transform:
		rotate(calc(var(--o) * 21deg / max(3, var(--n)) * var(--spread)))
		translate(calc(var(--o) * var(--lap) * -1%), calc(var(--c) * var(--arch) * -1%));
}
/* On hover the books open out a little and the middle one lifts. */
.cover-fan:hover > .wp-block-image:nth-child(n) {
	transform:
		rotate(calc(var(--o) * 21deg / max(3, var(--n)) * var(--spread) * 11 / 7))
		translate(calc(var(--o) * (var(--lap) - 14) * -1%), calc(2% - (var(--arch) + 6) * 1% * var(--c)))
		scale(calc(1 + 0.03 * var(--c)));
}

/* "Bring to front" */
.cover-fan > .wp-block-image.book-front:nth-child(n) {
	z-index: 30;
}