/* CSS FIXES */
.text-align-fix {
    line-height: 1.4;
}

.badge-align-fix {
    vertical-align: -0.15em;
}

/* CSS CARD ANIMATION */
.card-cover:hover {
    -ms-transform: scale(1.03); /* IE 9 */
    -webkit-transform: scale(1.03); /* Safari 3-8 */
    transform: scale(1.03);
}
.card-cover {
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari 3-8 */
    transform: scale(1);
    transition: transform .5s ease;
}

.letters:hover {
    -ms-transform: scale(1.06); /* IE 9 */
    -webkit-transform: scale(1.06); /* Safari 3-8 */
    transform: scale(1.06);
}
.letters {
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari 3-8 */
    transform: scale(1);
    transition: transform .5s ease;
}

.link-animated:hover {
    -ms-transform: scale(1.03); /* IE 9 */
    -webkit-transform: scale(1.03); /* Safari 3-8 */
    transform: scale(1.03);
}

.link-animated {
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari 3-8 */
    transform: scale(1);
    transition: transform .5s ease;
}

/* MYSQL ERROR FORMATTING */
.text_asset_error {
    color: red;
    font-family: 'Courier New', Courier, monospace;
}

/* PRIDE MONTH SPECIAL FORMATTING */
.rainbow-text {
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 36px;
    font-weight: bold;
}

.card-popout {
    background-position: top left;
    color: #fff;
    display: block;
    position: relative; /* Must use if you want to align elements to bottom */
    margin-bottom: 10px;
    background-size: cover; 
}
  
.cardpopout .content {
    padding: 15px;
    overflow: auto;
}

/* August 2025 NEW styling */
.homepage-banner-header,
.homepage-banner-paragraph,
.image-card-header,
.image-card-subheader,
.text-only-card-header,
.page-main-header,
.page-header,
.panel-header,
.panel-subheader,
.panel-main-header,
.list-item-header,
.main-page-banner-title,
.footer-h1,
.footer-h2,
.standout-text,
.chart-position-text,
.caption-text,
.title,
.subtitle,
.title_subtle,
.standout-blue-sticker,
.standout-pink-sticker,
.standout-sticker,
.carousel-subtitle,
.carousel-title {
    font-family: 'Lato', sans-serif;
    font-style: normal;
}

.homepage-banner-header,
.image-card-header,
.text-only-card-header,
.page-main-header,
.page-header,
.panel-header,
.panel-subheader,
.panel-main-header,
.main-page-banner-title {
    font-weight: 900;
}

.homepage-banner-paragraph {
    font-weight: 600;
    font-size: 20px;
}

.image-card-header,
.image-card-subheader {
    text-shadow: 2px 2px 4px black;
}

.text-only-card-header {
    color: rgb(#360c37);
}

.page-main-header,
.page-header,
.panel-header,
.panel-main-header,
.footer-h1,
.footer-h2 {
    color: rgb(#222529);
}

.panel-subheader,
.list-item-header {
    font-weight: 900;
    color: rgb(#303234);
}

.list-item-header {
    font-weight: 400;
}

.main-page-banner-title,
.main-page-banner-subtitle,
.main-page-banner-header {
    color: white;
    text-shadow: 2px 2px 4px black;
}

.footer-h1,
.footer-h2 {
    font-weight: 400;
}

.standout-text,
.chart-position-text {
    font-weight: 700;
}

.caption-text {
    font-weight: 500;
    font-style: italic;
    color: rgb(255, 255, 255); /* Use RGBA colour styles, A meaning alpha/opacity... */
}

.interview-person {
    font-weight: 700;
    font-style: italic;
}

.interview-question {
    font-weight: 700;
    font-size: 18px;
}

.interview-answer {
    font-style: normal;
}

/* CUSTOM TEXT STICKER STYLES */
.standout-title-sticker {
  color: #fff;
}

.small-black-sticker {
    background: rgba(0, 0, 0, 0.6); /* Use RGBA colour styles, A meaning alpha/opacity... */
    padding: 5px 8px; /* First value top padding, second is sides */
    line-height: 5px;
    text-shadow: 1px 1px 1px rgb(136, 136, 136);
    color: #fff;
    display: inline;
    text-transform: uppercase;
}

.title {
    background: rgba(86, 15, 73, 0.7); /* Use RGBA colour styles, A meaning alpha/opacity... */
    letter-spacing: -1px; /* Change or remove as you wish... */
    padding: 5px 15px; /* First value top padding, second is sides */
    line-height: 55px;
    text-shadow: 1px 1px 3px #000;
    color: #fff;
    display: inline;
}

.subtitle {
    background: rgba(0, 0, 0, 0.8); /* Use RGBA colour styles, A meaning alpha/opacity... */
    letter-spacing: -1px; /* Change or remove as you wish... */
    padding: 5px 15px; /* First value top padding, second is sides */
    line-height: 55px;
    text-shadow: 1px 1px 3px #000;
    color: #fff;
    display: inline;
}

.title_subtle {
    background: rgba(0, 0, 0, 0.8); /* Use RGBA colour styles, A meaning alpha/opacity... */
    font-size: 35px;
    letter-spacing: -1px; /* Change or remove as you wish... */
    padding: 5px 15px; /* First value top padding, second is sides */
    line-height: 55px;
    text-shadow: 1px 1px 3px #000;
    color: #fff;
}

.standout-blue-sticker {
    background: rgb(6, 99, 240); /* Use RGBA colour styles, A meaning alpha/opacity... */
    padding: 5px 10px; /* First value top padding, second is sides */
    line-height: 55px;
    text-shadow: 1px 1px 3px #000;
    color: #fff;
    display: inline;
    text-decoration: none;
}

.standout-pink-sticker {
    background: rgb(255, 0, 149); /* Use RGBA colour styles, A meaning alpha/opacity... */
    padding: 5px 10px; /* First value top padding, second is sides */
    line-height: 55px;
    text-shadow: 1px 1px 3px #000;
    color: #fff;
    display: inline;
    text-decoration: none;
}

.standout-sticker {
    background: rgb(86, 15, 73); /* Use RGBA colour styles, A meaning alpha/opacity... */
    padding: 5px 10px; /* First value top padding, second is sides */
    line-height: 55px;
    text-shadow: 1px 1px 3px rgb(136, 136, 136);
    color: #fff;
    text-decoration: none;
    display: inline;
}

.carousel-subtitle {
    background: rgb(86, 15, 73); /* Use RGBA colour styles, A meaning alpha/opacity... */
    padding: 5px 10px; /* First value top padding, second is sides */
    text-shadow: 1px 1px 3px #000;
    color: #fff;
}

.carousel-title {
    background: rgba(86, 15, 73, 0.8); /* Use RGBA colour styles, A meaning alpha/opacity... */
    padding: 5px 10px; /* First value top padding, second is sides */
    text-shadow: 1px 1px 3px #000;
    color: #fff;
    display: inline;
}

/* HYPERLINK Styles */ 
a:link, a:visited, a:active {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    opacity: 0.8;
    transition-duration: 1s;
}

.text-card-bg-gradient-totp {
    /* For WebKit (Safari, Chrome, etc.) */
    background: -webkit-linear-gradient(to bottom, #f1c9cb, #dadbf2);
    /* Standard syntax */
    background: linear-gradient(to bottom, #f1c9cb, #dadbf2);
}

.card-bg-gradient-1 {
    /* For WebKit (Safari, Chrome, etc.) */
    background: -webkit-linear-gradient(to bottom, #0e0e0e, #606060);
    /* Standard syntax */
    background: linear-gradient(to bottom, #0e0e0e, #606060);
}

body {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* CUSTOM TEXT STYLES */  
h1, h2, h3, h4, h5 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

.small-footnote {
  font-size: 9pt;
}

/* HORIZTONAL SHELF STYLING */
.scrolling-wrapper {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

}

.scrolling-wrapper > div {
    flex: 0 0 auto;
    width: 400px; /* consistent size across all devices */
    margin-right: 0.5rem; /* optional spacing between cards */
}


.scroll-arrow.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.scroll-arrow.left {
    left: 0;
}

.scroll-arrow.right {
    right: 0;
}