/*
Theme Name: Al Falak
Theme URI: https://alfalakoman.com/
Description: WordPress rebuild of the Al Falak United Investment LLC React site. Ships the site's compiled Tailwind stylesheet and reproduces every section as a PHP template backed by editable WordPress content.
Author: Al Falak
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: alfalak
*/

/*
 * The visual layer lives in assets/css/app.css (the compiled Tailwind build the
 * React site shipped). This file exists for the theme header and for small
 * WordPress-only corrections.
 */

/* The admin bar is fixed-position and would sit on top of the top bar. */
body.admin-bar .af-topbar { position: relative; }

/* WordPress editor output inside CMS page content. */
.cms-content-box > *:first-child { margin-top: 0; }
.cms-content-box img { max-width: 100%; height: auto; }

/* ==========================================================================
   Rules the React components declared in inline <style> blocks, so they are
   not part of the compiled Tailwind bundle.
   ========================================================================== */

/* --- Hero slider -------------------------------------------------------- */
.hero-swiper-react .swiper-pagination {
	position: absolute !important;
	bottom: 24px !important;
	left: 24px !important;
	right: auto !important;
	width: auto !important;
	display: flex !important;
	align-items: center;
	gap: 6px;
	z-index: 20;
}

@media (min-width: 1024px) {
	.hero-swiper-react .swiper-pagination {
		bottom: 48px !important;
		left: 64px !important;
	}
}

.hero-swiper-react .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cbd5e1;
	opacity: 1;
	margin: 0 !important;
	transition: all 0.3s ease;
}

.hero-swiper-react .swiper-pagination-bullet-active {
	background: #051D67;
	transform: scale(1.2);
}

@keyframes heroPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.04); }
}

.hero-slide-image { animation: heroPulse 12s ease-in-out infinite; }

/* --- Materials slider --------------------------------------------------- */
.materials-swiper {
	padding: 1rem 1rem 4rem 1rem !important;
	margin: -1rem -1rem 0 -1rem;
}

.materials-swiper .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: rgba(255, 255, 255, 0.4);
	opacity: 1;
	margin: 0 6px !important;
	transition: all 0.3s ease;
}

.materials-swiper .swiper-pagination-bullet-active {
	background: #fff;
	transform: scale(1.2);
}

/* --- Testimonials slider ------------------------------------------------ */
.testimonial-pagination { bottom: 0 !important; }

/* --- Line clamps used by the card grids --------------------------------- */
.af-clamp-1,
.af-clamp-2,
.af-clamp-3,
.af-clamp-4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.af-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.af-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.af-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.af-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

/* The clamped blocks hold editor markup, so the paragraphs must not add
   margins that break the clamp height. */
.af-clamp-1 > p:last-child,
.af-clamp-2 > p:last-child,
.af-clamp-3 > p:last-child,
.af-clamp-4 > p:last-child { margin-bottom: 0; }

/* --- Editor output inside CMS pages and news articles ------------------- */
.af-prose p { margin: 0 0 1.25em; }
.af-prose p:last-child { margin-bottom: 0; }
.af-prose h2 { font-size: 1.875rem; font-weight: 700; color: #051D67; margin: 2em 0 0.6em; }
.af-prose h3 { font-size: 1.5rem; font-weight: 700; color: #021623; margin: 1.8em 0 0.5em; }
.af-prose h4 { font-size: 1.25rem; font-weight: 700; color: #021623; margin: 1.6em 0 0.5em; }
.af-prose ul,
.af-prose ol { margin: 0 0 1.25em 1.25em; }
.af-prose ul { list-style: disc; }
.af-prose ol { list-style: decimal; }
.af-prose li { margin-bottom: 0.5em; }
.af-prose a { color: #0082F7; text-decoration: underline; }
.af-prose blockquote {
	border-left: 4px solid #0082F7;
	padding-left: 1.25rem;
	margin: 1.5em 0;
	color: #021623;
	font-style: italic;
}
.af-prose img { border-radius: 24px; max-width: 100%; height: auto; }
.af-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
.af-prose th,
.af-prose td { border: 1px solid #e5e7eb; padding: 0.75rem; text-align: left; }

/* --- Pagination --------------------------------------------------------- */
.af-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 9999px;
	background: #fff;
	color: #6a7282;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.af-pagination a.page-numbers:hover {
	background: #f8f9fa;
	color: #051D67;
}

.af-pagination .page-numbers.current {
	background: #0082F7;
	color: #fff;
	transform: scale(1.05);
}

/* ==========================================================================
   Reveal-animation safety nets.
   The reveal classes start at opacity 0, so anything that stops the observer
   from running would hide the page. Show everything when JavaScript is off,
   and skip the motion entirely for visitors who ask for reduced motion.
   ========================================================================== */
html.no-js .fade-up,
html.no-js .fade-left,
html.no-js .fade-right,
html.no-js .scale-up,
html.no-js .blur-in,
html.no-js .stagger-children > * {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.fade-up,
	.fade-left,
	.fade-right,
	.scale-up,
	.blur-in,
	.stagger-children > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}

	.marquee-content,
	.hero-slide-image,
	.play-btn-wrapper::before {
		animation: none !important;
	}
}