/* WWHO v14 — footer heading contrast + blog category badge visibility */

/* Footer section headings must remain readable on the blue footer, regardless
   of any later heading color rules from internal-page styles. */
.footer.wwho-footer .wwho-footer-links > h6,
.footer.wwho-footer .wwho-footer-contact > h6,
.footer.wwho-footer h6 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Blog detail category badge: inner-redesign-v2 was overriding the text color
   with the same cyan/blue family as the badge background. */
.route-blogs-show .blog-cover-content .blog-category-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 8px 16px !important;
    margin: 0 0 18px !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 999px !important;
    background: #0b5fc7 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 2 !important;
}

.route-blogs-show .blog-cover-content .blog-category-badge:hover,
.route-blogs-show .blog-cover-content .blog-category-badge:focus {
    background: #074ea7 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Keep the title block comfortably inside the image on every viewport. */
.route-blogs-show .blog-cover-content {
    padding-inline: 0 !important;
}

.route-blogs-show .blog-cover-content h1 {
    font-size: clamp(2.35rem, 4.9vw, 4.65rem) !important;
    line-height: 1.06 !important;
}

@media (max-width: 767.98px) {
    .route-blogs-show .blog-cover-content .blog-category-badge {
        min-height: 31px !important;
        padding: 7px 13px !important;
        font-size: .75rem !important;
        margin-bottom: 13px !important;
    }

    .route-blogs-show .blog-cover-content h1 {
        font-size: clamp(2rem, 9.5vw, 3.2rem) !important;
    }
}