/*
 * Shared browser-safety and typography defaults. App styles should not
 * duplicate these global guards; they are loaded as platform-owned CSS.
 */
.va-mobile-scroll-guard,
.va-mobile-scroll-guard body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.va-mobile-scroll-guard *,
.va-mobile-scroll-guard *::before,
.va-mobile-scroll-guard *::after {
    box-sizing: border-box;
}

.va-mobile-scroll-guard body {
    margin: 0;
}

/*
 * Every Legal document uses one cross-site maximum reading width centered within the immediate host
 * content box. Its used width and padding deliberately remain owned by the host's native content-container
 * rule; assigning either here would override the ordinary subpage inset or introduce Legal-only spacing.
 * Auto inline margins cover block and flex placement; justify-self makes the same contract explicit
 * for grid hosts. The wrapper's border-box sizing keeps padding and borders inside the allocation.
 */
.va-legal {
    box-sizing: border-box;
    max-width: 1000px;
    margin-inline: auto;
    justify-self: stretch;
}

@media (max-width: 1000px) {
    .va-legal {
        max-width: 100%;
    }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-optical-sizing: auto;
    font-synthesis-weight: none;
    font-synthesis-style: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: pretty;
}

/*
 * Prose and quotation elements keep the readable default even when they sit inside a heading-role container.
 * The zero-specificity role selectors let an app preserve an intentional white-space rule without a specificity fight.
 */
:where(
    p,
    li,
    dd,
    blockquote,
    q,
    figcaption,
    caption,
    cite,
    address,
    td
) {
    text-wrap: pretty;
}

/*
 * Semantic headings and canonical class-role tokens balance short display copy. A custom non-semantic heading should
 * carry one of these terminal role tokens rather than adding an app-local text-wrap declaration.
 */
:where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    [role="heading"],
    dt,
    th,
    legend,
    summary,
    [data-i18n$=".subtitle"],
    [class~="title"],
    [class$="-title"],
    [class*="-title "],
    [class$="__title"],
    [class*="__title "],
    [class~="subtitle"],
    [class$="-subtitle"],
    [class*="-subtitle "],
    [class$="__subtitle"],
    [class*="__subtitle "],
    [class~="heading"],
    [class$="-heading"],
    [class*="-heading "],
    [class$="__heading"],
    [class*="__heading "],
    [class~="subheading"],
    [class$="-subheading"],
    [class*="-subheading "],
    [class$="__subheading"],
    [class*="__subheading "],
    [class~="headline"],
    [class$="-headline"],
    [class*="-headline "],
    [class$="__headline"],
    [class*="__headline "],
    [class~="eyebrow"],
    [class$="-eyebrow"],
    [class*="-eyebrow "],
    [class$="__eyebrow"],
    [class*="__eyebrow "],
    [class~="kicker"],
    [class$="-kicker"],
    [class*="-kicker "],
    [class$="__kicker"],
    [class*="__kicker "],
    [class~="tagline"],
    [class$="-tagline"],
    [class*="-tagline "],
    [class$="__tagline"],
    [class*="__tagline "],
    [class~="overline"],
    [class$="-overline"],
    [class*="-overline "],
    [class$="__overline"],
    [class*="__overline "],
    [class~="deck"],
    [class$="-deck"],
    [class*="-deck "],
    [class$="__deck"],
    [class*="__deck "],
    [class~="dek"],
    [class$="-dek"],
    [class*="-dek "],
    [class$="__dek"],
    [class*="__dek "]
) {
    text-wrap: balance;
}

/*
 * Footer chrome is short multi-segment copy ("(c) year - site - Legal - platform credit"), so it balances instead
 * of orphaning a separator or the credit on a line of its own. The prose elements repeat here because the prose
 * role above would otherwise win on document order.
 */
:where(footer),
:where(footer) :where(p, small, address, li) {
    text-wrap: balance;
}

.va-text-balance {
    text-wrap: balance;
}

.va-text-pretty {
    text-wrap: pretty;
}

.confirmation-page:not(body) {
    min-height: auto;
    background: transparent;
}

.va-mobile-scroll-guard img,
.va-mobile-scroll-guard svg,
.va-mobile-scroll-guard video,
.va-mobile-scroll-guard canvas {
    max-width: 100%;

}

/*
 * Why: The credit anchor stays a plain inline box. An inline-flex anchor is one atomic inline-level box, so it
 * could never break mid-sentence and always pushed the whole credit onto a line of its own. Typography and color
 * inherit the website's footer; decoration and interaction states belong to that website rather than vaPower.
 */
.va-footer-link {
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    color: inherit;
    vertical-align: baseline;
}

a.va-legal-link:link,
a.va-legal-link:visited {
    color: inherit;
}

a.va-legal-link:focus-visible {
    color: inherit;
    outline: 2px solid currentColor;
    outline-offset: 0.2em;
}

/*
 * Why: The platform credit is one sentence inside the footer line, not an atomic unit. Its wrapper and lead
 * text stay in normal inline flow so the sentence wraps and balances with the rest of the footer instead of
 * dropping to a line of its own; only the animated brand pair below stays unbreakable.
 */
.va-brand-switcher {
    display: inline-grid;
    align-items: baseline;
    line-height: inherit;
    vertical-align: baseline;
}

.va-social-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.va-social-icon-facebook {
    mask-image: url("/shared/social/facebook.svg");
    -webkit-mask-image: url("/shared/social/facebook.svg");
}

.va-social-icon-instagram {
    mask-image: url("/shared/social/instagram.svg");
    -webkit-mask-image: url("/shared/social/instagram.svg");
}

.va-social-icon-imdb {
    mask-image: url("/shared/social/imdb.svg");
    -webkit-mask-image: url("/shared/social/imdb.svg");
}

.va-social-icon-linkedin {
    mask-image: url("/shared/social/linkedin.svg");
    -webkit-mask-image: url("/shared/social/linkedin.svg");
}

.va-social-icon-threads {
    mask-image: url("/shared/social/threads.svg");
    -webkit-mask-image: url("/shared/social/threads.svg");
}

.va-social-icon-x {
    mask-image: url("/shared/social/x.svg");
    -webkit-mask-image: url("/shared/social/x.svg");
}

.va-social-icon-youtube {
    mask-image: url("/shared/social/youtube.svg");
    -webkit-mask-image: url("/shared/social/youtube.svg");
}

.va-social-icon-spotify {
    mask-image: url("/shared/social/spotify.svg");
    -webkit-mask-image: url("/shared/social/spotify.svg");
}

.va-social-icon-apple-music {
    mask-image: url("/shared/social/apple-music.svg");
    -webkit-mask-image: url("/shared/social/apple-music.svg");
}

.va-brand-switcher span {
    grid-area: 1 / 1;
    font: inherit;
    white-space: nowrap;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.va-brand-switcher span:nth-child(1) {
    animation-name: va-fade-1;
}

.va-brand-switcher span:nth-child(2) {
    animation-name: va-fade-2;
}

@keyframes va-fade-1 {
    0%,
    40% {
        opacity: 1;
    }

    50%,
    90% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes va-fade-2 {
    0%,
    40% {
        opacity: 0;
    }

    50%,
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


@media (prefers-reduced-motion: reduce) {
    .va-brand-switcher span {
        animation: none;
    }

    .va-brand-switcher span:nth-child(2) {
        opacity: 0;
    }
}