/*
 * ngw18frontend-like css styles for cdn error page
*/

/* Note: since this page does not support any other languages, we force LTR layout */
body {
    direction: ltr;
    margin: 0;
}

.vwa-static-error-page {
    --font-family--head: vw-head, Helvetica, Arial, sans-serif;
    --font-family--text: vw-text, Helvetica, Arial, sans-serif;

    --color-blue600: #001e50;
    --color-black100: #000e26;
    --color-blue900: #0040c5;
    --color-white000: #ffffff;
    --color-blue200: #00b0f0;

    --size-static100: 4px;
    --size-static150: 8px;
    --size-static250: 16px;
    --size-static300: 20px;
    --size-static350: 24px;
    --size-static370: 28px;
    --size-static400: 32px;
    --size-static500: 44px;
    --size-static510: 48px;
    --size-static520: 56px;
    --size-static550: 72px;
    --size-static565: 80px;
    --size-static650: 100px;

    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family--text);
}

.vwa-static-error-page .header {
    display: flex;
    align-items: center;
    padding-block: var(--size-static250);

    &:before,
    &:after {
        content: '';
        width: 100%;
        height: 2px;
        background: var(--color-blue600);
    }
}

.vwa-static-error-page img.logo {
    width: var(--size-static400);
    height: auto;
    margin: 5px 12px;

    @media only screen and (min-width: 560px) {
        width: var(--size-static510);
    }
}

.vwa-static-error-page .main-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: var(--size-static400);
    padding: var(--size-static520) var(--size-static400);

    @media only screen and (min-width: 560px) {
        gap: var(--size-static520);
        padding-block: var(--size-static565);
    }

    @media only screen and (min-width: 1600px) {
        gap: var(--size-static550);
        padding-block: var(--size-static650);
    }
}

.vwa-static-error-page .text-wrap {
    max-width: 960px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: var(--size-static300);

    @media only screen and (min-width: 560px) {
        gap: var(--size-static350);
    }

    @media only screen and (min-width: 1600px) {
        gap: var(--size-static370);
    }
}

.vwa-static-error-page .headline {
    max-width: 100%;
    flex-shrink: 0;
    color: var(--color-black100);
    font-family: var(--font-family--head);
    font-size: clamp(2rem, 1.28rem + 2.06vw, 3.75rem);
    font-weight: 700;
    line-height: 120%;
}

.vwa-static-error-page .copy {
    max-width: 100%;
    color: var(--color-black100);
    font-family: var(--font-family--head);
    font-size: clamp(1.5rem, 1.29rem + 0.59vw, 2rem);
    font-weight: 300;
    line-height: 120%;
}

.vwa-static-error-page .cta {
    width: 100%;
    min-width: var(--size-static500);
    min-height: var(--size-static500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-static100);
    padding: var(--size-static150) var(--size-static400);
    border: 1px solid var(--color-blue600);
    border-radius: 500px;
    transition: 0.2s ease-in-out;
    cursor: pointer;

    color: var(--color-blue600);
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;

    @media only screen and (min-width: 560px) {
        width: auto;
    }

    &:hover,
    &:active {
        background: var(--color-blue900);
        border-color: var(--color-blue900);
        color: var(--color-white000);
    }

    &:hover > svg,
    &:active > svg {
        fill: var(--color-white000);
    }

    &:focus-visible {
        outline: var(--color-blue200) solid 2px;
        outline-offset: unset;
        transition: none;
    }
}

.vwa-static-error-page .cta svg {
    width: var(--size-static350);
    height: auto;
    transition: 0.2s ease-in-out;
}