/**
 * JRDM Website Custom Styles
 * Professional Microcredit NGO Design System
 * 
 * Color Palette:
 * Primary: #1B5E20 (Dark Green)
 * Secondary: #8B0000 (Burgundy/Logo Red)
 * Accent: #F9A825 (Golden Yellow/Sun)
 * Background: #F5F5F0 (Off-white)
 * Card Background: #FFFFFF (White)
 * Text: #1A1A1A (Dark Charcoal)
 * Text Light: #555555 (Gray)
 * Border: #C8E6C9 (Light Greenish)
 */

/* ============================================
   CSS Variables (Design Tokens)
   ============================================ */
:root {
	/* Colors */
	--jrdm-primary: #1B5E20;
	--jrdm-secondary: #8B0000;
	--jrdm-accent: #F9A825;
	--jrdm-background: #F5F5F0;
	--jrdm-card-bg: #FFFFFF;
	--jrdm-text: #1A1A1A;
	--jrdm-text-light: #555555;
	--jrdm-border: #C8E6C9;
	
	/* Typography */
	--jrdm-font-english: 'Inter', sans-serif;
	
	/* Font Sizes */
	--jrdm-h1-size: 42px;
	--jrdm-h2-size: 30px;
	--jrdm-h3-size: 20px;
	--jrdm-body-size: 16px;
	--jrdm-small-size: 14px;
	
	/* Spacing */
	--jrdm-border-radius: 8px;
	--jrdm-button-radius: 4px;
	--jrdm-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	--jrdm-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ============================================
   Typography
   ============================================ */
body,
.jrdm-theme {
	font-family: var(--jrdm-font-english);
	font-size: var(--jrdm-body-size);
	color: var(--jrdm-text);
	background-color: var(--jrdm-background);
	line-height: 1.6;
}

/* Bengali text - removed as site is English only */

h1, .h1 {
	font-size: var(--jrdm-h1-size);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
	color: var(--jrdm-text);
}

h2, .h2 {
	font-size: var(--jrdm-h2-size);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 0.875rem;
	color: var(--jrdm-text);
}

h3, .h3 {
	font-size: var(--jrdm-h3-size);
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 0.75rem;
	color: var(--jrdm-text);
}

p {
	font-size: var(--jrdm-body-size);
	margin-bottom: 1rem;
	color: var(--jrdm-text);
}

small,
.small {
	font-size: var(--jrdm-small-size);
	color: var(--jrdm-text-light);
}

/* ============================================
   Header & Top Bar (clean professional)
   ============================================ */
.site-header {
	background-color: var(--jrdm-card-bg);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 1000;
}

/* Single-row header on desktop: logo left, nav right */
.inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 16px 0;
}

/* Top Bar - Green Background */
.top-bar {
	background-color: var(--jrdm-primary);
	color: #FFFFFF;
	padding: 8px 0;
	font-size: var(--jrdm-small-size);
}

.top-bar .inside-top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.top-bar-left {
	display: flex;
	gap: 20px;
	align-items: center;
}

.top-bar-right {
	display: flex;
	gap: 20px;
	align-items: center;
}

.top-bar a {
	color: #FFFFFF;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.top-bar a:hover {
	opacity: 0.8;
}

.top-bar .separator {
	margin: 0 10px;
	opacity: 0.6;
}

/* Top Bar Buttons */
.top-bar-btn {
	display: inline-block;
	padding: 6px 16px;
	font-size: var(--jrdm-small-size);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--jrdm-button-radius);
	transition: all 0.3s ease;
	color: #FFFFFF;
}

.top-bar-btn-orange {
	background-color: var(--jrdm-accent);
}

.top-bar-btn-orange:hover {
	background-color: #F9B842;
	transform: translateY(-1px);
}

.top-bar-btn-green {
	background-color: #2E7D32;
}

.top-bar-btn-green:hover {
	background-color: #1B5E20;
	transform: translateY(-1px);
}

/* Main Header - Logo & Tagline */
.main-navigation {
	background-color: transparent;
}

/* Logo + branding row */
.site-branding-container {
	display: flex;
	align-items: center;
	gap: 15px;
}

.site-logo {
	display: flex;
	align-items: center;
}

.site-logo img.header-image {
	height: 56px;
	width: auto;
}

.site-branding {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.site-branding .main-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--jrdm-secondary);
	margin: 0;
	line-height: 1.2;
}

.site-branding .main-title a {
	color: inherit;
}

/* Tagline: "A National Micro Finance Institute" - prominent, picture style */
.site-branding .site-description {
	font-size: 13px;
	color: #777;
	font-style: italic;
	margin: 0;
	line-height: 1.35;
	font-weight: 400;
}

/* Navigation bar: clean, no box */
.main-navigation .inside-navigation,
#site-navigation .inside-navigation {
	border: none;
	border-radius: 0;
	padding: 0;
	background-color: transparent;
}

.main-navigation {
	flex: 1;
}

.main-navigation .main-nav,
#site-navigation .main-nav {
	width: 100%;
}

.main-navigation .main-nav > ul,
#site-navigation .main-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap; /* Keep all items in one line on desktop */
	gap: 0 14px; /* Tighter horizontal gap so items stay compact */
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.main-navigation .main-nav > ul > li > a {
	color: #2c2c2c;
	text-decoration: none;
	font-weight: 500;
	font-size: 12px; /* Smaller so full menu fits in one line */
	letter-spacing: 0.02em;
	line-height: 1.4;
	padding: 7px 8px !important; /* Reduced padding, but still clickable */
	position: relative;
	transition: color 0.2s ease, background-color 0.2s ease;
	border-radius: 4px;
}

/* Fix Donate Now button (example selector, update if class/id differs in HTML) */
.main-navigation .main-nav > ul > li.donate-now > a,
#site-navigation .main-nav > ul > li.donate-now > a {
	background: var(--jrdm-primary);
	color: #fff;
	padding: 10px 26px !important;
	border-radius: 22px;
	font-weight: 600;
	font-size: 14px;
	box-shadow: 0 2px 8px rgba(27,94,32,0.07);
	transition: background 0.18s, color 0.18s;
	margin-left: 16px;
	display: inline-block;
}

.main-navigation .main-nav > ul > li.donate-now > a:hover,
#site-navigation .main-nav > ul > li.donate-now > a:hover {
	background: #0d3d12; /* Darker green on hover (same tone as primary) */
	color: #fff;
}

/* Ensure dropdown menu aligns flush with main nav and is well spaced */
.main-navigation ul ul {
	margin-top: 10px;
}

.main-navigation .main-nav > ul > li > a:hover {
	color: var(--jrdm-primary);
	background-color: rgba(27, 94, 32, 0.06);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--jrdm-secondary);
	font-weight: 600;
}

.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--jrdm-secondary);
}

/* Dropdown parent: same padding as other items, no extra right gap */
.main-navigation .main-nav > ul > li.menu-item-has-children > a,
#site-navigation .main-nav > ul > li.menu-item-has-children > a {
	padding: 7px 8px !important; /* Same as other nav links */
}
.main-navigation .main-nav > ul > li.menu-item-has-children,
#site-navigation .main-nav > ul > li.menu-item-has-children {
	padding-right: 0;
	margin-right: 0;
}

/* Desktop dropdown menus - clean, professional */
.main-navigation ul ul {
	background-color: #ffffff;
	border-radius: 4px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
	padding: 8px 0;
}

.main-navigation ul ul li a {
	font-size: 13px;
	padding: 6px 18px;
	color: #444;
	white-space: nowrap;
}

.main-navigation ul ul li a:hover {
	background-color: #f5f5f5;
	color: var(--jrdm-primary);
}

/* Desktop: dropdown toggle takes no space (no extra gap next to parent) */
@media (min-width: 769px) {
	.main-navigation .menu-item-has-children > .dropdown-menu-toggle,
	#site-navigation .menu-item-has-children > .dropdown-menu-toggle {
		display: none !important;
		width: 0 !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		visibility: hidden !important;
		position: absolute !important;
		pointer-events: none !important;
	}
}

.main-navigation .menu-toggle {
	border-radius: var(--jrdm-button-radius);
}

/* Donate Button - right side, green, picture style */
.menu-item-donate {
	margin-left: 24px;
}

.donate-button {
	background-color: var(--jrdm-primary);
	color: #FFFFFF !important;
	padding: 4px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.2s ease;
	border: none;
	line-height: 1.3;
}

.donate-button:hover {
	background-color: #2E7D32;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(27, 94, 32, 0.35);
}

/* ============================================
   Buttons
   ============================================ */
.btn,
.wp-block-button__link,
.button {
	display: inline-block;
	padding: 12px 24px;
	font-size: var(--jrdm-body-size);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--jrdm-button-radius);
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
	font-family: var(--jrdm-font-english);
}

/* Primary Button (Yellow) */
.btn-primary,
.wp-block-button.is-style-primary .wp-block-button__link {
	background-color: var(--jrdm-accent);
	color: var(--jrdm-text);
}

.btn-primary:hover,
.wp-block-button.is-style-primary .wp-block-button__link:hover {
	background-color: #F9B842;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(249, 168, 37, 0.3);
}

/* Secondary Button (Green) */
.btn-secondary,
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--jrdm-primary);
	color: #FFFFFF;
}

.btn-secondary:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: #2E7D32;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(27, 94, 32, 0.3);
}

/* Outline Button */
.btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--jrdm-primary);
	border: 2px solid var(--jrdm-primary);
}

.btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--jrdm-primary);
	color: #FFFFFF;
}

/* Danger/Urgent Button */
.btn-danger,
.wp-block-button.is-style-danger .wp-block-button__link {
	background-color: var(--jrdm-secondary);
	color: #FFFFFF;
}

.btn-danger:hover,
.wp-block-button.is-style-danger .wp-block-button__link:hover {
	background-color: #A00000;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(139, 0, 0, 0.3);
}

/* ============================================
   Cards
   ============================================ */
.card,
.wp-block-group.is-style-card {
	background-color: var(--jrdm-card-bg);
	border-radius: var(--jrdm-border-radius);
	box-shadow: var(--jrdm-card-shadow);
	padding: 30px;
	transition: all 0.3s ease;
	border-top: 3px solid var(--jrdm-primary);
}

.card:hover,
.wp-block-group.is-style-card:hover {
	box-shadow: var(--jrdm-card-shadow-hover);
	transform: translateY(-4px);
}

.card-title {
	font-size: var(--jrdm-h3-size);
	font-weight: 600;
	margin-bottom: 15px;
	color: var(--jrdm-primary);
}

.card-content {
	color: var(--jrdm-text-light);
	margin-bottom: 20px;
}

.card-link {
	color: var(--jrdm-secondary);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease;
}

.card-link:hover {
	color: var(--jrdm-primary);
	text-decoration: underline;
}

/* ============================================
   Hero Slider
   ============================================ */
.hero-slider {
	padding: 60px 0;
	background-color: var(--jrdm-background);
}

.hero-slide {
	display: none;
}

.hero-slide.is-active {
	display: block;
}

.hero-content {
	position: relative;
	z-index: 1;
	text-align: center;
	color: #FFFFFF;
	max-width: 800px;
	padding: 40px 20px;
}

.hero-title {
	font-size: var(--jrdm-h1-size);
	font-weight: 700;
	margin-bottom: 20px;
	color: var(--jrdm-secondary);
}

.hero-description {
	font-size: 20px;
	margin-bottom: 30px;
	opacity: 0.9;
	color: var(--jrdm-text-light);
}

.hero-buttons {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Hero button styles */
.hero-buttons .wp-block-button:first-child .wp-block-button__link {
	background-color: var(--jrdm-accent);
	color: var(--jrdm-text);
}

.hero-buttons .wp-block-button:first-child .wp-block-button__link:hover {
	background-color: #F9B842;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(249, 168, 37, 0.3);
}

.hero-buttons .wp-block-button:last-child .wp-block-button__link {
	background-color: transparent;
	color: var(--jrdm-primary);
	border: 2px solid var(--jrdm-primary);
}

.hero-buttons .wp-block-button:last-child .wp-block-button__link:hover {
	background-color: var(--jrdm-primary);
	color: #FFFFFF;
}

.hero-slide-image img {
	width: 100%;
	height: auto;
	border-radius: var(--jrdm-border-radius);
	box-shadow: var(--jrdm-card-shadow);
}

/* Slider dots */
.hero-slider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.hero-slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background-color: rgba(0, 0, 0, 0.15);
	cursor: pointer;
	padding: 0;
	transition: all 0.3s ease;
}

.hero-slider-dot.is-active {
	background-color: var(--jrdm-primary);
	transform: scale(1.2);
}

/* ============================================
   Statistics Bar
   ============================================ */
.stats-bar {
	background-color: var(--jrdm-primary);
	color: #FFFFFF;
	padding: 40px 0;
	/* Make stats bar truly full-width */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.stats-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 30px;
}

.stat-box {
	text-align: center;
	padding: 20px;
}

.stat-number {
	font-size: 48px;
	font-weight: 700;
	color: var(--jrdm-accent);
	margin-bottom: 10px;
	display: block;
}

.stat-label {
	font-size: var(--jrdm-body-size);
	color: #FFFFFF;
	opacity: 0.9;
}

/* ============================================
   Services Section
   ============================================ */
.services-section {
	padding: 60px 0;
	background-color: var(--jrdm-card-bg);
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.service-icon {
	width: 60px;
	height: 60px;
	background-color: var(--jrdm-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	color: #FFFFFF;
	font-size: 28px;
}

/* ============================================
   Success Stories
   ============================================ */
.success-stories-section {
	padding: 60px 0;
	background-color: var(--jrdm-background);
}

.stories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.story-card {
	background-color: var(--jrdm-card-bg);
	border-radius: var(--jrdm-border-radius);
	padding: 30px;
	text-align: center;
	box-shadow: var(--jrdm-card-shadow);
}

.story-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 20px;
	border: 3px solid var(--jrdm-primary);
}

.story-name {
	font-size: var(--jrdm-h3-size);
	font-weight: 600;
	color: var(--jrdm-primary);
	margin-bottom: 5px;
}

.story-location {
	font-size: var(--jrdm-small-size);
	color: var(--jrdm-text-light);
	margin-bottom: 15px;
}

.story-excerpt {
	color: var(--jrdm-text-light);
	font-size: var(--jrdm-body-size);
	line-height: 1.6;
}

/* ============================================
   Notice Board
   ============================================ */
.notice-board-section {
	padding: 60px 0;
	background-color: var(--jrdm-card-bg);
}

.notice-board-container {
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 40px;
}

.notice-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.notice-item {
	padding: 20px;
	border-bottom: 1px solid var(--jrdm-border);
	transition: background-color 0.3s ease;
}

.notice-item:hover {
	background-color: var(--jrdm-background);
}

.notice-date {
	font-size: var(--jrdm-small-size);
	color: var(--jrdm-text-light);
	margin-bottom: 5px;
}

.notice-title {
	font-size: var(--jrdm-body-size);
	font-weight: 600;
	color: var(--jrdm-text);
	text-decoration: none;
}

.notice-title:hover {
	color: var(--jrdm-primary);
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
	background-color: var(--jrdm-text);
	color: #FFFFFF;
	padding: 60px 0 0;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 40px;
	margin-bottom: 40px;
}

.footer-widget h3 {
	color: var(--jrdm-accent);
	font-size: var(--jrdm-h3-size);
	margin-bottom: 20px;
}

.footer-widget a {
	color: #FFFFFF;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-widget a:hover {
	color: var(--jrdm-accent);
}

.footer-social {
	display: flex;
	gap: 15px;
	margin-top: 20px;
}

.social-icon {
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.social-icon:hover {
	background-color: var(--jrdm-accent);
}

.footer-bottom {
	background-color: var(--jrdm-primary);
	padding: 20px 0;
	text-align: center;
	font-size: var(--jrdm-small-size);
}

/* Copyright bar content injected via generate_copyright filter */
.jrdm-footer-bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.jrdm-footer-center {
	grid-column: 2;
	justify-self: center;
}

.jrdm-footer-right {
	grid-column: 3;
	justify-self: end;
}

.jrdm-footer-bottom a {
	color: #FFFFFF;
	text-decoration: underline;
}

.jrdm-footer-bottom a:hover {
	color: var(--jrdm-accent);
}

/* ============================================
   Donor/Partner Logos
   ============================================ */
.partners-section {
	padding: 60px 0;
	background-color: var(--jrdm-card-bg);
}

.partners-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 30px;
	align-items: center;
}

.partner-logo {
	filter: grayscale(100%);
	opacity: 0.6;
	transition: all 0.3s ease;
	max-width: 100%;
	height: auto;
}

.partner-logo:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* ============================================
   Leadership/Team Section
   ============================================ */
.leadership-section {
	padding: 60px 0;
	background-color: var(--jrdm-card-bg);
}

.leadership-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.leadership-card {
	background-color: var(--jrdm-card-bg);
	border-radius: var(--jrdm-border-radius);
	padding: 30px;
	text-align: center;
	box-shadow: var(--jrdm-card-shadow);
	transition: all 0.3s ease;
	border-top: 3px solid var(--jrdm-primary);
}

.leadership-card:hover {
	box-shadow: var(--jrdm-card-shadow-hover);
	transform: translateY(-4px);
}

.leadership-photo {
	border-radius: 50%;
	width: 150px;
	height: 150px;
	object-fit: cover;
	margin: 0 auto 20px;
	border: 4px solid var(--jrdm-primary);
}

.leadership-photo img {
	border-radius: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.leadership-name {
	font-size: var(--jrdm-h3-size);
	font-weight: 600;
	color: var(--jrdm-primary);
	margin-bottom: 8px;
}

.leadership-position {
	font-size: var(--jrdm-body-size);
	color: var(--jrdm-text-light);
	margin: 0;
}

/* ============================================
   Photo Gallery Section
   ============================================ */
.photo-gallery-section {
	padding: 60px 0;
	background-color: var(--jrdm-background);
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 40px;
}

.gallery-grid figure {
	margin: 0;
	border-radius: var(--jrdm-border-radius);
	overflow: hidden;
	box-shadow: var(--jrdm-card-shadow);
	transition: all 0.3s ease;
}

.gallery-grid figure:hover {
	transform: translateY(-4px);
	box-shadow: var(--jrdm-card-shadow-hover);
}

.gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.gallery-grid figure:hover img {
	transform: scale(1.05);
}

/* ============================================
   Video Gallery Section
   ============================================ */
.video-gallery-section {
	padding: 60px 0;
	background-color: var(--jrdm-card-bg);
}

.video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.video-card {
	border-radius: var(--jrdm-border-radius);
	overflow: hidden;
	box-shadow: var(--jrdm-card-shadow);
	transition: all 0.3s ease;
}

.video-card:hover {
	box-shadow: var(--jrdm-card-shadow-hover);
	transform: translateY(-4px);
}

.video-card iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* ============================================
   Animation Classes
   ============================================ */
.fade-in {
	animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.stat-number.animated {
	animation: countUp 1.5s ease-out;
}

@keyframes countUp {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
	:root {
		--jrdm-h1-size: 32px;
		--jrdm-h2-size: 24px;
		--jrdm-h3-size: 18px;
	}
	
	.hero-section {
		min-height: 60vh;
	}
	
	.hero-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	
	.stats-container {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.services-grid,
	.stories-grid {
		grid-template-columns: 1fr;
	}
	
	.notice-board-container {
		grid-template-columns: 1fr;
	}
	
	.top-bar .inside-top-bar {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}
	
	.jrdm-footer-bottom {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.jrdm-footer-center {
		grid-column: auto;
	}

	.jrdm-footer-right {
		grid-column: auto;
		justify-self: center;
	}
	
	.footer-widgets {
		grid-template-columns: 1fr;
	}
	
	.leadership-grid,
	.video-grid {
		grid-template-columns: 1fr;
	}
	
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.menu-item-donate {
		margin-left: 0;
		margin-top: 15px;
	}
	
	.donate-button {
		display: block;
		text-align: center;
	}
	
	/* Header: stack logo + nav on mobile */
	.inside-header {
		padding-bottom: 12px;
	}
	
	.main-navigation .inside-navigation {
		padding: 12px 16px;
	}
	
	.main-navigation .main-nav > ul {
		gap: 12px 16px;
	}
}

@media (max-width: 480px) {
	.stats-container {
		grid-template-columns: 1fr;
	}
	
	.stat-number {
		font-size: 36px;
	}
}

/* ============================================
   Utility Classes
   ============================================ */
.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.section-title {
	text-align: center;
	font-size: var(--jrdm-h2-size);
	font-weight: 600;
	color: var(--jrdm-primary);
	margin-bottom: 15px;
}

.section-subtitle {
	text-align: center;
	font-size: var(--jrdm-body-size);
	color: var(--jrdm-text-light);
	margin-bottom: 40px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}