/* User Profile Page Component */

/* Profile info section - Replaces old .profile-header container styles */
.profile-info-section {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-4);
    margin-bottom: var(--spacing-12);
}

/* Address section with label and value */
.profile-address-section {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.profile-address-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-1);
    display: block;
}

.profile-address-value {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    word-break: break-all;
    display: block;
}

/* Profile header row - flex layout for address + button */
.profile-header-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
}

.profile-header-row .profile-address-section {
    flex: 1;
    margin-top: 0;
    margin-bottom: 0;
}

.profile-header-row .btn {
    flex-shrink: 0;
    align-self: flex-start;
}

/* More specific selector to override sidebar styles */
.profile-content.sidebar-recent-posts h2 {
    margin-top: 0;
    margin-bottom: var(--spacing-5);
}

.profile-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.no-content {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Author links (used in post list and comments) */
.author-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: bold;
    font-family: var(--font-family-mono);
}

a.author-link:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

/* Author links in post metadata - explicit selector to prevent base link color override */
.post-detail-metadata .author-link {
    color: var(--color-text-secondary);
}

.post-detail-metadata a.author-link:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

/* Author links in comments - CRITICAL: Using child combinator (>) throughout
   to prevent color inheritance to nested comment replies.

   Example: If an OP makes a comment and a regular user replies to it,
   the regular user's name should NOT inherit the OP's accent color. */

/* Regular users in comments - explicit high-specificity selector */
.comment-item:not(.comment-author-op):not(.comment-author-self):not(.comment-author-admin):not(.comment-author-mod):not(.comment-author-herald) > .comment-content > .comment-content-inner > .comment-meta > strong > .author-link {
    color: var(--color-text-secondary);
}

.comment-item:not(.comment-author-op):not(.comment-author-self):not(.comment-author-admin):not(.comment-author-mod):not(.comment-author-herald) > .comment-content > .comment-content-inner > .comment-meta > strong > a.author-link:hover {
    color: var(--color-text-primary);
}

/* Special roles (OP, self, admin, mod) - use accent color */
.comment-author-op > .comment-content > .comment-content-inner > .comment-meta > strong > .author-link,
.comment-author-self > .comment-content > .comment-content-inner > .comment-meta > strong > .author-link,
.comment-author-admin > .comment-content > .comment-content-inner > .comment-meta > strong > .author-link,
.comment-author-mod > .comment-content > .comment-content-inner > .comment-meta > strong > .author-link {
    color: var(--color-accent);
}

/* Hover states for special roles - consolidated */
.comment-author-op > .comment-content > .comment-content-inner > .comment-meta > strong > a.author-link:hover,
.comment-author-self > .comment-content > .comment-content-inner > .comment-meta > strong > a.author-link:hover,
.comment-author-admin > .comment-content > .comment-content-inner > .comment-meta > strong > a.author-link:hover,
.comment-author-mod > .comment-content > .comment-content-inner > .comment-meta > strong > a.author-link:hover {
    color: var(--color-accent-dark);
}

/* Herald ethereum addresses with eth aurora effect - ensure transparent color for gradient visibility */
.comment-author-herald > .comment-content > .comment-content-inner > .comment-meta > strong > .author-link.eth-address-aurora {
    color: transparent;
}

.comment-author-herald > .comment-content > .comment-content-inner > .comment-meta > strong > a.author-link.eth-address-aurora:hover {
    color: transparent;
}

/* Herald with laurel wrapper - parallel selectors for .laurel-wrap insertion */
.comment-author-herald > .comment-content > .comment-content-inner > .comment-meta > strong > .laurel-wrap > .author-link.eth-address-aurora {
    color: transparent;
}

.comment-author-herald > .comment-content > .comment-content-inner > .comment-meta > strong > .laurel-wrap > a.author-link.eth-address-aurora:hover {
    color: transparent;
}

.profile-info {
    margin-bottom: var(--spacing-6);
}

.profile-field {
    margin-bottom: var(--spacing-5);
}

.profile-field label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--color-text-primary);
}

.profile-field .profile-value {
    display: block;
    color: var(--color-text-secondary);
}

.profile-actions {
    margin-top: var(--spacing-6);
    display: flex;
    gap: var(--spacing-3);
}

/* Mobile: Stack address and button vertically */
@media (max-width: 575px) {
    .profile-header-row {
        flex-direction: column;
    }

    .profile-header-row .btn {
        align-self: flex-start;
    }
}