/* Text settings */
:root {
    text-wrap-mode: wrap;
    text-wrap-style: balance;
    hyphens: auto;
    overflow-wrap: normal;
    word-wrap: normal;
}

.main-text {
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: left;
    text-wrap-style: pretty;
}

/* Theme/ Scheme colours */
/* scheme-1 */
.scheme-1,
.scheme-1-main {
    background-color: var(--background-colour-1);
    color: var(--text-colour-1);
    border-color: var(--border-colour-1);
    padding-left:  1em;
    padding-right: 1em;
}
.scheme-1 * {
    outline: inherit;
}

/* Input background */
.scheme-1 textarea,
.scheme-1 input[type="text"],
.scheme-1 input[type="password"],
.scheme-1 select,
.scheme-1 [contenteditable]
{
    background-color: var(--input-background-1);
    border-color: var(--border-colour-1);
    color: var(--button-text-1);
}

/* All focusable elements */
/* Focus */
.scheme-1 audio:focus, 
.scheme-1 button:focus,
.scheme-1 canvas:focus,
.scheme-1 details:focus,
.scheme-1 input:focus,
.scheme-1 select:focus,
.scheme-1 summary:focus,
.scheme-1 textarea:focus,
.scheme-1 video:focus,
.scheme-1 [accesskey]:focus,
.scheme-1 [contenteditable]:focus,
.scheme-1 [href]:focus,
.scheme-1 [tabindex]:focus
{
    outline: 2px solid var(--focus-colour-1);
}

/* Hover */
.scheme-1 audio:hover, 
.scheme-1 button:hover,
.scheme-1 canvas:hover,
.scheme-1 details:hover,
.scheme-1 input:hover,
.scheme-1 select:hover,
.scheme-1 summary:hover,
.scheme-1 textarea:hover,
.scheme-1 video:hover,
.scheme-1 [accesskey]:hover,
.scheme-1 [contenteditable]:hover,
.scheme-1 [href]:hover,
.scheme-1 [tabindex]:hover
{
    outline: 2px solid var(--focus-colour-1);
}

.scheme-1 button,
.scheme-1 .button, 
.scheme-1 .btn,
.scheme-1 [role="button"],
.scheme-1 input[type="submit"],
.scheme-1 input[type="reset"],
.scheme-1 input[type="button"] {
    background-color: var(--button-background-1);
    color: var(--button-text-1);
    border-color: var(--border-colour-1);
}
.scheme-1 a[href]:not(.button, .btn),
.scheme-1 .link {
    color: var(--link-colour-1);
    text-decoration: underline;
}

nav.scheme-1 button,
nav.scheme-1 .button, 
nav.scheme-1 .btn,
nav.scheme-1 input[type="button"] {
    background-color: var(--background-colour-1);
    text-decoration: none;
}

.scheme-1 .set-heading-background {
    background-color: var(--set-background-colour-1);
    height: 3em;
    border-radius: 0.75em;
}

/* 'Process' Points */
.scheme-1 .process-point > div {
    border-left-color: var(--focus-colour-1);
}
.scheme-1 .process-point > div > span {
    border-color: var(--focus-colour-1);
    background-color: var(--set-background-colour-1);
}

.alt-colour-1 {
    color: var(--secondary-colour-1)
}

.alt-background-1 {
    background-color: var(--tertiary-colour-1);
}

/* scheme-2 */
.scheme-2,
.scheme-2-main {
    background-color: var(--background-colour-2);
    color: var(--text-colour-2);
    border-color: var(--border-colour-2);
    padding-left:  1em;
    padding-right: 1em;
}
.scheme-2 * {
    outline: inherit;
}

/* All focusable elements */
/* Input - Default settings */
.scheme-2 input,
.scheme-2 select,
.scheme-2 textarea
{
    background-color: var(--input-background-2);
    border-color: var(--input-boarder-2);
    color: var(--text-colour-2);
}
.scheme-2 ::placeholder {
  color: var(--secondary-colour-2);
  opacity: 1;
}

/* Focus */
.scheme-2 audio:focus, 
.scheme-2 button:focus,
.scheme-2 canvas:focus,
.scheme-2 details:focus,
.scheme-2 input:focus,
.scheme-2 select:focus,
.scheme-2 summary:focus,
.scheme-2 textarea:focus,
.scheme-2 video:focus,
.scheme-2 [accesskey]:focus,
.scheme-2 [contenteditable]:focus,
.scheme-2 [href]:focus,
.scheme-2 [tabindex]:focus
{
    outline: 2px solid var(--focus-colour-2);
}
/* Hover */
.scheme-2 audio:hover, 
.scheme-2 button:hover,
.scheme-2 canvas:hover,
.scheme-2 details:hover,
.scheme-2 input:hover,
.scheme-2 select:hover,
.scheme-2 summary:hover,
.scheme-2 textarea:hover,
.scheme-2 video:hover,
.scheme-2 [accesskey]:hover,
.scheme-2 [contenteditable]:hover,
.scheme-2 [href]:hover,
.scheme-2 [tabindex]:hover
{
    outline: 2px solid var(--focus-colour-2);
}

.scheme-2 button,
.scheme-2 .button,
.scheme-2 .btn,
.scheme-2 [role="button"],
.scheme-2 input[type="submit"],
.scheme-2 input[type="reset"],
.scheme-2 input[type="button"] {
    background-color: var(--button-background-2);
    color: var(--button-text-2);
    border-color: var(--border-colour-2);
    outline: 2px solid var(--focus-colour-2);
}
.scheme-2 a[href]:not(.button, .btn),
.scheme-2 .link {
    color: var(--link-colour-2);
    text-decoration: underline;
}

/* 'Process' Points */
.scheme-2 .process-point > div {
    border-left-color: var(--focus-colour-2);
}
.scheme-2 .process-point > div > span {
    border-color: var(--focus-colour-2);
    background-color: var(--set-background-colour-2);
}

.alt-colour-2 {
    color: var(--secondary-colour-2)
}

.alt-colour {
    color: var(--secondary-colour-1)
}

/* END OF SCHEME STYLES */

/* headings */

.leader-heading {
    hyphens: none;
    font-size: 3.75rem;
    line-height: 4.5rem;
    font-weight: 700;
    text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
}

.tag-line {
    hyphens: none;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
}

/* Headings */
:root {
    --heading-base-size: 1rem;
    --heading-scale-factor: 0.25;
    
    /* heading size =
        calc((var(--heading-scale-factor) * #) * var(--heading-base-size))
        Where # = 6 - heading level
    */
}

h1, h2, h3, h4, h5, h6 {
    scroll-margin-top: 6rem;
}

h1, .h1 {
    font-size: 3.75rem;
    line-height: 4rem;
}
h2, .h2 {
    font-size: 1.7rem;
    line-height: 2rem;
}
h3, .h3 {
    font-size: 1.4rem;
    line-height: 1.8rem;
}
h4, .h4 {
    font-size: 1.2rem;
    line-height: 1.5rem;
}
h5, .h5 {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2em;
}
h6, .h6 {
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    line-height: 1.1rem;
}

/* disabled elements */
[disabled], 
[aria-disabled="true"]
{
    filter: grayscale(100%) !important;
    text-decoration-line: line-through  !important;
    pointer-events: none  !important;
    cursor: not-allowed  !important;
}

/* readonly elements */
[readonly] {
    pointer-events: none  !important;
    cursor: not-allowed  !important;
}

/* accessible hiding */

[hidden] {
    display: none;
}

.sr-only,
.visually-hidden {
    border: 0 !important;
    border-width: 0 !important;
    position: absolute !important;
    width: 2px !important;
    height: 2px !important;
    padding: 0 !important;
    margin: -2px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
}


/* Notices */
.notice,
.publish-notice {
    background-color: var(--notice-background);
    color: var(--notice-text);
}

/* buttons */
button,
.button,
.btn,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    font-size: larger;
    font-weight: bold;
    text-decoration: none;
}

/* no outline INSIDE buttons */
button * ,
.button * ,
.btn *,
input[type="submit"] *,
input[type="reset"] *,
input[type="button"] * {
    outline: none !important;
}

/* links */
a[href]:not(.button, .btn),
.link {
    text-decoration: underline;
}

/* no underline on link in the nav bar */
nav a[href],
nav .link { 
    text-decoration: none !important;
}

/* Remove underline on hover/focus for links that are not buttons */

a[href]:hover:not(.button, .btn),
a[href]:focus:not(.button, .btn),
.link:hover,
.link:focus {
    text-decoration: none;
}


/* breadcrumbs */
.breadcrumbs > li {
    display: inline-block;
    margin-right: 5px;
}
.breadcrumbs > li:not(.breadcrumbs > li:last-child):after {
    content: ">";
    margin: 0 5px;
}

/* certificate styles */
.certification-details{
    background-color: #FCFCFD;
}

.set-heading-background {
    background-color: var(--set-background-colour-2);
    height: 3em;
    border-radius: 0.75em;
}

/* Table List Stripes */

.scheme-1 .list tr td {
    background-color: var(--background-colour-1);
}

.scheme-1 .list tr:nth-child(odd) > td {
    background-color: color-mix(in oklab, var(--background-colour-1) 90%, white);
}
.scheme-2 .list tr td {
    background-color: var(--background-colour-2);
}

.scheme-2 .list tr:nth-child(odd) > td {
    background-color: color-mix(in oklab, var(--background-colour-2) 90%, black);
}
.list tr:nth-child(even) > td {
    opacity: 1;
}