.single-f9_article { 
    --f9-color: #98311E; /* Logo text color, also hard coded for article title */
    --f9-hero-offset: 200px;
    --f9-bottom-offset: 0px;
}

/***************************************************\
 * CSS for the structure above the article content * 
\***************************************************/

.f9_article .hero-section[data-type="type-1"] {
    max-width: calc( var(--narrow-container-max-width) + var(--f9-hero-offset) * 2);
    margin-bottom: 15px;
}

.f9_article header {
    display: grid;
    grid-row-gap: 1em;
}

.f9_article .entry-header .f9-logo {
    order: -1;
    justify-self: start;
    align-self: center;
    margin-top: 0;
}

.f9_article .entry-header .f9-logo img {
    height: 2.4em;
}

.f9_article .entry-header .entry-meta {
    justify-self: start;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
}

.f9_article .entry-meta li::before {
    content: '';
    font-size: 0.5em;
    position: static;
    padding-top: 5px;
    border-right: 0.5px solid black;
    margin-right: 0.5px;
}

.f9_article .entry-meta li {
    font-family: 'Montserrat';
    font-size:0.9em;
    line-height:1.5em;
    font-weight: 500;
    margin-right: 1em;
}

.f9_article .entry-meta li>a {    
    color: var(--f9-color);
}

.f9_article .entry-meta li>a:hover { 
    color: var(--paletteColor3);
    text-decoration-line: underline;
} 

.f9_article .entry-header .f9-writers {
    justify-self: start;
    align-self: start;
    margin: 3.4em 0 0.8em 0;
    font-family: 'Montserrat';
    font-size: calc( var(--fontSize)/2 + 3px);
    line-height: 1em;
    font-weight: 500;
}

.f9_article .entry-header .f9-writers img {
    height: 4em;
    vertical-align: top;
    margin-right: 5px;
}

.f9_article .entry-header .f9-writers a {
    margin-right: 1em;
    color: var(--f9-color); 
}

.f9_article .entry-header .f9-writers a:hover {
    color: var(--paletteColor3);
    text-decoration-line: underline;
} 

/***************************************************\
 * CSS for the structure below the article content * 
\***************************************************/

.f9_article .bottom-section {
    margin: 5em auto 0 auto;
    width: var(--block-width, var(--container-width));
    max-width: calc( var(--narrow-container-max-width) + var(--f9-bottom-offset) * 2);
    display: grid;
}

.f9_article .bottom-section .f9-nav {
    justify-self: center;
    display: flex;
    position: relative;
    top: 1.4em;
}

.f9_article .bottom-section .f9-nav-logo {
    height: 1.7em;
    margin: 0 2px 5px 0;
}

.f9_article .bottom-section .f9-nav-tax {
    align-self: flex-end;
    font-size: 18px;
    font-weight: 600;
    color: var(--f9-color);
    text-transform: lowercase;
}

.f9_article .post-navigation {
    margin: 0em -1em ;
    grid-column-gap: 50%;
}

.f9_article .post-navigation a {    
    color: var(--f9-color);
}

.f9_article .post-navigation a:hover { 
    color: var(--paletteColor3);
} 

.f9_article .post-navigation [class*='nav-item'] {
    align-items: center;
}

.f9_article .post-navigation .nav-item-prev:not(:empty)::before {
    content: '';
    background-image: url('../img/caret-left.svg');
    height: 24px;
    width: 24px;
}

.f9_article .post-navigation .nav-item-prev:not(:empty):hover::before {
    content: '';
    background-image: url('../img/caret-left-hover.svg');
    height: 24px;
    width: 24px;
}

.f9_article .post-navigation .nav-item-prev {
    align-self: start;
}

.f9_article .post-navigation .nav-item-next {
    align-self: end;
}

.f9_article .post-navigation .nav-item-next:not(:empty)::after {
    content: '';
    background-image: url('../img/caret-right.svg');
    height: 24px;
    width: 24px;
}

.f9_article .post-navigation .nav-item-next:not(:empty):hover::after {
    content: '';
    background-image: url('../img/caret-right-hover.svg');
    height: 24px;
    width: 24px;
}

.f9_article .post-navigation .ct-image-container {
    display: none;
}

.f9_article .post-navigation .item-label {
    font-size: calc( var(--fontSize)/2 + 3px);
    text-transform: lowercase;
    font-weight: 500;
    opacity: 1;
}

.f9_article .post-navigation .item-title {
    display: none;
}

.f9_article .post-navigation::after {
    display:none;
}

.f9_article .ct-share-box {
    order: 3;
}

.f9_article .ct-share-box .ct-module-title {
    font-size: calc( var(--fontSize)/2 + 3px);
    font-weight: 500;
    margin: 2.5em 0 0.5em 0;
}

.f9_article .ct-share-box[data-type="type-2"] .ct-icon-container {
    padding: var(--spacing);
    border-radius: 50%;
}

.single-f9_article .ct-back-to-top {
    --back-top-bottom-offset: 50px;
    --back-top-side-offset: 10px;
    --icon-size: 13px;
    --icon-color: var(--f9-color);;
    --icon-hover-color: var(--paletteColor3);
    --top-button-background-color: var(--paletteColor8);
    --top-button-background-hover-color: var(--paletteColor8);
}
