/* ============================================= */
/* ===== MICROSITE THEME COLOR OVERRIDES   ===== */
/* ============================================= */

:root {
    --site-primary: #512e80;
    --site-secondary: #42145f;
    --white: #ffffff;
    --black: #2a2a2a;
}

:root {
    --link-color: var(var(--site-secondary));
    --link-hover: #240b34;
    --link-visited: #8f8dcb;
    --button-background-primary: var(--site-primary);
    --button-background-secondary: var(--site-secondary);
    --button-text-primary: var(--white);
    --button-text-secondary: var(--white);
}

/* =========================== */
/* Microsite Header Navigation */
/* =========================== */

.journal-header.journal-bg {
    background-color: var(--white) !important; /* Background Color */
    border-bottom: 4px solid var(--site-primary) !important; /* Bottom Border */
}

.journal-header .site-menu .site-menu-item.site-menu-lvl-0>.nav-link {
    color: var(--site-primary) !important; /* Navigation Links Color */
}

.journal-header .site-menu .site-menu-item.site-menu-lvl-0>.nav-link i {
    color: var(--site-secondary) !important; /* Navigation Links Dropdown Icon Color */
}

.journal-header .site-menu .site-menu-item.site-menu-lvl-0>.nav-link.expanded,
.journal-header .site-menu .site-menu-item.site-menu-lvl-0>.nav-link:hover {
    border-bottom-color: var(--site-primary) !important;
    color: var(--site-primary) !important;
}

.mobile-site-menu-toggle .icon-menu_hamburger:before {
    color: var(--site-primary) !important;
}

/* Swooshy */
@media screen and (min-width: 900px) {
    .journal-header.journal-bg {
        background-image: url('/data/SiteBuilderAssetsOriginals/Live/Images/cancerpreventionresearch/CAPR-swoosh.svg');
        background-position: right;
        background-repeat: no-repeat;
    
    }
}

/* ============================================= */
/* ========== HOMEPAGE ISSUE CUSTOMIZATION ===== */
/* ============================================= */

/* HERO BACKGROUND IMAGE + COLOR GRADIENT OVERLAY

- How to Change Image: Upload Image through SiteBuilder Image Assets, ensure it has a different filename, update URL with below
- How to Change Color Gradient Overlay: use HEX to RGBA converter for the appropriate format, first rgba() value is top color, second value is bottom color, use last digit in each for opacity (.75 = 75%).
- Example (do not remove or edit):
	.pg_Index .hero-row {
	    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)), url('/data/SiteBuilderAssetsOriginals/Live/Images/cancerpreventionresearch/journal-homepage-hero.jpg');
	    background-position: center;
	    background-repeat: no-repeat;
	}
*/

.pg_Index .hero-row {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)), url('/data/SiteBuilderAssetsOriginals/Live/Images/cancerpreventionresearch/canprevres_homepage-hero.jpg') !important;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
}


/* HERO ISSUE TEXT

- Change the below hex value to change "Current Issue" "Volume #, Issue #" and "Date" values in the left side of the hero.
- Ensure at least AA Accessibility is reached by examining contrast ratio between the below hex value and combined image + gradient overlay. Use tool here: https://www.brandwood.com/a11y/
- Example (do not remove or edit):
    .pg_Index .current-issue-title,
    .pg_Index .widget-IssueInfo .article-issue-info .issue,
    .pg_Index .widget-IssueInfo .article-issue-info .volume,
    .pg_Index .widget-IssueInfo .article-issue-info .ii-pub-date {
 		color: #fff;
	}
*/

.pg_Index .current-issue-title,
.pg_Index .widget-IssueInfo .article-issue-info .issue,
.pg_Index .widget-IssueInfo .article-issue-info .volume,
.pg_Index .widget-IssueInfo .article-issue-info .ii-pub-date {
 color: var(--white) !important;
}


/* HERO BUTTON COLOR

- Change the below hex value to change color of button.
- Ensure AA Accessibility is reached by entering below hex value into the left box here https://contrast-ratio.com/#white-on-#A41E22
- Example (do not remove or edit):
	.pg_Index .hero-row .button {
	    background-color:#A41E22;
	}
*/

.pg_Index .content-main_content .hero-row .button {
    background: var(--button-background-primary) !important;
	color: var(--button-text-primary);
}

.pg_Index .content-main_content .hero-row .button:hover
 {
    background: var(--button-background-secondary) !important;
    color: var(--button-text-secondary);
    border: none;
}



.pg_SelfServePage #Sidebar {
    display: none;
}
.pg_SelfServePage #mainContent {
    width: 100% !important;
    margin-right: 0 !important;
}


/* ============================================= */
/* ========== ARTICLE FORMULA SIZING =========== */
/* ============================================= */

.disp-formula	{
	width: 100%;
	text-align: center;
}

.disp-formula .fig-graphic {
	width: 100%;
}

.disp-formula .fig-graphic .jumplink-placeholder {
	max-width: 100%;
}

.disp-formula .fig-graphic .content-image {
	max-width: 520px;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
}