/* Shared by Runtime and Deploy. Load after the pinned NHS.UK Frontend CSS.
   Component geometry and interaction states belong here, never in a Deploy copy. */
@font-face {
    font-display: swap;
    font-family: "Changa";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/changa/changa-latin-700.woff2") format("woff2");
}

:root {
    --runtime-default-accent: #00a9b7;
    --runtime-home-hero-dark: #003d78;
    --runtime-accent: var(--runtime-default-accent);
    --runtime-accent-dark: #007f8a;
    --runtime-accent-soft: #d1f2f4;
    --runtime-brand: #005eb8;
    --runtime-canvas: #eef2f3;
    --runtime-surface: #fff;
    --runtime-surface-muted: #d8dfe3;
    --runtime-ink: #172b3a;
    --runtime-heading: #003d78;
    --runtime-slate: #425563;
    --runtime-muted: var(--runtime-slate);
    --runtime-border: #c8d1d5;
    --runtime-border-strong: #768692;
    --runtime-focus: #ffeb3b;
    --runtime-danger: #d5281b;
    --runtime-success: #007f3b;
    --runtime-shadow: 0 2px 0 rgb(23 43 58 / 18%);
    --runtime-control-height: 2.5rem;
    --runtime-button-shadow-depth: .25rem;
    --runtime-surface-radius: 0;
    --runtime-small-button-height:
        calc(var(--runtime-control-height) - var(--runtime-button-shadow-depth));
    --runtime-radius: 2px;
    --runtime-space-1: .25rem;
    --runtime-space-2: .5rem;
    --runtime-space-3: .75rem;
    --runtime-space-4: 1rem;
    --runtime-space-5: 1.5rem;
    --runtime-space-6: 2rem;
    --runtime-space-7: 3rem;
    --runtime-space-8: 4rem;
    --runtime-content-standard: 82rem;
    --runtime-content-wide: 110rem;
    --runtime-workspace-viewport-width: 100dvw;
    --runtime-workspace-viewport-height: 100dvh;
    --runtime-workspace-viewport-wide-width: 75dvw;
    --runtime-workspace-viewport-compact-width: 50dvw;
    --runtime-workspace-viewport-compact-height: 50dvh;
}

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

body {
    background: var(--runtime-canvas);
    color: var(--runtime-ink);
    font-family: "Frutiger W01", Arial, sans-serif;
    margin: 0;
}

.runtime-shell {
    --runtime-shell-accent: var(--runtime-default-accent);
    --runtime-accent: var(--runtime-shell-accent);
    --runtime-accent-dark: color-mix(in srgb, var(--runtime-shell-accent) 76%, #000);
    --runtime-accent-soft: color-mix(in srgb, var(--runtime-shell-accent) 18%, #fff);
}

/* The NHS action shadow is painted below the button's layout box. Keep the
   shared small-button box one shadow-depth shorter so its visible height
   matches standard Runtime inputs. */
.nhsuk-button--small {
    align-items: center;
    display: inline-flex;
    height: var(--runtime-small-button-height);
    justify-content: center;
    min-height: var(--runtime-small-button-height);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
    box-shadow: 0 0 0 3px #000;
    outline: 3px solid var(--runtime-focus);
    outline-offset: 0;
}

/* NHS.UK Frontend predates consistent :focus-visible support in its component
   CSS. Suppress its painted link focus state for pointer activation while
   retaining DOM focus and the full keyboard treatment above. */
@supports selector(:focus-visible) {
    a:focus:not(:focus-visible) {
        background-color: transparent;
        box-shadow: none;
        outline: none;
    }

    button:focus:not(:focus-visible),
    [tabindex="0"]:focus:not(:focus-visible) {
        outline: none;
    }
}

/* Keep the NHS secondary-button interaction model while applying the active
   record type's configured accent to its normal, hover, and pressed states. */
@media (forced-colors: none) {
    .runtime-shell .nhsuk-button--secondary,
    .runtime-shell .nhsuk-button--secondary:visited {
        color: var(--runtime-accent-dark);
    }

    .runtime-shell .nhsuk-button--secondary:not(:focus-visible):not(:active) {
        box-shadow: 0 4px 0 var(--runtime-accent-dark);
    }

    .runtime-shell .nhsuk-button--secondary:not(:focus-visible):not(:active)::after {
        box-shadow: 0 4px 0 var(--runtime-accent-dark);
    }

    .runtime-shell .nhsuk-button--secondary:not(:focus-visible):not(:active)::before {
        border-color: var(--runtime-accent-dark);
    }

    /* NHS repositions the secondary button's outline pseudo-element while it
       is pressed. Do not recolour that transient outline: otherwise its top
       edge remains at the original position and looks like a line left behind. */
    .runtime-shell .nhsuk-button--secondary:active::before {
        border-color: transparent;
    }

    .runtime-shell .nhsuk-button--secondary:not(:disabled):not([aria-disabled="true"]):not(:focus-visible):hover {
        background-color: var(--runtime-accent-soft);
        color: var(--runtime-accent-dark);
    }

    .runtime-shell .nhsuk-button--secondary:not(:disabled):not([aria-disabled="true"]):active {
        background-color: color-mix(in srgb, var(--runtime-accent) 28%, #fff);
        box-shadow: inset 0 0 0 2px var(--runtime-accent-dark);
        color: var(--runtime-accent-dark);
    }

    /* Restore each NHS button variant after a pointer click. Keyboard focus
       continues to use the upstream yellow focus state through :focus-visible. */
    @supports selector(:focus-visible) {
        .runtime-shell .nhsuk-button:focus:not(:focus-visible):not(:active) {
            background-color: var(--nhsuk-button-colour);
            box-shadow: 0 4px 0 var(--nhsuk-button-shadow-colour);
            color: var(--nhsuk-button-text-colour);
            outline: none;
        }

        .runtime-shell .nhsuk-button:focus:not(:focus-visible):not(:active):hover {
            background-color: var(--nhsuk-button-hover-colour);
        }

        .runtime-shell .nhsuk-button--secondary:focus:not(:focus-visible):not(:active) {
            background-color: transparent;
            box-shadow: 0 4px 0 var(--runtime-accent-dark);
            color: var(--runtime-accent-dark);
        }

        .runtime-shell .nhsuk-button--secondary:focus:not(:focus-visible):not(:active):hover {
            background-color: var(--runtime-accent-soft);
        }

        .runtime-shell .nhsuk-button--secondary:focus:not(:focus-visible):not(:active)::after {
            box-shadow: 0 4px 0 var(--runtime-accent-dark);
        }

        .runtime-shell .nhsuk-button--secondary:focus:not(:focus-visible):not(:active)::before {
            border-color: var(--runtime-accent-dark);
        }

        .runtime-shell .nhsuk-button--secondary-solid:focus:not(:focus-visible):not(:active),
        .runtime-shell .nhsuk-button--reverse:focus:not(:focus-visible):not(:active) {
            background-color: #fff;
        }

        .runtime-shell .nhsuk-button--secondary-solid:focus:not(:focus-visible):not(:active) {
            box-shadow: 0 4px 0 var(--nhsuk-secondary-button-shadow-colour);
            color: var(--nhsuk-secondary-button-text-colour);
        }

        .runtime-shell .nhsuk-button--secondary-solid:focus:not(:focus-visible):not(:active):hover {
            background-color: var(--nhsuk-secondary-button-hover-colour);
        }

        .runtime-shell .nhsuk-button--reverse:focus:not(:focus-visible):not(:active) {
            box-shadow: 0 4px 0 var(--nhsuk-reverse-button-shadow-colour);
            color: var(--nhsuk-reverse-button-text-colour);
        }

        .runtime-shell .nhsuk-button--reverse:focus:not(:focus-visible):not(:active):hover {
            background-color: var(--nhsuk-reverse-button-hover-colour);
        }

        .runtime-shell .nhsuk-button--warning:focus:not(:focus-visible):not(:active) {
            background-color: var(--nhsuk-warning-button-colour);
            box-shadow: 0 4px 0 var(--nhsuk-warning-button-shadow-colour);
            color: #fff;
        }

        .runtime-shell .nhsuk-button--warning:focus:not(:focus-visible):not(:active):hover {
            background-color: var(--nhsuk-warning-button-hover-colour);
        }

        .runtime-shell .nhsuk-button--brand:focus:not(:focus-visible):not(:active),
        .runtime-shell .nhsuk-button--login:focus:not(:focus-visible):not(:active) {
            background-color: var(--nhsuk-login-button-colour);
            box-shadow: 0 4px 0 var(--nhsuk-login-button-shadow-colour);
            color: #fff;
        }

        .runtime-shell .nhsuk-button--brand:focus:not(:focus-visible):not(:active):hover,
        .runtime-shell .nhsuk-button--login:focus:not(:focus-visible):not(:active):hover {
            background-color: var(--nhsuk-login-button-hover-colour);
        }
    }
}