/* Utility pages: thank you (/thank-you/ and /thank-you-identity-week/), status, 404 and the announcement
   band above the 404 header. Values measured on live roc.ai (Divi pages). Loaded by their templates only,
   after style.css and media.css. Desktop rules first, then the responsive tiers. */

@font-face { font-family: "Poppins"; font-weight: 400; src: url("../fonts/Poppins-400-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 500; src: url("../fonts/Poppins-500-latin.woff2") format("woff2"); font-display: swap; }

/* ==========================================================================
   BUTTON (live Divi button: rust pill, dark diamond arrow)
   ========================================================================== */
.utility-btn {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 15.5px 50px 15.5px 24px;
    border-radius: var(--radius-pill);
    background-color: var(--color-rust);
    font-family: var(--font-bold);
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-cream);
    transition: background-color 0.3s, color 0.3s;
}

.utility-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 12px;
    height: 17px;
    transform: translateY(-50%);
    background: url("../images/arrow.svg") center / contain no-repeat;
}

.utility-btn:hover,
.utility-btn:focus-visible {
    background-color: var(--color-cream);
    color: var(--color-rust);
}

.utility-btn--muted {
    border-radius: 5px;
    background-color: var(--color-rust-muted);
}

.utility-btn--muted:hover,
.utility-btn--muted:focus-visible {
    background-color: var(--color-rust-dark);
    color: var(--color-cream);
}

/* ==========================================================================
   /thank-you/
   ========================================================================== */
.thanks-wrap {
    display: flow-root;
    background: var(--color-ink); /* the live page colour shows in the margins around the band */
}

.thanks {
    position: relative;
    display: flow-root;
    margin-top: 100px;
    padding: 130px 0 125px;
    background: var(--color-ink-soft);
}

.thanks__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: right top;
}

.thanks__bg--phone { display: none; }

.thanks__text {
    width: 65%;
    font-size: 18px;
    line-height: 1.35;
    color: var(--color-cream);
}

.thanks__title {
    padding-bottom: 10px;
    margin-bottom: min(2vw, 40px);
    font-family: var(--font-bold);
    font-size: 87px;
    font-weight: 500;
    line-height: 1;
}

/* ==========================================================================
   /thank-you-identity-week/
   ========================================================================== */
.thanks-event {
    padding: 168px 0 200px;
    background: var(--color-white);
}

.thanks-event__row,
.status__row {
    padding-block: min(2%, 33px);
}

.thanks-event__row { max-width: 800px; }

.thanks-event__title {
    margin-bottom: 40px;
    font-family: "Poppins", var(--font-fallback);
    font-size: 52px;
    font-weight: 500;
    line-height: 65px;
    text-align: center;
    color: #1c1e4d;
}

.thanks-event__text {
    max-width: 600px;
    margin: 0 auto 12px;
    font-family: "Poppins", var(--font-fallback);
    text-align: center;
    color: var(--color-navy);
}

.thanks-event__text p { padding-bottom: 16px; }
.thanks-event__text p:last-of-type { padding-bottom: 0; }
.thanks-event__text a { color: #e02826; }

.thanks-event__action,
.error-404__action {
    display: flex;
    justify-content: center;
    padding-bottom: 7px; /* the live button wrapper is 7px taller than its button */
}

/* ==========================================================================
   /status/
   ========================================================================== */
.status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--screen-h);
    padding: 50px 0;
    background: var(--color-cream);
    text-align: center;
}

.status__icon {
    margin: 0 auto 2vw;
}

.status__title {
    margin-bottom: 1.5%;
    font-family: var(--font-medium);
    font-size: 64px;
    font-weight: 500;
    line-height: 1;
}

.status__text { font-size: 24px; line-height: 1; }

.status__text a {
    text-decoration: underline;
    color: var(--color-rust);
}

/* ==========================================================================
   404 and the announcement band above its header
   ========================================================================== */
.error-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 440px 0 120px;
    background: var(--color-ink);
    text-align: center;
}

.error-404__image {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto 77px;
}

.error-404__text {
    margin-bottom: 40px;
    font-family: var(--font-bold);
    font-size: 28px;
    line-height: 36px;
    color: var(--color-steel);
}

.site-band {
    background: var(--color-cream);
}

.site-header.sticky .site-band { display: none; }

.site-band__row {
    zoom: 1; /* the live band row is not in the 80% zoom band */
    width: 80%;
    max-width: var(--container-max);
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
}

.site-band__title {
    width: 51.2%;
    margin-bottom: 20px;
    font-family: var(--font-medium);
    font-size: 38px;
    font-weight: 500;
    line-height: 47px;
    color: var(--color-ink);
}

.site-band__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 28%;
}

.site-band__side p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 24px;
}

/* Front page band (live "Homepage" header layouts): a 54.4% title column and the flag, own type
   sizes below 1101px, copy on one line in the tablet column. */
.site-band--home .site-band__title {
    width: 54.4%;
    padding-bottom: 10px;
}

.site-band--home .site-band__side p { line-height: 1.33; }

@media (min-width: 1501px) {
    .site-band--home .site-band__row {
        align-items: flex-start;
        min-height: 205px;
    }
}

@media (max-width: 1279px) {
    .site-band--home .site-band__side br { display: none; }
}

/* Live pads the 981 to 1100px band row by 14px under the content. */
@media (min-width: 981px) and (max-width: 1100px) {
    .site-band--home .site-band__row { padding-bottom: 44px; }
}

@media (max-width: 1100px) {
    .site-band--home .site-band__title {
        font-size: 28px;
        line-height: 1.2;
    }
}

/* Tall portrait desktop screens (media.css, "Tall portrait"): the title takes the row up to 6% before the side
   column, which keeps the front page title on two lines and the 404 title on its three written lines (the live
   54.4% / 51.2% columns give 3 and 6 lines at 981-1300px). */
@media (min-width: 981px) and (max-aspect-ratio: 2/3) {
    .site-band__title,
    .site-band--home .site-band__title {
        flex: 1 1 0;
        width: auto;
        margin-right: 6%;
    }
    .site-band--home .site-band__title {
        font-size: clamp(28px, 2.5vw, 38px); /* 38px only gets two lines from ~1366px */
        line-height: 1.2;
    }

    /* /status/: the message fills the screen between the header and the footer (no cream band under the footer). */
    body:has(> .site-main > .status) {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    .site-main:has(> .status) {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
    }
    .status { flex: 1 0 auto; }
}

@media (max-width: 767px) {
    .site-band--home .site-band__row {
        width: 100%;
        max-width: none;
        padding: 26px 30px 40px;
    }

    .site-band--home .site-band__title { width: 100%; }

    .site-band--home .site-band__side {
        align-items: flex-start;
        width: 100%;
    }

    .site-band--home .site-band__side p {
        width: 100%;
        margin-bottom: 20px;
        font-size: 4.2vw;
    }
}

@media (max-width: 496px) {
    .site-band--home .site-band__title {
        font-size: 5.6vw;
        line-height: 1.16;
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 1921px) {
    .thanks { padding-block: 10vw; }
}

@media (max-width: 1500px) {
    .thanks-event__row,
    .status__row { padding-block: 2%; }
}

@media (max-width: 980px) {
    .thanks {
        margin: 0 0 5.63vw;
        padding: 16.3vw 0 0 14.4vw;
    }

    .thanks__text {
        width: 100%;
        max-width: 622px;
        margin: 38px 0 13px;
    }

    .thanks-event { padding: 100px 0; }

    .thanks-event__row {
        padding-block: 30px 60px;
    }

    .thanks-event__text { margin-bottom: 30px; }

    .status__row { padding-block: 30px; }

    .status__title { margin-bottom: 30px; }

    .site-band__row { flex-direction: column; }

    .site-band__title {
        width: 80%;
        font-size: 32px;
        line-height: 42px;
    }

    .site-band__side { width: 100%; }

    .site-band__side br { display: none; }
}

@media (max-width: 767px) {
    .thanks {
        margin: 54px 0 0;
        padding: 100px 15px;
    }

    .thanks__row { width: 100%; }

    .thanks__bg--wide { display: none; }
    .thanks__bg--phone { display: block; }

    .thanks__text {
        max-width: none;
        margin: 0;
        color: var(--color-steel);
    }

    .thanks__title {
        margin-bottom: 15px;
        font-size: 11.3vw;
        letter-spacing: -0.29px;
        color: var(--color-cream);
    }

    .thanks__text br { display: none; }

    .thanks-event { padding: 60px 0; }

    .thanks-event__title {
        font-size: 40px;
        line-height: 50px;
    }

    .utility-btn { padding-block: 13px; }

    .status__row { width: 90%; }

    .status__icon { margin-bottom: 20px; }

    .status__title {
        font-size: 32px;
        line-height: 1.2;
    }

    .status__text { font-size: 20px; }

    .site-band__row {
        width: 100%;
        padding: 20px 60px 20px 20px;
    }

    .site-band__title {
        width: 100%;
        font-size: 20px;
        line-height: 26px;
    }

    .site-band__side { align-items: flex-start; }

    .site-band__side p {
        margin-bottom: 10px;
        font-size: 14px;
    }
}

/* The live pages without the page rule that joins the footer addresses into one paragraph keep their
   line breaks on phones (see legal.css). */
@media (max-width: 475px) {
    body:has(.thanks, .thanks-event, .status, .error-404) .site-footer__address--flow br { display: inline; }
}