/* Site-specific style overrides, loaded last (after resume.css and tweaks.css). */



@media (max-width: 991.98px) {
    .profile-image-mobile {
        display: block;
        /*float: left;*/
        max-width: 25vw !important;
    }
}

@media (min-width: 992px) {
    .profile-image-mobile {
        display: none;
    }
    .mr-auto {
        img {
            max-width: unset;
        }
    }
    .resume-section {
        .mt-auto, .my-auto {
            margin-top: 14vh !important;
        }
    }

    #sideNav .navbar-brand {
        margin-top: 13vh;
        .img-profile {


            max-height: unset;
            width: 80%;
            max-width: unset;
        }
    }

    ul.list-social-icons {
        margin-top: 4rem;
    }

}
.bg-primary {
    background-color: #5a78b1 !important;
}
.text-primary {
    color: #5a78b1 !important;
}

a, a:focus, a:active {
    color: #5a78b1;
}

a:hover {
    color: #3e537a;
    text-decoration: none;
}

.list-social-icons a, .list-social-icons a:hover {
    color: #606060;
}

.list-social-icons a:hover {
    color: #5a78b1;
}

/* Inline-SVG social icon (e.g. the Framework Labs mark) sitting in the same
   fa-stack circle as the Font Awesome glyphs. fa-inverse supplies the white
   colour, which the SVG picks up via fill="currentColor". */
.list-social-icons .svg-stack-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.list-social-icons .svg-stack-icon svg {
    display: block;
    width: var(--svg-stack-icon-size, 1.2em);
    height: var(--svg-stack-icon-size, 1.2em);
}

div.resume-item {
    margin-bottom: 1rem;
}

div.icon-or-img {
    min-width: 42px;
}

.text-muted {
    color: #dddddd !important;
    font-size: 0.8rem;
    a, a:visited, a:active {
        color: #dddddd;
    }
    a:hover {
        color: #cccccc;
    }
}

.resume-content {
    img.icon {
        max-width: 36px;
        width: 36px;
    }
}

.resume-section {
    max-width: 700px;
}


.company-description {
    font-size: 0.75rem;
}

/* FrameworkLabs Posts section (#fwlabs-posts): teaser cards for the merged
   frameworklabs.us RSS feeds, styled to match the existing resume-item
   cards used by Employment/Projects/Businesses. */
#fwlabs-posts .resume-date {
    margin-bottom: 0.25rem;
}

#fwlabs-posts .resume-date .text-primary {
    font-size: 0.85rem;
}

/* Scroll cue at the bottom of the #about section: three solid triangles
   pointing down, spread horizontally, hinting that there's more content
   below the fold and linking down to it. Absolutely positioned so it
   doesn't participate in the section's flex row (see the comment in
   layouts/partials/about.html); the section already carries 3-5rem of
   bottom padding, so there's room for it under the content without
   overlapping on short viewports.

   The left/right insets mirror the section's own padding utilities (p-3 =
   1rem, p-lg-5 = 3rem at >=992px) so the strip matches the text width
   above; the 4.5rem inline padding then pulls the outer two arrows in from
   those edges by 3/4in (4.5rem = 72px = 0.75in at the 16px default root
   size). The insets can't just be `0`: an absolutely positioned box is
   laid out against its ancestor's *padding* box, which starts outside that
   padding. */
#about {
    position: relative;
}

.scroll-cue {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1.25rem;
    padding: 0 4.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Only the triangles are clickable -- see about.html. */
    pointer-events: none;
}

@media (min-width: 992px) {
    .scroll-cue {
        left: 3rem;
        right: 3rem;
    }
}

.scroll-cue-arrow {
    width: 0;
    height: 0;
    border-left: 0.6rem solid transparent;
    border-right: 0.6rem solid transparent;
    border-top: 0.55rem solid #cfcfcf;
    pointer-events: auto;
    cursor: pointer;
    animation: scroll-cue-pulse 4.5s ease-in-out infinite;
}

.scroll-cue:hover .scroll-cue-arrow,
.scroll-cue:focus .scroll-cue-arrow {
    border-top-color: #a8a8a8;
}

@keyframes scroll-cue-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-cue-arrow {
        animation: none;
    }
}