/*
 * Project overrides layered on top of the vendored theme build (main.css).
 * Keep this file for anything hand-written so main.css stays replaceable.
 */

/* Candidate resume header avatar. The theme shipped a remote placeholder image
   with an undefined `circle-54` class; there is no profile picture upload, so
   the candidate's initials stand in for one. */
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #2042e3;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    user-select: none;
}

/* Per-entry delete control, standing in the slot a theme placeholder image used
   to fill. The surrounding layout differs per page - a flex row on the resume, a
   float on the bookmarks list - so the spacing is set per context below. */

/* Resume lists (education, experience, referees). Mirrors the 25px gutter and
   the mobile stacking of the 72x72 image it replaces (main.css
   .single-exp .image img and its max-width: 767px override). Without
   flex-shrink: 0 the button squashes on narrow rows, because the sibling
   carrying the entry text is .w-100. */
.resume .inner-content .single-section .entry-action {
    flex-shrink: 0;
    margin-right: 25px;
}

@media only screen and (max-width: 767px) {
    .resume .inner-content .single-section .entry-action {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* Bookmarks list. The layout itself lives on the markup as Bootstrap
   utilities (.title-img is d-flex align-items-center, the slot carries mr-2),
   deliberately: this file is hand-edited, and when the browser served a stale
   copy the float this rule used to carry was the only thing positioning the
   button, so the whole row collapsed. Bootstrap's stylesheet is always current,
   so a stale custom.css can now cost at most the 8px nudge below. */
.bookmarked .job-items .manage-content .title-img .entry-action {
    flex-shrink: 0;
}

/* The theme nudges this heading down 8px (main.css) to align it against the
   floated 50px avatar that used to sit beside it. That avatar is gone and the
   row is flex-centred now, so the nudge only pushes the title off-centre. */
.bookmarked .job-items .manage-content .title-img h3 {
    top: 0;
}

@media only screen and (max-width: 767px) {
    /* The theme centres .manage-content at this width with text-align, which
       does nothing for flex children - centre the row itself to match. */
    .bookmarked .job-items .manage-content .title-img {
        justify-content: center;
    }
}