/* Minification failed. Returning unminified contents.
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(128,28): run-time error CSS1039: Token not allowed after unary operator: '-ukhsa-teal'
(279,28): run-time error CSS1039: Token not allowed after unary operator: '-ukhsa-teal'
(303,28): run-time error CSS1039: Token not allowed after unary operator: '-ukhsa-teal'
(348,32): run-time error CSS1039: Token not allowed after unary operator: '-ukhsa-teal'
(383,25): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(388,29): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(394,26): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(395,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(399,36): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(412,22): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(442,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(443,19): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(443,36): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(453,20): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(453,35): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(470,20): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(498,17): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(503,32): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(504,34): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(508,24): run-time error CSS1039: Token not allowed after unary operator: '-color-link-hover'
(513,24): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(537,25): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(540,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(577,22): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(609,21): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(613,21): run-time error CSS1039: Token not allowed after unary operator: '-color-link-visited'
(617,21): run-time error CSS1039: Token not allowed after unary operator: '-color-link-hover'
(624,21): run-time error CSS1039: Token not allowed after unary operator: '-color-focus-text'
(625,32): run-time error CSS1039: Token not allowed after unary operator: '-color-focus'
(626,33): run-time error CSS1039: Token not allowed after unary operator: '-color-focus'
(626,59): run-time error CSS1039: Token not allowed after unary operator: '-color-focus-text'
(649,22): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(650,17): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-text'
(661,23): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(692,22): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(703,28): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(709,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(718,25): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(729,26): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(743,19): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(749,29): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(753,21): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-text'
(762,28): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(787,22): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(788,25): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(809,21): run-time error CSS1039: Token not allowed after unary operator: '-color-link'
(813,21): run-time error CSS1039: Token not allowed after unary operator: '-color-link-hover'
(819,21): run-time error CSS1039: Token not allowed after unary operator: '-color-focus-text'
(820,32): run-time error CSS1039: Token not allowed after unary operator: '-color-focus'
(821,33): run-time error CSS1039: Token not allowed after unary operator: '-color-focus'
(821,59): run-time error CSS1039: Token not allowed after unary operator: '-color-focus-text'
(845,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(846,25): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(915,28): run-time error CSS1039: Token not allowed after unary operator: '-ukhsa-teal'
 */
/* ============================================================
   UKHSA APPLICATION STYLES
   Based on GOV.UK Frontend / GDS Design System
   WCAG 2.2 AA compliant
   Mobile-first, responsive
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS & CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
    /* UKHSA brand */
    --ukhsa-teal: rgb(0, 124, 145);
    /* GDS colour palette */
    --color-text: #0b0c0c;
    --color-secondary-text: #505a5f;
    --color-link: #1d70b8;
    --color-link-hover: #003078;
    --color-link-visited: #4c2c92;
    --color-focus: #fd0;
    --color-focus-text: #0b0c0c;
    --color-border: #b1b4b6;
    /* GDS spacing scale */
    --space-1: 5px;
    --space-2: 10px;
    --space-3: 15px;
    --space-4: 20px;
    --space-5: 25px;
    --space-6: 30px;
}

/* ============================================================
   END: 1. DESIGN TOKENS & CSS CUSTOM PROPERTIES
   ============================================================ */


/* ============================================================
   2. GLOBAL RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ============================================================
   END: 2. GLOBAL RESET
   ============================================================ */


/* ============================================================
   3. TYPOGRAPHY SCALE
   GDS font scale — Arial, mobile-first
   16px (1rem) mobile → 19px (1.1875rem) tablet+
   ============================================================ */

/* Body / description text */
.app-font-body,
.app-cards__description,
.app-image-card__description,
.app-image-card__list {
    font-family: arial, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25;
}

@media (min-width: 40.0625em) {
    .app-font-body,
    .app-cards__description,
    .app-image-card__description,
    .app-image-card__list {
        font-size: 1.1875rem;
        line-height: 1.3157894737;
    }
}

/* Secondary / metadata text — 14px mobile → 16px tablet+ */
.app-font-secondary,
.app-image-card__context,
.app-image-card__metadata {
    font-family: arial, sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.1428571429;
}

@media (min-width: 40.0625em) {
    .app-font-secondary,
    .app-image-card__context,
    .app-image-card__metadata {
        font-size: 1rem;
        line-height: 1.25;
    }
}

/* Heading / title link text — bold, matches body scale */
.app-font-heading-s,
.app-image-card__title-link {
    font-family: arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
}

@media (min-width: 40.0625em) {
    .app-font-heading-s,
    .app-image-card__title-link {
        font-size: 1.1875rem;
        line-height: 1.3157894737;
    }
}

/* ============================================================
   END: 3. TYPOGRAPHY SCALE
   ============================================================ */


/* ============================================================
   4. HEADER
   UKHSA teal background overriding GOV.UK black
   ============================================================ */

.govuk-header {
    background-color: var(--ukhsa-teal) !important;
}

    /* Flex container — logo left, user block right, wraps on mobile */
    .govuk-header .govuk-header__container.govuk-width-container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        row-gap: 5px;
        min-height: 60px;
    }

    /* Full width on mobile so user block drops to next line */
    .govuk-header .govuk-header__logo {
        flex-shrink: 0;
        flex-grow: 0;
        width: 100%;
    }

@media (min-width: 48.0625em) {
    .govuk-header .govuk-header__logo {
        width: auto;
    }
}

/* UKHSA horizontal logo */
.ukhsalogo--horizontal {
    display: block;
    height: auto;
    width: 100%;
    max-width: 280px;
}

@media (min-width: 40.0625em) {
    .ukhsalogo--horizontal {
        max-width: 300px;
    }
}

@media (min-width: 48.0625em) {
    .ukhsalogo--horizontal {
        max-width: 300px;
    }
}

@media (min-width: 64.0625em) {
    .ukhsalogo--horizontal {
        max-width: 340px;
    }
}

/* Product Name */
.govuk-header .app-header__product-name {
    display: inline-table;
    margin-bottom: -.0625rem;
    padding-top: 6px;
    padding-left: 10px;
    font-size: 1.35rem;
    letter-spacing: -.015em;
    vertical-align: top;
    forced-color-adjust: none;
}

.govuk-header .app-header__container {
    padding-bottom: 5px;
}

/* User block — always pinned to the right */
.govuk-header .app-header__user {
    padding-top: 6px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.govuk-header .app-header__user-name,
.govuk-header .app-header__separator {
    color: #ffffff;
}

/* Sign-out link */
.govuk-header .app-header__signout {
    color: #ffffff;
    text-decoration: underline;
}

    .govuk-header .app-header__signout:visited,
    .govuk-header .app-header__signout:hover {
        color: #ffffff;
    }

    .govuk-header .app-header__signout:focus {
        color: #0b0c0c;
        background: #ffdd00;
        outline: 3px solid transparent;
    }

/* Sign-out as a button (AccountController POST action) */
.app-header__signout-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: inherit;
}

    .app-header__signout-button:hover {
        text-decoration: underline;
    }

    .app-header__signout-button:focus {
        outline: 3px solid #fd0;
        outline-offset: 0;
    }

#signOutForm {
    display: inline;
}

/* Push navigation items right on wider screens */
@media (min-width: 769px) {
    .govuk-header__navigation-list {
        display: flex;
        width: 100%;
    }

    .govuk-header__navigation-item--right {
        margin-left: auto;
    }

        .govuk-header__navigation-item--right + .govuk-header__navigation-item {
            margin-left: 0;
        }
}

/* ============================================================
   END: 4. HEADER
   ============================================================ */


/* ============================================================
   5. FOOTER
   ============================================================ */

.govuk-footer {
    border-top-color: var(--ukhsa-teal);
}

/* ============================================================
   END: 5. FOOTER
   ============================================================ */


/* ============================================================
   6. IDENTITY BAR
   Vertical teal bar + crest + service title
   ============================================================ */

.app-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Vertical teal accent line */
.app-identity__bar {
    display: inline-block;
    width: 2px;
    height: 2.5rem;
    background-color: var(--ukhsa-teal);
}

/* Royal crest — GDS minimum 26px digital guideline */
.app-identity__crest {
    display: block;
    height: auto;
    width: auto;
    min-width: 26px;
    max-width: 40px;
}

@media (min-width: 40.0625em) {
    .app-identity__crest {
        max-width: 48px;
    }
}

@media (min-width: 64.0625em) {
    .app-identity__crest {
        max-width: 56px;
    }
}

/* Main logo — A5 equivalent on mobile */
.app-main-logo {
    display: block;
    height: auto;
    width: 100%;
    max-width: 110px;
}

/* ============================================================
   END: 6. IDENTITY BAR
   ============================================================ */


/* ============================================================
   7. SECTION BREAK
   Overrides GOV.UK grey with UKHSA teal
   Usage: <hr class="govuk-section-break app-section-break">
   ============================================================ */

hr.govuk-section-break.app-section-break {
    border: 0;
    border-top: 3px solid var(--ukhsa-teal);
    opacity: 1;
}

/* ============================================================
   END: 7. SECTION BREAK
   ============================================================ */


/* ============================================================
   8. LINK SEPARATOR
   Inline pipe character between header links
   ============================================================ */

.link-separator {
    font-size: 1.2em;
    margin: 0 0.2em;
    display: inline-block;
    vertical-align: middle;
    color: #000;
    font-weight: bold;
}

/* ============================================================
   END: 8. LINK SEPARATOR
   ============================================================ */


/* ============================================================
   9. CARDS — LIST VARIANT (no image)
   Ruled-list pattern: border-top on each item as separator
   No bottom border — hr.app-section-break closes the section
   ============================================================ */

.app-cards__heading {
    margin-bottom: var(--space-4);
}

@media (min-width: 40.0625em) {
    .app-cards__heading {
        margin-bottom: var(--space-6);
    }
}

/* Optional underline on heading — adds top border to first item */
.app-cards__heading--underline {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

    .app-cards__heading--underline + .app-cards__list {
        border-top: 1px solid var(--color-border);
    }

        .app-cards__heading--underline + .app-cards__list .app-cards__list-item:first-child .app-cards__list-item-wrapper {
            padding-top: 19px;
        }

/* Card list grid */
.app-cards__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    column-gap: var(--space-6);
}

/* Single column: remove top border from first item */
.app-cards__list--one-column .app-cards__list-item:first-child {
    border-top: 0;
}

    .app-cards__list--one-column .app-cards__list-item:first-child .app-cards__list-item-wrapper {
        padding-top: 0;
    }

/* Two column at tablet+ */
@media (min-width: 40.0625em) {
    .app-cards__list--two-column-desktop {
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

/* Three column at desktop+ */
@media (min-width: 48.0625em) {
    .app-cards__list--three-column-desktop {
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Individual card item */
.app-cards__list-item {
    border-top: 1px solid var(--color-border);
    padding: var(--space-1) 0 var(--space-4) 0;
}

.app-cards__list-item-wrapper {
    padding: 19px 0 4px;
    position: relative;
}

/* Sub-heading — constrained width on single column */
.app-cards__sub-heading {
    margin: 0 var(--space-6) var(--space-2) 0;
}

@media (min-width: 48.0625em) {
    .app-cards__sub-heading {
        max-width: 66.6667%;
    }
}

/* Full width sub-heading in multi-column */
.app-cards__list--two-column-desktop .app-cards__sub-heading,
.app-cards__list--three-column-desktop .app-cards__sub-heading {
    max-width: 100%;
}

/* Description — constrained width on single column */
.app-cards__description {
    margin: 0 var(--space-6) 0 0;
}

@media (min-width: 48.0625em) {
    .app-cards__description {
        max-width: 66.6667%;
    }
}

/* Full width description in multi-column */
.app-cards__list--two-column-desktop .app-cards__description,
.app-cards__list--three-column-desktop .app-cards__description {
    margin: 0;
    max-width: 100%;
}

/* Card link — ::after expands hit area over entire card */
.app-cards__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Chevron arrow indicator */
.app-cards__link::before {
    content: "";
    display: block;
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-top: 3px solid var(--color-link);
    border-right: 3px solid var(--color-link);
}

.app-cards__link:hover::before {
    border-color: var(--color-link-hover);
}

.app-cards__link:focus::before,
.app-cards__link:focus-visible::before {
    border-color: var(--color-text);
}

/* Chevron position — fixed in multi-column (not vertically centred) */
.app-cards__list--two-column-desktop .app-cards__link::before,
.app-cards__list--three-column-desktop .app-cards__link::before {
    top: 27px;
    transform: rotate(45deg);
    margin: 0;
}

/* ============================================================
   END: 9. CARDS — LIST VARIANT (no image)
   ============================================================ */


/* ============================================================
   10. CARDS — IMAGE VARIANT
   960×640 (3:2) aspect ratio, full bleed, no border
   Expanded hit area via ::after on title link
   ============================================================ */

.app-image-card {
    position: relative;
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column-reverse;
    color: var(--color-text);
}

    .app-image-card::after {
        content: "";
        display: block;
        clear: both;
    }

@media (min-width: 40.0625em) {
    /* Wider hit area for touch targets */
    .app-image-card__title-link {
        padding: 0.3em 0;
    }
}

/* Stack layout on small screens */
@media (min-width: 20em) and (max-width: 40.0525em) {
    .app-image-card {
        display: block;
    }

        .app-image-card .app-image-card__text-wrapper {
            float: right;
            padding-left: 0;
        }
}

.app-image-card__header-and-context-wrapper {
    display: flex;
    flex-direction: column-reverse;
}

/* Image wrapper — 3:2 ratio, neutral background while loading */
.app-image-card__image-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0 0 var(--space-2) 0;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3 / 2;
    background-color: #f3f2f1;
}

/* Image — full bleed, no border */
.app-image-card__image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 0;
}

/* Title */
.app-image-card__title {
    margin: 0;
}

/* Title link — GDS underline style */
.app-image-card__title-link {
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .1578em;
}

    .app-image-card__title-link:link {
        color: var(--color-link);
    }

    .app-image-card__title-link:visited {
        color: var(--color-link-visited);
    }

    .app-image-card__title-link:hover {
        color: var(--color-link-hover);
        text-decoration-thickness: max(3px, .1875rem, .12em);
    }

    .app-image-card__title-link:focus,
    .app-image-card__title-link:focus-visible {
        outline: 3px solid transparent;
        color: var(--color-focus-text);
        background-color: var(--color-focus);
        box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-focus-text);
        text-decoration: none;
    }

    /* Expanded hit area — covers full card height */
    .app-image-card__title-link::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        background: transparent;
    }

/* Context, metadata and description sit above the link overlay */
.app-image-card__context,
.app-image-card__metadata,
.app-image-card__description {
    position: relative;
    z-index: 2;
}

.app-image-card__context,
.app-image-card__metadata {
    margin: 0 0 var(--space-1) 0;
    color: var(--color-secondary-text);
}

@media (min-width: 40.0625em) {
    .app-image-card__context,
    .app-image-card__metadata {
        margin-bottom: 0;
    }
}

.app-image-card__description {
    padding-top: var(--space-1);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* -- Two-thirds variant ----------------------------------------
   Thumbnail left (1/3), text right (2/3)
   --------------------------------------------------------------- */
.app-image-card.app-image-card--two-thirds {
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    align-items: flex-end;
}

.app-image-card__image-wrapper.app-image-card__image-wrapper--one-third {
    flex: 0 0 95px;
    height: 63px;
    padding-right: 0;
    aspect-ratio: auto;
}

.app-image-card__text-wrapper.app-image-card__text-wrapper--two-thirds {
    flex: 1 1 70%;
}

/* -- Large variant ---------------------------------------------
   Image left 50%, text right — stacked on mobile
   --------------------------------------------------------------- */
.app-image-card--large.app-image-card {
    display: flex;
    margin: 0 0 var(--space-6) 0;
}

@media (min-width: 40.0625em) {
    .app-image-card--large.app-image-card {
        display: block;
    }

    .app-image-card--large .app-image-card__image-wrapper {
        float: left;
        width: 50%;
        margin-right: var(--space-2);
        margin-bottom: 0;
    }

    .app-image-card--large .app-image-card__text-wrapper {
        overflow: hidden;
        padding: 0 var(--space-3);
        margin-bottom: 0;
    }
}

.app-image-card--large .app-image-card__image-wrapper {
    float: none;
    width: auto;
    max-width: 100%;
    margin-bottom: var(--space-2);
    aspect-ratio: 3 / 2;
    background-color: #f3f2f1;
}

.app-image-card--large .app-image-card__text-wrapper {
    overflow: hidden;
    padding: 0;
}

.app-image-card--large .app-image-card__title {
    padding-bottom: var(--space-2);
}

.app-image-card--large .app-image-card__title-link::after {
    left: 0;
    right: 0;
}

/* -- Image card sub-list ---------------------------------------
   Related links inside an image card
   --------------------------------------------------------------- */
.app-image-card__list {
    position: relative;
    z-index: 2;
    padding: var(--space-1) 0 0 0;
    margin: 0;
    list-style: none;
}

    .app-image-card__list .app-image-card__list-item {
        margin-bottom: var(--space-2);
    }

    .app-image-card__list .app-image-card__list-item--text {
        color: var(--color-secondary-text);
    }

    .app-image-card__list .app-image-card__list-item-link {
        line-height: 1.35em;
    }

    /* Indented sub-list with dash bullet */
    .app-image-card__list.app-image-card__list--indented {
        padding-left: var(--space-3);
    }

        .app-image-card__list.app-image-card__list--indented .app-image-card__list-item {
            position: relative;
        }

            .app-image-card__list.app-image-card__list--indented .app-image-card__list-item::before {
                content: "-";
                position: absolute;
                left: -15px;
            }

/* ============================================================
   END: 10. CARDS — IMAGE VARIANT
   ============================================================ */


/* ============================================================
   11. BACK TO TOP
   Hidden by default — JS adds .is-visible when scrolled
   ============================================================ */

.app-back-to-top {
    display: none;
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

    .app-back-to-top.is-visible {
        display: block;
    }

.app-back-to-top__link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-family: arial, sans-serif;
    font-size: 1rem;
    line-height: 1.25;
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .1578em;
}

    .app-back-to-top__link:link,
    .app-back-to-top__link:visited {
        color: var(--color-link);
    }

    .app-back-to-top__link:hover {
        color: var(--color-link-hover);
        text-decoration-thickness: max(3px, .1875rem, .12em);
    }

    .app-back-to-top__link:focus {
        outline: 3px solid transparent;
        color: var(--color-focus-text);
        background-color: var(--color-focus);
        box-shadow: 0 -2px var(--color-focus), 0 4px var(--color-focus-text);
        text-decoration: none;
    }

.app-back-to-top__icon {
    display: inline-block;
    width: 0.8em;
    height: 1em;
    margin-top: -5px;
    margin-right: 10px;
    vertical-align: middle;
}

/* ============================================================
   END: 11. BACK TO TOP
   ============================================================ */


/* ============================================================
   12. FILTER PANEL
   ============================================================ */

#filter-panel {
    background-color: #f3f2f1;
    padding: var(--space-4);
    margin-bottom: var(--space-1);
}

/* ============================================================
   END: 12. FILTER PANEL
   ============================================================ */


/* ============================================================
   13. SCROLLABLE TABLE CONTAINER
   Max-height constrained, touch-friendly scroll
   ============================================================ */

.scroll-table-container {
    position: relative;
    display: block;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    padding-right: 0.25rem;
}

    .scroll-table-container table {
        margin-bottom: 0;
        width: 100%;
    }

@media (max-width: 1200px) {
    .scroll-table-container {
        max-height: 320px;
    }
}

@media (max-width: 768px) {
    .scroll-table-container {
        max-height: 260px;
    }
}

/* ============================================================
   END: 13. SCROLLABLE TABLE CONTAINER
   ============================================================ */


/* ============================================================
   14. LOADER OVERLAY & SPINNER
   Fixed overlay with UKHSA teal spinner
   JS toggles display on form submission
   ============================================================ */

.loader-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.custom-spinner-border {
    width: 80px;
    height: 80px;
    border: 12px solid #dee0e2;
    border-top-color: var(--ukhsa-teal);
    border-radius: 50%;
    animation: ukhsa-spin 2s linear infinite;
}

@keyframes ukhsa-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 576px) {
    .custom-spinner-border {
        width: 2rem;
        height: 2rem;
        border-width: 6px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .custom-spinner-border {
        width: 2.5rem;
        height: 2.5rem;
        border-width: 8px;
    }
}

/* ============================================================
   END: 14. LOADER OVERLAY & SPINNER
   ============================================================ */

.govuk-\!-text-align-right {
    text-align: right;
}

/* ============================================================
   15. DOCUMENT LIST
   Publications list pattern for home page summaries
   ============================================================ */

.app-c-document-list {
    margin: 0;
    padding: 0;
    color: #0b0c0c;
    font-family: arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-size: 1.1875rem;
    line-height: 1.3157894737
}

@media print {
    .app-c-document-list {
        color: #000
    }
}

@media print {
    .app-c-document-list {
        font-family: sans-serif
    }
}

@media print {
    .app-c-document-list {
        font-size: 14pt;
        line-height: 1.15
    }
}

.app-c-document-list__item {
    margin-top: 25px;
    padding-top: 10px;
    border-top: 1px solid #b1b4b6;
    list-style: none
}

    .app-c-document-list__item:first-child {
        margin-top: 0
    }

.app-c-document-list__item-title {
    display: inline-block;
    font-family: arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 700;
    font-size: 1.1875rem;
    line-height: 1.3157894737
}

@media print {
    .app-c-document-list__item-title {
        font-family: sans-serif
    }
}

@media print {
    .app-c-document-list__item-title {
        font-size: 14pt;
        line-height: 1.15
    }
}

.app-c-document-list--no-top-border .app-c-document-list__item {
    border-top: none
}

.app-c-document-list--no-top-border-first-child .app-c-document-list__item:first-child {
    border-top: none
}

.app-c-document-list--equal-item-spacing .app-c-document-list__item {
    margin-top: 15px;
    padding-top: 15px
}

.app-c-document-list__item-title--context {
    margin-right: 10px
}

.direction-rtl .app-c-document-list__item-title--context {
    margin-right: 0;
    margin-left: 10px
}

.app-c-document-list__item-context {
    color: #505a5f
}

.app-c-document-list__item-description {
    margin: 5px 0;
    color: #0b0c0c
}

@media print {
    .app-c-document-list__item-description {
        color: #000
    }
}

.app-c-document-list__subtext {
    margin: 0
}

.app-c-document-list__item-description, .app-c-document-list__subtext {
    font-family: arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5
}

@media print {
    .app-c-document-list__item-description, .app-c-document-list__subtext {
        font-family: sans-serif
    }
}

@media print {
    .app-c-document-list__item-description, .app-c-document-list__subtext {
        font-size: 14pt;
        line-height: 1.5
    }
}

.app-c-document-list__item-description--full-size {
    font-family: arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-size: 1.1875rem;
    line-height: 1.3157894737
}

@media print {
    .app-c-document-list__item-description--full-size {
        font-family: sans-serif
    }
}

@media print {
    .app-c-document-list__item-description--full-size {
        font-size: 14pt;
        line-height: 1.15
    }
}

.app-c-document-list__item-metadata {
    padding: 0;
}

.app-c-document-list__attribute {
    display: inline-block;
    list-style: none;
    padding-right: 20px;
    color: #0b0c0c;
    font-family: arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25
}

@media print {
    .app-c-document-list__attribute {
        color: #000
    }
}

@media print {
    .app-c-document-list__attribute {
        font-family: sans-serif
    }
}

@media print {
    .app-c-document-list__attribute {
        font-size: 14pt;
        line-height: 1.2
    }
}

.app-c-document-list__attribute {
    color: #505a5f
}

.direction-rtl .app-c-document-list__attribute {
    padding-right: 0;
    padding-left: 20px
}

.app-c-document-list__item--highlight {
    border: 1px solid #b1b4b6;
    padding: 30px;
    margin-bottom: 30px
}

    .app-c-document-list__item--highlight .app-c-document-list__item-title {
        font-family: arial,sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-weight: 700;
        font-size: 1.3125rem;
        line-height: 1.1904761905
    }

@media print {
    .app-c-document-list__item--highlight .app-c-document-list__item-title {
        font-family: sans-serif
    }
}

@media(min-width: 40.0625em) {
    .app-c-document-list__item--highlight .app-c-document-list__item-title {
        font-size: 1.5rem;
        line-height: 1.25
    }
}

@media print {
    .app-c-document-list__item--highlight .app-c-document-list__item-title {
        font-size: 18pt;
        line-height: 1.15
    }
}

.app-c-document-list__highlight-text {
    margin: 0 0 15px 0;
    font-family: arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25
}

@media print {
    .app-c-document-list__highlight-text {
        font-family: sans-serif
    }
}

@media print {
    .app-c-document-list__highlight-text {
        font-size: 14pt;
        line-height: 1.2
    }
}

.app-c-document-list__children {
    margin-bottom: 0;
    padding-left: 0;
    list-style-type: none
}

@media(min-width: 48.0625em) {
    .app-c-document-list__children {
        margin-left: 20px;
        margin-top: 20px
    }

    @supports(display: grid) {
        .app-c-document-list__children {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 15px
        }
    }
}

.app-c-document-list-child {
    position: relative;
    padding-left: 25px;
    padding-top: 10px;
    font-family: arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25
}

@media print {
    .app-c-document-list-child {
        font-family: sans-serif
    }
}

@media print {
    .app-c-document-list-child {
        font-size: 14pt;
        line-height: 1.2
    }
}

.app-c-document-list-child::before {
    content: "";
    position: absolute;
    left: 0;
    width: 15px;
    overflow: hidden;
    border-top: solid 1px #0b0c0c;
    transform: translate(0, 0.5em)
}

@media(min-width: 48.0625em) {
    .app-c-document-list-child {
        padding: 0;
        padding-bottom: 10px
    }

        .app-c-document-list-child::before {
            display: none
        }
}

@media(min-width: 40.0625em) {
    .app-c-document-list-child__heading {
        font-weight: 700
    }
}

.app-c-document-list-child__description {
    margin-top: 5px;
    margin-bottom: 5px;
    color: #0b0c0c
}

@media print {
    .app-c-document-list-child__description {
        color: #000
    }
}

@media(max-width: 40.0525em) {
    .app-c-document-list-child__description {
        display: none
    }
}

@media print {
    .app-c-document-list__item {
        break-inside: avoid
    }

        .app-c-document-list__item * {
            color: #000
        }

    .app-c-document-list__item-context {
        display: block
    }
}

/* ============================================================
   END: 15. DOCUMENT LIST
   ============================================================ */