/**
 * Astra-styled Ultimate Member Profile Template
 *
 * Uses Astra CSS custom properties for full theme compatibility.
 * Colors, fonts, spacing, and border-radius adapt automatically
 * when changed in the Astra Customizer.
 */

/* ============================================================
   1. WRAPPER & GENERAL RESET
   ============================================================ */
.um-astra-profile.um {
	font-family: inherit; /* Inherits Astra body font */
	color: var(--ast-global-color-3, #334155);
	line-height: 1.65;
	max-width: 100%;
}

.um-astra-profile.um *,
.um-astra-profile.um *::before,
.um-astra-profile.um *::after {
	box-sizing: border-box;
}

/* ============================================================
   2. PROFILE HEADER / COVER AREA
   ============================================================ */
.um-astra-profile .um-cover {
	border-radius: 6px 6px 0 0;
	overflow: hidden;
}

.um-astra-profile .um-cover-e {
	border-radius: 6px 6px 0 0;
}

.um-astra-profile .um-profile-headerinfo {
	background: var(--ast-global-color-5, #F0F5FA);
	border: 1px solid var(--ast-border-color, #dddddd);
	border-top: none;
	border-radius: 0 0 6px 6px;
	padding: 20px 25px;
}

/* When there's no cover photo, round all corners */
.um-astra-profile .um-profile-headerinfo:first-child {
	border-radius: 6px;
	border-top: 1px solid var(--ast-border-color, #dddddd);
}

/* ============================================================
   3. PROFILE PHOTO
   ============================================================ */
.um-astra-profile .um-profile-photo img {
	border: 3px solid var(--ast-global-color-4, #ffffff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.um-astra-profile .um-profile-photo a:hover img {
	border-color: var(--ast-global-color-0, #046bd2);
}

/* ============================================================
   4. DISPLAY NAME & META
   ============================================================ */
.um-astra-profile .um-name a {
	color: var(--ast-global-color-2, #1e293b) !important;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.um-astra-profile .um-name a:hover {
	color: var(--ast-global-color-0, #046bd2) !important;
}

.um-astra-profile .um-meta-text {
	color: var(--ast-global-color-3, #334155);
	font-size: 14px;
}

/* ============================================================
   5. BIO / DESCRIPTION
   ============================================================ */
.um-astra-profile .um-meta-text.um-bio {
	color: var(--ast-global-color-3, #334155);
	line-height: 1.65;
	margin-top: 10px;
}

/* ============================================================
   6. NAVIGATION BAR (TABS)
   ============================================================ */
.um-astra-profile .um-profile-navbar {
	background: var(--ast-global-color-4, #ffffff);
	border: 1px solid var(--ast-border-color, #dddddd);
	border-radius: 6px;
	margin-top: 20px;
	padding: 0 10px;
}

.um-astra-profile .um-profile-nav-item a {
	color: var(--ast-global-color-3, #334155) !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	padding: 12px 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.um-astra-profile .um-profile-nav-item a:hover {
	color: var(--ast-global-color-0, #046bd2) !important;
	border-bottom-color: var(--ast-global-color-0, #046bd2);
}

.um-astra-profile .um-profile-nav-item.active a {
	color: var(--ast-global-color-0, #046bd2) !important;
	border-bottom-color: var(--ast-global-color-0, #046bd2);
	font-weight: 600;
}

.um-astra-profile .um-profile-nav-item a .um-faicon {
	font-size: 15px;
}

/* ============================================================
   7. PROFILE MENU (SECONDARY / SUBMENU TABS)
   ============================================================ */
.um-astra-profile .um-profile-menu {
	border: none;
	margin-top: 0;
}

.um-astra-profile .um-profile-menu a {
	color: var(--ast-global-color-3, #334155);
	transition: color 0.2s ease;
}

.um-astra-profile .um-profile-menu a:hover,
.um-astra-profile .um-profile-menu a.active {
	color: var(--ast-global-color-0, #046bd2);
}

/* ============================================================
   8. PROFILE BODY / CONTENT AREA
   ============================================================ */
.um-astra-profile .um-profile-body {
	padding-top: 15px;
	padding-bottom: 15px;
	max-width: 600px;
	margin: auto;
}

/* About section fields */
.um-astra-profile .um-profile-body .um-row {
	margin-bottom: 15px;
}

.um-astra-profile .um-field-label {
	color: var(--ast-global-color-2, #1e293b);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 5px;
}

.um-astra-profile .um-field-value,
.um-astra-profile .um-field-area .um-field-value {
	color: var(--ast-global-color-3, #334155);
	font-size: 15px;
	line-height: 1.65;
}

/* ============================================================
   9. BUTTONS (SUBMIT / PRIMARY)
   ============================================================ */
.um-astra-profile input[type="submit"],
.um-astra-profile .um-col-alt input[type="submit"].um-button,
.um-astra-profile .wp-block-button .wp-block-button__link,
.um-astra-profile .wp-block-search .wp-block-search__button,
.um-astra-profile .wp-block-file .wp-block-file__button {
	background-color: var(--ast-global-color-0, #046bd2) !important;
	color: var(--ast-global-color-4, #ffffff) !important;
	border: none !important;
	border-radius: 4px !important;
	padding: 16px 20px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
}

.um-astra-profile input[type="submit"]:hover,
.um-astra-profile .um-col-alt input[type="submit"].um-button:hover,
.um-astra-profile .wp-block-button .wp-block-button__link:hover,
.um-astra-profile .wp-block-search .wp-block-search__button:hover,
.um-astra-profile .wp-block-file .wp-block-file__button:hover {
	background-color: var(--ast-global-color-8, #111111) !important;
}

/* Secondary / Cancel Button */
.um-astra-profile a.um-button.um-alt,
.um-astra-profile .um-profile-cancel-a {
	background-color: transparent !important;
	color: var(--ast-global-color-3, #334155) !important;
	border: 2px solid var(--ast-border-color, #dddddd) !important;
}

.um-astra-profile a.um-button.um-alt:hover,
.um-astra-profile .um-profile-cancel-a:hover {
	border-color: var(--ast-global-color-0, #046bd2) !important;
	color: var(--ast-global-color-0, #046bd2) !important;
	background-color: transparent !important;
}

/* ============================================================
   9b. DROPDOWN (.um-dropdown-b / .um-dropdown)
   ============================================================ */
.um-astra-profile .um-dropdown-b {
	position: relative;
}

.um-astra-profile .um-dropdown {
	background: var(--ast-global-color-4, #ffffff);
	border: 1px solid var(--ast-border-color, #e5e5e5);
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.um-astra-profile .um-dropdown li a {
	display: block;
	padding: 8px 12px;
	color: var(--ast-global-color-3, #666) !important;
	background: transparent !important;
	font-size: 14px;
	font-weight: normal !important;
	line-height: 18px;
	text-decoration: none;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	transform: none !important;
}

.um-astra-profile .um-dropdown li a:hover {
	background: var(--ast-global-color-5, #F0F5FA) !important;
	color: var(--ast-global-color-0, #046bd2) !important;
}

.um-astra-profile .um-dropdown li:last-child a {
	border-top: 1px solid var(--ast-border-color, #e5e5e5) !important;
	padding: 12px;
}

/* Profile header action icons (edit, settings gear) – keep original icon style */
.um-astra-profile .um-profile-edit a,
.um-astra-profile .um-profile-headericon a {
	background: transparent !important;
	color: var(--ast-global-color-3, #334155) !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	font-size: inherit;
	transition: color 0.2s ease;
}

.um-astra-profile .um-profile-edit a:hover,
.um-astra-profile .um-profile-headericon a:hover {
	color: var(--ast-global-color-8, #111111) !important;
	background: transparent !important;
}

/* ============================================================
   10. FORM FIELDS (EDIT MODE)
   ============================================================ */
.um-astra-profile .um-field input[type="text"],
.um-astra-profile .um-field input[type="email"],
.um-astra-profile .um-field input[type="url"],
.um-astra-profile .um-field input[type="tel"],
.um-astra-profile .um-field input[type="number"],
.um-astra-profile .um-field input[type="password"],
.um-astra-profile .um-field textarea,
.um-astra-profile .um-field select {
	border: 1px solid var(--ast-border-color, #dddddd) !important;
	border-radius: 3px;
	background: var(--ast-comment-inputs-background, #ffffff) !important;
	color: var(--ast-global-color-3, #334155);
	padding: 10px 14px;
	font-size: 15px;
	font-family: inherit;
	line-height: 1.5;
	width: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.um-astra-profile .um-field input[type="text"]:focus,
.um-astra-profile .um-field input[type="email"]:focus,
.um-astra-profile .um-field input[type="url"]:focus,
.um-astra-profile .um-field input[type="tel"]:focus,
.um-astra-profile .um-field input[type="number"]:focus,
.um-astra-profile .um-field input[type="password"]:focus,
.um-astra-profile .um-field textarea:focus,
.um-astra-profile .um-field select:focus {
	border-color: var(--ast-global-color-0, #046bd2);
	box-shadow: 0 0 0 2px rgba(4, 107, 210, 0.15);
	outline: none;
}

/* ============================================================
   11. SOCIAL ICONS
   ============================================================ */
.um-astra-profile .um-profile-connect ul li a {
	color: var(--ast-global-color-3, #334155);
	transition: color 0.2s ease;
}

.um-astra-profile .um-profile-connect ul li a:hover {
	color: var(--ast-global-color-0, #046bd2);
}

/* ============================================================
   12. PROFILE COMPLETENESS BAR
   ============================================================ */
.um-astra-profile .um-profile-completeness {
	background: var(--ast-global-color-5, #F0F5FA);
	border: 1px solid var(--ast-border-color, #dddddd);
	border-radius: 6px;
	padding: 15px 20px;
	margin-bottom: 15px;
}

.um-astra-profile .um-profile-completeness .um-tip-text {
	color: var(--ast-global-color-3, #334155);
	font-size: 13px;
}

.um-astra-profile .um-profile-completeness-bar {
	background: var(--ast-global-color-7, #D1D5DB);
	border-radius: 10px;
	overflow: hidden;
}

.um-astra-profile .um-profile-completeness-bar span {
	background: var(--ast-global-color-0, #046bd2);
	border-radius: 10px;
}

/* ============================================================
   13. BADGES / ROLE TAGS
   ============================================================ */
.um-astra-profile .um-member-status {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 10px;
	border-radius: 3px;
	background: var(--ast-global-color-0, #046bd2);
	color: var(--ast-global-color-4, #ffffff);
}

/* ============================================================
   14. RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
	.um-astra-profile .um-profile-headerinfo {
		padding: 15px 18px;
		text-align: center;
	}

	.um-astra-profile .um-profile-navbar {
		padding: 0 5px;
	}

	.um-astra-profile .um-profile-nav-item a {
		padding: 10px 10px;
		font-size: 13px;
	}

	.um-astra-profile .um-profile-body {
		padding: 18px 18px;
	}

	.um-astra-profile .um-profile-edit-a,
	.um-astra-profile input[type="submit"],
	.um-astra-profile a.um-button {
		padding: 8px 18px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.um-astra-profile .um-profile-navbar {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.um-astra-profile .um-profile-nav-item {
		display: inline-block;
		float: none;
	}

	.um-astra-profile .um-profile-body {
		padding: 15px 14px;
	}
}