/* ============================================================
   09 GPRS MOBILE OPTIMIZATIONS — UNIFIED
   Purpose: Identical mobile menu and responsive behavior
   across all pages. Updated to match modernized header.
   Load Priority: 9

   TABLE OF CONTENTS:
   1. Mobile Menu — Slide Panel
   2. Mobile Menu Links
   3. Mobile Donate CTA
   4. Mobile Menu Divider
   5. Mobile Toggle Button
   6. Header Interaction Fix
   7. General Responsive Adjustments
   8. Footer Mobile Optimizations
   9. Accessibility & UX Enhancements
============================================================ */

/* ============================================================
   1. MOBILE MENU — SLIDE PANEL

   ⚠️ CRITICAL: visibility: hidden MUST be set when closed.
   opacity:0 and pointer-events:none do NOT remove links
   from keyboard Tab order. Without visibility:hidden the
   user tabs through the invisible mobile menu first, then
   the desktop menu — creating a confusing double pass.
============================================================ */
.mobile-menu,
#mobile-menu {
	position: fixed !important;
	left: 0 !important;
	top: var(--header-height) !important;
	width: 100% !important;
	height: calc(100vh - var(--header-height)) !important;

	background: linear-gradient(
		160deg,
		rgba(8, 50, 140, 0.97),
		rgba(12, 60, 200, 0.97),
		rgba(8, 45, 160, 0.97)
	) !important;

	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;

	border-top: 1px solid rgba(255, 255, 255, 0.20) !important;

	padding: 1.5rem 1.25rem 8rem !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;

	/* CLOSED STATE — fully hidden from keyboard + assistive tech */
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	transform: translateX(-100%) !important;

	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0s linear 0.3s !important;

	z-index: 999 !important;
}

/* OPEN STATE — visible to keyboard + assistive tech */
.mobile-menu.open,
#mobile-menu.open {
	opacity: 1 !important;
	pointer-events: auto !important;
	visibility: visible !important;
	transform: translateX(0) !important;

	/* visibility flips instantly on open (no delay) */
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0s linear 0s !important;
}

/* Menu list reset */
.mobile-menu ul,
#mobile-menu ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mobile-menu li,
#mobile-menu li {
	list-style: none !important;
}

/* ============================================================
   2. MOBILE MENU LINKS — CLEAN, LARGE TOUCH TARGETS
============================================================ */
.mobile-menu a,
#mobile-menu a {
	display: flex !important;
	align-items: center !important;
	padding: 1rem 1.25rem !important;
	margin-bottom: 2px !important;

	color: #ffffff !important;
	font-weight: 500 !important;
	font-size: 1.08rem !important;
	text-decoration: none !important;
	letter-spacing: 0.01em !important;

	border-radius: 10px !important;
	background: transparent !important;

	transition:
		background 0.2s ease,
		transform 0.2s ease !important;

	min-height: 48px !important;
}

.mobile-menu a:hover,
#mobile-menu a:hover {
	background: rgba(255, 255, 255, 0.10) !important;
	color: #ffffff !important;
}

.mobile-menu a:active,
#mobile-menu a:active {
	background: rgba(255, 255, 255, 0.15) !important;
	transform: scale(0.99) !important;
}

/* Current page in mobile menu */
.mobile-menu a[aria-current="page"],
#mobile-menu a[aria-current="page"] {
	background: rgba(255, 255, 255, 0.12) !important;
	font-weight: 700 !important;
	border-left: 3px solid #FFD700 !important;
	padding-left: calc(1.25rem - 3px) !important;
}

/* ============================================================
   3. MOBILE DONATE CTA — STANDS OUT IN MENU
============================================================ */
.mobile-menu a.mobile-donate,
#mobile-menu a.mobile-donate {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.15),
		rgba(255, 255, 255, 0.06)
	) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
	font-weight: 700 !important;
	text-align: center !important;
	justify-content: center !important;
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
	border-radius: 12px !important;
}

.mobile-menu a.mobile-donate:hover,
#mobile-menu a.mobile-donate:hover {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.25),
		rgba(255, 255, 255, 0.12)
	) !important;
	border-color: rgba(255, 255, 255, 0.50) !important;
}

/* ============================================================
   4. MOBILE MENU DIVIDER
============================================================ */
.mobile-menu-divider {
	height: 1px !important;
	margin: 0.75rem 1.25rem !important;
	background: rgba(255, 255, 255, 0.15) !important;
	border: none !important;
	padding: 0 !important;
	min-height: 0 !important;
}

/* ============================================================
   5. MOBILE TOGGLE BUTTON
============================================================ */
.mobile-toggle,
#mobile-menu-toggle {
	position: relative !important;
	z-index: 1001 !important;

	display: none;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 38px;
	padding: 0;

	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-sm);

	cursor: pointer !important;
	pointer-events: auto !important;

	color: #ffffff;
	line-height: 1;

	transition:
		background 0.2s ease,
		border-color 0.2s ease;
}

.mobile-toggle:hover,
.mobile-toggle:active,
#mobile-menu-toggle:hover,
#mobile-menu-toggle:active {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.30);
}

/* ============================================================
   6. HEADER INTERACTION FIX
============================================================ */
.gprs-header {
	pointer-events: auto !important;
}

.gprs-header::before,
.gprs-header::after {
	pointer-events: none;
}

/* Prevent body scroll when menu is open — MOBILE ONLY */
@media (max-width: 1023px) {
	body.menu-open {
		overflow: hidden;
	}
}

/* ============================================================
   7. GENERAL RESPONSIVE ADJUSTMENTS
============================================================ */
@media (max-width: 1024px) {
	.mobile-toggle,
	#mobile-menu-toggle {
		display: flex;
	}

	.nav-desktop {
		display: none;
	}

	.header-inner {
		padding: 0 1.5rem;
		gap: 1rem;
	}

	.ast-container,
	.ast-container-fluid {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	:root {
		--header-height: 65px;
	}

	.gprs-header {
		height: 65px;
		padding: 0.4rem 0;
	}

	.header-inner {
		padding: 0 1rem;
		gap: 0.75rem;
	}

	.logo img {
		height: 52px;
	}

	.mobile-menu,
	#mobile-menu {
		top: 65px !important;
		height: calc(100vh - 65px) !important;
		padding: 1.25rem 1rem 8rem !important;
	}

	.mobile-menu a,
	#mobile-menu a {
		font-size: 1.02rem !important;
		padding: 0.9rem 1.1rem !important;
	}
}

@media (max-width: 480px) {
	:root {
		--header-height: 60px;
	}

	.gprs-header {
		height: 60px;
		padding: 0.3rem 0;
	}

	.header-inner {
		padding: 0 0.75rem;
		gap: 0.5rem;
	}

	.logo img {
		height: 48px;
	}

	.header-controls {
		gap: 0.5rem;
	}

	.gprs-theme-toggle,
	#gprs-theme-toggle {
		min-width: 40px !important;
		height: 36px !important;
		padding: 0.4rem 0.7rem !important;
		font-size: 0.85rem !important;
	}

	.mobile-toggle,
	#mobile-menu-toggle {
		width: 40px;
		height: 36px;
	}

	.mobile-menu,
	#mobile-menu {
		top: 60px !important;
		height: calc(100vh - 60px) !important;
		padding: 1rem 0.75rem 8rem !important;
	}

	.mobile-menu a,
	#mobile-menu a {
		font-size: 0.96rem !important;
		padding: 0.85rem 1rem !important;
	}
}

/* ============================================================
   8. FOOTER MOBILE OPTIMIZATIONS
============================================================ */
@media (max-width: 900px) {
	.footer-inner {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}

@media (max-width: 768px) {
	.footer-inner {
		grid-template-columns: 1fr;
		padding: 1.5rem 1rem;
		gap: 1.75rem;
	}

	.footer-mission {
		font-size: 1rem;
		padding: 18px 1rem 10px;
	}

	.footer-cta-band {
		flex-direction: column;
		gap: 0.75rem;
		padding: 1.5rem 1rem;
	}

	.footer-cta-btn {
		width: 100%;
		max-width: 320px;
	}

	.footer-bottom {
		padding: 1.2rem 1rem 1.75rem;
	}
}

@media (max-width: 480px) {
	.footer-mission {
		font-size: 0.95rem;
		padding: 16px 0.75rem 8px;
	}

	.footer-inner {
		padding: 1.25rem 0.75rem;
		gap: 1.5rem;
	}

	.footer-logo img {
		height: 48px;
	}

	.footer-org-name {
		font-size: 1rem;
	}

	.footer-text {
		font-size: 0.9rem;
	}

	.footer-heading {
		font-size: 0.88rem;
	}

	.footer-cta-band {
		padding: 1.25rem 0.75rem;
	}

	.footer-cta-btn {
		padding: 0.7rem 1.5rem;
		font-size: 0.95rem;
	}

	.footer-bottom {
		padding: 1rem 0.75rem 1.5rem;
	}

	.footer-copy {
		font-size: 0.78rem;
	}
}

/* ============================================================
   9. ACCESSIBILITY & UX ENHANCEMENTS
   NOTE: Global *:focus-visible is defined in 02-Base.
   Do NOT redefine outline/box-shadow here.
============================================================ */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (max-width: 768px) {
	button,
	a,
	input,
	select,
	textarea {
		min-height: 44px;
	}

	body,
	html {
		overflow-x: hidden;
		max-width: 100vw;
	}

	* {
		max-width: 100%;
	}

	img {
		height: auto;
	}
}