/*
	Version history:
    v11-Activ 1/10/2025 (NW)
    	1. Clean of previous version
    	2. Accordion formatting fix
        3. Theme tokens
  v10.5-Activ 7/3/2025 (NW)
    	1. h1.course-title from page-title, and colour change
    	2. All references to Barlow changed to Arial (Bold and Black have become Weight: Bold)
    	3. Replaced genU Blue with Activ Blue
    	4. list-style-position: outside; to inside (reverted 1/10/25)
    	5. button1 colour from 1FA2A9 to F5821F
    	6. Replaced genU Teal with Activ Orange
    	7. Replaced Accordion colours and H6
    	8. Font changed down pt and px
    	9. Font changed .menu-item__text down size
  v10.5 15/11/2024(NW)
		1. Removed from h3 	margin: 35px 0px -5px 0px;
        OR Added h3.module-item-title
	v10.1 27/11/2023(NW)
		1. H2.assignmentDetails__Title
	v10 21/04/2023 (JY)
		1. H2, H3, H4, P font updates
	v9 21/04/2023 (JY)
		1. .Loree removed
		2. Margins added
		3. .cardcontainer columns
	v8 11/04/2023 (NW)
		1. .cardpage class for module home page
	v7.2 05/04/2023 (NW)
		1. .parallax class added
	v7.1 09/03/2023 (NW)
		1. Font code update
	v7 03/03/2023 (MB)
		1. Added 2023 genU Branding CSS
	v2022.6 18/08/2022 (DZ)
		1. Added Loree CSS
*/
/*
	2025 Activ Branding
    RGB (hex) colour codes:
        #F5821F - orange
	    #0D3A60 - midnight blue

*/

/* === Theme tokens (global) === */
:root {
    --c-brand: #0D3A60;
    /* primary header bg */
    --c-accent: #F5821F;
    /* chevrons, focus ring */
    --c-neutral: #b3b5b7;
    /* borders/dividers */
    --c-surface: #ffffff;
    /* panel background */
    --c-onbrand: #ffffff;
    /* text on brand */
}


h1.course-title {
    font-family: Arial, sans-serif;
    color: #0D3A60;
}

body {
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 10pt;
}

.show-content.user_content.clearfix.enhanced {
    margin-left: 10%;
    margin-right: 10%;
}

h2 {
    color: #0D3A60;
    font-family: Arial, sans-serif;
    font-size: 20pt;
    font-weight: bold;
    margin: 35px 0px 0px 0px;
    padding: 5px;
}

h2.assignmentDetails__Title {
    color: #e9fafb;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
    padding: 5px;
}

h3 {
    color: #0D3A60;
    font-family: Arial, sans-serif;
    font-size: 14pt;
    font-weight: bold;
    margin: 35px 0px -5px 0px;
    padding: 5px;
}

.context_module_sub_header {
    color: #91a3ce;
    font-family: Arial, sans-serif;
    font-size: 14pt;
    font-weight: bold;
    background-color: #b8a3f5;
}

h4 {
    color: #0D3A60;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    margin: 0px 0px -5px 0px;
    padding: 5px;
}

h6 {
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    margin: 0px 0px -5px 0px;
    padding: 20px 15px;
    text-align: center;
    border: thin solid #B3B5B7;
    border-radius: 5px;
    background-color: #0D3A60;
}

p {
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: 400;
    margin: 0px 0px 5px 0px;
    line-height: 140%;
    padding: 5px;
    border: 0px solid #000000;
}

ul {
    padding: 0px 0px 0px 40px;
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    margin: 0px 0px 0px 20px;
    padding: 5px;
    line-height: 120%;
    list-style-position: outside;
}

ol {
    padding: 0px 0px 0px 40px;
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    margin: 0px 0px 0px 20px;
    padding: 5px;
    line-height: 120%;
    list-style-position: outside;
}

li {
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    margin: 0px 0px 5px 20px;
    padding: 0px;
    line-height: 120%;
    list-style-position: outside;
}

.menu-item__text {
    font-size: 12px;
}

.shaded-box {
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-style: normal;
    background-color: #e9fafb;
    border: 0px solid #000000;
    margin: 20px 20px 20px 20px;
    padding: 20px;
}

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#welcome-message {
    font-size: 1.5rem;
    font-weight: bold;
    color: blue;
}

.btnwrapper {
    text-align: center;
}

.crsbtn {
    border: 2px solid white !important;
    border-radius: 25px;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: #F5821F;
    border-radius: 25px;
}

.button1:hover {
    background-color: #F5821F;
    border-radius: 25px;
}

content-box {
    background-color: #F5821F;
    border-radius: 25px;
}

/*
* ==========================================
* Footer
* ==========================================
*
*/

.footer-container {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
    margin-top: 2rem
}

@media(max-width: 768px) {
    .cbt-footer-container {
        flex-direction: column
    }
}

.footer-content {
    background-color: #F5821F;
    display: flex;
    padding: 0;
    flex-direction: column;
    flex: 1 0 60%;
    border-radius: 10px 10px 10px 10px;
    color: #0D3A60
}

.footer-content>h2:first-child,
.footer-content>h3:first-child,
.footer-content>h4:first-child,
.footer-content>h5:first-child,
.footer-content>p:first-child {
    margin-bottom: 0rem;
    margin-left: .875rem !important;
    color: #fff
}

.footer-info {
    background-color: #0D3A60;
    color: #ffffff;
    padding: 1rem 2.875rem 1.313rem 2.875rem;
    height: auto;
    flex: 1 0 auto;
    border-radius: 10px 0 10px 10px;
    padding-left: 2.875rem
}

.footer-info p {
    font-size: 10pt;
    color: #ffffff;
    font-weight: bold
}

.footer-logo {
    flex: 1 0 30%;
    background-color: #F5821F;
    border-radius: 10px 10px 10px 10px;
    padding: .5rem 1rem;
    margin-left: -30px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(max-width: 768px) {
    .footer-logo {
        margin-left: 0;
        margin-top: -30px;
        justify-content: flex-start;
        padding-left: 2.875rem;
        padding-bottom: 2rem
    }
}

.footer-logo img {
    height: 100px;
    width: auto;
    float: right
}

/*
* ==========================================
* INTERACTIVE CARDS
* ==========================================
*
*/

.cardpage {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.cardbody {
    min-height: 300px;
    display: flex;
    align-items: left;
    justify-content: left;
}

.cardcontainer {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: left;
    flex-wrap: wrap;
    max-width: 900px;
}

.cardcontainer-extra {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    max-width: 450px;
}

.cardcontainer-extra2 {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    max-width: 675px;
}

.cardcontainer-extra3 {
    max-width: 225px;
}

.card {
    width: 200px;
    background-color: #0D3A60;
    padding: 0px 0px;
    margin: 0px 0px;
    border-radius: 0% 0% 10% 10%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.card h4 {
    text-align: left;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    padding: 15px;
    margin: 0;
    margin-left: 10px;
    padding: 0;
    box-sizing: border-box;
}

.card h5 {
    text-align: left;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: normal;
    padding: 5px;
    margin: 0;
    margin-left: 10px;
    padding: 0;
    box-sizing: border-box;
}

.card p {
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: normal;
    padding: 10px 0;
}

.card {
    position: relative;
    /* other styles... */
}

.card a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    padding: 1.2rem;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    border-style: hidden;
    color: transparent;
    font-size: 1rem;
    font-weight: bold;
    width: 100%;
    height: 100%;
}

.card a:hover {
    opacity: 0.5;
}

.cardpage ul li {
    color: white;
    margin-left: 5px;
}


/* 2) COMPONENTS – CURRENT (safe to edit and extend)
   -------------------------------------------------------------------------- */

/* 2a. Accordion (used in new builds) */
/* Outer box */
.acc {
    width: 100%;
    margin: 0 0 1rem;
    /* optional spacing around the box */
    border: 1px solid var(--c-neutral);
    /* or your teal: #26CAD3 */
    border-radius: 8px;
    background: var(--c-surface);
    /* or a very light grey if you prefer */
    overflow: hidden;
    /* key: rounds the whole stack cleanly */
    padding: 0;
    /* keep edges tight to the border */
}

/* Items sit flush inside the box */
.acc details {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Row header */
.acc summary {
    list-style: none;
    cursor: pointer;
    margin: 0;
    padding: 12px 16px;
    background: var(--c-brand);
    color: var(--c-onbrand);
    border-top: 1px solid var(--c-neutral);
    /* separators between rows */
    border-radius: 0;
    font-weight: 700;
}

.acc>details:first-child>summary {
    border-radius: 8px 8px 0 0;
    border-top: 0;
}

.acc>details:last-child:not([open])>summary {
    border-radius: 0 0 8px 8px;
}

.acc>details:last-child>article {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* no line at the very top */
.acc details[open]>summary {
    background: var(--c-brand);
    color: var(--c-onbrand);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Body */
.acc article {
    margin: 0;
    padding: 12px 16px;
    background: var(--c-surface);
    border-top: 1px solid var(--c-neutral);
    /* divider between header and body */
    border-radius: 0;
}

/* chevrons (optional) */
.acc summary::-webkit-details-marker {
    display: none;
}

.acc summary::before {
    content: "\25BC\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0";
    display: inline-block;
    color: var(--c-accent);
}

.acc details[open]>summary::before {
    content: "\25B2\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0";
    color: var(--c-accent);
}

/* focus state for keyboard users */
.acc summary:focus,
.acc summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--c-accent);
    /* stays inside & respects radius */
    border-radius: inherit;
    /* makes the ring curved */
}