/* ──────── Top Level Container ──────── */
.user-profile__container {
    margin-top: var(--space-xl);
}


/* ──────── Header row, including profile card and buttons ──────── */

.user-profile__profile-card-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: var(--space-large);
    align-items: flex-end;
}

.user-profile__button-group {
    display: flex;
    flex-direction: row;
    gap: var(--space-s);
    height: fit-content;
    align-self: flex-end;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.user-profile__button-group .btn {
    width: fit-content;
    min-width: unset;
    padding: var(--space-default) var(--space-large);
}

.user-profile__btn-no-label {
    min-width: fit-content;
    padding: var(--space-default) var(--space-large)
}

/* ──────── Two Row Card Display ──────── */

.user-profile__profile-content-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-large);
    margin-bottom: var(--space-xl);
}

/* A profile whose right-column sections all lack data renders the left column
   alone (the template drops the right one entirely). Span both tracks so the
   bio fills the width instead of sitting at half width beside a blank gap. */
.user-profile__col:only-child {
    grid-column: 1 / -1;
}

/* Empty-state message shown in the bio card when no bio has been added.
   Match the horizontal padding of the filled bio (.markdown-content) so the
   text aligns with the card header instead of sitting flush against the edge. */
.bio-card__empty {
    color: var(--color-text-secondary);
    padding: 0 var(--space-large);
}


.user-profile__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-large);
}

/* ──────── Override card width to fill columns ────────*/

.user-profile__profile-content-area .card,
.user-profile__profile-content-area .card-group {
    max-width: 100%;
}

/* ──────── Override Markdown Styling ──────── */

.user-profile__container .markdown-content {
    line-height: var(--line-height-relaxed);
}

/* ──────── Edit Page Styling ──────── */

.user-profile__two-column-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: var(--space-default);
    row-gap: var(--space-large);
}

.user-profile__small-section-heading {
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-tight);
}

.user-profile__small-section-subheading {
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-tight);
}

.user-profile__add-another-button {
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-tight);
}

.user-profile__default-space-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-default);
    width: 100%;
}

.user-profile__xl-space-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-xlarge);
    width: 100%;
}

.user-profile__default-space-col .btn {
    width: fit-content;
}

.user-profile__profile-edit-card .card__hr:not(:first-of-type):not(:last-of-type) {
    margin: var(--space-default) 0
}

.user-profile__edit-form {
    display: contents;
}

.user-profile__commit-email-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-default);
}

.user-profile__commit-email-form .btn {
    height: 40px;
    min-width: unset;
    padding-left: var(--space-large);
    padding-right: var(--space-large);
}

/* ————— Styling for avatar component ——————— */

.user-profile__avatar-row {
    display: flex;
    gap: var(--space-default);
}

.user-profile__avatar-row .field--file {
    width: fit-content;
    max-width: 100%;
}

.user-profile__avatar-row .user-profile__default-space-col {
    width: fit-content;
}

.user-profile__avatar-row .user-profile__default-space-col .btn {
    width: 100%;
}

/*
    EMPTY STATE STYLES

    When the image src is empty, no file has been uploaded and the user has no set avatar
    So we hide the image, show the initials avatar, and show the default upload
    image button. We hide the replace and delete buttons.
*/

.user-profile__avatar-row:has(img[src='']) {

    .user-profile__default-avatar-buttons,
    .avatar__img {
        display: none;
    }
}

.user-profile__avatar-row:not(:has(img[src=''])) .user-profile__empty-avatar-input {
    display: none;
}

/*
    DELETE STATE STYLES

    Once the delete avatar check has been checked, we hide the delete and replace buttons,
    hide the image, and show the undo button
*/
.user-profile__avatar-row:has(input[id='user-profile__avatar-delete-checkbox']:checked) {

    .avatar__img,
    #user-profile__avatar-replace-button,
    #user-profile__avatar-delete-checkbox-button {
        display: none;
    }
}

.user-profile__avatar-row:has(input[id='user-profile__avatar-delete-checkbox']:not(:checked)) #user-profile__avatar-undo-button {
    display: none;
}

/*
    DEFAULT STATE STYLES

    If we are not in the hide or empty states, hide the initial avatar button
*/

.user-profile__avatar-row:not(:has(img[src=''])):not(:has(input[id='user-profile__avatar-delete-checkbox']:checked)) .avatar__initials {
    display: none;
}

/*
    EDIT STATE STYLES
    When the replace checkbox has been checked, hide the delete button, show the avatar box
*/

.user-profile__avatar-row:has(input[name='avatar-row-checkbox']:not(:checked)) .user-profile__activated-avatar-buttons {
    display: none;
}

.user-profile__avatar-row:has(input[id='user-profile__avatar-delete-checkbox']:checked) .user-profile__activated-avatar-buttons {
    display: none;
}

.user-profile__avatar-row:has(input[name='avatar-row-checkbox']:checked) #user-profile__avatar-delete-button {
    display: none;
}

.user-profile__edit-avatar-box {
    padding: var(--space-large);
    width: 209px !important;
    position: absolute;
    z-index: 11;
}

.user-profile__edit-avatar-box-cover {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0;
    left: 0;
    z-index: 10;
}

.user-profile__content-actions {
  flex-shrink: 0;
}

.user-profile__save-indicator {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.user-profile__save-state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-default);
}

.user-profile__save-icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
}

.user-profile__save-icon--spin {
    animation: create-post-spin 0.8s linear infinite;
}

.user-profile__github-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-s);
    min-height: 16px;
    margin-top: var(--space-default);
}

.user-profile__github-status-text {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

@keyframes create-post-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {

    /* ──────── Stack header row on mobile ──────── */
    .user-profile__profile-card-row {
        flex-direction: column;
        gap: var(--space-xl);
        align-items: flex-start;
    }

    .user-profile__button-group {
        justify-content: flex-start;
        align-self: stretch;
    }

    /* ──────── Collapse to one column on mobile ──────── */
    .user-profile__profile-content-area {
        grid-template-columns: 1fr;
    }

    /* Lift the column wrappers out of the layout so the cards become
       direct grid children and `order` can interleave them in the
       single-column cascade. */
    .user-profile__col {
        display: contents;
    }

    .user-profile__bio {
        order: 1;
    }

    .user-profile__achievements {
        order: 2;
    }

    .user-profile__badges {
        order: 3;
    }

    .user-profile__github {
        order: 4;
    }

    .user-profile__posts {
        order: 5;
    }

    .user-profile__mailing-list {
        order: 6;
    }

    .user-profile__connections {
        order: 7;
    }

    .user-profile__profile-edit-card {
        order: 1;
    }

    .user-profile-edit__connections-card {
        order: 2;
    }

    .user-profile__update-details {
        order: 3;
    }

    .user-profile__commit-email-card {
        order: 4;
    }

    .user-profile__email-preferences-card {
        order: 5;
    }

    .user-profile-edit__mailing-list-card {
        order: 6;
    }

    .user-profile__delete-account {
        order: 7;
    }
}

@media (769px <=width < 1280px) {
    .user-profile__button-group {
        align-self: end;
        width: 528px;
    }
}

/* Delete-account card actions: holds either the Cancel-deletion button or the
   Delete-account trigger, never both. */
.user-profile__delete-account-actions {
    display: flex;
    flex-direction: row;
    gap: var(--space-default);
    align-items: center;
}

.user-profile__delete-inline-form {
    margin: 0;
    display: contents;
}