@import "./markdown.css";

/* ===================== */
/* Define site variables */
/* ===================== */

:root {
    /* Primary colours */
    --colour-primary-lightest: #f6ecfe;
    --colour-primary-light: #dfc4fd;
    --colour-primary-lighter: #b785f4;
    --colour-primary-main: #853ae4;
    --colour-primary-darker: #5910c6;
    --colour-primary-dark: #35058f;
    --colour-primary-darkest: #140140;

    /* Neutral colours */
    --colour-neutral-lightest:#fdfcfc;
    --colour-neutral-light: #f8f7f6;
    --colour-neutral-lighter: #f1f0ee;
    --colour-neutral-main: #e8e5e3;
    --colour-neutral-darker: #cac7c4;
    --colour-neutral-dark: #a6a3a0;
    --colour-neutral-darkest: #787573;

    /* Error colours */
    --colour-error-lightest: #fdecf0;
    --colour-error-light: #fab2c3;
    --colour-error-lighter: #f87796;
    --colour-error-main: #ea2957;
    --colour-error-darker: #b40730;
    --colour-error-dark: #820321;
    --colour-error-darkest: #470112;

    /* Warning colours */
    --colour-warning-lightest: #fdf3e8;
    --colour-warning-light: #fdd7aa;
    --colour-warning-lighter: #f9bb71;
    --colour-warning-main: #ee8d1b;
    --colour-warning-darker: #cc7209;
    --colour-warning-dark: #8c4d03;
    --colour-warning-darkest: #381e00;

    /* Notification colours */
    --colour-notification-lightest: #ecf7fd;
    --colour-notification-light: #b4e0f8;
    --colour-notification-lighter: #7ac9f5;
    --colour-notification-main: #2aa1e3;
    --colour-notification-darker: #0f75ae;
    --colour-notification-dark: #065784;
    --colour-notification-darkest: #06293d;

    /* Border radius for all buttons */
    --max-button-border-radius: 0.5rem;
    /* Border radius for all cards */
    --max-card-border-radius: 0.8rem;

    /* Padding amounts */
    --max-padding-small: 0.4rem;
    --max-padding-medium: 1.2rem;
    --max-padding-large: 2.8rem;

    /* Gap amounts */
    --max-gap-small: calc(var(--max-padding-small) * 2);
    --max-gap-medium: calc(var(--max-padding-medium) * 2);
    --max-gap-large: calc(var(--max-padding-large) * 2);

    /* Box shadows */
    --max-box-shadow-light: 0px 2px 4px 2px rgba(0, 0, 0, 0.02);
    --max-box-shadow-medium: 0px 3px 6px 3px rgba(0, 0, 0, 0.04),
        0px 10px 8px -8px rgba(0, 0, 0, 0.12);
    --max-box-shadow-dark: 0px 4px 8px 4px rgba(0, 0, 0, 0.06),
        0px 5px 6px 0px rgba(0, 0, 0, 0.1),
        0px 12px 16px -12px rgba(0, 0, 0, 0.3);

    /* Height of the header/navbar */
    --max-header-height: 68px;

    /* Max width of the page content */
    --max-content-width: 1260px;
    /* Min width of the page content */
    --min-content-width: 280px;

    /* Curve I like using */
    --fast-ease-out: cubic-bezier(0, 0.5, 0.5, 1);
}

/* ======================== */
/* Generic site-wide styles */
/* ======================== */

body {
    min-width: var(--min-content-width);
}

/* ========================= */
/* Styles for colouring text */
/* ========================= */

.max-text-primary-darkest {
    color: var(--colour-primary-darkest);
}

.max-text-primary-dark {
    color: var(--colour-primary-dark);
}

.max-text-primary-lightest {
    color: var(--colour-primary-light);
}

.max-text-neutral-lightest {
    color: var(--colour-neutral-lightest);
}

.max-text-neutral-darker {
    color: var(--colour-neutral-darker);
}

.max-text-neutral-dark {
    color: var(--colour-neutral-dark);
}

.max-text-neutral-darkest {
    color: var(--colour-neutral-darkest);
}

a.max-link-primary-main {
    color: var(--colour-primary-main);
}

a.max-link-primary-main:hover {
    color: var(--colour-primary-lighter);
    text-decoration: underline;
}

a.max-link-primary-main:active {
    color: var(--colour-neutral-lighter);
}

a.max-link-primary-light {
    color: var(--colour-primary-light);
}

a.max-link-primary-light:hover {
    color: var(--colour-primary-main);
    text-decoration: underline;
}

a.max-link-primary-light:active {
    color: var(--colour-primary-main);
}

/* ========================== */
/* Styles for decorating text */
/* ========================== */

.max-text-centered {
    text-align: center;
}

.max-text-small {
    font-family: "Manrope", Verdana, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02rem !important;
    line-height: 0.9rem !important;

    padding: 0;
    margin: 0;
}

/* Style for a large header */
h1.max-header {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 5.4rem;
    font-weight: 800;
    letter-spacing: -0.08rem;
    line-height: 3.8rem;

    padding: 0;
    margin: 0;

    /* Negative left margin makes header align better with smaller text */
    /* margin-left: -0.3rem; */

    margin-bottom: 1.6rem;
}

/* Style for a standard header */
h2.max-header {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -0.06rem;
    line-height: 3rem;

    padding: 0;
    margin: 0;

    /* Negative left margin makes header align better with smaller text */
    /* margin-left: -0.16rem; */

    margin-bottom: 1.4rem;
}

/* Style for a small header */
h3.max-header {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.04rem;
    line-height: 2.2rem;

    padding: 0;
    margin: 0;

    /* Negative left margin makes header align better with smaller text */
    /* margin-left: -0.09rem; */

    margin-bottom: 1.2rem;
}

/* Style for a very small header */
h4.max-header {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0rem;
    line-height: 2rem;

    padding: 0;
    margin: 0;

    /* Negative left margin makes header align better with smaller text */
    /* margin-left: -0.04rem; */

    margin-bottom: 0.8rem;
}

/* Style for a sub-heading */
h6.max-header {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 0.8rem;
    font-weight: 200;
    letter-spacing: 0.06rem;
    line-height: 1.1rem;

    padding: 0;
    margin: 0;
}

/* Style for a standard paragraph */
p.max-paragraph {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.06rem;
    line-height: 1.52rem;

    padding: 0;
    margin: 0;

    margin-bottom: 0.8rem;
}

/* Remove underline from links */
a {
    text-decoration: none;
}

/* Style for a standard link */
a.max-link {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.04rem;
    line-height: 1.2rem;

    padding: 0;
    margin: 0;

    cursor: pointer;

    transition: color 0.1s var(--fast-ease-out);
}

/* Style for a standard list item */
li.max-list-item {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.04rem;
    line-height: 1.4rem;

    padding: 0;
    margin: 0;
}

/* Style for emphasized text */
span.max-emphasized {
    font-weight: 800;
}

/* ================== */
/* Styles for buttons */
/* ================== */

/* Remove some of the default button stylings */
button {
    background-color: none;
    border: none;
    outline: none;
}

/* Style for a button to take up the full width of its container */
a.max-button-full-width,
a.max-button-full-width > button,
button.max-button-full-width {
    width: 100%;
}

/* Style for all sized button */
a.max-button-small > button,
button.max-button-small,
a.max-button-medium > button,
button.max-button-medium {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.6rem;

    border-radius: var(--max-button-border-radius);
}

/* Style for small size button */
a.max-button-small > button,
button.max-button-small {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03rem;
    line-height: 1.4rem;

    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 32px;
    padding-right: 32px;
}

/* Style for medium size button */
a.max-button-medium > button,
button.max-button-medium {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04rem;
    line-height: 1.6rem;

    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 40px;
    padding-right: 40px;
}

/* Style for a button in the primary colour */
a.max-button-primary > button,
button.max-button-primary {
    background-color: var(--colour-primary-main);
    color: var(--colour-neutral-lightest);

    outline: 0px solid var(--colour-primary-lighter);
    outline-offset: -3px;

    transition: background-color 0.4s var(--fast-ease-out),
        outline-color 0.2s var(--fast-ease-out), color 0.4s var(--fast-ease-out);
}

a.max-button-primary:hover > button,
button.max-button-primary:hover,
a.max-button-primary:focus > button,
button.max-button-primary:focus {
    background-color: var(--colour-primary-light);
    color: var(--colour-primary-darkest);
}

a.max-button-primary:active > button,
button.max-button-primary:active {
    outline: 3px solid var(--colour-primary-lighter);
}

/* Style for an outlined button in the primary colour */
a.max-button-primary-outline > button,
button.max-button-primary-outline {
    background-color: rgba(0, 0, 0, 0);
    color: var(--colour-primary-main);

    outline: 3px solid var(--colour-primary-main);
    outline-color: var(--colour-primary-main);
    outline-offset: -3px;

    transition: background-color 0.4s var(--fast-ease-out),
        outline-color 0.2s var(--fast-ease-out), color 0.4s var(--fast-ease-out);
}

a.max-button-primary-outline:hover > button,
button.max-button-primary-outline:hover,
a.max-button-primary-outline:focus > button,
button.max-button-primary-outline:focus {
    background-color: var(--colour-primary-main);
    color: var(--colour-neutral-lightest);
}

a.max-button-primary-outline:active > button,
button.max-button-primary-outline:active {
    outline: 3px solid var(--colour-neutral-lightest);
}

/* Style for a neutral button */
a.max-button-neutral > button,
button.max-button-neutral {
    background-color: var(--colour-neutral-lightest);
    color: var(--colour-primary-main);

    outline: 0px solid var(--colour-neutral-lighter);
    outline-offset: -3px;

    transition: background-color 0.4s var(--fast-ease-out),
        color 0.4s var(--fast-ease-out);
}

a.max-button-neutral:hover > button,
button.max-button-neutral:hover,
a.max-button-neutral:focus > button,
button.max-button-neutral:focus {
    background-color: var(--colour-primary-main);
    color: var(--colour-primary-lightest);
}

a.max-button-neutral:active > button,
button.max-button-neutral:active {
    outline: 3px solid var(--colour-neutral-lighter);
}

/* Style for a red button */
a.max-button-error > button,
button.max-button-error {
    background-color: var(--colour-error-main);
    color: var(--colour-neutral-lightest);

    outline: 0px solid var(--colour-error-lighter);
    outline-offset: -3px;

    transition: background-color 0.4s var(--fast-ease-out),
        color 0.4s var(--fast-ease-out);
}

a.max-button-error:hover > button,
button.max-button-error:hover,
a.max-button-error:focus > button,
button.max-button-error:focus {
    background-color: var(--colour-error-lightest);
    color: var(--colour-error-darkest);
}

a.max-button-error:active > button,
button.max-button-error:active {
    outline: 3px solid var(--colour-error-lighter);
}

/* Darken and remove pointer events for disabled buttons */
a.max-button-full-width > button:disabled,
button.max-button-full-width:disabled,
a.max-button-small > button:disabled,
button.max-button-small:disabled,
a.max-button-medium > button:disabled,
button.max-button-medium:disabled {
    filter: brightness(90%) contrast(50%) grayscale(75%);
    pointer-events: none;
}

/* ========================= */
/* Styles for input elements */
/* ========================= */

/* Style for an input field */
input.max-input {
    background-color: var(--colour-neutral-lightest);
    border: 1px solid var(--colour-neutral-main);

    padding: 0.6rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;

    font-family: "Manrope", Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.06rem;
    line-height: 1.2rem;

    border-radius: var(--max-button-border-radius);

    outline-width: 0px;
    outline-style: solid;
    outline-color: var(--colour-primary-main);

    transition: outline-width 0.1s linear;
}

/* Style for an input field on focus */
input.max-input:focus {
    outline-width: 4px;
}

/* Style for a disabled input field */
input.max-input:disabled {
    cursor: default;
    background-color: rgba(239, 239, 239, 0.3);
    color: rgb(100, 100, 100);
    border-color: rgba(140, 140, 140, 0.3);
}

/* Style for an input field's label */
label.max-input-label {
    font-family: "Manrope", Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.08rem;
    line-height: 1.62rem;
}

/* Style to add a red star next to required labels */
label.required:after {
    content:" *";
    color: var(--colour-error-main);
  }

/* ==================== */
/* Styles for textareas */
/* ==================== */

/* Remove default textarea styles */
textarea {
    background: none;
    resize: none;
    box-shadow: none;
    border: none;
}

/* Style for a text input field */
textarea.max-text-input {
    background-color: var(--colour-neutral-lightest);
    color: var(--colour-primary-darkest);

    font-family: "Manrope", Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.08rem;
    line-height: 1.62rem;

    min-height: 2rem;
    width: 100%;
    padding: 0.8rem;

    border-radius: var(--max-button-border-radius);
    outline: 1px solid var(--colour-neutral-main);
    outline-offset: -1px;
}

/* Style for a focused text input field */
textarea.max-text-input:focus {
    outline: 2px solid var(--colour-neutral-darker);
    outline-offset: -2px;
}

/* Style for the placehold text in a text input field */
textarea.max-text-input::placeholder {
    color: var(--colour-neutral-darker);

    font-family: "Manrope", Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 200;
    font-style: italic;
    letter-spacing: 0.08rem;
    line-height: 1.62rem;

    transition: color 0.1s var(--fast-ease-out);
}

/* Lighten placeholder text on hover */
textarea.max-text-input:focus::placeholder {
    color: var(--colour-neutral-lighter);
}

/* ========================== */
/* Styles for select elements */
/* ========================== */

/* Style for a select field */
select.max-select {
    background-color: var(--colour-neutral-lightest);

    min-width: 26.2ch;

    padding: 0.6rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;

    font-family: "Manrope", Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.06rem;
    line-height: 1.2rem;

    border-radius: var(--max-button-border-radius);
    border: 1px solid var(--colour-neutral-main);

    outline-width: 0px;
    outline-style: solid;
    outline-color: var(--colour-primary-main);

    transition: outline-width 0.1s linear;
}

/* Style for a select field on focus */
select.max-select:focus {
    outline-width: 4px;
}

/* Style for a select field */
select.max-select > option {
    background-color: var(--colour-neutral-lightest);

    padding: 0.6rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;

    font-family: "Manrope", Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.06rem;
    line-height: 1.2rem;

    border-radius: var(--max-button-border-radius);
    border: 1px solid var(--colour-neutral-main);
}

/* ======================== */
/* Styles for info elements */
/* ======================== */

div.info {
    position: relative;
}

div.info > .icon {
    color: var(--colour-neutral-darkest);
    font-size: 1.2rem;
}

div.info > .content {
    display: none;

    background-color: var(--colour-neutral-lightest);
    color: var(--colour-neutral-darkest);

    width: 12rem;
    z-index: 2000;

    padding: 0.8rem;

    position: absolute;
    top: calc(100% - 5px);
    left: 50%;
    transform: translateX(-50%);

    font-size: 0.9rem;
    font-weight: 500;
    font-family: "Manrope", Verdana, sans-serif;

    border: 1px solid var(--colour-neutral-lighter);
    border-radius: var(--max-button-border-radius);

    box-shadow: var(--max-box-shadow-dark);
}

div.info:hover > .content {
    display: block;
}

/* ===================== */
/* Styles for decoration */
/* ===================== */

/* Style for a horizontal faded divider */
hr.hr-faded {
    border: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.8),
        rgba(0, 0, 0, 0.8),
        rgba(0, 0, 0, 0)
    );
}

/* ============================ */
/* Styles for various utilities */
/* ============================ */

.no-margin {
    margin: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.no-spinners {
    appearance: textfield;
    -moz-appearance: textfield;
}
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hidden {
    display: none !important;
}

.full-width {
    width: 100%;
}

.prevent-text-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

/* Style for keeping content centered and giving it a max width */
.max-content {
    margin: 0 auto;
    max-width: var(--max-content-width);

    --side-padding: clamp(0.8rem, calc(100vw - 500px), 1.2rem);

    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
}

/* Style to add some padding to sections of a page */
/* + define border radius for sections that have rounded corners */
.max-section {
    --section-padding: clamp(3.6rem, 10vw, 4.2rem);
    --section-border-radius: clamp(0rem, calc(30vw - 300px), 6rem);

    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

/* Style for tabs */
.nav-tabs .nav-link {
    color: var(--colour-primary-dark);
    background-color: var(--colour-primary-light);
    border-color: var(--colour-neutral-light);
}

/* Style for model */
.custom-modal {
    max-width: 80%;
    /* or any other width you prefer */
    width: 80%;
}

.custom-modal .modal-content {
    height: 80vh;
    /* or any other height you prefer */
}