/*
   Mock results page — site chrome.

   css/mock.css is the report itself, lifted from the exam kiosk so the
   candidate's page matches what staff print. THIS file wraps it in the landing
   site's look: the same photo background, spacing and card treatment as the
   login page, so /mock reads as part of innovativecentre.net rather than a bare
   document someone bolted on.
*/

/* Mirrors .login-section (css/login.css) — same image, same overlay, same
   header clearance. If the login page's treatment changes, change this too. */
.mock-section {
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                url('../images/6.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    color: var(--text-white);
    padding-top: 120px;
    padding-bottom: 80px;
}

.mock-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Page heading sits directly on the photo, so it needs light type — the report
   styles below are dark-on-white and live inside their own cards. */
.mock-section .zu-header {
    text-align: center;
    margin-bottom: 2rem;
}
.mock-section .zu-header .zu-logo {
    max-width: 260px;
    /* The Diagnostic Centre mark is dark navy artwork on transparency; on a dark
       photo it disappears. A white plate keeps it legible without needing a
       second version of the asset. */
    background: #fff;
    border-radius: 12px;
    padding: 14px 22px;
    margin-bottom: 1.25rem;
}
.mock-section .zu-header h1 {
    color: var(--text-white);
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}
.mock-section .zu-subtitle {
    color: rgba(255, 255, 255, .85);
    font-size: 1.05rem;
    margin: 0;
}

/* The code card: same white-card-on-photo treatment as the login cards. */
.mock-section .rp-code-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
    border: none;
    max-width: 460px;
    margin: 0 auto;
    padding: 2rem 1.75rem;
    color: var(--text-color);
}

/* Once a report loads it is a document — give it a white sheet to sit on so it
   reads like the printed report rather than floating on a photograph. */
.mock-section #rp-report-view:not([hidden]) {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
    padding: 2rem 1.75rem;
    color: var(--text-color);
}

.mock-section .rp-loading {
    color: var(--text-white);
    text-align: center;
    font-size: 1.05rem;
}

@media (max-width: 575.98px) {
    .mock-section { padding-top: 100px; }
    .mock-section .zu-header h1 { font-size: 1.75rem; }
    .mock-section #rp-report-view:not([hidden]) { padding: 1.25rem 1rem; }
}

/* Print: the photo background and the site chrome are screen furniture. The
   printed sheet must be the report and nothing else. */
@media print {
    .header, .footer, .mock-section .zu-header, #rp-code-view { display: none !important; }
    .mock-section {
        background: #fff !important;
        padding: 0 !important;
        min-height: 0;
    }
    .mock-section #rp-report-view:not([hidden]) {
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }
}