/*! Concordia Web Style Guide v2.0.0 | https://github.com/ConcordiaDev/web-style-guide */

/*
 * Concordia Design Tokens
 */

:root {
    /*
    * Typography
    */

    /* Body */
    --cds-font-size-050: 0.875rem;  /* body-sm, 14px */
    --cds-font-size-075: 1rem;      /* body-md, 16px */
    --cds-font-size-100: 1.125rem;  /* body-lg, 18px min size for gill-sans-nova */
    --cds-font-size-125: 1.25rem;   /* body-xl, 20px, max size for Arial */

    /* Lead */
    --cds-font-size-150: 1.375rem;  /* body-2xl, 22px, min size for gill-sans-nova-condensed */
    --cds-font-size-175: 1.5rem;    /* lead, 24px */
    --cds-font-size-200: 1.75rem;   /* lead-lg, 28px */

    /* Headings */
    --cds-font-size-250: 2rem;      /* heading-2xs, 32px */
    --cds-font-size-300: 2.25rem;   /* heading-xs, 36px */
    --cds-font-size-350: 2.5rem;    /* heading-sm, 40px */
    --cds-font-size-400: 2.75rem;   /* heading-md, 44px */
    --cds-font-size-450: 3rem;      /* heading-lg, 48px */
    --cds-font-size-500: 3.25rem;   /* heading-xl, 52px, max mobile heading */
    --cds-font-size-550: 3.5rem;    /* heading-2xl, 56px */
    --cds-font-size-600: 3.75rem;   /* heading-3xl, 60px */
    --cds-font-size-650: 4.25rem;   /* heading-4xl, 68px */

    /* Line height */
    --cds-line-height-label: 1.4;         /* Arial, Body */
    --cds-line-height-body: 1.6;          /* Arial, Body */
    --cds-line-height-brand-body: 1.4;    /* Brand, Body */
    --cds-line-height-brand-lead: 1.35;   /* Brand, Lead */
    --cds-line-height-brand-heading: 1.1; /* Brand, Heading */
    --cds-line-height-brand-display: 1;   /* Brand, Display */

    /* Font family */
    --cds-font-family-body: 'Inter', 'Arial', sans-serif;
    --cds-font-family-body-bold: 'Inter', 'Arial', sans-serif;
    /* If on Concordia domain, use Gill Sans Nova: */
    --cds-font-family-brand: 'gill-sans-nova', sans-serif;
    --cds-font-family-brand-condensed: 'gill-sans-nova-condensed', sans-serif;
    /* If off Concordia domain, use Inter:
    --cds-font-family-brand: 'Inter', sans-serif;
    --cds-font-family-brand-condensed: 'Inter', sans-serif;
    */

    /* Font weight */
    --cds-font-weight-light: 100;
    --cds-font-weight-book: 400;
    --cds-font-weight-medium: 500;
    --cds-font-weight-semi-bold: 600;
    --cds-font-weight-bold: 700;
    --cds-font-weight-extra-bold: 800;

    /*
    * Colours
    */

    /* Brand palette */
    --cds-color-burgundy: #912338;
    --cds-color-burgundy-hover: #7B1E30;
    --cds-color-burgundy-pressed: #651828;
    --cds-color-burgundy-dark: #541421;

    --cds-color-blue: #0072A8;
    --cds-color-blue-hover: #00608E;
    --cds-color-blue-pressed: #004D74;
    --cds-color-blue-dark: #003756;

    --cds-color-cyan: #00ADEF;
    --cds-color-cyan-hover: #0095C9;
    --cds-color-cyan-pressed: #007CA3;
    --cds-color-cyan-dark: #005A73;

    --cds-color-dark-blue: #004085;
    --cds-color-dark-blue-hover: #00366F;
    --cds-color-dark-blue-pressed: #002C59;
    --cds-color-dark-blue-dark: #001D3D;

    --cds-color-green: #508212;
    --cds-color-green-hover: #446F0F;
    --cds-color-green-pressed: #395C0D;
    --cds-color-green-dark: #2C4A0A;

    --cds-color-lime-green: #8CC63E;
    --cds-color-lime-green-hover: #79A937;
    --cds-color-lime-green-pressed: #668C2F;
    --cds-color-lime-green-dark: #4F6A22;

    --cds-color-gold: #C9A859;
    --cds-color-gold-hover: #B1904B;
    --cds-color-gold-pressed: #9A7A3F;
    --cds-color-gold-dark: #836634;

    --cds-color-magenta: #DB0272;
    --cds-color-magenta-hover: #BF0162;
    --cds-color-magenta-pressed: #A30152;
    --cds-color-magenta-dark: #7C003C;

    --cds-color-orange: #DA3A16;
    --cds-color-orange-hover: #C13012;
    --cds-color-orange-pressed: #A9270F;
    --cds-color-orange-dark: #8A210B;

    --cds-color-turquoise: #057D78;
    --cds-color-turquoise-hover: #046A67;
    --cds-color-turquoise-pressed: #035755;
    --cds-color-turquoise-dark: #024443;

    --cds-color-mauve: #573996;
    --cds-color-mauve-hover: #704fb6;

    --cds-color-grey-medium: #c8c8c8;
    --cds-color-grey-medium-hover: #d8d8d8;
    --cds-color-grey-dark: #6e6e6e;
    --cds-color-grey-dark-hover: #9a9a9a;
    --cds-color-grey-darker: #4b4b4b;
    --cds-color-grey-darker-hover: #646464;
    --cds-color-grey-mid: #555555;

    --cds-color-burgundy-tint: #E9D3D7;

    --cds-color-yellow: #E5A712;
    --cds-color-yellow-hover: #C98F0F;
    --cds-color-yellow-pressed: #AE780C;
    --cds-color-yellow-dark: #8C5F08;

    /* Black opacity scale */
    --cds-color-black: rgb(0, 0, 0);           /* 100% opacity */
    --cds-color-black-90: rgba(0, 0, 0, 0.9);  /* 90% opacity */
    --cds-color-black-80: rgba(0, 0, 0, 0.8);  /* 80% opacity */
    --cds-color-black-70: rgba(0, 0, 0, 0.7);  /* 70% opacity */
    --cds-color-black-60: rgba(0, 0, 0, 0.6);  /* 60% opacity */
    --cds-color-black-50: rgba(0, 0, 0, 0.5);  /* 50% opacity */
    --cds-color-black-40: rgba(0, 0, 0, 0.4);  /* 40% opacity */
    --cds-color-black-30: rgba(0, 0, 0, 0.3);  /* 30% opacity */
    --cds-color-black-20: rgba(0, 0, 0, 0.2);  /* 20% opacity */
    --cds-color-black-10: rgba(0, 0, 0, 0.1);  /* 10% opacity */
    --cds-color-black-05: rgba(0, 0, 0, 0.05); /* 5% opacity */

    /* White opacity scale */
    --cds-color-white: rgb(255, 255, 255);           /* 100% opacity */
    --cds-color-white-90: rgba(255, 255, 255, 0.9);  /* 90% opacity */
    --cds-color-white-80: rgba(255, 255, 255, 0.8);  /* 80% opacity */
    --cds-color-white-70: rgba(255, 255, 255, 0.7);  /* 70% opacity */
    --cds-color-white-60: rgba(255, 255, 255, 0.6);  /* 60% opacity */
    --cds-color-white-50: rgba(255, 255, 255, 0.5);  /* 50% opacity */
    --cds-color-white-40: rgba(255, 255, 255, 0.4);  /* 40% opacity */
    --cds-color-white-30: rgba(255, 255, 255, 0.3);  /* 30% opacity */
    --cds-color-white-20: rgba(255, 255, 255, 0.2);  /* 20% opacity */
    --cds-color-white-10: rgba(255, 255, 255, 0.1);  /* 10% opacity */
    --cds-color-white-05: rgba(255, 255, 255, 0.05); /* 5% opacity */

    /* Text colours */
    --cds-color-text-primary: var(--cds-color-black);
    --cds-color-text-subtle: var(--cds-color-black-70);
    --cds-color-text-subtler: var(--cds-color-black-50);
    --cds-color-text-inverse: var(--cds-color-white);
    --cds-color-text-inverse-subtle: var(--cds-color-white-70);
    --cds-color-text-inverse-subtler: var(--cds-color-white-50);
    --cds-color-text-brand: var(--cds-color-burgundy);
    --cds-color-text-link: var(--cds-color-blue);
    --cds-color-text-link-hover: var(--cds-color-blue-hover);

    /* Background colours */
    --cds-color-bg-primary: var(--cds-color-white);
    --cds-color-bg-secondary: var(--cds-color-black-05);
    --cds-color-bg-tertiary: var(--cds-color-black-10);
    --cds-color-bg-brand: var(--cds-color-burgundy);
    --cds-color-bg-inverse: var(--cds-color-black);

    /* Border colours */
    --cds-border-color-primary: var(--cds-color-black-20);
    --cds-border-color-secondary: var(--cds-color-black-40);
    --cds-border-color-inverse: var(--cds-color-white);
    --cds-border-color-inverse-subtle: var(--cds-color-white-10);
    --cds-border-color-brand: var(--cds-color-burgundy);
    --cds-border-color-focus: var(--cds-color-blue);
    --cds-border-color-subtle: var(--cds-color-black-10);

    /* Overlay gradients */
    --cds-color-overlay-gradient-dark: linear-gradient(to top, var(--cds-color-black-80), var(--cds-color-black-05));
    --cds-color-overlay-gradient-light: linear-gradient(to top, var(--cds-color-white-80), var(--cds-color-white-05));

    /* Status colours */
    --cds-color-success: var(--cds-color-lime-green);
    --cds-color-warning: var(--cds-color-yellow);
    --cds-color-error: #cd090a;
    --cds-color-info: var(--cds-color-blue);

    /* Focus ring */
    --cds-color-focus: #0078d7;
}

/*
 * ConcordiaCSS base styles
 */

/* Body setting defaults for the entire page */
body {
    margin: 0;
    /* Min-width prevents layout breaking on extremely small screens */
    min-width: 350px;
    font-family: var(--cds-font-family-body);
    font-size: var(--cds-font-size-100);
    line-height: var(--cds-line-height-body);
    color: var(--cds-color-text-primary);
    background-color: var(--cds-color-bg-primary);
    -webkit-font-smoothing: antialiased;
}

.container {
    margin: 0 auto; /* Centers the container */
    max-width: 940px; /* Set max-width for readability */
}

.logo-responsive img {
    /* Ensure image scales down if container is smaller than image */
    max-width: 100%;
    /* Default width for mobile (<576px) */
    width: 172px;
    height: auto;
}

@media (min-width: 576px) {
    .logo-responsive img {
        width: 252px;
    }
}

@media (min-width: 768px) {
    .logo-responsive img {
        width: 366px;
    }
}

/*
 * Typography
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: pretty;
    text-transform: none;
    letter-spacing: normal;
}

h1,
.h1 {
    margin: 2rem 0 2rem 0;
    font-weight: var(--cds-font-weight-extra-bold);
    font-size: var(--cds-font-size-650);
    line-height: var(--cds-line-height-brand-heading);
    font-family: var(--cds-font-family-brand-condensed);
    color: var(--cds-color-burgundy);
}

@media (max-width: 768px) {
    h1,
    .h1 {
        font-size: var(--cds-font-size-450);
    }
}

h2,
.h2 {
    margin: 0 0 1.5rem 0;
    font-weight: var(--cds-font-weight-extra-bold);
    font-size: var(--cds-font-size-450);
    line-height: var(--cds-line-height-brand-heading);
    font-family: var(--cds-font-family-brand-condensed);
    color: var(--cds-color-black);
}

@media (max-width: 768px) {
    h2,
    .h2 {
        font-size: var(--cds-font-size-350);
    }
}

h3,
.h3 {
    margin: 0 0 1rem 0;
    font-weight: var(--cds-font-weight-bold);
    font-size: var(--cds-font-size-200);
    line-height: var(--cds-line-height-brand-lead);
    font-family: var(--cds-font-family-brand);
    color: var(--cds-color-black);
}

@media (max-width: 768px) {
    h3,
    .h3 {
        font-size: var(--cds-font-size-175);
    }
}

h4,
.h4 {
    margin: 0 0 1rem 0;
    font-weight: var(--cds-font-weight-semi-bold);
    font-size: var(--cds-font-size-175);
    line-height: var(--cds-line-height-brand-lead);
    font-family: var(--cds-font-family-brand);
    color: var(--cds-color-black);
}

@media (max-width: 768px) {
    h4,
    .h4 {
        font-size: var(--cds-font-size-150);
    }
}

h5,
.h5 {
    margin: 0 0 0.5rem 0;
    font-weight: var(--cds-font-weight-bold);
    font-size: var(--cds-font-size-100);
    line-height: var(--cds-font-line-height-body);
    font-family: var(--cds-font-family-body);
    color: var(--cds-color-black);
}

@media (max-width: 768px) {
    h5,
    .h5 {
        font-size: var(--cds-font-size-100);
    }
}

h6,
.h6 {
    margin: 0 0 0.5rem 0;
    font-weight: var(--cds-font-weight-bold);
    font-size: var(--cds-font-size-075);
    line-height: var(--cds-font-line-height-body);
    font-family: var(--cds-font-family-body);
    color: var(--cds-color-black);
}

@media (max-width: 768px) {
    h6,
    .h6 {
        font-size: var(--cds-font-size-050);
    }
}

p {
    margin: 0 0 1.25rem;
}

ul {
    list-style: square;
    margin: 0 0 1.25rem;
}

ul li,
ol li {
    font-size: var(--cds-font-size-075);
    line-height: var(--cds-line-height-body);
    font-family: var(--cds-font-family-body);
}

li::marker {
    font-size: 1.25em;
}

/*
 * Links
 */

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--cds-color-burgundy);
    color: var(--cds-color-white);
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 10px;
    left: 10px;
}

a {
    text-decoration: underline;
    color: var(--cds-color-blue);
}

a:hover {
    text-decoration: underline;
}


/*
 * Focus styles
 * --------------------------------------------------------------------------
 * Custom focus styles for keyboard accessibility.
 * The default focus style uses a blue outline with offset for visibility.
 * Use .focus-outline-offset-0 to remove the offset (e.g., on inputs).
 * Use .focus-none to completely remove focus styles (use sparingly!).
 */

/* Default focus style for interactive elements */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    z-index: 5;
    box-shadow: none;
    transition: none;
    outline: 0;
    outline: 2px solid var(--cds-color-focus); /* Windows highlight colour fallback */
    outline: 2px auto -webkit-focus-ring-color; /* WebKit browsers */
    outline-offset: 4px;
}

/* Remove outline offset for inputs and certain elements */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.focus-outline-offset-0:focus-visible {
    outline-offset: 0;
}

/*
 * Buttons
 */
.btn {
    display: inline-block;
    border: 0;
    border-radius: 2px;
    margin-bottom: 0.75rem;
    padding: 0.625rem 1.25rem;
    transition: background-color 0.2s, border-color 0.2s;
    background-color: var(--cds-color-burgundy);
    font-family: var(--cds-font-family-body);
    font-size: var(--cds-font-size-075);
    font-weight: var(--cds-font-weight-semi-bold);
    line-height: var(--cds-line-height-label);
    text-align: center;
    text-decoration: none;
    color: var(--cds-color-white);
    cursor: pointer;
}

.btn:hover {
    background-color: var(--cds-color-burgundy-hover);
    text-decoration: none;
    color: var(--cds-color-white);
}

.btn:focus-visible {
    outline: 2px auto -webkit-focus-ring-color;
    outline: 2px solid #0078d7;
    outline-offset: 4px;
    background-color: var(--cds-color-burgundy);
    color: var(--cds-color-white);
}

.btn:active {
    background-color: var(--cds-color-burgundy-pressed);
    box-shadow: none;
}

/* Small button */
.btn-small {
    padding: 0.375rem 0.75rem;
    font-size: var(--cds-font-size-050);
}

/* Ghost: White border (for dark backgrounds) */
.btn-ghost {
    margin: 0 0.5rem 0.75rem 0;
    border: 1px solid var(--cds-color-white);
    background-color: transparent;
    color: var(--cds-color-white);
}

.btn-ghost:hover,
.btn-ghost:focus {
    border-color: var(--cds-color-white);
    background-color: var(--cds-color-white);
    color: var(--cds-color-black);
}

.btn-ghost:focus-visible {
    outline: 2px auto -webkit-focus-ring-color;
    outline-offset: 4px;
}

/* Ghost dark: Black border (for light backgrounds) */
.btn-ghost-dark {
    margin: 0 0.5rem 0.75rem 0;
    border: 1px solid var(--cds-color-black);
    background-color: transparent;
    color: var(--cds-color-black);
}

.btn-ghost-dark:hover,
.btn-ghost-dark:focus {
    border-color: var(--cds-color-black);
    background-color: var(--cds-color-black);
    color: var(--cds-color-white);
}

.btn-ghost-dark:focus-visible {
    outline: 2px auto -webkit-focus-ring-color;
    outline-offset: 4px;
}

/* Ghost burgundy: Burgundy border (for light backgrounds) */
.btn-ghost-burgundy {
    margin: 0 0.5rem 0.75rem 0;
    border: 1px solid var(--cds-color-burgundy);
    background-color: transparent;
    color: var(--cds-color-burgundy);
}

.btn-ghost-burgundy:hover,
.btn-ghost-burgundy:focus {
    border-color: var(--cds-color-burgundy);
    background-color: var(--cds-color-burgundy);
    color: var(--cds-color-white);
}

.btn-ghost-burgundy:focus-visible {
    outline: 2px auto -webkit-focus-ring-color;
    outline-offset: 4px;
}

/*
 * Tables
 */

table {
    border: 0;
    background-color: var(--cds-color-white);
}

table thead,
table tbody {
    border-bottom: 0;
}

table th,
table td {
    padding: 0.5rem;
    vertical-align: top;
}

table th {
    font-weight: bold;
    background: var(--cds-color-bg-secondary);
}

table td,
table th,
table li,
table caption {
    font-size: var(--cds-font-size-075);
}

@media (max-width: 575px) {
    table td,
    table th,
    table li,
    table caption {
        font-size: var(--cds-font-size-075);
        line-height: var(--cds-line-height-body);
    }
}

@media (max-width: 575px) {
    table ul,
    table ol {
        padding-left: 1rem;
    }
}

table.text-small td,
table.text-small th,
table.text-small li,
table.text-small caption {
    font-size: var(--cds-font-size-050);
}

/* Horizontal lines modifier */
table.horizontal-lines td,
table.horizontal-lines th {
    border-top: 1px solid var(--cds-border-color-secondary);
    border-bottom: 1px solid var(--cds-border-color-secondary);
}

/* Vertical lines modifier */
table.vertical-lines td,
table.vertical-lines th {
    border-left: 1px solid var(--cds-border-color-secondary);
    border-right: 1px solid var(--cds-border-color-secondary);
}

/* Striped rows modifier */
table.table-striped tbody > tr:nth-child(odd) > td,
table.table-striped tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

/*
 * Pills
 * Static: .pill with .bg-* colour class
 * Checkbox/radio: .pill-input with .bg-* (e.g. .pill-input.bg-blue)
 */

.pill {
    display: inline-block;
    margin: 2px 7px 2px 0;
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    background-color: var(--cds-color-burgundy);
    font-weight: var(--cds-font-weight-bold);
    font-size: var(--cds-font-size-050);
    line-height: 1.375rem;
    font-family: var(--cds-font-family-body);
    text-align: center;
    text-decoration: none;
    color: var(--cds-color-white);
    white-space: nowrap;
}

/* Large pill */
.pill-large {
    margin: 2px 7px 2px 0;
    border-radius: 40px;
    padding: 0.75rem 1.25rem;
    font-weight: var(--cds-font-weight-semi-bold);
    font-size: var(--cds-font-size-125);
    line-height: var(--cds-line-height-body);
    font-family: var(--cds-font-family-brand);
    text-transform: none;
}

@media (max-width: 767px) {
    .pill-large {
        padding: 0.375rem 1.125rem;
    }
}

/* Pill input (checkbox/radio) */
.pill-input {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 0;
    cursor: pointer;
}

.pill-input input {
    position: absolute;
    left: -9999px;
}

.pill-input span {
    display: inline-block;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border: 2px solid var(--cds-color-burgundy);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    background-color: transparent;
    font-weight: var(--cds-font-weight-bold);
    font-size: var(--cds-font-size-050);
    line-height: 1.375rem;
    font-family: var(--cds-font-family-body);
    text-align: center;
    color: var(--cds-color-black);
}

.pill-input:hover span,
.pill-input input:checked + span {
    background-color: var(--cds-color-burgundy);
    color: var(--cds-color-white);
}

.pill-input:focus-within span {
    outline: 2px solid var(--cds-color-focus);
    outline-offset: 2px;
}

/* Pill input colour variants (use with .pill-input.bg-*) */
.pill-input.bg-burgundy {
    background-color: transparent;
}

.pill-input.bg-burgundy span {
    border-color: var(--cds-color-burgundy);
}

.pill-input.bg-burgundy:hover span,
.pill-input.bg-burgundy input:checked + span {
    background-color: var(--cds-color-burgundy);
    color: var(--cds-color-white);
}

.pill-input.bg-blue {
    background-color: transparent;
}

.pill-input.bg-blue span {
    border-color: var(--cds-color-blue);
}

.pill-input.bg-blue:hover span,
.pill-input.bg-blue input:checked + span {
    background-color: var(--cds-color-blue);
    color: var(--cds-color-white);
}

.pill-input.bg-dark-blue {
    background-color: transparent;
}

.pill-input.bg-dark-blue span {
    border-color: var(--cds-color-dark-blue);
}

.pill-input.bg-dark-blue:hover span,
.pill-input.bg-dark-blue input:checked + span {
    background-color: var(--cds-color-dark-blue);
    color: var(--cds-color-white);
}

.pill-input.bg-green {
    background-color: transparent;
}

.pill-input.bg-green span {
    border-color: var(--cds-color-green);
}

.pill-input.bg-green:hover span,
.pill-input.bg-green input:checked + span {
    background-color: var(--cds-color-green);
    color: var(--cds-color-white);
}

.pill-input.bg-orange {
    background-color: transparent;
}

.pill-input.bg-orange span {
    border-color: var(--cds-color-orange);
}

.pill-input.bg-orange:hover span,
.pill-input.bg-orange input:checked + span {
    background-color: var(--cds-color-orange);
    color: var(--cds-color-white);
}

.pill-input.bg-magenta {
    background-color: transparent;
}

.pill-input.bg-magenta span {
    border-color: var(--cds-color-magenta);
}

.pill-input.bg-magenta:hover span,
.pill-input.bg-magenta input:checked + span {
    background-color: var(--cds-color-magenta);
    color: var(--cds-color-white);
}

.pill-input.bg-turquoise {
    background-color: transparent;
}

.pill-input.bg-turquoise span {
    border-color: var(--cds-color-turquoise);
}

.pill-input.bg-turquoise:hover span,
.pill-input.bg-turquoise input:checked + span {
    background-color: var(--cds-color-turquoise);
    color: var(--cds-color-white);
}

.pill-input.bg-mauve {
    background-color: transparent;
}

.pill-input.bg-mauve span {
    border-color: var(--cds-color-mauve);
}

.pill-input.bg-mauve:hover span,
.pill-input.bg-mauve input:checked + span {
    background-color: var(--cds-color-mauve);
    color: var(--cds-color-white);
}

.pill-input.bg-black {
    background-color: transparent;
}

.pill-input.bg-black span {
    border-color: var(--cds-color-black);
}

.pill-input.bg-black:hover span,
.pill-input.bg-black input:checked + span {
    background-color: var(--cds-color-black);
    color: var(--cds-color-white);
}

.pill-input.bg-dark-grey {
    background-color: transparent;
}

.pill-input.bg-dark-grey span {
    border-color: var(--cds-color-grey-dark);
}

.pill-input.bg-dark-grey:hover span,
.pill-input.bg-dark-grey input:checked + span {
    background-color: var(--cds-color-grey-dark);
    color: var(--cds-color-white);
}

.pill-input.bg-darker-grey {
    background-color: transparent;
}

.pill-input.bg-darker-grey span {
    border-color: var(--cds-color-grey-darker);
}

.pill-input.bg-darker-grey:hover span,
.pill-input.bg-darker-grey input:checked + span {
    background-color: var(--cds-color-grey-darker);
    color: var(--cds-color-white);
}

.pill-input.bg-yellow {
    background-color: transparent;
}

.pill-input.bg-yellow span {
    border-color: var(--cds-color-yellow);
}

.pill-input.bg-yellow:hover span,
.pill-input.bg-yellow input:checked + span {
    background-color: var(--cds-color-yellow);
    color: var(--cds-color-black);
}

.pill-input.bg-cyan {
    background-color: transparent;
}

.pill-input.bg-cyan span {
    border-color: var(--cds-color-cyan);
}

.pill-input.bg-cyan:hover span,
.pill-input.bg-cyan input:checked + span {
    background-color: var(--cds-color-cyan);
    color: var(--cds-color-black);
}

.pill-input.bg-grey {
    background-color: transparent;
}

.pill-input.bg-grey span {
    border-color: var(--cds-color-black-10);
}

.pill-input.bg-grey:hover span,
.pill-input.bg-grey input:checked + span {
    background-color: var(--cds-color-black-10);
    color: var(--cds-color-black);
}

.pill-input.bg-burgundy-tint {
    background-color: transparent;
}

.pill-input.bg-burgundy-tint span {
    border-color: var(--cds-color-burgundy-tint);
}

.pill-input.bg-burgundy-tint:hover span,
.pill-input.bg-burgundy-tint input:checked + span {
    background-color: var(--cds-color-burgundy-tint);
    color: var(--cds-color-black);
}

.pill-input.bg-muted {
    background-color: transparent;
}

.pill-input.bg-muted span {
    border-color: var(--cds-color-grey-medium);
}

.pill-input.bg-muted:hover span,
.pill-input.bg-muted input:checked + span {
    background-color: var(--cds-color-grey-medium);
    color: var(--cds-color-black);
}

.pill-input.bg-grey-medium {
    background-color: transparent;
}

.pill-input.bg-grey-medium span {
    border-color: var(--cds-color-grey-medium);
}

.pill-input.bg-grey-medium:hover span,
.pill-input.bg-grey-medium input:checked + span {
    background-color: var(--cds-color-grey-medium);
    color: var(--cds-color-black);
}

.pill-input.bg-transparent {
    background-color: transparent;
}

.pill-input.bg-transparent span {
    border-color: transparent;
    background-color: transparent;
}

.pill-input.bg-transparent:hover span {
    background-color: transparent;
    text-decoration: underline;
}

.pill-input.bg-transparent input:checked + span {
    background-color: transparent;
    color: var(--cds-color-black);
}

/* Pills list container */
.pills-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    display: flex;
    margin: 0.5rem 0 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .pills-list {
        margin: 0 0 0 auto;
    }
}

.pills-list li {
    font-weight: var(--cds-font-weight-semi-bold);
    font-size: 0.8125rem;
    line-height: 1.375rem;
    font-family: var(--cds-font-family-body);
}

.pills-list li:last-child {
    margin-right: 0;
}

/*
 * Utilities
 * Shorthand, single-purpose classes used to quickly apply styling.
 */

.text-large {
    font-size: var(--cds-font-size-125);
    line-height: var(--cds-line-height-body);
}

.text-small {
    font-size: var(--cds-font-size-075);
}

/* Generic background colour utilities. White text on dark backgrounds, black on light. */
.bg-burgundy {
    background-color: var(--cds-color-burgundy);
    color: var(--cds-color-white);
}

.bg-blue {
    background-color: var(--cds-color-blue);
    color: var(--cds-color-white);
}

.bg-dark-blue {
    background-color: var(--cds-color-dark-blue);
    color: var(--cds-color-white);
}

.bg-green {
    background-color: var(--cds-color-green);
    color: var(--cds-color-white);
}

.bg-orange {
    background-color: var(--cds-color-orange);
    color: var(--cds-color-white);
}

.bg-magenta {
    background-color: var(--cds-color-magenta);
    color: var(--cds-color-white);
}

.bg-turquoise {
    background-color: var(--cds-color-turquoise);
    color: var(--cds-color-white);
}

.bg-mauve {
    background-color: var(--cds-color-mauve);
    color: var(--cds-color-white);
}

.bg-black {
    background-color: var(--cds-color-black);
    color: var(--cds-color-white);
}

.bg-dark-grey {
    background-color: var(--cds-color-grey-dark);
    color: var(--cds-color-white);
}

.bg-darker-grey {
    background-color: var(--cds-color-grey-darker);
    color: var(--cds-color-white);
}

.bg-yellow {
    background-color: var(--cds-color-yellow);
    color: var(--cds-color-black);
}

.bg-yellow:hover {
    color: var(--cds-color-black);
}

.bg-cyan {
    background-color: var(--cds-color-cyan);
    color: var(--cds-color-black);
}

.bg-cyan:hover {
    color: var(--cds-color-black);
}

.bg-grey {
    background-color: var(--cds-color-black-10);
    color: var(--cds-color-black);
}

.bg-grey:hover {
    color: var(--cds-color-black);
}

.bg-burgundy-tint {
    background-color: var(--cds-color-burgundy-tint);
    color: var(--cds-color-black);
}

.bg-burgundy-tint:hover {
    color: var(--cds-color-black);
}

.bg-grey-medium {
    background-color: var(--cds-color-grey-medium);
    color: var(--cds-color-black);
}

.bg-grey-medium:hover {
    color: var(--cds-color-black);
}

.bg-muted {
    background-color: var(--cds-color-grey-medium);
    color: var(--cds-color-black);
}

.bg-muted:hover {
    color: var(--cds-color-black);
}

.bg-transparent {
    background-color: transparent;
    color: var(--cds-color-black);
}

.bg-transparent:hover {
    color: var(--cds-color-black);
}

/* Button hover and focus states when using bg-* colour classes */
.bg-burgundy.btn:hover,
.bg-burgundy.btn:focus,
.bg-burgundy.btn:focus-visible {
    background-color: var(--cds-color-burgundy-hover);
    color: var(--cds-color-white);
}

.bg-blue.btn:hover,
.bg-blue.btn:focus,
.bg-blue.btn:focus-visible {
    background-color: var(--cds-color-blue-hover);
    color: var(--cds-color-white);
}

.bg-dark-blue.btn:hover,
.bg-dark-blue.btn:focus,
.bg-dark-blue.btn:focus-visible {
    background-color: var(--cds-color-dark-blue-hover);
    color: var(--cds-color-white);
}

.bg-green.btn:hover,
.bg-green.btn:focus,
.bg-green.btn:focus-visible {
    background-color: var(--cds-color-green-hover);
    color: var(--cds-color-white);
}

.bg-orange.btn:hover,
.bg-orange.btn:focus,
.bg-orange.btn:focus-visible {
    background-color: var(--cds-color-orange-hover);
    color: var(--cds-color-white);
}

.bg-magenta.btn:hover,
.bg-magenta.btn:focus,
.bg-magenta.btn:focus-visible {
    background-color: var(--cds-color-magenta-hover);
    color: var(--cds-color-white);
}

.bg-turquoise.btn:hover,
.bg-turquoise.btn:focus,
.bg-turquoise.btn:focus-visible {
    background-color: var(--cds-color-turquoise-hover);
    color: var(--cds-color-white);
}

.bg-mauve.btn:hover,
.bg-mauve.btn:focus,
.bg-mauve.btn:focus-visible {
    background-color: var(--cds-color-mauve-hover);
    color: var(--cds-color-white);
}

.bg-black.btn:hover,
.bg-black.btn:focus,
.bg-black.btn:focus-visible {
    background-color: var(--cds-color-grey-dark);
    color: var(--cds-color-white);
}

.bg-dark-grey.btn:hover,
.bg-dark-grey.btn:focus,
.bg-dark-grey.btn:focus-visible {
    background-color: var(--cds-color-grey-dark-hover);
    color: var(--cds-color-white);
}

.bg-darker-grey.btn:hover,
.bg-darker-grey.btn:focus,
.bg-darker-grey.btn:focus-visible {
    background-color: var(--cds-color-grey-darker-hover);
    color: var(--cds-color-white);
}

.bg-yellow.btn:hover,
.bg-yellow.btn:focus,
.bg-yellow.btn:focus-visible {
    background-color: var(--cds-color-yellow-hover);
    color: var(--cds-color-black);
}

.bg-cyan.btn:hover,
.bg-cyan.btn:focus,
.bg-cyan.btn:focus-visible {
    background-color: var(--cds-color-cyan-hover);
    color: var(--cds-color-black);
}

.bg-grey.btn:hover,
.bg-grey.btn:focus,
.bg-grey.btn:focus-visible {
    background-color: var(--cds-color-black-20);
    color: var(--cds-color-black);
}

.bg-grey-medium.btn:hover,
.bg-grey-medium.btn:focus,
.bg-grey-medium.btn:focus-visible {
    background-color: var(--cds-color-grey-medium-hover);
    color: var(--cds-color-black);
}

.bg-muted.btn:hover,
.bg-muted.btn:focus,
.bg-muted.btn:focus-visible {
    background-color: var(--cds-color-grey-medium-hover);
    color: var(--cds-color-black);
}

.bg-burgundy-tint.btn:hover,
.bg-burgundy-tint.btn:focus,
.bg-burgundy-tint.btn:focus-visible {
    background-color: var(--cds-color-black-10);
    color: var(--cds-color-black);
}

.bg-transparent.btn:hover,
.bg-transparent.btn:focus,
.bg-transparent.btn:focus-visible {
    background-color: var(--cds-color-black-10);
    color: var(--cds-color-black);
}

code {
    border-radius: 3px;
    padding: 0.2em 0.4em;
    background-color: var(--cds-color-bg-secondary);
    font-size: 0.9em;
    font-family: monospace;
    color: var(--cds-color-burgundy);
}

/*
 * Print styles
 */
@media print {
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .no-print {
        display: none;
    }
}