/**
 * Category Archive & Navigation Bar Styles
 *
 * @package AL_Muslim_Hindi
 */

/* Category Page Hero */
.category-hero-header {
	text-align: center;
	padding: 24px 0 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cat-hero-icon-wrap {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	background-color: var(--color-accent-subtle);
	border: 1px solid rgba(var(--color-accent-rgb), 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent);
	margin-bottom: 12px;
}

.cat-hero-title {
	font-size: 1.85rem;
	font-weight: 800;
	color: var(--color-text-primary);
	margin-bottom: 6px;
}

.cat-hero-desc {
	font-size: 0.95rem;
	color: var(--color-text-secondary);
	max-width: 540px;
	margin: 0 auto 12px;
}

.badge-post-count {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-accent);
	background-color: var(--color-accent-subtle);
	padding: 3px 10px;
	border-radius: var(--radius-full);
}

.category-search-bar {
	margin-bottom: 24px;
}

/* Sticky Mobile & Desktop Bottom App Navigation Bar */
.almuslim-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	background-color: var(--color-surface, #FFFFFF);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid var(--color-border, #E5E7EB);
	height: var(--bottom-nav-height, 64px);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
	display: block !important;
	transition: background-color var(--transition-normal), border-color var(--transition-normal), transform 0.25s ease;
}

[data-theme="dark"] .almuslim-bottom-nav {
	background-color: var(--color-surface, #282A2D);
	background: rgba(40, 42, 45, 0.96);
	border-top: 1px solid var(--color-border, #3C4043);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
}

.bottom-nav-container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	max-width: 680px;
	margin: 0 auto;
	padding: 0 8px;
}

.nav-item {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: var(--color-text-secondary, #5F6368);
	padding: 6px 0;
	position: relative;
	transition: color var(--transition-fast), transform 0.15s ease;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.nav-item:hover {
	color: var(--color-accent, #008F6B);
}

.nav-item:active {
	transform: scale(0.95);
}

.nav-item .nav-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item .nav-label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	transition: font-weight 0.15s ease;
}

/* Active Nav State */
.nav-item.is-active {
	color: var(--color-accent, #008F6B);
}

[data-theme="dark"] .nav-item.is-active {
	color: var(--color-accent, #00D09C);
}

.nav-item.is-active .nav-icon {
	color: var(--color-accent, #008F6B);
	transform: translateY(-2px);
}

[data-theme="dark"] .nav-item.is-active .nav-icon {
	color: var(--color-accent, #00D09C);
}

.nav-item.is-active .nav-label {
	font-weight: 700;
}

.nav-item.is-active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 3px;
	border-radius: 0 0 4px 4px;
	background-color: var(--color-accent, #008F6B);
}

[data-theme="dark"] .nav-item.is-active::after {
	background-color: var(--color-accent, #00D09C);
}

/* Count Badge on Save tab */
.save-count-badge {
	position: absolute;
	top: -6px;
	right: -10px;
	background-color: var(--color-accent, #008F6B);
	color: #FFFFFF;
	font-size: 0.65rem;
	font-weight: 800;
	min-width: 17px;
	height: 17px;
	border-radius: var(--radius-full, 9999px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	line-height: 1;
	border: 1.5px solid var(--color-surface, #FFFFFF);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="dark"] .save-count-badge {
	background-color: var(--color-accent, #00D09C);
	color: #0A0A0A;
	border-color: var(--color-surface, #282A2D);
}

@keyframes badgePop {
	0% { transform: scale(0.5); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

/* Desktop Simple Footer */
.almuslim-footer {
	border-top: 1px solid var(--color-border);
	background-color: var(--color-surface);
	padding: 24px 16px;
	margin-top: auto;
}

.footer-container {
	max-width: var(--container-wide-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 0.85rem;
	color: var(--color-text-secondary);
}

.footer-copy {
	display: flex;
	align-items: center;
	gap: 8px;
}

.footer-tagline {
	color: var(--color-text-muted);
}

.footer-links {
	display: flex;
	align-items: center;
	gap: 16px;
}

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