@font-face {
    font-family: 'Shadows Into Light Two';
    /* Use ../ to back out of the 'css' folder, then enter the 'fonts' folder */
    src: url('../fonts/ShadowsIntoLightTwo-Regular.woff2') format('woff2'),
         url('../fonts/ShadowsIntoLightTwo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Encourages faster initial text rendering */
}

/* Override Cassiopeia's core CSS variables along with standard tags */
:root {
    --cassiopeia-font-headings: 'Shadows Into Light Two', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #5d17d7;
    font-family: 'Shadows Into Light Two', sans-serif !important;
}@font-face {
    font-family: 'Shadows Into Light Two';
    src: url('media/templates/site/cassiopeia/fonts/ShadowsIntoLightTwo-Regular.woff2') format('woff2'),
	url('media/templates/site/cassiopeia/fonts/ShadowsIntoLightTwo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #5d17d7;
  font-family: 'Shadows Into Light Two', sans-serif;
}

:root {
  --cassiopeia-color-primary: #fff; /* Your main brand color */
  --cassiopeia-color-hover: #fff;  /* Colour when hovering over links/buttons */
  --cassiopeia-color-link: #900c3f;   /* Colour for hyperlinks */
}
/* 1. Center the entire horizontal menu container */
.container-nav {
    justify-content: center !important;
}

/* 2. Top and Bottom Borders for the Header Area */
.container-header .container-nav {
    border-top: 1px solid rgba(0,0,0,0.075);
    border-bottom: 1px solid rgba(0,0,0,0.075);
  padding: 0;

}

/* 3. Static State: Target links perfectly so they don't break or vanish */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    color: #5d17d7 !important;
    text-decoration: none;
    position: relative;
    display: inline-block;
    
    /* Lock structural spacing to avoid the sideways text jump */
    padding: 8px 14px !important;
    border: 2px solid transparent !important; 
    border-radius: 5px !important;
    
    /* Smooth color transition animations */
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* 4. Hover State: Swaps background and border colors only */
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > span:hover {
    background-color: #5d17d7 !important;
    border-color: #5d17d7 !important; 
    color: #ffffff !important;
}

/* 5. Active/Current State: Keeps the pill background permanently visible */
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.current > span {
    background-color: #5d17d7 !important;
    border-color: #5d17d7 !important;
    color: #ffffff !important;
}
.container-header .metismenu>li>a:hover:after,.container-header .metismenu>li>button:hover:before,.container-header .metismenu>li.active>a:after,.container-header .metismenu>li.active>button:before {
    background:#5d17d7;
}
.container-header nav {
      margin-top: 0;
}
/* Color the mobile hamburger menu icon lines purple */
.container-header .navbar-toggler {
    color: #5d17d7 !important;
  border: 1px solid #5d17d7;
}
/* ==========================================================================
   1. EXCLUSIVE MOBILE STYLES (Only applies to screens UNDER 992px wide)
   ========================================================================== */
@media (max-width: 991.98px) {

    /* Explicitly make the hamburger visible on mobile screens */
    .container-header .navbar-toggler {
        display: block !important;
        float: none !important;      /* Clears default floated alignments */
        margin: 15px auto !important; /* Centers button horizontally and adds space */
        color: #5d17d7 !important;    /* Your custom purple color choice */
    }

    /* Stack and align the entire inner header area vertically */
    .container-header .navbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Clean up the default menu indentation padding causing shifts */
    .container-header .mod-menu {
        padding-left: 0 !important;   
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 1. Eliminate the thick outline/shadow when the hamburger is active or open */
    .container-header .navbar-toggler:focus,
    .container-header .navbar-toggler:active,
    .container-header .navbar-toggler[aria-expanded="true"] {
        box-shadow: none !important;
        outline: none !important;
        border-width: 1px !important; /* Forces the structural border to remain a thin native weight */
    }

    /* 2. FIXED: Target the wrapper ONLY when it's actively opening or shown */
    .container-header .navbar-collapse.show,
    .container-header .navbar-collapse.collapsing {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* 3. Strip out default float structures from the list container itself */
    .container-header .mod-menu,
    .container-header .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Keeps every individual stacked item pinned dead center */
        justify-content: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* 4. Center-align the actual link elements inside the list tree wrapper */
    .container-header .mod-menu > li {
        width: auto !important;          /* Shrinks the pill container tightly to the text size */
        max-width: 90% !important;       /* Prevents edge clipping */
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 6px auto !important;    /* Forces even margin spacing on left, right, and bottom */
    }

    .container-header .mod-menu > li:last-child {
        margin-bottom: 15px !important; /* Adds extra breathing space at the very bottom */
    }
}


/* ==========================================================================
   2. EXCLUSIVE DESKTOP STYLES (Only applies to screen sizes 992px and larger)
   ========================================================================== */
@media (min-width: 992px) {

    /* Force the native template to hide the hamburger icon on monitors */
    .container-header .navbar-toggler {
        display: none !important;
    }

    /* Enforce the clean, centered desktop horizontal nav line */
    .container-nav {
        justify-content: center !important;
    }

    .container-header .container-nav {
        border-top: 1px solid rgba(0,0,0,0.075);
        border-bottom: 1px solid rgba(0,0,0,0.075);
    }

    .container-header .mod-menu {
        display: flex !important;
        flex-direction: row !important; /* Forces the items back into a single straight line */
        width: auto !important;
        justify-content: center !important;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        display: inline-block !important;
        padding: 8px 14px !important;  /* Tighter desktop pill spacing constraint */
    }
}