/**
 * The UsersWP profile page.
 *
 * UsersWP renders the profile from its own Bootstrap markup: a banner image, a
 * round avatar overlapping it, a tab bar, and then whatever the active tab
 * shows. The plugin's own styling is Bootstrap's, which on this site meant a
 * full-bleed grey placeholder photograph, a plain tab strip and listing cards
 * that looked nothing like the ones in the Directory.
 *
 * Nothing here changes UsersWP's markup or its classes — the tabs, the image
 * uploaders and the AyeCode "greedy" nav that collapses tabs on a narrow screen
 * all keep working.
 */

/* ==========================================================================
   The page
   ========================================================================== */

/*
 * Wider than the theme's 1100px content column.
 *
 * #brx-content.wordpress sets width:1100px, which on a page of listing rows
 * left a lot of empty margin either side. The override is scoped to this page
 * and the My Content page rather than changed globally, because every other
 * page on the site was designed against 1100.
 */
.uwp_profile_page #brx-content.wordpress {
	width: 1280px;
	/* max-width is stated because the theme's own is 1280px, not 100% — a bare
	   width on a phone therefore overflowed the viewport sideways. */
	max-width: 100%;
}

.uwp_profile_page .uwp_page,
.uwp_profile_page .uwp_widgets {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

/* The rows inside a content tab take the full width of the page. */
.uwp_profile_page .gcn-mine--profile {
	max-width: none;
	margin-bottom: 0;
}

/*
 * The page's own H1 is the user's name, and the profile card says the name
 * again immediately below it. One of them is enough, and the card is the one
 * with the picture beside it.
 */
.uwp_profile_page #brx-content > h1 {
	display: none;
}

/* wpautop leaves empty paragraphs between UsersWP's elements. */
.uwp_profile_page .uwp_widgets p:empty {
	display: none;
}

/* ==========================================================================
   The header card
   ========================================================================== */

.uwp-profile-header .card {
	overflow: hidden;
	/*
	 * The brand gradient sits behind the banner. A user who has uploaded one
	 * covers it; the plugin's grey placeholder photograph is made transparent
	 * below, so an empty profile gets colour instead of stock scenery.
	 */
	background:
		radial-gradient(70% 140% at 10% 0%, hsl(168 48% 30% / 0.75) 0%, transparent 60%),
		linear-gradient(115deg, var(--gcn-brand-strong) 0%, #0b4f45 55%, #10333c 100%);
	border: 1px solid var(--gcn-rule) !important;
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-md);
}

.uwp-banner-image {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

/* The plugin's default banner: keep the box, drop the picture. */
.uwp-banner-image[src*="/userswp/assets/images/banner.png"] {
	opacity: 0;
}

/* The camera buttons that open the image uploaders. */
.uwp-banner-change-icon {
	color: #fff !important;
	background: hsl(0 0% 0% / 0.35) !important;
	border-radius: var(--gcn-radius-pill) !important;
}

.uwp-banner-change-icon:hover {
	background: hsl(0 0% 0% / 0.55) !important;
}

/* The card body sits on white, under the coloured band. */
.uwp-profile-header .card-body {
	position: relative;
	padding: var(--gcn-space-6) var(--gcn-space-6) var(--gcn-space-5);
	background: var(--gcn-surface);
}

/* The avatar, overlapping the band. */
.uwp-profile-header .card-body img.rounded-circle {
	width: 120px;
	height: 120px;
	object-fit: cover;
	background: var(--gcn-surface);
	border: 4px solid var(--gcn-surface) !important;
	box-shadow: var(--gcn-shadow-md);
}

.uwp-profile-header .card-body h2,
.uwp-profile-header .card-body h3,
.uwp-profile-header .uwp-profile-name {
	font-size: var(--gcn-text-2xl);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

/* The counts UsersWP shows under the name. */
.uwp-profile-header .badge,
.uwp_page .badge {
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-strong) !important;
	background: var(--gcn-brand-soft) !important;
	border-radius: var(--gcn-radius-pill);
}

/* ==========================================================================
   The tab bar
   ========================================================================== */

.uwp_page .nav-tabs,
.uwp_page .uwp-profile-nav {
	gap: var(--gcn-space-1);
	margin-top: var(--gcn-space-6);
	border-bottom: 1px solid var(--gcn-rule) !important;
}

.uwp_page .nav-tabs .nav-link,
.uwp_page .uwp-profile-nav a {
	padding: 0.7em 1.1em;
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-medium);
	color: var(--gcn-text-muted) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	transition: color var(--gcn-duration) var(--gcn-ease);
}

.uwp_page .nav-tabs .nav-link:hover {
	color: var(--gcn-brand-strong) !important;
}

.uwp_page .nav-tabs .nav-link.active,
.uwp_page .uwp-profile-nav li.active a {
	color: var(--gcn-text) !important;
	font-weight: var(--gcn-weight-semibold);
	border-bottom-color: var(--gcn-brand) !important;
}

/* The GeoDirectory sub-tabs inside Listings: one per post type. */
.uwp_page .btn-outline-primary,
.uwp_page .btn-primary {
	padding: 0.4em 0.9em;
	margin: 0 var(--gcn-space-2) var(--gcn-space-2) 0;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-medium);
	border-radius: var(--gcn-radius-pill) !important;
}

.uwp_page .btn-outline-primary {
	color: var(--gcn-text-soft) !important;
	background: var(--gcn-surface) !important;
	border: 1px solid var(--gcn-rule-strong) !important;
}

.uwp_page .btn-outline-primary:hover {
	color: var(--gcn-brand-strong) !important;
	background: var(--gcn-brand-soft) !important;
	border-color: var(--gcn-brand-border) !important;
}

.uwp_page .btn-primary {
	color: var(--gcn-brand-contrast) !important;
	background: var(--gcn-brand) !important;
	border: 1px solid var(--gcn-brand) !important;
}

/* ==========================================================================
   The tab content
   ========================================================================== */

.uwp_page .tab-content,
.uwp-profile-content {
	padding-top: var(--gcn-space-6);
}

/* UsersWP's "nothing here" notices. */
.uwp_page .alert-info,
.uwp_page .uwp-no-results {
	padding: var(--gcn-space-5);
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted) !important;
	background: var(--gcn-surface-sunken) !important;
	border: 0 !important;
	border-radius: var(--gcn-radius-md);
}

@media (max-width: 640px) {

	.gcn-profile__panel {
		padding: var(--gcn-space-5);
	}

	.gcn-profile__panelaction {
		margin-left: 0;
		flex: 1 1 100%;
	}

	.gcn-profile__editlink {
		display: block;
		text-align: center;
	}

	.uwp-banner-image {
		height: 150px;
	}

	.uwp-profile-header .card-body img.rounded-circle {
		width: 92px;
		height: 92px;
	}
}

/* ==========================================================================
   The stats under the name
   ==========================================================================
   UsersWP prints these as a Bootstrap navbar of dark badges. The counts are
   pointed at the Directory post types in inc/profile-tabs.php; this makes them
   read as statistics rather than as a menu.
   ========================================================================== */

.uwp-profile-header nav.navbar {
	padding: 0 !important;
	background: transparent !important;
}

/*
 * A row of pills at every width. Bootstrap's navbar stacks its items into a
 * column below its breakpoint, which turned six stats into six full-width
 * bordered rows on a phone.
 */
.uwp-profile-header .navbar-nav {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--gcn-space-2);
	justify-content: center;
}

.uwp-profile-header .navbar-nav .nav-item {
	flex: 0 0 auto;
	background: transparent;
	border: 0;
}

.uwp-profile-header .navbar-nav .nav-item .nav-link {
	padding: 0 !important;
}

.uwp-profile-header .navbar-nav .badge {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 0.4em 0.8em !important;
	font-size: var(--gcn-text-sm) !important;
	font-weight: var(--gcn-weight-medium) !important;
	color: var(--gcn-text-soft) !important;
	background: var(--gcn-surface-sunken) !important;
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-pill);
}

/* The number inside each pill. */
.uwp-profile-header .navbar-nav .badge .badge {
	padding: 0 !important;
	font-weight: var(--gcn-weight-bold) !important;
	color: var(--gcn-brand-strong) !important;
	background: transparent !important;
	border: 0;
}

/* ==========================================================================
   The Profile tab's own content
   ========================================================================== */

.gcn-profile__panel {
	padding: var(--gcn-space-6);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-sm);
}

.gcn-profile__panelhead {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-3);
	align-items: center;
	margin-bottom: var(--gcn-space-5);
	padding-bottom: var(--gcn-space-4);
	border-bottom: 1px solid var(--gcn-rule);
}

.gcn-profile__paneltitle {
	margin: 0;
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

/* The Edit button sits at the top right of the panel. */
.gcn-profile__panelaction {
	margin-left: auto;
}

/* The details themselves: label above value, two or three to a row. */
.gcn-profile__details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--gcn-space-5);
	margin: 0;
}

.gcn-profile__detail {
	min-width: 0;
}

.gcn-profile__label {
	margin: 0 0 0.2em;
	font-size: var(--gcn-text-2xs);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: var(--gcn-text-faint);
}

.gcn-profile__value {
	margin: 0;
	font-size: var(--gcn-text-md);
	line-height: var(--gcn-leading-snug);
	color: var(--gcn-text);
	overflow-wrap: anywhere;
}

.gcn-profile__value a {
	color: var(--gcn-brand-strong);
}

.gcn-profile__panel .gcn-profile__editnote {
	margin: var(--gcn-space-5) 0 0;
	padding-top: var(--gcn-space-4);
	font-size: var(--gcn-text-sm);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text-muted);
	border-top: 1px solid var(--gcn-rule);
}

.gcn-profile__edit {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-4);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--gcn-space-5);
	padding: var(--gcn-space-5);
	background: var(--gcn-surface-sunken);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-md);
}

.gcn-profile__editnote {
	flex: 1 1 20rem;
	margin: 0;
	font-size: var(--gcn-text-sm);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text-muted);
}

.gcn-profile__editlink {
	flex: 0 0 auto;
	padding: 0.65em 1.3em;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-contrast);
	text-decoration: none;
	background: var(--gcn-brand);
	border-radius: var(--gcn-radius-md);
	transition: background var(--gcn-duration) var(--gcn-ease);
}

.gcn-profile__editlink:hover,
.gcn-profile__editlink:focus-visible {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand-strong);
}