/* =========================================================================
   /cybersecurity/ - vulnerability report form
   -------------------------------------------------------------------------
   Everything is scoped under #cyber-form or .cyber-aside so it cannot leak
   into the rest of the site, and so global.css / Bootstrap 3 cannot bleed in.

   House style followed here: square corners, brand blue #214798, buttons
   black on hover, light panels #f3f3f3, borders #c2c2c2 / #868686, body text
   black. Hierarchy comes from size and weight, not from greying text out.
   ========================================================================= */

#cyber-form h2 {
    margin-top: 44px;
    margin-bottom: 4px;
}

#cyber-form .cyber-note {
    margin-bottom: 24px;
}

/* The published mailbox. Uses the site's light panel fill rather than its own
   outline, so it reads as part of the page furniture like the aside does. */
#cyber-form .cyber-route {
    background: #f3f3f3;
    padding: 16px 18px;
    margin: 24px 0 16px;
}

    #cyber-form .cyber-route p {
        margin: 0;
    }

#cyber-form .cyber-addr {
    display: block;
    font-size: 1.125em;
    font-weight: 600;
    color: #214798;
    word-break: break-all;
    margin-bottom: 4px;
}

    #cyber-form .cyber-addr:hover,
    #cyber-form .cyber-addr:focus {
        color: #000;
    }

/* Names the products in scope and the emergency route, so it is content
   rather than small print. Kept at body size and colour. */
#cyber-form .cyber-scope {
    margin-bottom: 8px;
}

/* Emergency and safety issues. Uses the same light panel as the other
   set-apart content on the page, so it is distinct from the body copy without
   introducing a border treatment that appears nowhere else on the site. */
#cyber-form .cyber-safety {
    background: #f3f3f3;
    padding: 18px 20px;
    margin: 24px 0 8px;
}

    #cyber-form .cyber-safety h2 {
        margin-top: 0;
        margin-bottom: 6px;
        font-size: 1.125em;
        font-weight: 600;
    }

    #cyber-form .cyber-safety p {
        margin: 0;
    }

/* ---- fields ---- */

#cyber-form .form-group {
    margin-bottom: 22px;
}

#cyber-form label {
    font-weight: 600;
    margin-bottom: 2px;
}

#cyber-form .help-block {
    display: block;
    font-size: 0.875em;
    color: #444;
    margin: 0 0 8px;
}

#cyber-form .form-control {
    border-radius: 0;
    border-color: #868686;
    box-shadow: none;
    color: #000;
}

    #cyber-form .form-control:focus {
        border-color: #214798;
        box-shadow: none;
        outline: 2px solid #214798;
        outline-offset: 1px;
    }

#cyber-form textarea.form-control {
    resize: vertical;
}

/* On palette: blue rather than the amber this previously used. */
#cyber-form .cyber-req {
    font-weight: 600;
    font-size: 0.75em;
    color: #214798;
    margin-left: 8px;
}

/* The exploitation question is the field that decides whether a report is
   reportable at all, but it gets no special border: boxing one question and
   not the others reads as arbitrary, and a 2px blue box is a treatment that
   appears nowhere else on the site. The Required marker and the help text
   carry the emphasis instead. */
#cyber-form .cyber-exploited {
    margin-bottom: 26px;
}

    #cyber-form .cyber-exploited label#lblExploited {
        display: block;
    }

/* RadioButtonList renders input/label pairs. Without this the label drops to
   the line below its own radio button. */
#cyber-form .cyber-choices {
    display: block;
    margin-top: 8px;
}

    #cyber-form .cyber-choices br {
        display: none;
    }

    #cyber-form .cyber-choices input[type="radio"] {
        float: left;
        margin: 4px 0 0;
        width: 18px;
    }

    #cyber-form .cyber-choices label {
        display: block;
        font-weight: 400;
        margin: 0 0 8px 24px;
        cursor: pointer;
    }

        #cyber-form .cyber-choices label:last-of-type {
            margin-bottom: 0;
        }

/* The browser default file button is the one control that cannot be fully
   restyled, so it is boxed to sit within the site's flat treatment rather
   than floating loose. */
#cyber-form .cyber-file {
    display: block;
    border: 1px solid #c2c2c2;
    background: #fff;
    padding: 10px 12px;
    margin-top: 4px;
    width: 100%;
}

#cyber-form .cyber-caution {
    background: #f3f3f3;
    padding: 16px 18px;
    margin: 26px 0;
    font-size: 0.875em;
    color: #444;
}

    #cyber-form .cyber-caution p {
        margin: 0;
    }

/* Honeypot. Moved off-screen rather than display:none, because some bots
   skip hidden fields but fill positioned ones. */
#cyber-form .cyber-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#cyber-form .cf-turnstile {
    margin: 26px 0;
}

#cyber-form .cyber-submit {
    margin: 26px 0 44px;
}

#cyber-form .btn-primary {
    border-radius: 0;
    background: #214798;
    border-color: #214798;
    padding: 10px 26px;
}

    #cyber-form .btn-primary:hover,
    #cyber-form .btn-primary:focus,
    #cyber-form .btn-primary:active {
        background: #000;
        border-color: #000;
    }

/* Two-column rows. Where only one field of a pair has help text - "If known."
   under Firmware version, for instance - the taller label block pushes that
   input a line lower than its neighbour. Making the row a flex container and
   letting the controls absorb the slack aligns the inputs along the bottom,
   however tall the labels above them are and whether or not the help text
   wraps. Applied from the tablet breakpoint up; below that the columns stack
   and there is nothing to align. */
@media (min-width: 768px) {
    #cyber-form .cyber-pair {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        #cyber-form .cyber-pair > div {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

            #cyber-form .cyber-pair .form-control {
                margin-top: auto;
            }
}

/* ---- result panels ---- */

#cyber-form .cyber-panel {
    padding: 20px 22px;
    margin: 24px 0;
    background: #f3f3f3;
}

    #cyber-form .cyber-panel h2 {
        margin-top: 0;
        font-size: 1.25em;
    }

    #cyber-form .cyber-panel p:last-child {
        margin-bottom: 0;
    }

#cyber-form .cyber-panel-ok {
    border-left: 4px solid #214798;
}

#cyber-form .cyber-panel-fail {
    border-left: 4px solid #a4160f;
}

#cyber-form .cyber-panel-errors {
    border-left: 4px solid #a4160f;
}

    #cyber-form .cyber-panel-errors ul {
        margin-bottom: 0;
        padding-left: 20px;
    }

/* ---- aside ---- */

.cyber-aside {
    background: #f3f3f3;
    padding: 20px 22px;
    margin: 24px 0 44px;
    font-size: 0.9375em;
}

    .cyber-aside h3 {
        font-size: 1em;
        font-weight: 600;
        margin-top: 22px;
        margin-bottom: 8px;
    }

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

    .cyber-aside ul {
        padding-left: 18px;
    }

    .cyber-aside li {
        margin-bottom: 6px;
    }

/* On a phone the aside would otherwise land after a very long form, so the
   context arrives last. Flex ordering pulls it above the form instead. */
@media (max-width: 767px) {
    #cyber-form .cyber-route {
        padding: 14px;
    }

    .cyber-stack {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

        .cyber-stack > .cyber-col-aside {
            -webkit-order: 1;
            order: 1;
        }

        .cyber-stack > .cyber-col-form {
            -webkit-order: 2;
            order: 2;
        }

    .cyber-aside {
        margin-bottom: 24px;
    }
}