/*
 * PromoPA look for the public error pages (401, 403, 404, 500 ...), loaded by PromoPaBranding only on the surveys/error action.
 * Two core markups reach that action, and this file styles both the same way:
 *   - no survey in the URL, or a survey on the vanilla theme: themes/survey/vanilla/views/layout_errors.twig
 *       body > .container > #error-card.card > .card-body > h2.card-title, hr, .card-text, a.card-link
 *   - a survey on a fruity_twentythree theme (every theme in use is one, or extends one): themes/survey/fruity_twentythree/views/layout_errors.twig
 *       body.error-page > .container > .row > .col (h2.error-title, .error-content, a.error-link) + .col.d-flex (the green files/error.png)
 * Look: charcoal band with the white PromoPA logo and a red edge (as the admin login and the Moodle login), then a white card with a red
 * left bar. No generated text: respondents see these pages in the survey's language (German on some), so only the logo and the colours are added.
 * The theme CSS is rendered before this file (registerCssFile), so equal specificity is enough, except where a theme or Bootstrap uses !important
 * (marked below). Client themes that style `body` for their survey pages (ORep, UPI) leak into the error page too: neutralised on the body rule.
 */

body.error-page,
body:has(> .container > #error-card) {
    display: block; /* UPI makes the body a flex column */
    margin: 0;
    padding: 0 !important; /* ORep sets body { padding-top: 250px !important } for its survey header, which would push the band down */
    height: auto;
    min-height: 100vh;
    background: #f4f5f7;
}

/* the brand band; the logo is white on transparent, so it needs the dark background */
body.error-page::before,
body:has(> .container > #error-card)::before {
    content: "";
    display: block;
    height: 88px;
    border-bottom: 5px solid #c70000;
    background: url("promopa-logo-white.webp") no-repeat center / auto 56px, linear-gradient(145deg, #222529, #16181b);
}

/* the card: vanilla already has one (#error-card), fruity has a bare flex container, so both become the same box */
body.error-page .container,
#error-card {
    display: block;
    width: auto;
    max-width: 760px;
    height: auto;
    padding: 0;
    border: 0;
    border-left: 6px solid #c70000;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(0, 22, 44, .12);
}

/* vanilla's card is w-75 mx-auto (both !important): same width as the fruity card instead */
#error-card {
    width: 100% !important;
    margin: 2.5rem auto !important;
}

#error-card .card-body {
    padding: 2rem 2.25rem;
    color: #3b4046; /* the contact line is a bare text node in the card body */
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Bootstrap's .m-auto is !important and would zero the vertical margin of the fruity container */
body.error-page .container {
    margin: 2.5rem auto !important;
    padding: 2rem 2.25rem;
}

/* fruity's illustration is the stock green LimeSurvey one: drop it, the text gets the whole card */
body.error-page .container .col.d-flex {
    display: none !important; /* Bootstrap's .d-flex is !important */
}

body.error-page .container .row {
    margin: 0;
}

body.error-page .container .row > .col {
    padding: 0;
    color: #3b4046; /* the contact line is a bare text node in this column */
    font-size: 1.1rem;
    line-height: 1.5;
}

body.error-page .error-title,
#error-card .card-title {
    margin: 0 0 1rem;
    color: #222529;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

#error-card hr {
    margin: 0 0 1rem;
    border: 0;
    border-top: 1px solid #d9dde1;
    opacity: 1;
}

body.error-page .error-content,
#error-card .card-text {
    margin-bottom: .75rem;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: 0;
}

body.error-page .error-link,
#error-card .card-link {
    color: #c70000;
    font-size: inherit;
    line-height: inherit;
}

body.error-page .error-link:hover,
#error-card .card-link:hover {
    color: #9c0000;
}

/* the stack trace that debug mode adds */
body.error-page pre,
#error-card pre {
    max-height: 22rem;
    overflow: auto;
    font-size: .8rem;
}

@media (max-width: 575.98px) {
    body.error-page::before,
    body:has(> .container > #error-card)::before {
        height: 72px;
        background-size: auto 44px, auto;
    }

    #error-card,
    body.error-page .container {
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    #error-card {
        margin: 0 !important;
    }

    body:has(> .container > #error-card) > .container {
        max-width: none;
        padding: 0;
    }

    body.error-page .container {
        margin: 0 !important;
    }

    #error-card .card-body,
    body.error-page .container {
        padding: 1.5rem 1.25rem;
    }

    body.error-page .error-title,
    #error-card .card-title {
        font-size: 1.4rem;
    }
}