/* Add here all your CSS customizations */

/* Mobile header: one line - menu left, logo center, profile (avatar + dropdown) right */
@media only screen and (max-width: 767px) {
	.header.header-mobile-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 60px;
		padding: 0 10px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.header.header-mobile-row .logo-container {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		display: flex !important;
		align-items: center;
		flex: 1;
		min-width: 0;
		height: 60px;
		margin-top: 0 !important;
	}

	.header.header-mobile-row .logo-container .toggle-sidebar-left {
		position: relative !important;
		right: auto !important;
		top: auto !important;
		flex-shrink: 0;
		margin-right: 10px;
	}

	.header.header-mobile-row .logo-container .logo {
		display: flex !important;
		align-items: center;
		justify-content: center;
		flex: 1;
		margin: 0 !important;
		min-width: 0;
	}

	.header.header-mobile-row .logo-container .logo img {
		max-height: 40px;
		width: auto;
	}

	.header.header-mobile-row .header-right {
		margin-top: 0 !important;
		width: auto !important;
		height: 60px !important;
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}

	/* On mobile: show only avatar + dropdown arrow in userbox */
	.header.header-mobile-row .userbox .profile-info {
		display: none !important;
	}

	.header.header-mobile-row .userbox .custom-caret {
		display: inline-block !important;
		font-size: 10px;
		margin-left: 2px;
	}

	.header.header-mobile-row .userbox-link {
		display: flex !important;
		align-items: center;
	}

	.header.header-mobile-row .userbox .profile-picture {
		margin: 0;
	}

	.header.header-mobile-row .userbox .profile-picture img {
		width: 36px;
		height: 36px;
		object-fit: cover;
	}

	/* Push content below fixed header (admin: inner-wrapper; members/prayers: content-body) */
	.header.header-mobile-row + .inner-wrapper {
		padding-top: 60px !important;
	}
	.header.header-mobile-row + .content-body {
		padding-top: 60px !important;
	}
}

/* Desktop: restore logo before toggle when not mobile (toggle was moved first in HTML) */
@media only screen and (min-width: 768px) {
	.header.header-mobile-row .logo-container {
		display: block;
	}

	.header.header-mobile-row .logo-container .toggle-sidebar-left {
		position: absolute;
		right: 15px;
		top: 14px;
	}

	.header.header-mobile-row .logo-container .logo {
		display: inline-block;
	}
}