/*
 * The blog still loads its legacy stylesheet for article content.  That sheet
 * uses broad utility selectors such as .nav-link and .contact-icon, which
 * would otherwise restyle the shared website header.  Keep the correction
 * strictly inside the shared chrome so blog content is unaffected.
 */
.blog-site .site-header {
    font-family: var(--body-font);
}

.blog-site .site-header .main-nav .nav-link {
    padding: 0 !important;
    color: rgb(186, 19, 73) !important;
    font-family: var(--body-font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.blog-site .site-header .header-contact .contact-icon {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    font-size: 16px;
}

@media (max-width: 1199.98px) {
    .blog-site .site-header .main-nav .nav-link {
        padding-inline: .3rem !important;
        font-size: 16px !important;
    }
}

/* The legacy FAQ relies on a Font Awesome glyph that is not loaded by the
 * shared site header. Draw a dependable chevron instead. */
.blog-site .blog-faq-accordion .acod-head a,
.blog-site .blog-faq-accordion .acod-head a:hover,
.blog-site .blog-faq-accordion .acod-head a.collapsed:hover {
    color: var(--heading-color);
}

.blog-site .blog-faq-accordion .acod-head a::after,
.blog-site .blog-faq-accordion .acod-head a.collapsed::after {
    width: .62rem;
    height: .62rem;
    content: "";
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-family: inherit;
    font-size: 0;
    transform: rotate(225deg);
    transform-origin: center;
    transition: transform .2s ease;
}

.blog-site .blog-faq-accordion .acod-head a.collapsed::after {
    transform: rotate(45deg);
}

/* Replace legacy Font Awesome form glyphs with the site's inline SVG icons. */
.blog-site .comments-area p.comment-form-author::before,
.blog-site .comments-area p.comment-form-email::before,
.blog-site .comments-area p.comment-form-comment::before {
    content: none;
}

.blog-site .comments-area .comment-field-icon {
    position: absolute;
    top: 0;
    left: 15px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--primary-color);
    border: 1px solid #e1e6eb;
    border-radius: 4px 0 0 4px;
    pointer-events: none;
}

.blog-site .comments-area .comment-field-icon .ui-icon {
    width: 1rem;
    height: 1rem;
}

/* Replace the legacy Font Awesome calendar/reply glyphs in posted comments. */
.blog-site ol.comment-list li.comment .comment-meta::before,
.blog-site ol.comment-list li.comment .reply a::before {
    content: none;
}

.blog-site ol.comment-list li.comment .comment-meta-icon,
.blog-site ol.comment-list li.comment .comment-reply-icon {
    display: inline-flex;
    margin-right: .35rem;
    color: var(--primary-color);
    vertical-align: middle;
}

.blog-site ol.comment-list li.comment .comment-meta-icon .ui-icon,
.blog-site ol.comment-list li.comment .comment-reply-icon .ui-icon {
    width: .9rem;
    height: .9rem;
}

.blog-site ol.comment-list li.comment .reply .comment-reply-link,
.blog-site ol.comment-list li.comment .reply .comment-reply-link:hover {
    color: var(--primary-color);
}

.blog-site .comments-area .comment-form .submit {
    color: var(--white);
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.blog-site .comments-area .comment-form .submit:hover,
.blog-site .comments-area .comment-form .submit:focus {
    color: var(--white);
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.blog-site .search-bx .blog-search-button {
    display: grid;
    min-width: 42px;
    min-height: 40px;
    padding: 0;
    place-items: center;
    color: var(--white);
    background: var(--primary-color);
}

.blog-site .search-bx .blog-search-button:hover,
.blog-site .search-bx .blog-search-button:focus {
    color: var(--white);
    background: var(--primary-dark);
}

.blog-site .search-bx .blog-search-button .ui-icon {
    width: 1rem;
    height: 1rem;
}

.blog-site .side-bar .widget-title {
    color: var(--primary-color);
}