.page-header {
    width: 100%;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: center; /* Center the title */
    align-items: center;
    position: relative; /* This is crucial for positioning the child elements */
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
    box-sizing: border-box; /* Ensures padding doesn't add to the width */
}

.header-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--primary-text);
}

.header-back-link {
    position: absolute;
    left: 2rem; /* Position on the far left */
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-text);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
}

    .header-back-link:hover {
        color: var(--primary-text);
    }

/* Override the position of the user-profile-widget to place it in the header */
.page-header .user-profile-widget {
    position: absolute;
    right: 2rem; /* Position on the far right */
    top: 50%;
    transform: translateY(-50%);
}