/* ==========================================================================
   GLOBAL CSS
========================================================================== */

/* 
    EQUIPMENT/INSTRUMENTATION 
*/


/* Equipment on the /facilities/ pages in a flexbox grid */
/* Apply class:{resource-img-container} to the wrapping container */
/* Apply class:{resource-img-flex} to each item container */

.resource-img-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.resource-img-flex {
    padding: .5rem;
}
.resource-img-flex figcaption {
    text-align: center;
    line-height: 1.5;
    text-wrap: balance;
}
.resource-img-flex {
   max-width: 100%;
   width: 300px;
}

/* Reserve an Instrument */
.reserve {
  text-align: center;
}


/* 
    NAVIGATION 
*/


/* Give external links in the main navigation a visual clue to help users know they will be going to a new site */

a.cwf-nav__link[href*="https://research.vcu.edu/cores/structural-biology/"]:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f35d";
    margin-left: .25rem;
    color: var(--vcu-gold);
}
a.cwf-nav__link[href*="https://research.vcu.edu/cores/structural-biology/"]:where(:hover,:focus):after {
    color: var(--vcu-black);
}


/* 
    STATS 
*/


/* Stats in a flexbox grid : using list items in a UL */
/* Apply css:{.hp-stats-list} to the T4 content name */
/* Big number gets <strong> */

.hp-stats-list .plugin-card__container {
    padding: 1.5rem;
}
.hp-stats-list ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    padding: 0;
    margin-inline: auto !important;
    max-width: 1200px;
    gap: 6rem;
    justify-content: center;
    -webkit-align-items: center;
}
.hp-stats-list > * {
    flex: 1 1 0;
}
.hp-stats-list li {
    text-align: center;
}
.hp-stats-list li strong {
    font-family: Roboto,sans-serif;
    font-size: 4rem !important;
    margin: 0 auto 1rem;
    line-height: 0.8 !important;
    display: block;
}
.hp-stats-list li {
    position: relative;
    background: url('/media/pharmacy/shared-assets/css/images-in-stylesheets/stat-bkg--gold.svg');
    line-height: 1.5;
    background-repeat: no-repeat;
    background-position: 50% 15%;
    background-size: 7em;
    padding-top: 3rem;
    top: -3rem;
    flex: 1;
    text-wrap: balance;
}
@media (min-width: 420px) and (max-width: 580px) {
    .hp-stats-list li {
        flex: auto;
    }
}
.hp-stats-list a {
    color: #333;
}
.plugin-card.hp-stats-list ul {
    gap: 2rem;
    align-items: flex-start;
}
.plugin-card.hp-stats-list {
    border: none;
}
.hp-stats-list .plugin-card__body {
    padding-bottom:0;
    padding-top: 3rem;
}
.hp-stats-list .plugin-card__container {
    padding-bottom:0;
}


/* 
    WYSIWYG 
*/

/* T4 Buttons */

.t4_button a {
    background-color: var(--vcu-white) !important;
    color: #2f2f2f !important;
    border: 1px solid var(--cwf-color--gold);
    box-shadow: 0.25rem 0.25rem var(--vcu-gold);
    border-radius: 0;
    text-align: center;
}
.t4_button a:hover, 
.t4_button a:focus {
    background-color: var(--vcu-gold) !important;
    box-shadow: 0.25rem 0.25rem var(--vcu-gray);
    color: var(--vcu-black) !important;
}
.t4_button a:after {
    font-family: "Font Awesome 6 Free";
    color: var(--vcu-rust);
    content: "\f178";
    margin-left: .25rem;
}