/* =========================================================================
   MR AFF WELFARE FOUNDATION — MAIN STYLESHEET
   =========================================================================
   Table of Contents
   1.  Design Tokens (CSS Custom Properties)
   2.  Font Faces (self-hostable — see note below)
   3.  Reset / Base
   4.  Layout & Utility Helpers
   5.  Accessibility Helpers (skip-link, screen-reader-text)
   6.  Buttons
   7.  Top Bar (contact info + language switcher)
   8.  Site Header / Primary Navigation (sticky + mobile)
   9.  Footer
   10. Scroll-In Reveal (global [data-animate] utility + card stagger)
   11. Generic Content / Loop Cards (index, archive, search, 404)
   12. RTL (Urdu) Overrides
   13. Reduced Motion
   =========================================================================
   NOTE ON SCOPE: This stylesheet covers the project foundation — global
   tokens, header, footer, and generic post/page chrome — plus the
   [data-animate] scroll-reveal utility, which is shared by the homepage
   AND the About Us page and so lives here rather than in either page's
   own stylesheet. Homepage section styling (hero, donor transparency,
   services, about, partners) lives in its own /assets/css/front-page.css,
   enqueued only on the front page, so every other template stays exactly
   as light as it was before.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------- */
:root {

	/* Color — named per the token system agreed for this brand.
	   Deep teal + marigold gold reflects a bilingual South-Asian relief
	   & welfare organization: teal reads as trust/stability, marigold as
	   warmth and giving, rather than a generic cream/terracotta default. */
	--color-ink:          #1B2420; /* primary text */
	--color-canvas:       #FBFAF6; /* page background, warm neutral paper */
	--color-teal-900:     #0B332B; /* deepest teal, header/footer base */
	--color-teal-700:     #0F4C42; /* primary brand teal */
	--color-teal-100:     #E4ECE6; /* soft sage tint, section backgrounds */
	--color-gold-500:     #E2A73B; /* marigold accent — CTAs, active states */
	--color-gold-700:     #C98A1F; /* marigold hover/pressed */
	--color-clay-600:     #B5533C; /* rare alert/urgent accent, used sparingly */
	--color-line:         #DDE3DD; /* hairline borders on light backgrounds */
	--color-white:        #FFFFFF;

	/* Typography — a warm humanist display serif paired with a clean
	   grotesque body face and a mono utility face for labels/meta. */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Urdu-capable stacks, applied automatically under [dir="rtl"] */
	--font-display-ur: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
	--font-body-ur:    'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

	/* Type scale */
	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-md:   1.125rem;
	--text-lg:   1.375rem;
	--text-xl:   1.75rem;
	--text-2xl:  2.25rem;
	--text-3xl:  3rem;

	/* Spacing scale */
	--space-2xs: 0.25rem;
	--space-xs:  0.5rem;
	--space-sm:  0.75rem;
	--space-md:  1rem;
	--space-lg:  1.5rem;
	--space-xl:  2.5rem;
	--space-2xl: 4rem;

	/* Layout */
	--container-max: 1200px;
	--container-pad: clamp(1.25rem, 1rem + 2vw, 2.5rem);
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-pill: 999px;

	/* Header heights — used by JS for scroll offset + sticky calc */
	--topbar-height: 40px;
	--header-height: 84px;
	--header-height-condensed: 64px;

	/* Motion */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;

	/* Z-index scale */
	--z-header: 100;
	--z-mobile-nav: 90;
}


/* -------------------------------------------------------------------------
   2. FONT FACES
   ---------------------------------------------------------------------- */
/*
 * Production note: for GDPR / privacy compliance and performance, self-host
 * these font files rather than calling Google Fonts at runtime. Drop the
 * .woff2 files into /assets/fonts/ and uncomment the @font-face blocks
 * below, or enqueue a Google Fonts <link> from functions.php if remote
 * loading is acceptable for this deployment. Left as a deliberate TODO for
 * the asset/content phase — system-font fallbacks above keep the site fully
 * usable in the meantime.
 *
 * @font-face {
 *   font-family: 'Fraunces';
 *   src: url('../fonts/fraunces-variable.woff2') format('woff2-variations');
 *   font-weight: 300 700;
 *   font-display: swap;
 * }
 * @font-face {
 *   font-family: 'Work Sans';
 *   src: url('../fonts/work-sans-variable.woff2') format('woff2-variations');
 *   font-weight: 400 700;
 *   font-display: swap;
 * }
 */


/* -------------------------------------------------------------------------
   3. RESET / BASE
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-ink);
	background-color: var(--color-canvas);
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	line-height: 1.2;
	margin: 0 0 var(--space-md);
	color: var(--color-teal-900);
	font-weight: 600;
}

p {
	margin: 0 0 var(--space-md);
}

a {
	color: var(--color-teal-700);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

a:hover,
a:focus {
	color: var(--color-gold-700);
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

/* Consistent, visible focus ring across the theme (accessibility floor). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--color-gold-500);
	outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   4. LAYOUT & UTILITY HELPERS
   ---------------------------------------------------------------------- */
.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.site-main {
	padding-block: var(--space-2xl);
	min-height: 40vh;
}


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

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 10000;
	background: var(--color-teal-900);
	color: var(--color-white);
	padding: var(--space-sm) var(--space-md);
	border-radius: 0 0 var(--radius-sm) 0;
	transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
	top: 0;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	position: fixed;
}


/* -------------------------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	padding: 0.65rem 1.5rem;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	transition: background-color var(--duration-fast) var(--ease-standard),
	            color var(--duration-fast) var(--ease-standard),
	            border-color var(--duration-fast) var(--ease-standard),
	            transform var(--duration-fast) var(--ease-standard);
}

.btn--donate {
	background-color: var(--color-gold-500);
	color: var(--color-teal-900);
}

.btn--donate:hover,
.btn--donate:focus {
	background-color: var(--color-gold-700);
	color: var(--color-white);
	transform: translateY(-1px);
}


/* -------------------------------------------------------------------------
   7. TOP BAR
   ---------------------------------------------------------------------- */
.topbar {
	background-color: var(--color-teal-900);
	color: var(--color-teal-100);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.03em;
	height: var(--topbar-height);
	display: flex;
	align-items: center;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--space-md);
}

.topbar-contact {
	display: flex;
	gap: var(--space-md);
}

.topbar-contact__item {
	color: var(--color-teal-100);
	opacity: 0.9;
}

.topbar-contact__item:hover,
.topbar-contact__item:focus {
	color: var(--color-gold-500);
	opacity: 1;
}

/* Language switcher — segmented pill toggle (EN | اردو), the one
   deliberately "signature" detail on this otherwise restrained header. */
.lang-switcher__list {
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-pill);
	padding: 2px;
	gap: 2px;
}

.lang-switcher__link {
	display: inline-block;
	padding: 3px 12px;
	border-radius: var(--radius-pill);
	color: var(--color-teal-100);
	font-size: var(--text-xs);
	transition: background-color var(--duration-fast) var(--ease-standard),
	            color var(--duration-fast) var(--ease-standard);
}

.lang-switcher__link.is-active {
	background-color: var(--color-gold-500);
	color: var(--color-teal-900);
	font-weight: 700;
}

.lang-switcher__link:not(.is-active):hover,
.lang-switcher__link:not(.is-active):focus {
	color: var(--color-gold-500);
}


/* -------------------------------------------------------------------------
   8. SITE HEADER / PRIMARY NAVIGATION
   ---------------------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: var(--z-header);
	background-color: var(--color-white);
	box-shadow: 0 1px 0 var(--color-line);
}

.has-sticky-header .site-header__nav-wrap {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background-color: var(--color-white);
	transition: box-shadow var(--duration-base) var(--ease-standard),
	            padding var(--duration-base) var(--ease-standard);
}

/* JS toggles this class once the user scrolls past the top bar, so the
   sticky nav condenses slightly for more screen real estate. */
.site-header__nav-wrap.is-condensed {
	box-shadow: 0 2px 12px rgba(11, 51, 43, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	min-height: var(--header-height);
	transition: min-height var(--duration-base) var(--ease-standard);
}

.is-condensed .site-header__inner {
	min-height: var(--header-height-condensed);
}

.site-branding {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.custom-logo-link img {
	max-height: 60px;
	width: auto;
	transition: max-height var(--duration-base) var(--ease-standard);
}

.is-condensed .custom-logo-link img {
	max-height: 46px;
}

.site-title {
	margin: 0;
	font-size: var(--text-lg);
	font-family: var(--font-display);
}

.site-title a {
	color: var(--color-teal-900);
}

.site-description {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-ink);
	opacity: 0.7;
}

/* --- Primary nav layout --- */
.main-navigation {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.primary-menu-container {
	display: none; /* mobile-first: hidden until menu-toggle opens it */
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.primary-menu a {
	display: inline-block;
	padding: var(--space-xs) 0;
	color: var(--color-ink);
	font-weight: 500;
	position: relative;
}

.primary-menu a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background-color: var(--color-gold-500);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.primary-menu a:hover::after,
.primary-menu a:focus::after,
.primary-menu .current-menu-item > a::after {
	transform: scaleX(1);
}

.primary-menu .current-menu-item > a {
	color: var(--color-teal-700);
	font-weight: 700;
}

/* --- Mobile hamburger toggle --- */
.menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm);
}

.menu-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-teal-900);
	transition: transform var(--duration-base) var(--ease-standard),
	            opacity var(--duration-base) var(--ease-standard);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile dropdown panel */
@media (max-width: 63.9375em) {
	.main-navigation {
		position: static;
	}

	.primary-menu-container {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-white);
		border-top: 1px solid var(--color-line);
		box-shadow: 0 8px 20px rgba(11, 51, 43, 0.1);
		z-index: var(--z-mobile-nav);
	}

	.primary-menu-container.is-open {
		display: block;
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-sm) var(--container-pad) var(--space-lg);
	}

	.primary-menu li {
		border-bottom: 1px solid var(--color-line);
	}

	.primary-menu a {
		padding: var(--space-sm) 0;
		width: 100%;
	}

	.main-navigation .btn--donate {
		margin: var(--space-md) var(--container-pad) 0;
	}
}

@media (min-width: 64em) {
	.primary-menu-container {
		display: block !important;
	}

	.menu-toggle {
		display: none;
	}
}


/* -------------------------------------------------------------------------
   9. FOOTER
   ---------------------------------------------------------------------- */
.site-footer {
	background-color: var(--color-teal-900);
	color: var(--color-teal-100);
	padding-block: var(--space-2xl) var(--space-lg);
	margin-top: var(--space-2xl);
}

.site-footer a {
	color: var(--color-teal-100);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--color-gold-500);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	padding-bottom: var(--space-xl);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 48em) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.site-footer__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--color-white);
}

.site-footer__logo img {
	max-height: 50px;
	filter: brightness(0) invert(1);
}

.site-footer__address {
	opacity: 0.85;
	font-size: var(--text-sm);
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	font-size: var(--text-sm);
}

.site-footer__heading {
	color: var(--color-white);
	font-family: var(--font-mono);
	text-transform: uppercase;
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	margin-bottom: var(--space-md);
}

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	font-size: var(--text-sm);
}

.social-links {
	display: flex;
	gap: var(--space-sm);
}

.social-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
}

.social-links__link:hover,
.social-links__link:focus {
	background-color: var(--color-gold-500);
}

.site-footer__bottom {
	padding-top: var(--space-lg);
	text-align: center;
	font-size: var(--text-xs);
	opacity: 0.75;
}


/* -------------------------------------------------------------------------
   10. SCROLL-IN REVEAL (GLOBAL)
   ---------------------------------------------------------------------- */
/* Site-wide scroll-reveal utility driven by [data-animate] + main.js
   (IntersectionObserver toggles .is-visible). Used on the homepage AND on
   the About Us page, so it lives here rather than in a page-specific
   stylesheet — one utility, reused everywhere it's needed. */
[data-animate] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
}

[data-animate="fade-right"] {
	transform: translateX(-24px);
}

[data-animate="fade-left"] {
	transform: translateX(24px);
}

[data-animate].is-visible {
	opacity: 1;
	transform: none;
}

/* Subtle stagger for cards inside a grid — each successive card reveals a
   little later than the one before it, up to a sensible cap so long grids
   don't end up with a multi-second tail. */
.services__grid [data-animate]:nth-child(2),
.team__grid [data-animate]:nth-child(2) {
	transition-delay: 80ms;
}

.services__grid [data-animate]:nth-child(3),
.team__grid [data-animate]:nth-child(3) {
	transition-delay: 160ms;
}

.services__grid [data-animate]:nth-child(4),
.team__grid [data-animate]:nth-child(4) {
	transition-delay: 240ms;
}

.services__grid [data-animate]:nth-child(n+5),
.team__grid [data-animate]:nth-child(n+5) {
	transition-delay: 320ms;
}


/* -------------------------------------------------------------------------
   11. GENERIC CONTENT / LOOP CARDS
   ---------------------------------------------------------------------- */
.page-header {
	margin-bottom: var(--space-xl);
	border-bottom: 1px solid var(--color-line);
	padding-bottom: var(--space-lg);
}

.page-header__title {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, var(--text-2xl));
}

.post-card {
	margin-bottom: var(--space-2xl);
	padding-bottom: var(--space-2xl);
	border-bottom: 1px solid var(--color-line);
}

.post-card:last-child {
	border-bottom: none;
}

.post-card__thumb {
	display: block;
	margin-bottom: var(--space-md);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.post-card__meta {
	display: flex;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink);
	opacity: 0.65;
	margin-bottom: var(--space-sm);
}

.post-card__readmore {
	display: inline-block;
	margin-top: var(--space-sm);
	font-weight: 600;
}

.homepage-placeholder {
	border: 1px dashed var(--color-line);
	background-color: var(--color-teal-100);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	text-align: center;
}

.homepage-placeholder__note {
	margin: 0;
	color: var(--color-teal-900);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}


/* -------------------------------------------------------------------------
   12. RTL (URDU) OVERRIDES
   ---------------------------------------------------------------------- */
html[dir="rtl"] body {
	font-family: var(--font-body-ur);
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
	font-family: var(--font-display-ur);
}

html[dir="rtl"] .primary-menu a::after {
	left: auto;
	right: 0;
	transform-origin: right;
}

html[dir="rtl"] .skip-link {
	left: auto;
	right: 0;
	border-radius: 0 0 0 var(--radius-sm);
}

html[dir="rtl"] [data-animate="fade-right"] {
	transform: translateX(24px);
}

html[dir="rtl"] [data-animate="fade-left"] {
	transform: translateX(-24px);
}


/* -------------------------------------------------------------------------
   13. REDUCED MOTION
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Belt-and-braces: main.js already reveals [data-animate] elements
	   instantly when prefers-reduced-motion matches, but this CSS-only
	   reset keeps content visible even if JavaScript fails to load. */
	[data-animate] {
		opacity: 1;
		transform: none;
	}
}