/* Page styles for the "Challenge the FIX Engineer" landing page.

   The page reuses the site header, footer, common.css and the site page-header
   pattern (.main-header / .main-content); these rules only cover the page body
   and its dialogs.

   Written mobile-first on purpose: most visitors reach this page by scanning the
   conference QR code on a phone, so the phone layout is the base and wider
   screens are added on top with min-width queries. This file is loaded last, so
   it also wins over the site's own desktop-first rules where the two disagree.

   Palette and type follow the site: #39C2D7 accent, #A3C644 call to action,
   #464547 text, #FAFAFA panels; Museo_Sans_900 for headings,
   sourcesanspro-semibold for small uppercase labels, source_sans_proregular
   (the body font) for everything else. */

/* ---------- page header ---------- */

.vfe-page-header {
    min-height: 0;
    padding: 28px 20px 32px;
    /* the colour also covers the moment before the banner has loaded on mobile data */
    background-color: #464547;
    background-image: url('../media/205784/supportbanner.jpg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

    /* the certification badges the site pins to every page header would sit on top
       of the text on a phone, so they come back only on wider screens */
    .vfe-page-header::after {
        display: none;
    }

.vfe-page-header .vfe-kicker {
    margin: 0 0 10px;
    font-family: "sourcesanspro-semibold", sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #76CDD8;
}

.vfe-page-header .main-header__title {
    margin-bottom: 12px;
    max-height: none;
}

.vfe-page-header .main-header__title-description {
    margin: 0;
    max-width: 640px;
}

/* ---------- page body ---------- */

.vfe {
    color: #464547;
    padding: 32px 20px 64px;
}

.vfe-body {
    width: 100%;
}

.vfe-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vfe-action {
    width: 100%;
    min-height: 56px;
    text-align: left;
    padding: 18px;
    cursor: pointer;
    background-color: #FAFAFA;
    border: 0;
    box-shadow: inset 0 -2px 0 #39C2D7;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.vfe-action:hover,
.vfe-action:focus-visible {
    background-color: #F2F2F2;
    box-shadow: inset 0 -4px 0 #39C2D7;
    outline: none;
}

/* a touch of give under the finger, so a tap feels answered before the dialog opens */
.vfe-action:active { transform: translateY(1px); }

.vfe-action__label {
    display: block;
    font-family: 'Museo_Sans_900', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    color: #464547;
}

.vfe-action__hint {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: #4F4F4F;
}

.vfe-secondary {
    /* On a phone these stack full width under the tiles. Left to wrap they broke two and
       one, at three different widths, which read as a mistake rather than a row. The
       larger gap above separates them from the tiles as a tier of their own. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 26px 0 0;
}

/* A middle tier. The three tiles above are where a visitor is meant to go, and these
   explain rather than demonstrate, so they are outlined instead of filled: plainly
   buttons, plainly not the main ones. */
.vfe-secondary .vfe-link {
    padding: 14px 18px;
    border: 1px solid #39C2D7;
    background-color: #fff;
    font-family: "sourcesanspro-semibold", sans-serif;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.vfe-secondary .vfe-link:hover {
    background-color: #F2F2F2;
    border-color: #39C2D7;
    color: #39C2D7;
}

.vfe-secondary .vfe-link:active { transform: translateY(1px); }

.vfe-link {
    /* the vertical padding keeps the tap target at 44px without moving the text */
    padding: 11px 0;
    cursor: pointer;
    background: none;
    border: 0;
    font-family: "source_sans_proregular", sans-serif;
    font-size: 16px;
    text-align: left;
    color: #39C2D7;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vfe-link:hover { color: #76CDD8; }

/* Inside a dialog a link follows a button, a card row or a field, so it needs a line
   of its own and room above it. Inline flow is what made it sit against its neighbour. */
.vfe-dialog__body .vfe-link {
    display: block;
    margin-top: 12px;
}

.vfe-link--strong {
    font-family: "sourcesanspro-semibold", sans-serif;
    color: #A3C644;
}

.vfe-link--strong:hover { color: #464547; }

/* ---------- dialog ---------- */

.vfe-dialog {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    /* the explicit height is what makes the percentage max-height on the panel resolve;
       without it the panel grows to its content and runs off the bottom of the screen.
       dvh then keeps the dialog above the mobile browser chrome, which sizes a fixed
       element against the viewport WITHOUT its address bar. */
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    /* last resort: should the panel still end up taller than the screen, the overlay
       itself scrolls, so the end of the content is always reachable */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    /* no padding on a phone: the panel below fills the whole screen */
    padding: 0;
}

.vfe-dialog.is-open { display: flex; }

/* keeps the page behind the dialog from scrolling on touch devices */
body.vfe-locked { overflow: hidden; }

/* ---------- motion ----------

   Short, quick and never blocking: enough that a dialog arrives rather than snaps into
   place, not enough that anyone standing at a stand waits for it. Nothing here delays a
   tap, and all of it is switched off under prefers-reduced-motion at the end of the file. */

@keyframes vfe-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vfe-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.vfe-dialog.is-open .vfe-dialog__backdrop {
    animation: vfe-fade .18s ease-out both;
}

.vfe-dialog.is-open .vfe-dialog__panel {
    animation: vfe-rise .24s cubic-bezier(.2, .7, .3, 1) both;
}

/* each view as it replaces the one before it inside the panel */
.vfe-dialog__body.is-entering {
    animation: vfe-rise .2s ease-out both;
}

.vfe-dialog__backdrop {
    /* fixed, not absolute: the overlay above can scroll, and the dimmed background
       must stay over the whole screen while it does */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(70, 69, 71, 0.8);
}

.vfe-dialog__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    /* On a phone the panel is the screen: full width, full height, bar pinned at the
       top and the body scrolling underneath it. That removes any question of the dialog
       sitting too high or too low, and the close button is always in the same place.
       From 768px up it becomes a centred floating panel again. */
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    /* the bar stays put and only .vfe-dialog__body scrolls, so the close button and
       the end of the content are always reachable */
    max-height: 100%;
    min-height: 0;
    background-color: #fff;
    box-shadow: 0 2px 20px rgba(70, 69, 71, 0.35);
}

.vfe-dialog__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: #FAFAFA;
    border-bottom: 1px solid #d8d8d8;
}

.vfe-dialog__title {
    flex: 1;
    margin: 0;
    font-family: 'Museo_Sans_900', sans-serif;
    font-size: 17px;
    line-height: 1.25;
    color: #464547;
}

.vfe-dialog__back,
.vfe-dialog__close {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 8px;
    cursor: pointer;
    background: none;
    border: 0;
    font-family: "source_sans_proregular", sans-serif;
    font-size: 15px;
    color: #4F4F4F;
}

.vfe-dialog__back:hover,
.vfe-dialog__close:hover { color: #39C2D7; }

.vfe-dialog__back.is-hidden { display: none; }

.vfe-dialog__close { font-size: 28px; line-height: 1; }

.vfe-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 28px;
}

/* ---------- dialog content ---------- */

.vfe-intro {
    margin: 0 0 20px;
    font-size: 16px;
    color: #4F4F4F;
}

/* the site's reset takes the weight off strong, and an e-mail address is one long word
   that would otherwise widen the dialog on a phone */
.vfe-intro strong {
    font-family: "sourcesanspro-semibold", sans-serif;
    color: #464547;
    overflow-wrap: anywhere;
}

.vfe-h3 {
    /* close to the field it labels, well clear of the group above it */
    margin: 26px 0 8px;
    font-family: "sourcesanspro-semibold", sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #39C2D7;
}

.vfe-h3:first-child { margin-top: 0; }

.vfe-field {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    background-color: #fff;
    border: 1px solid #CCCCCC;
    font-family: "source_sans_proregular", sans-serif;
    /* 16px keeps iOS from zooming the page when the field takes focus */
    font-size: 16px;
    color: #464547;
}

.vfe-field:focus {
    border-color: #39C2D7;
    outline: none;
}

textarea.vfe-field { min-height: 96px; resize: vertical; }

.vfe-btn {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 24px;
    padding: 12px 20px;
    cursor: pointer;
    background-color: #A3C644;
    border: 1px solid #A3C644;
    font-family: "source_sans_proregular", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

/* green and teal are both the site's; nothing in its palette is a darker green */
.vfe-btn:hover { background-color: #39C2D7; border-color: #39C2D7; }

.vfe-btn:active { transform: translateY(1px); }

.vfe-btn:disabled { opacity: .5; cursor: default; transform: none; }

/* The same button as a link, for the one action that leaves the page. A link does not
   centre its text the way a button does, and the site colours links on its own. */
a.vfe-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

a.vfe-btn,
a.vfe-btn:visited,
a.vfe-btn:hover { color: #fff; }

.vfe-btn--ghost {
    background-color: #fff;
    border-color: #39C2D7;
    color: #39C2D7;
}

.vfe-btn--ghost:hover { background-color: #F2F2F2; border-color: #39C2D7; color: #39C2D7; }

.vfe-btn-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vfe-note {
    margin-top: 24px;
    line-height: 1.5;
    font-size: 14px;
    color: #4F4F4F;
}

.vfe-cards,
.vfe-tiles {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vfe-card {
    min-height: 56px;
    text-align: left;
    padding: 18px;
    cursor: pointer;
    background-color: #FAFAFA;
    border: 0;
    box-shadow: inset 0 -2px 0 #39C2D7;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.vfe-card:hover {
    background-color: #F2F2F2;
    box-shadow: inset 0 -4px 0 #39C2D7;
}

.vfe-card:active { transform: translateY(1px); }

.vfe-card__title {
    display: block;
    font-family: 'Museo_Sans_900', sans-serif;
    font-size: 17px;
    line-height: 1.3;
    color: #464547;
}

.vfe-card__hint {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.45;
    color: #4F4F4F;
}

.vfe-tile {
    padding: 18px;
    background-color: #FAFAFA;
    box-shadow: inset 0 -2px 0 #39C2D7;
}

.vfe-tile__title {
    display: block;
    font-family: 'Museo_Sans_900', sans-serif;
    margin-bottom: 8px;
    line-height: 1.3;
    color: #464547;
}

.vfe-tile__text {
    display: block;
    font-size: 15px;
    line-height: 1.45;
    color: #4F4F4F;
}

.vfe-steps { margin: 0; padding: 0; list-style: none; }

.vfe-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: #CCCCCC;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease, color .25s ease;
}

.vfe-steps li.is-done {
    opacity: 1;
    transform: none;
    color: #464547;
}

.vfe-steps li.is-done::before {
    animation: vfe-tick .3s ease-out both;
}

@keyframes vfe-tick {
    from { transform: scale(.4); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.vfe-steps li::before {
    content: "\2713";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background-color: #A3C644;
    color: #fff;
    font-size: 13px;
}

.vfe-verdict {
    margin-top: 24px;
    padding: 18px;
    background-color: #FAFAFA;
    box-shadow: inset 0 -2px 0 #A3C644;
    /* the element is display:none until the steps finish, so this runs on reveal */
    animation: vfe-rise .3s ease-out both;
}

.vfe-verdict.is-hidden { display: none; }

.vfe-verdict__flag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    background-color: #A3C644;
    font-family: "sourcesanspro-semibold", sans-serif;
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.vfe-verdict dl { margin: 0; }

.vfe-verdict dt {
    margin-top: 14px;
    font-family: "sourcesanspro-semibold", sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #39C2D7;
}

.vfe-verdict dd {
    margin: 6px 0 0;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.vfe-verdict dd ul {
    margin: 6px 0 0;
    padding-left: 18px;
    color: #4F4F4F;
}

.vfe-flow {
    /* a diagram follows tiles or a paragraph and needs the same air between sections as
       anything else; when it opens a dialog the panel padding is the gap already */
    margin: 26px 0 10px;
    padding: 0;
    list-style: none;
    text-align: center;
}

.vfe-flow:first-child { margin-top: 0; }

.vfe-flow li {
    padding: 10px 12px;
    background-color: #FAFAFA;
    border: 1px solid #d8d8d8;
    font-family: "sourcesanspro-semibold", sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #464547;
}

.vfe-flow li + li { position: relative; margin-top: 18px; }

.vfe-flow li + li::before {
    content: "\2193";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    color: #39C2D7;
    font-size: 14px;
}

.vfe-video {
    display: block;
    width: 100%;
    /* holds the space before the poster arrives, so the button below does not jump */
    aspect-ratio: 16 / 9;
    /* a phone held sideways is shorter than the video is tall at full width */
    max-height: 70vh;
    background-color: #464547;
}

.vfe-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
}

.vfe-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 11px 12px;
    cursor: pointer;
    background-color: #FAFAFA;
    border: 1px solid #d8d8d8;
    font-size: 16px;
    transition: background-color .15s ease, border-color .15s ease;
}

.vfe-check:hover {
    border-color: #39C2D7;
    background-color: #F2F2F2;
}

.vfe-check input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: 0 0 18px;
}

.vfe-status {
    margin-top: 14px;
    font-size: 16px;
    color: #39C2D7;
}

.vfe-status.is-hidden { display: none; }

/* the site marks an invalid field with #ff0000; the message matches it */
.vfe-status--error { color: #ff0000; }

/* ---------- tablets and up ---------- */

@media screen and (min-width: 768px) {
    .vfe-page-header {
        min-height: 200px;
        padding: 40px;
    }

        .vfe-page-header::after {
            display: block;
        }

    .vfe-page-header .vfe-kicker { font-size: 13px; }

    .vfe { padding: 42px 40px 80px; }

    .vfe-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .vfe-action {
        flex: 1 1 260px;
        padding: 22px;
    }

    .vfe-action__label { font-size: 20px; }

    /* side by side once there is room for the three of them on one line */
    .vfe-secondary {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
    }

    .vfe-secondary .vfe-link {
        padding: 13px 22px;
        text-align: left;
    }

    /* only the plain links inside a dialog lose the touch padding here */
    .vfe-dialog__body .vfe-link { padding: 0; }

    .vfe-dialog { padding: 24px; }

    .vfe-dialog__panel {
        /* the auto margins centre the panel while it fits and let it scroll with the
           overlay when it does not, instead of being clipped at the top */
        margin: auto;
        height: auto;
        max-width: 780px;
    }

    .vfe-dialog__bar { padding: 16px 20px; }

    .vfe-dialog__title { font-size: 24px; }

    .vfe-dialog__body { padding: 26px 28px 34px; }

    .vfe-dialog__body .vfe-link { margin-top: 16px; }

    .vfe-btn {
        display: inline-block;
        width: auto;
        min-width: 220px;
    }

    a.vfe-btn { display: inline-flex; }

    .vfe-btn-row { flex-direction: row; flex-wrap: wrap; gap: 12px; }

    /* Two columns once there is room: as one list the interests pushed the name, company
       and e-mail fields below the fold, so the form looked longer than it is. */
    .vfe-checks {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 14px;
    }

    .vfe-cards,
    .vfe-tiles {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 18px;
    }

    .vfe-card { flex: 1 1 210px; padding: 20px; }

    .vfe-tile { flex: 1 1 210px; padding: 20px; }
}

/* ---------- desktop ---------- */

@media screen and (min-width: 1025px) {
    .vfe-page-header { padding: 0 100px; }

    .vfe { padding: 42px 100px 100px; }
}

@media (prefers-reduced-motion: reduce) {
    .vfe-action,
    .vfe-card,
    .vfe-check,
    .vfe-btn,
    .vfe-steps li {
        transition: none;
    }

    .vfe-action:active,
    .vfe-card:active,
    .vfe-btn:active {
        transform: none;
    }

    .vfe-steps li { transform: none; }

    .vfe-verdict,
    .vfe-steps li.is-done::before,
    .vfe-dialog__body.is-entering,
    .vfe-dialog.is-open .vfe-dialog__panel,
    .vfe-dialog.is-open .vfe-dialog__backdrop {
        animation: none;
    }
}