/*   1. GLOBAL CSS VARIABLES (THEME COLORS)  */
/* new color variables */
:root {
    --dark-color: #1B2739;
    --light-color: #FCFDFF; /* mabs colour */
    --main-background: #fff6f1;
    --primary-background: #fff6f1;
    --secondary-background: #fff6f1;
    --accent-background: #fff6f1;

    --primary-textColor: #135cae;
    --secondary-textColor: #135cae;
    --accent-textColor: #135cae;
    
    --primary-gradient: none;
    --secondary-gradient: none;

    --breakpoint: 768px;
}

body {
    background: var(--main-background); /* background of website */
       color: var(--dark-color); /* color of website */
}
/* Corrected misplaced closing brace: removed extra '}' here */

/*
   2. BASE STYLES (BODY, LINKS, PARAGRAPHS, HEADINGS)
  */

p {
    margin-top: 0;
    /* This fixes the limitation in TinyMCE which does not allow modification of paragraph spacing. 
       This should be fixed in TinyMCE so that spacing is applied just to content and not the whole website */
    margin-bottom: 0.3rem; 
}

a {
       color: var(--dark-color); /* color of links */
}

/* Hover and non-hover link styles for modules */
.mod-list li a:hover {
    text-decoration: none;
    color: #2cf390;
    font-weight: bold;
}

.mod-list li a {
    text-decoration: none;
}

/* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
h1, .h1 {
    font-size: clamp(18px, 5vw, 28px);
    color: #cccccc;
    text-align: center;
}

/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
h2, .h2 {
    font-size: clamp(16px, 5vw, 26px);
}

/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
h3, .h3 {
    font-size: clamp(14px, 5vw, 18px);
}

/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
h4, .h4 {
    /* Corrected 0px to a sensible max font size (22px) to prevent invisibility */
    font-size: clamp(14px, 5vw, 22px);
}

/*    3. HEADER / NAVIGATION STYLES */

.container-header {
    background-color: var(--primary-background); /* Solid background of header */
    background-image: var(--primary-gradient);  /* Set to none to disable the gradient */
}

.container-header .navbar-toggler {
    color: #000;
    /* colour of mobile phone hidden menu toggler */
}

.container-header .mod-menu {
    flex-direction: row !important; /* this keeps the navmenu horizontal instead of of going dropdown on mobile screens */
    color: #135cae; /* navbar home menu link colour */
}

.container-header .mod-menu > li {
    padding-left: 6px; /* spaces between collapsed mobile top menu items MABS */
}

.container-header .grid-child {
    padding: 0;
}

.container-header nav {
    margin-top: 0;
}

.metismenu.mod-menu .metismenu-item {
    padding: 0; /* spaces nav menu items and top padding */
    margin: 0;
}

/* Dropdown Menu styling */
.metismenu.mod-menu .metismenu-item > ul {
    background-color: var(--secondary-background); /* background color of dropdown menu */
    border: 1px solid var(--secondary-background); /* border color of dropdown menu */
    color: var(--secondary-textColor); /* text color of dropdown menu */
}

.metismenu.mod-menu .metismenu-item > ul a {
       color: var(--secondary-textColor); /* text color of dropdown menu links */
}

/*    4. CARD / MODULE STYLES    */

.card {
    border: 1px solid var(--primary-background); /* border color of cards */
    border-radius: 0; /* border radius of cards */
    background-color: var(--primary-background); /* background color of cards */
    /* Uses Bootstrap CSS variable syntax for card padding */
    --bs-card-cap-padding-y: 0;
    --bs-card-cap-padding-x: 0;
}

.card-header {
    background-color: var(--primary-background); /* background color of card headers */
    border-bottom: 1px solid var(--primary-background); /* border color of card headers */
    color: #008b46; /* text color of card headers */
}

.card-body {
    background-color: var(--primary-background); /* background color of card bodies (Joomla Modules) */
    border-bottom: 3px solid var(--accent-background); /* border color of card bodies */
    color: var(--primary-textColor); /* text color of card bodies */
    padding-top: 0; /* removes space between sidebar menu items and module title */
}

.card-body a {
    color: var(--primary-textColor); /* text color of card body links */
}

/* Secondary Card Styles */
.card.secondary {
    border: 1px solid var(--secondary-background); /* border color of secondary cards */
    border-radius: 0; /* border radius of secondary cards */
    background-color: var(--secondary-background); /* background color of secondary cards */
}

.card-header.secondary {
    background-color: var(--secondary-background); /* background color of secondary card headers */
    border-bottom: 1px solid var(--secondary-background); /* border color of secondary card headers */
    color: var(--secondary-textColor); /* text color of card headers */
}

.card-body.secondary {
    background-color: var(--secondary-background); /* background color of secondary card bodies (Joomla Modules) */
    border-bottom: 3px solid var(--secondary-background); /* border color of secondary card bodies */
    color: var(--secondary-textColor); /* text color of secondary card bodies */
}

.card.secondary a {
    color: var(--secondary-textColor); /* text color of secondary card body links */
}

/* Horizontal Article/Newsflash Modules */
.mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
    background-color: var(--primary-background); /* Solid background of articlesnews or newsflash modules */
    color: var(--dark-color);  /* Color of articlesnews or newsflash modules */
    border: 1px solid var(--primary-background); /* Border of articlesnews or newsflash modules */
    /*! padding:.5em; */
}

/*    5. BUTTONS, FORMS, & INFO BOXES */

.btn.btn-primary {
    background-color: var(--primary-background); /* background of primary buttons */
    border-color: var(--primary-background); /* border color of primary buttons */
    color: var(--primary-textColor); /* text color of primary buttons */
}

.btn-primary .icon-white:before {
    color: var(--primary-textColor); /* text color of info buttons in primary */
}

.btn.btn-secondary {
    background-color: var(--secondary-background); /* background of secondary buttons */
    border-color: var(--secondary-background); /* border color of secondary buttons */
    color: var(--secondary-textColor); /* text color of secondary buttons */
}

.btn-secondary .icon-white:before {
    color: var(--secondary-textColor); /* text color of info buttons in primary */
}

.mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
    background-color: var(--accent-background); /* background of primary buttons */
    border-color: var(--accent-background); /* border color of primary buttons */
    color: var(--dark-color); /* text color of primary buttons */
}

.bg-info {
    color: var(--accent-textColor);
    background-color: var(--accent-background) !important;
}

.btn.btn-info {
    background-color: var(--primary-background); /* background color of info buttons */
    border: 1px solid var(--main-background); /* border width, style and color of info buttons */
    color: var(--primary-textColor); /* text color of info buttons */
}

.form-control {
    background-color: var(--main-background); /* background color of form controls */
        border: 1px solid var(--dark-color); /* border color of form controls */
        color: var(--primary-textColor); /* text color of form controls */
    border-radius: 0; /* border radius of form controls */
}

label {
    font-weight: bold; /* font weight of labels */
}

/*    6. ARTICLE / UTILITY STYLES  */

.article-info {
    background-color: var(--main-background); /* background color of article info */
    padding: 15px 20px; /* padding of article info */
}

.article-info dd {
    color: var(--dark-color); /* text color of article info */
}

.plg_system_webauthn_login_button svg {
     fill: var(--primary-textColor); /* color of webauthn login button icon */
}

/* Custom Module for Color Picker (using module class) */
.main-top.card.colorpicker-module {
    /* to change the background color of a module add a Module Class in the advanced module settings and define it in css */
    background-color: var(--main-background); 
    /* to change the background color of a module add a Module Class in the advanced module settings and define it in css */
    color: var(--dark-color); 
    border: none;
}

.colorpicker-module .card-header, .colorpicker-module .card-body {
    /*  to change the background color of a module add a Module Class in the advanced module settings and define it in css */
    background-color: var(--main-background); 
    /* to change the background color of a module add a Module Class in the advanced module settings and define it in css */
    color: var(--dark-color);
}

::selection {
    background-color: var(--accent-background); /* background color of text selection */
    color: var(--dark-color); /* text color of text selection */
}

/*    7. FOOTER STYLES */

.footer {
    background-color: var(--secondary-background); /* background color of footer */
    background-image: var(--secondary-gradient);  /* Set to none to disable the gradient */
    /* Corrected undefined variable: 'secondary-color' should be a defined variable */
    color: var(--secondary-textColor); /* text color of footer */
}

.footer .grid-child {
    padding: 0;
}

.container-footer > div:nth-child(1) {
    padding-bottom: 0;
    padding-top: 0;
}

/*    8. MEDIA QUERIES & GRID OVERRIDES */

@supports (display:grid) {
    .site-grid {
        grid-gap: 0 1em;
        grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,19.875rem))[main-end]minmax(0,1fr)[full-end];
        grid-template-areas:
            ". banner banner banner banner ."
            ". top-a top-a top-a top-a ."
            ". top-b top-b top-b top-b ."
            ". side-l comp comp side-r ."
            ". bot-a bot-a bot-a bot-a ."
            ". bot-b bot-b bot-b bot-b .";
        display: grid;
    } /* this stops the leftmenu dropping into a collapsed column instead of displaying left when viewed on narrow screens*/
}

@media (min-width: 1000px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1000px;
    }
    
    @supports (display: grid) {
        .site-grid {
            grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(4, minmax(0, 13.5rem))[main-end] minmax(0, 1fr)[full-end];
            /* keeps content menus and header aligned */
        }
    }
    
    .grid-child {
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1000px;
        display: flex;
    }
}

/* Ensures max specificity to beat any residual conflict */
#top.container-header .navbar-nav > li > a.nav-link {
    padding-left: 0.6em !important;
    padding-right: 0.6em !important;
    margin: 0 !important;
}