/* Member profile header on phones (includes/profile-mobile-header.php).
   Wider screens keep BuddyBoss's header as it is.

   Two headers share these rules: BuddyBoss's own (body.bp-user) and the
   account shell's copy of it (.idu-account-bp-header), which My Account and
   the dashboards use with no member body class. */

.idu-mhead__sub,
.idu-mhead__facts,
.idu-mhead__edit,
.idu-mhead-tabs {
	display: none;
}

/* The account shell header (Settings, Messages, My Account...) carries an
   empty cover strip that BuddyBoss's own header does not, since cover images
   are switched off. Gone at every width, and the photo no longer overlaps it. */
:is( .bp-user, .idu-account-bp-header ) #header-cover-image {
	display: none !important;
}
:is( .bp-user, .idu-account-bp-header ) #item-header-cover-image.bb-enable-cover-img #item-header-avatar,
:is( .bp-user, .idu-account-bp-header ) #item-header-cover-image.bb-enable-cover-img {
	margin-top: 0 !important;
}

@media (max-width: 800px) {
	:is( .bp-user, .idu-account-bp-header ) #cover-image-container,
	.idu-account-bp-header #cover-image-container {
		padding: 0 !important;
	}
	/* The cover photo strip: the row replaces it on phones. */
	:is( .bp-user, .idu-account-bp-header ) #header-cover-image,
	.idu-account-bp-header #header-cover-image {
		display: none !important;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-cover-image.bb-enable-cover-img,
	.idu-account-bp-header #item-header-cover-image.bb-enable-cover-img {
		margin-top: 0 !important;
	}

	/* One row: photo, then name and handle. Edit sits in the corner. */
	:is( .bp-user, .idu-account-bp-header ) #item-header-cover-image {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding: 16px 16px 14px !important;
		margin-bottom: 0 !important;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-cover-image #item-header-avatar {
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
		/* BuddyBoss centres the photo with auto margins below 782px. */
		margin: 0 !important;
		padding: 0 !important;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-avatar img.avatar {
		width: 56px !important;
		height: 56px !important;
		max-width: none;
		margin: 0;
		border-width: 0;
		border-radius: 50%;
		box-shadow: none;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-avatar .member-status {
		width: 12px;
		height: 12px;
		right: 2px;
		bottom: 2px;
		top: auto;
		left: auto;
	}
	/* The type badge under the photo, and the change-photo overlay. */
	:is( .bp-user, .idu-account-bp-header ) #item-header-avatar .bp-member-type,
	:is( .bp-user, .idu-account-bp-header ) #item-header-avatar .link-change-profile-image,
	:is( .bp-user, .idu-account-bp-header ) #item-header-avatar .link-change-overlay {
		display: none !important;
	}

	:is( .bp-user, .idu-account-bp-header ) #item-header-content {
		/* BuddyBoss makes it a full row (flex: 0 0 100%) below 782px, which wraps it under the photo. */
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
		margin: 0 !important;
		/* Room for the Edit button in the corner. */
		padding: 0 60px 0 0 !important;
		text-align: left !important;
	}
	/* No Edit on someone else's profile, so the name gets the full width. */
	:is( .bp-user, .idu-account-bp-header ) #item-header-content:not( :has( .idu-mhead__edit ) ) {
		padding-right: 0 !important;
	}
	/* BuddyBoss centres these rows below 782px. */
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .flex,
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-title-wrap {
		justify-content: flex-start !important;
		text-align: left !important;
	}
	/* Name and verified tick flow as one line of text, so the tick stays
	   beside the surname when a long name wraps. */
	/* BuddyBoss lays this out as a centred flex column below 782px, which puts
	   the tick on its own row and squeezes the name; it becomes plain flow. */
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .bb-user-content-wrap {
		display: block !important;
		width: 100% !important;
		min-width: 0;
		text-align: left !important;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-title-wrap {
		display: inline !important;
		margin: 0;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-content h2.user-nicename {
		display: inline;
		margin: 0;
		font-size: 18px !important;
		line-height: 1.3 !important;
		/* Wraps between words only. */
		white-space: normal !important;
		overflow-wrap: normal !important;
		word-break: normal !important;
		hyphens: none;
	}
	/* The type badge beside the name; the verified tick stays. */
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-title-wrap .bp-member-type {
		display: none;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .idu-member-badges,
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-title-wrap > .idu-verified-badge {
		display: inline-flex !important;
		width: auto !important;
		margin: 0 0 0 4px !important;
		vertical-align: -2px;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .idu-member-badges svg,
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-title-wrap > .idu-verified-badge svg {
		width: 16px;
		height: 16px;
	}
	/* Joined / active, flag and status: too much for one row. The handle line
	   and Edit button are rendered inside the same wrapper, so only these two go. */
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .item-meta,
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .idu-profile-header-meta,
	.idu-account-bp-header #item-header-content .item-meta,
	.idu-account-bp-header #item-header-content .idu-profile-header-meta {
		display: none !important;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .header-meta-wrap {
		margin: 0;
	}

	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__sub {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 6px;
		margin-top: 2px;
		color: var(--bb-alternate-text-color, #787f86);
		font-size: 13px;
		line-height: 1.4;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__handle,
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__location {
		white-space: nowrap;
	}

	/* From and Journey, under the handle. */
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__facts {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		text-align: left !important;
		margin: 10px 0 0;
		padding: 10px 0 0;
		border-top: 1px solid var(--bb-content-border-color, #e7e9ec);
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__fact {
		margin: 0;
		text-align: left !important;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__fact dt {
		display: flex;
		align-items: center;
		gap: 5px;
		margin: 0 0 1px;
		color: var(--bb-alternate-text-color, #787f86);
		font-size: 10px;
		font-weight: 600;
		letter-spacing: .06em;
		line-height: 1.3;
		text-transform: uppercase;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__fact-icon {
		flex: 0 0 auto;
		width: 14px;
		height: 14px;
		color: var(--idu-listings-gold, #eca002);
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__fact dd {
		margin: 0;
		color: var(--idu-listings-primary-ink, #032b1b);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.35;
	}

	/* Connect / Message / more on another member's profile: a row of small
	   buttons under the details, not a centred stack. */
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-header-actions-wrap {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: flex-start !important;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin: 10px 0 0 !important;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-header-actions {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: flex-start !important;
		align-items: center;
		gap: 8px;
		margin: 0 !important;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-header-actions .generic-button,
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-header-actions > * {
		display: inline-block !important;
		width: auto !important;
		flex: 0 0 auto;
		margin: 0 !important;
	}
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-header-actions .generic-button button,
	:is( .bp-user, .idu-account-bp-header ) #item-header-content .member-header-actions .generic-button a {
		min-height: 0;
		padding: 7px 14px;
		font-size: 13px;
		line-height: 1.2;
	}

	/* Edit, in the top-right corner of the card. */
	:is( .bp-user, .idu-account-bp-header ) a.idu-mhead__edit {
		position: absolute;
		top: 12px;
		right: 12px;
		display: inline-flex;
		align-items: center;
		padding: 5px 14px;
		border: 1px solid var(--idu-listings-primary-ink, #032b1b);
		border-radius: 999px;
		background: var(--bb-content-background-color, #fff);
		color: var(--idu-listings-primary-ink, #032b1b);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
	}

	/* Pill tabs under the header. */
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead-tabs {
		display: flex;
		gap: 8px;
		margin: 12px 0 0;
		padding: 2px 0;
		overflow-x: auto;
		scrollbar-width: none;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead-tabs::-webkit-scrollbar {
		display: none;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead-tabs__tab {
		flex: 0 0 auto;
		padding: 8px 16px;
		border: 1px solid var(--bb-content-border-color, #e7e9ec);
		border-radius: 999px;
		background: var(--bb-content-background-color, #fff);
		color: var(--idu-listings-primary-ink, #032b1b);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead-tabs__tab.is-active {
		border-color: var(--idu-listings-primary-ink, #032b1b);
		background: var(--idu-listings-primary-ink, #032b1b);
		color: #fff;
	}
}

/* Joined / active, then the flag, From and journey, as on the Connections list. */
.idu-mhead__when,
.idu-mhead__meta {
	display: none;
}
@media (max-width: 800px) {
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__when {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 6px;
		margin: 10px 0 0;
		padding: 10px 0 0;
		border-top: 1px solid var(--bb-content-border-color, #e7e9ec);
		color: var(--bb-alternate-text-color, #787f86);
		font-size: 13px;
		line-height: 1.4;
		text-align: left !important;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 12px;
		margin: 6px 0 0;
		color: var(--bb-alternate-text-color, #787f86);
		font-size: 13px;
		line-height: 20px;
		text-align: left !important;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta-item {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		min-width: 0;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta-item .idu-ico,
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta-item .idu-mhead__fact-icon {
		flex: 0 0 15px;
		width: 15px;
		height: 15px;
		color: var(--idu-listings-gold, #eca002) !important;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta-label {
		font-weight: 600;
		color: var(--idu-listings-primary-ink, #032b1b);
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta-flag {
		display: inline-flex;
		align-items: center;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta-flag svg,
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta-flag img {
		display: block;
		width: 17px;
		height: 12px;
		border-radius: 2px;
		object-fit: cover;
	}
}

/* Run the joined line and the facts the full width of the card: back under
   the photo (56px + 14px gap) and out past the room kept for Edit (60px). */
@media (max-width: 800px) {
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__when,
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta {
		margin-left: -70px !important;
		margin-right: -60px !important;
		width: auto;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__when {
		margin-top: 14px !important;
		padding-top: 12px;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta {
		gap: 6px 14px;
	}
	:is( .bp-user, .idu-account-bp-header ) .idu-mhead__meta-item {
		white-space: nowrap;
	}
}

/* Only the member's own header keeps room for Edit; elsewhere there is no
   right-hand gap to reach into. */
@media (max-width: 800px) {
	#item-header-content:not(:has(.idu-mhead__edit)) .idu-mhead__when,
	#item-header-content:not(:has(.idu-mhead__edit)) .idu-mhead__meta {
		margin-right: 0 !important;
	}
}