/*
    The vast majority of the CSS can be found in the clean-cooling/unified-front-end-bundle
    package as it is common to all our apps. Only add portal-specific CSS and/or overrides
    here. Anything that is a global change should be moved to the unified front end package.
*/

.pagination a {
    text-decoration: none;
}

blockquote {
    border-left: 4px solid #29B5B2;
    padding: 1em 2em 1em 1em;
    margin: 2em 1em;

    cite {
        font-style: italic;
    }
}

/* Content images and videos */
.content-image {
    margin-bottom: 2rem;

    img {
        border-radius: 0.75rem;
    }
}

.content-video {
    margin: 2rem 0;
}

/* Used for images and videos */
figcaption {
    font-size: 85%;
    margin-top: 2px;
    font-style: italic;
}

/* Hivebrite Imported */

/*
    Allow us to directly use Hivebrite images, but rationalise their dimensions by
    vertically centering them as a background image.

    This saves us the hassle (for now) of trying to e.g. upload the image to S3 and
    then service it via Imgix which would essentially allow us to do the same thing
    but in a more optimised fashion.
 */
.hivebrite-listing-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px 6px 0 0;
}

.hivebrite-card-header-image {
    border-radius: 10px 10px 0 0;
}

/* Crumb trail */
.breadcrumbs {
    padding-left: 0;
    li {
        list-style: none;
        display: inline-block;
        font-size: 85%;
        margin-right: 2px;
        color: #aaa;

        a {
            margin-left: 2px;
            color: #aaa;
        }
    }
}


/* SIDEBAR PROMOS */

.sidebar-promo {
    margin: 2rem 0;

    img {
        border-radius: 15px 15px 0 0;
        width: 100%;
        height: auto;
    }

    h3 {
        color: #29B5B2;
        line-height: 1.3em;
        font-size: 36px;
        font-weight: 700;
    }

    .sidebar-promo-content {
        border-radius: 0 0 15px 15px;
        padding: 2rem;
        background-color: rgb(25, 45, 69);
        color: white;
        font-size: 115%;
        font-weight: 500;
    }

    .btn {
        display: block;
        margin-top: 2rem;

        &:hover {
            text-decoration: none;
        }
    }
}

/* The sidebar navigation menu */

#link-box {
    background-color: rgb(85, 190, 194);
    padding: 20px 10px 20px 20px;
    margin-bottom: 2rem;
    border-radius: 15px;
}

#link-box h4 {
    color: white;
    border-bottom: 2px solid white;
    padding-bottom: 1rem;
}

#link-box ul {
    color: rgb(25, 45, 69);
    margin: 0 0 0 20px !important;
    padding: 0 !important;
    white-space: normal !important;
}

#link-box ul li {
    margin: 0 !important;
    padding: 10px 0 0 0 !important;
    font-weight: 600;
}
#link-box a {
    font-size: 100% !important;
}

#link-box a:link,
#link-box a:active {
    color: #192D45;
    font-size: 23px;
    text-decoration: none !important;
    line-height: 1.5 !important;
}

#link-box a:visited {
    color: #3D475F;
    text-decoration: none !important;
    line-height: 1.5 !important;
}

#link-box a:hover {
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
}

#link-box .current-link span {
    color: #fff !important;
    border-bottom: 1px solid #fff;
}

.quote-panel {
    p {
        display: inline;
        line-height: 2em;
    }
}

/* Leaflet Maps */
#map { height: 250px; }

/* Callouts */
.callout {
    border-radius: 0.5rem;
    border-left: 5px solid rgb(85, 190, 194);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    margin: 1rem 0;
    background-color: #efefef;
}

.callout-info {}
.callout-warning {}
.callout-danger {}

/* Font Awesome */

/* For some reason the vertical alignment seems a bit off. Here we fix that. */
.fa-icon-wrapper {
    position: relative;
    top: -2px;
}

/* Spin animations don't work when using SVG format icons. This fixes that. */
.fa-spin {
    animation: fa-spin 2s infinite linear;
}
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* User Avatars */
.card .avatar {
    float: left;
    margin: -5px 10px 0 0;
}

/* Tags & Category badges */
.card .card-tags {
    padding: 0 0.6em 0.6em 0.6em;
}