/* =========================================================================
   10 — MOBILE · BOTTOM MENU · BADGES · MOTION
   ========================================================================= */

/* --- Mobile off-canvas menu --- */
.mobile-sidebar,
#main-menu .sidebar-menu,
.mfp-content .mobile-sidebar {
	background: var(--s67-bg-deep) !important;
}
#main-menu .nav-sidebar > li > a,
.mobile-sidebar .nav > li > a {
	color: var(--s67-text) !important;
	border-color: var(--s67-border) !important;
	font-weight: 600;
}
#main-menu .nav-sidebar > li > a:hover,
#main-menu .nav-sidebar > li.active > a {
	color: var(--s67-gold-300) !important;
	background: var(--s67-bg-elev-1) !important;
}
.mobile-sidebar .searchform input {
	background: var(--s67-bg-elev-2) !important;
	color: var(--s67-text) !important;
	border-color: var(--s67-border) !important;
}

/* --- WP Bottom Menu (mobile) → premium glass bar with a standout active item -- */
#wp-bottom-menu.wp-bottom-menu {
	background: linear-gradient(180deg, rgba(20, 20, 28, 0.97) 0%, rgba(6, 6, 10, 0.99) 100%) !important;
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	/* crisp gold gradient line along the top (brightest at centre) */
	border-top: 1px solid transparent !important;
	border-image: linear-gradient(90deg, transparent 0%, rgba(241, 194, 51, 0.45) 30%, rgba(248, 215, 90, 0.9) 50%, rgba(241, 194, 51, 0.45) 70%, transparent 100%) 1 !important;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.55) !important;
	overflow: visible !important;
}

/* Items + labels */
#wp-bottom-menu .wp-bottom-menu-item { color: var(--s67-text-muted) !important; }
#wp-bottom-menu .wp-bottom-menu-item span {
	color: var(--s67-text-muted) !important;
	font-size: 10.5px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-top: 2px;
	transition: color var(--s67-dur-fast) var(--s67-ease);
}

/* Icon sits in a rounded chip */
#wp-bottom-menu .wp-bottom-menu-icon-wrapper {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--s67-radius-pill);
	transition: transform var(--s67-dur-base) var(--s67-ease),
		background var(--s67-dur-base) var(--s67-ease),
		box-shadow var(--s67-dur-base) var(--s67-ease);
}
#wp-bottom-menu .wp-bottom-menu-item-icons {
	color: var(--s67-text-muted) !important;
	font-size: 18px !important;
	transition: color var(--s67-dur-fast) var(--s67-ease);
}

/* Tap / hover → gold tint */
#wp-bottom-menu .wp-bottom-menu-item:hover span,
#wp-bottom-menu .wp-bottom-menu-item:hover .wp-bottom-menu-item-icons {
	color: var(--s67-gold-100) !important;
}
#wp-bottom-menu .wp-bottom-menu-item:hover .wp-bottom-menu-icon-wrapper {
	background: rgba(241, 194, 51, 0.10);
}

/* ACTIVE → raised gold circle, dark icon, gold label */
#wp-bottom-menu .wp-bottom-menu-item.active .wp-bottom-menu-icon-wrapper {
	background: var(--s67-grad-gold) !important;
	transform: translateY(-5px);
	box-shadow: 0 7px 18px -5px var(--s67-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
#wp-bottom-menu .wp-bottom-menu-item.active .wp-bottom-menu-item-icons {
	color: var(--s67-text-on-gold) !important;
}
#wp-bottom-menu .wp-bottom-menu-item.active span {
	color: var(--s67-gold-100) !important;
	font-weight: 700;
}

/* --- LIVE / HOT menu badges (if used) --- */
.nav .icon-live,
.nav .icon-hot {
	position: relative;
}
.nav .icon-live::after {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	margin-left: 5px;
	border-radius: 50%;
	background: var(--s67-gold-300);
	box-shadow: 0 0 0 3px rgba(241, 194, 51, 0.22);
	animation: s67-pulse 1.4s ease-in-out infinite;
	vertical-align: middle;
}

@keyframes s67-pulse {
	0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(241, 194, 51, 0.55); }
	50% { transform: scale(1.18); opacity: 0.85; box-shadow: 0 0 0 6px rgba(241, 194, 51, 0); }
}

/* --- Responsive polish --- */
@media (max-width: 849px) {
	.box.box-blog-post { border-radius: var(--s67-radius-sm); }
	.sv-livestream-wrapper.sv-style-1 { border-radius: var(--s67-radius-md); padding: var(--s67-space-2); }
	.entry-content h2, .entry-content h3,
	.page-content h2, .page-content h3 { padding-left: 11px; }
}

@media (max-width: 549px) {
	/* Video/post grid → 2 cards per row on mobile (was 1 via .small-columns-1) */
	.row.small-columns-1 > .col.post-item {
		width: 50% !important;
		max-width: 50% !important;
		flex-basis: 50% !important;
	}
	.row.small-columns-1.row-small { margin-left: -8px; margin-right: -8px; }
	.row.small-columns-1.row-small > .col.post-item { padding: 0 8px 16px; }

	.box-blog-post .post-title { font-size: 13.5px; line-height: 1.3; }
	.box-blog-post .box-text { padding: var(--s67-space-3) var(--s67-space-3) var(--s67-space-4) !important; }
	.box-blog-post .cat-label,
	.box-blog-post .tag-label { font-size: 9.5px !important; padding: 3px 8px; }
	.has-post-icon .box-image::after { width: 44px; height: 44px; background-size: 18px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}