/* Base accessibility utilities. Include on every page. */

/* Visually hide an element but keep it available to screen readers and keyboard. */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* When the hidden element receives keyboard focus (e.g. the "Skip to content" link),
   show it in the top-left corner. */
.screen-reader-text:focus {
    background-color: #ddd;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.nowrap, .Nowrap {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * COMPONENT / VISUAL OVERRIDES
 * Small layout/filter tweaks that aren't typography. Live here (not in
 * typography.css) because they deal with positioning, image tone, and
 * element visibility — not fonts.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Video card play-icon overlay (Help Me With mega-menu, slot 1). */
.kcm-post-card--video .kcm-post-thumbnail { position: relative; display: block; }
.kcm-post-thumbnail__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
}
.kcm-post-card--video .kcm-post-thumbnail:hover .kcm-post-thumbnail__play {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Light photographic tone on article-card thumbnails — takes the edge off
 * vibrant CloudFront-style images so they blend with the editorial palette.
 * On hover the filter lifts for a subtle interactive feedback. */
.pages-main .article-card .article-image-container .article-image {
    filter: brightness(0.8) saturate(0.78) contrast(0.86);
    transition: filter .25s ease;
}
.pages-main .article-card:hover .article-image-container .article-image {
    filter: none;
}

.kcm-footer-logo img {display:block;width:100%;height:auto;shape-rendering:geometricPrecision;backface-visibility:hidden;transform:translateZ(0)}

/* ═══════════════════════════════════════════════════════════════════════════
 * HERO SECTION - GLOBAL STYLES
 * Common styles for the #hero-main section across all pages.
 * Specific images/offsets are handled via CSS Variables.
 * ═══════════════════════════════════════════════════════════════════════════ */
#hero-main {
    color: #ffffff;
    background-color: var(--black-700);
    background-image: var(--hero-bg-desktop);
    background-image: -webkit-image-set(
        var(--hero-bg-desktop) 1x,
        var(--hero-bg-desktop-2x) 2x
    );
    background-image: image-set(
        var(--hero-bg-desktop) 1x,
        var(--hero-bg-desktop-2x) 2x
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--hero-bg-pos-desktop, center center);
}

/* Force light text color on common sub-elements inside hero */
#hero-main p,
#hero-main span,
#hero-main a,
#hero-main em,
#hero-main i,
#hero-main strong,
#hero-main b {
    color: #ffffff;
}

    @media (max-width: 767px) {
        #hero-main {
            background-image: var(--hero-bg-mobile);
            background-image: -webkit-image-set(
                var(--hero-bg-mobile) 1x,
                var(--hero-bg-mobile-2x) 2x
            );
            background-image: image-set(
                var(--hero-bg-mobile) 1x,
                var(--hero-bg-mobile-2x) 2x
            );
            background-position: var(--hero-bg-pos-mobile, right center);
        }
    }

/* Variable-based character limits for text layout */
#hero-main .hero-main__title {
    max-width: var(--kcm-hero-title-max-desktop, 15ch);
}
#hero-main .hero-main__lead {
    max-width: var(--kcm-hero-lead-max-desktop, 65ch);
}

@media (max-width: 767px) {
    #hero-main .hero-main__title {
        max-width: var(--kcm-hero-title-max-mobile, 11ch);
    }
    #hero-main .hero-main__lead {
        max-width: var(--kcm-hero-lead-max-mobile, 65ch);
    }
}

.kcm-footer-social .social-link img {
    width: 34px;
    height: 34px;
}
.kcm-footer-social {
    gap: 15px;
}