/*
 * 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;
}

/* Keyboard focus is a shared baseline. Component themes can supply their own visible treatment. */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Low-specificity defaults preserve intentional component sizing and inline link layout. */
:where(button, input[type="button"], input[type="submit"], input[type="reset"], select, summary, [role="button"]) {
    min-inline-size: 24px;
    min-block-size: 24px;
}

.va-field-error {
    color: inherit;
    font-weight: 600;
    margin-block: 0.25rem 0.75rem;
}

/* Native media dialogs keep viewport geometry and a visible, localized dismiss action across plugins. */
dialog[data-va-image-dialog] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.va-image-dialog-close {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 1;
    padding: 0.5rem 1rem;
    border: 2px solid CanvasText;
    color: CanvasText;
    background: Canvas;
    font: inherit;
    cursor: pointer;
}

/* The bypass control stays outside document flow and becomes visible on keyboard focus. System colors
 * keep it legible independently of the customer's palette, including Windows forced-colors mode. */
.va-skip-link {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 2147483647;
    max-width: calc(100% - 2rem);
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    color: CanvasText;
    background: Canvas;
    border: 2px solid CanvasText;
    font: inherit;
    text-decoration: underline;
    transform: translateY(calc(-100% - 2rem));
}

.va-skip-link:focus {
    transform: none;
}

.va-skip-link[hidden] {
    display: none;
}

@media (forced-colors: active) {
    :focus-visible {
        outline-color: Highlight;
    }
}

/*
 * 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;
}

/* Footer text and credits stay undecorated in every interaction state. The shared rule must win over
 * app-wide anchor styles; descendants include the atomic animated brand. Focus outlines remain independent.
 */
:where(footer, [role="contentinfo"], .va-footer-link),
:where(footer, [role="contentinfo"], .va-footer-link) * {
    text-decoration: none !important;
}

.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; hover colors remain website-owned and decoration follows the shared footer rule.
 */
.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: 4s;
    animation-iteration-count: 1;
    animation-timing-function: steps(1, end);
}

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

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

@keyframes va-brand-first {
    0%,
    100% {
        visibility: visible;
    }

    50% {
        visibility: hidden;
    }
}

@keyframes va-brand-second {
    0%,
    100% {
        visibility: hidden;
    }

    50% {
        visibility: visible;
    }
}


@media (prefers-reduced-motion: reduce) {
    /* Complete animations so disclosure/reveal content remains available. Transitions must be immediate:
     * a universal nonzero duration animates otherwise static layout properties, including the root font.
     * Essential motion needs a reviewed exception; JavaScript motion uses vaWithMotion in va-common.js. */
    :where(*:not([data-va-motion-essential="true"], [data-va-motion-essential="true"] *)),
    :where(*:not([data-va-motion-essential="true"], [data-va-motion-essential="true"] *))::before,
    :where(*:not([data-va-motion-essential="true"], [data-va-motion-essential="true"] *))::after {
        animation-delay: 0s !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-delay: 0s !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }

    .va-brand-switcher span {
        animation: none;
    }
}