/* *** HTML + BODY *** */

html {
    scroll-behavior: smooth;
}

::selection {
    background: var(--orange2);
    color: var(--black);
}

*.col-black::selection,
*.col-green::selection,
*.col-bronze::selection,
*.col-blue2::selection {
    background: var(--orange2);
    color: var(--black);
}

*.col-white::selection,
*.col-lightgreen::selection
*.col-orange::selection,
*.col-orange2::selection,
*.col-blue1::selection {
    color: var(--orange2);
    background: var(--black);
}

body {
    position: relative;
    background: var(--white);
    color: var(--black);
    font-size: 16px;
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    letter-spacing: -0.15px;
    margin: 0;
    padding: 0;
}

/* *** HEADINGS *** */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: calc(-0.125em + 0.1ch);
    margin: 0;
    padding: 0;
}

h1.text-bolder,
h2.text-bolder,
h3.text-bolder,
h4.text-bolder,
h5.text-bolder,
h6.text-bolder {
    letter-spacing: calc(-0.125em + 0.15ch);
}

h5, h6 {letter-spacing: -.7px;}

h1 {
    font-size: 2.8em;
}

@media screen and (max-width: 1199px) {
    h1 {
        font-size: 2.5em;
    }
}

/*
    h2 {font-size: 2.5em;}
    h3 {font-size: 2.25em;}
    h4 {font-size: 1.75em;}
    h5 {font-size: 1.5em;}
    h6 {font-size: 1.25em;}


    @media screen and (max-width: 1199px) {
        h2 {font-size: 2.3em;}
        h3 {font-size: 2.1em;}
        h4 {font-size: 1.7em;}
        h5 {font-size: 1.5em;}
    }

*/


/* *** IMAGERY *** */

img {
    display: block;
    border: hidden;
    pointer-events: none;
    user-select: none;
}

/* SALCC Logo Modifiers */
.salcc_logo.dark {
    filter: brightness(0);
}
.salcc_logo.white {
    filter: brightness(0) invert(1);
}



/* *** LINKS *** */

/* Text link */

a {
    transition: 0.25s ease-out;
}

a:not(.btn) {
    color: var(--bronze);
    text-decoration: none;
}

a:not(.btn):hover,
a:not(.btn):active {
    color: var(--black);
}

a:not(.btn):focus {
    color: var(--black);
    text-decoration: underline;
}

a.col-black:not(.btn) {
    color: var(--black);
}

a.col-green:not(.btn) {
    color: var(--green);
}

a.col-white:not(.btn) {
    color: var(--white);
}

a.col-lightgreen:not(.btn) {
    color: var(--lightgreen);
}

a.col-orange:not(.btn) {
    color: var(--orange);
}

a.col-orange2:not(.btn) {
    color: var(--orange2);
}

a.col-blue1:not(.btn) {
    color: var(--blue1);
}

a.col-blue2:not(.btn) {
    color: var(--blue2);
}

a.col-black:not(.btn):hover,
a.col-black:not(.btn):active,
a.col-green:not(.btn):hover,
a.col-green:not(.btn):active,
a.col-blue2:not(.btn):hover,
a.col-blue2:not(.btn):active {
    color: var(--bronze);
}

a.col-white:not(.btn):hover,
a.col-white:not(.btn):active,
a.col-lightgreen:not(.btn):hover,
a.col-lightgreen:not(.btn):active,
a.col-orange:not(.btn):hover,
a.col-orange:not(.btn):active,
a.col-orange2:not(.btn):hover,
a.col-orange2:not(.btn):active,
a.col-blue1:not(.btn):hover,
a.col-blue1:not(.btn):active {
    color: var(--pastel-01);
    text-decoration: underline;
}


/* Link Button */
.btn {
    font-size: calc(1.05rem - 2px);
    display: block;
    font-family: 'Sen', sans-serif;
    width: fit-content;
    border-radius: 0;
    text-decoration: none !important;
    transition: 0.25s ease-out;
}

.btn-xl {
    font-size: calc(1.25rem - 5px);
}

.btn-xxl {
    font-size: calc(1.5rem - 5px);
}

/* btn primary */
.btn-primary {
    background: var(--orange2);
    border: 0.25ch solid var(--orange2);
    color: var(--black);
}

.btn-primary:hover,
.btn-primary:active {
    background: var(--black);
    border: 0.25ch solid var(--black);
    color: var(--white);
}

.btn-primary-dark {
    background: var(--black);
    border: 0.25ch solid var(--black);
    color: var(--orange2);
}

.btn-primary-dark:hover,
.btn-primary-dark:active {
    background: var(--lightgreen);
    border: 0.25ch solid var(--lightgreen);
    color: var(--black);
}

/* btn secondary */
.btn-secondary {
    background: transparent;
    border: 0.25ch solid var(--orange);
    color: var(--orange);
}

.btn-secondary-dark {
    background: transparent;
    border: 0.25ch solid var(--black);
    color: var(--black);
}

.btn-secondary:hover,
.btn-secondary:active {
    background: var(--orange);
    border: 0.25ch solid var(--orange);
    color: var(--black);
}

@media screen and (min-width: 992px) {
    .btn {
        font-size: calc(1.2rem - 5px);
    }
    .btn-xl {
        font-size: calc(1.5rem - 5px);
    }
    .btn-xxl {
        font-size: calc(1.65rem - 5px);
    }
}

/* *** TEXT UTILITIES *** */

/* Colour */
.col-white {color: var(--white);}
.col-black {color: var(--black);}
.col-green {color: var(--green);}
.col-lightgreen {color: var(--lightgreen);}
.col-orange {color: var(--orange);}
.col-orange2 {color: var(--orange2);}
.col-bronze {color: var(--bronze);}
.col-blue1 {color: var(--blue1);}
.col-blue2 {color: var(--blue2);}

/* Font weight */
.text-thin {font-weight: 300;}
.text-normal {font-weight: 400;}
strong, .text-bold {font-weight: 500;}
b, .text-bolder {font-weight: 600;}
.text-boldest {font-weight: 700;}

/* Text styling */
.italic {font-style: italic;}
.italic, cite, em, i { font-size: 1.075em; }

.underline {text-decoration: underline;}
.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}
.capitalize {text-transform: capitalize;}
.text-transform-0 {text-transform: none;}

/* Alignment */
.text-justify {text-align: justify;}

/* Line height */
.line-height-0 {line-height: 0;}
.line-height-1 {line-height: .25em;}
.line-height-2 {line-height: .5em;}
.line-height--2 {line-height: .75em;}
.line-height-3 {line-height: 1em;}
.line-height--3 {line-height: 1.25em;}
.line-height-4 {line-height: 1.5em;}
.line-height--4 {line-height: 1.75em;}
.line-height-5 {list-style: 2em;}

/* Fonts */
.JSans {font-family: 'Josefin Sans', sans-serif;}
.Karla {font-family: 'Karla', sans-serif;}
.Sen {font-family: 'Poppins', sans-serif;}

/* box shadows */

.box-shadow-0 {box-shadow: none;}
.box-shadow--0 {box-shadow: none !important;}

.box-shadow-outline-1 {box-shadow: 0 0 0 1px var(--black01);}
.box-shadow-outline-2 {box-shadow: 0 0 0 1px var(--black02);}
.box-shadow-outline-3 {box-shadow: 0 0 0 1px var(--black03);}
.box-shadow-outline-4 {box-shadow: 0 0 0 1px var(--black04);}
.box-shadow-outline-5 {box-shadow: 0 0 0 1px var(--black05);}

.box-shadow-xs-1 {box-shadow: 0 1px .325em var(--black01);}
.box-shadow-xs-2 {box-shadow: 0 1px .325em var(--black02);}
.box-shadow-xs-3 {box-shadow: 0 1px .325em var(--black03);}
.box-shadow-xs-4 {box-shadow: 0 1px .325em var(--black04);}
.box-shadow-xs-5 {box-shadow: 0 1px .325em var(--black05);}

.box-shadow-sm-1 {box-shadow: 0 2px .325em var(--black01);}
.box-shadow-sm-2 {box-shadow: 0 2px .325em var(--black02);}
.box-shadow-sm-3 {box-shadow: 0 2px .325em var(--black03);}
.box-shadow-sm-4 {box-shadow: 0 2px .325em var(--black04);}
.box-shadow-sm-5 {box-shadow: 0 2px .325em var(--black05);}

.box-shadow-md-1 {box-shadow: 0 .25em .75em var(--black01);}
.box-shadow-md-2 {box-shadow: 0 .25em .75em var(--black02);}
.box-shadow-md-3 {box-shadow: 0 .25em .75em var(--black03);}
.box-shadow-md-4 {box-shadow: 0 .25em .75em var(--black04);}
.box-shadow-md-5 {box-shadow: 0 .25em .75em var(--black05);}

.box-shadow-lg-1 {box-shadow: 0 .5em 1.25em var(--black01);}
.box-shadow-lg-2 {box-shadow: 0 .5em 1.25em var(--black02);}
.box-shadow-lg-3 {box-shadow: 0 .5em 1.25em var(--black03);}
.box-shadow-lg-4 {box-shadow: 0 .5em 1.25em var(--black04);}
.box-shadow-lg-5 {box-shadow: 0 .5em 1.25em var(--black05);}

/* outline and Borders */
.outline {outline: 0.25ch solid var(--black);}

.border {border: 0.25ch solid var(--white04) !important;}
.border-0 {border: none !important;}

/* object fit and position */
.object-fit-cover {object-fit: cover;}
.object-fit-contain {object-fit: contain;}

.width-fit-content {width: fit-content;}

.border-radius-0 {border-radius: 0;}
.border-radius--0 {border-radius: 0 !important;}
.border-radius-1 {border-radius: .5em;}
.border-radius-2 {border-radius: 1em;}
.border-radius-3 {border-radius: 1.25em;}
.border-radius-4 {border-radius: 1.5em;}
.border-radius-5 {border-radius: 2em;}
.circle {border-radius: 50%;}

.user-select-0 {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.pointer-events-0 {pointer-events: none;}

/* Background Colours */
.bg-white {background: var(--white);}
.bg-black {background: var(--black);}
.bg-green {background: var(--green);}
.bg-lightgreen {background: var(--lightgreen);}
.bg-orange {background: var(--orange);}
.bg-orange2 {background: var(--orange2);}
.bg-bronze {background: var(--bronze);}
.bg-blue1 {background: var(--blue1);}
.bg-blue2 {background: var(--blue2);}
.bg-pastel-01 {background: var(--pastel-01);}
.bg-pastel-02 {background: var(--pastel-02);}



/* *** PAGE LAYOUT *** */


/* Dividers */
hr.divider {
    display: block;
    width: 25%;
    height: .5ch;
    border-radius: .75em;
    opacity: 1;
    margin: 1.25em 0;
}

/* Divider Widths (25% not included since it's the default) */
hr.divider.w-5 {
    width: 5%;
}
hr.divider.w-10 {
    width: 10%;
}
hr.divider.w-15 {
    width: 15%;
}
hr.divider.w-20 {
    width: 20%;
}
hr.divider.w-30 {
    width: 30%;
}
hr.divider.w-40 {
    width: 40%;
}
hr.divider.w-50 {
    width: 50%;
}
hr.divider.w-60 {
    width: 60%;
}
hr.divider.w-75 {
    width: 75%;
}
hr.divider.w-100 {
    width: 100%;
}

/* Divider Colors */
hr.divider.black {
    background: var(--black);
}

hr.divider.white {
    background: var(--white);
}

hr.divider.green {
    background: var(--green);
}

hr.divider.bronze {
    background: var(--bronze);
}

hr.divider.lightgreen {
    background: var(--lightgreen);
}

hr.divider.orange {
    background: var(--orange);
}

hr.divider.orange2 {
    background: var(--orange2);
}

hr.divider.blue1 {
    background: var(--blue1);
}

hr.divider.blue2 {
    background: var(--blue2);
}


/* Smaller Container */
@media screen and (min-width: 992px) {
    .container-smaller {
        width: 75%;
    }
}

/* Input Placeholder */
input::placeholder {
    font-style: italic;
    opacity: .5;
}

/* *** CONSTANT ELEMENTS *** */

/* Button to Top of Page */
#pageTopButton {
    position: fixed;
    bottom: 1.6rem;
    right: 1.6rem;
    z-index: 998;
    width: 50px;
    height: 50px;
    background-color: #000;
    font-size: 1rem;
    display: none;
}

#pageTopButton > span {
    text-align: center;
    line-height: 21.5px;
}

#pageTopButton:hover,
#pageTopButton:active {
    background-color: rgba(34, 77, 7, 0.9);
}

/* Formfacade Compromises */

.ff-powered-img,
.ff-submit-icon {
    display: none !important;
    opacity: 0 !important;
}