/* Shared styling for news article pages (articles/*.php) */

.article-back {
    display: inline-flex;
    align-items: center;
    color: #b85600;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
}
.article-back:hover,
.article-back:focus {
    color: #f57300;
}
.article-back .bi {
    transition: transform .15s ease;
}
.article-back:hover .bi,
.article-back:focus .bi {
    transform: translateX(-3px);
}

.article-header {
    border-left: 5px solid #f57300;
    padding: .25rem 0 .25rem 1.25rem;
    margin: 1.5rem 0 2rem;
}
.article-date {
    color: #b85600;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.article-title {
    font-size: calc(1.4rem + 1.2vw);
    line-height: 1.2;
    margin: .35rem 0 0;
}
@media (min-width: 1200px) {
    .article-title {
        font-size: 2.5rem;
    }
}

.article-body {
    font-size: 1.05rem;
    line-height: 1.7;
}
.article-body p {
    margin-bottom: 1.1rem;
}
.article-body a {
    color: #b85600;
}
.article-body a:hover {
    color: #f57300;
}
.article-body h4 {
    margin-top: 2rem;
    font-weight: 700;
}
.article-body table {
    font-size: .95rem;
    line-height: 1.5;
}

.article-footer {
    margin-top: 4.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Contact us (outline) button: white text on the orange hover background */
.article-footer .btn-outline-orange:hover,
.article-footer .btn-outline-orange:focus-visible,
.article-footer .btn-outline-orange:active {
    color: #fff;
    background-color: #f57300;
    border-color: #f57300;
}