/*
==========================================================
Markfield Hub
Main System Stylesheet

Version: 3.0

Core:
- Branding
- Global Layout
- Public Pages
- Forms
- Navigation
- Dashboard Base

==========================================================
*/


/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {

    --markfield-navy:#0B1F3A;

    --markfield-navy-light:#16365F;

    --markfield-orange:#F7941D;


    --background-light:#F5F7FA;

    --card-white:#FFFFFF;


    --text-dark:#212529;

    --text-muted:#6c757d;


    --success:#198754;

    --danger:#dc3545;

    --warning:#ffc107;


    --shadow-small:
    0 5px 15px rgba(0,0,0,.08);


    --shadow-medium:
    0 10px 30px rgba(0,0,0,.15);


    --radius-small:10px;

    --radius-large:20px;

}



/* ==========================================================
   GLOBAL
========================================================== */


* {

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    margin:0;

    background:var(--background-light);

    color:var(--text-dark);

    font-family:'Poppins',sans-serif;

    font-size:16px;

}



a {

    text-decoration:none;

}



img {

    max-width:100%;

}





h1,
h2,
h3,
h4,
h5 {

    color:var(--markfield-navy);

    font-weight:600;

}





/* ==========================================================
   GUEST / PUBLIC PAGES
========================================================== */


.guest-page {

    background:var(--background-light);

}



.guest-navbar {

    background:var(--markfield-navy);

    border-bottom:5px solid var(--markfield-orange);

    padding:15px 0;

}



.guest-brand a {

    display:flex;

    align-items:center;

    gap:15px;

}



.guest-logo {

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--markfield-orange);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:30px;

}



.guest-brand strong {

    color:white;

    font-size:22px;

}



.guest-brand span {

    color:#d9e2ef;

    font-size:13px;

}





.guest-actions {

    display:flex;

    gap:20px;

    align-items:center;

}



.guest-actions a {

    color:white;

}



.guest-actions a:hover {

    color:var(--markfield-orange);

}



.guest-login-button {

    background:var(--markfield-orange);

    padding:12px 25px;

    border-radius:30px;

    color:white!important;

}






/* ==========================================================
   HOMEPAGE HERO
========================================================== */


.markfield-home-hero {

    background:var(--markfield-navy);

    color:white;

    padding:90px 0;

}



.markfield-home-hero h1 {

    color:white;

    font-size:3rem;

    font-weight:700;

}



.markfield-home-hero h2 {

    color:var(--markfield-orange);

}



.markfield-home-hero p {

    color:white;

    line-height:1.7;

    font-size:1.1rem;

}



.markfield-logo {

    width:220px;

    height:220px;

    background:var(--markfield-orange);

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:90px;

    margin:auto;

}






/* ==========================================================
   PORTAL CARDS
========================================================== */


.portal-card-link {

    display:block;

    height:100%;

    color:inherit;

}



.portal-card {

    background:white;

    padding:35px 25px;

    height:100%;

    min-height:330px;

    text-align:center;

    border-radius:20px;

    border-top:6px solid var(--markfield-orange);

    box-shadow:var(--shadow-medium);

    transition:.3s ease;

}



.portal-card:hover {

    transform:translateY(-10px);

}



.portal-icon {

    width:90px;

    height:90px;

    background:var(--markfield-navy);

    color:var(--markfield-orange);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 20px;

    font-size:45px;

}




.portal-button {

    background:var(--markfield-orange);

    color:white;

    padding:10px 25px;

    border-radius:30px;

    display:inline-block;

}





/* ==========================================================
   BUTTONS
========================================================== */


.btn-warning,
.btn-markfield {

    background:var(--markfield-orange);

    border-color:var(--markfield-orange);

    color:white;

}



.btn-warning:hover,
.btn-markfield:hover {

    background:#d97912;

    color:white;

}




.btn-primary {

    background:var(--markfield-navy);

    border-color:var(--markfield-navy);

}





/* ==========================================================
   FORMS
========================================================== */


.form-control {

    min-height:48px;

    border-radius:12px;

}



.form-control:focus {

    border-color:var(--markfield-orange);

    box-shadow:
    0 0 0 .2rem rgba(247,148,29,.25);

}



.form-label {

    color:var(--markfield-navy);

    font-weight:500;

}
/*
==========================================================
MARKFIELD HUB
ACCESSIBILITY CENTRE + RSS NEWS
PROFILE SUPPORT
Version 3.0
==========================================================
*/


/* ==========================================================
   ACCESSIBILITY DROPDOWN
========================================================== */


.accessibility-dropdown {

    position:relative;

}



.accessibility-toggle {


    background:var(--markfield-orange);

    color:white;

    border:none;

    padding:12px 20px;

    border-radius:30px;

    font-weight:600;

    cursor:pointer;


}



.accessibility-toggle:hover {


    background:white;

    color:var(--markfield-navy);


}



.accessibility-panel {


    background:white;

    border-radius:20px;

    padding:20px;

    margin-top:15px;

    box-shadow:var(--shadow-medium);

}



.accessibility-panel h5 {


    color:var(--markfield-navy);

}



.accessibility-panel button {


    width:100%;

    margin-bottom:10px;


}





/* ==========================================================
   SCREEN READER BUTTONS
========================================================== */


.reader-button {


    background:var(--markfield-navy);

    color:white;

    border:none;

    padding:12px;

    border-radius:12px;

    width:100%;

    margin-bottom:10px;


}



.reader-button:hover {


    background:var(--markfield-orange);


}




/* ==========================================================
   RSS DISABILITY NEWS PANEL
========================================================== */


.disability-news-box {


    background:white;

    border-radius:20px;

    padding:25px;

    box-shadow:var(--shadow-small);

    height:100%;


}



.disability-news-box h5 {


    color:var(--markfield-navy);

    border-bottom:3px solid var(--markfield-orange);

    padding-bottom:10px;


}



.news-feed-item {


    padding:15px 0;

    border-bottom:1px solid #eee;


}



.news-feed-item:last-child {


    border:none;


}



.news-feed-item strong {


    color:var(--markfield-navy);


}



.news-feed-item small {


    color:var(--markfield-orange);


}




/* ==========================================================
   PROFILE IMAGE UPLOAD
========================================================== */


.profile-upload-box {


    text-align:center;

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow-small);


}



.profile-image-preview {


    width:180px;

    height:180px;

    border-radius:50%;

    object-fit:cover;

    border:6px solid var(--markfield-orange);

    margin-bottom:20px;


}



.upload-photo-button {


    background:var(--markfield-orange);

    color:white;

    padding:12px 25px;

    border-radius:30px;

    cursor:pointer;

    display:inline-block;

}



.upload-photo-button:hover {


    background:var(--markfield-navy);


}





/* ==========================================================
   FOOTER ACCESSIBILITY AREA
========================================================== */


.guest-footer .accessibility-box {


    border-left:5px solid var(--markfield-orange);

}



.guest-footer .access-btn {


    font-size:.95rem;

}



.guest-footer .access-btn i {


    color:var(--markfield-orange);


}




/* ==========================================================
   HIGH CONTRAST IMPROVEMENTS
========================================================== */


.high-contrast .guest-footer,
.high-contrast .markfield-footer-accessible {


    background:#000!important;


}



.high-contrast .portal-card,
.high-contrast .panel,
.high-contrast .card,
.high-contrast .disability-news-box {


    background:#111!important;

    color:white!important;


}



.high-contrast h1,
.high-contrast h2,
.high-contrast h3,
.high-contrast h4,
.high-contrast h5 {


    color:#ffff00!important;


}





/* ==========================================================
   FOCUS SUPPORT
========================================================== */


button:focus,
a:focus,
input:focus {


    outline:4px solid var(--markfield-orange);

    outline-offset:3px;


}





/* ==========================================================
   ACCESSIBLE FONT SPACING
========================================================== */


.dyslexia-font {


    letter-spacing:.08em;

    word-spacing:.15em;

    line-height:2;


}





/* ==========================================================
   MOBILE ACCESSIBILITY
========================================================== */


@media(max-width:768px){


    .accessibility-panel {


        width:100%;


    }


    .profile-image-preview {


        width:130px;

        height:130px;


    }


}/*
/*
==========================================================
FOOTER DISPLAY FIX
==========================================================
*/

.guest-footer {

    display:block !important;

    visibility:visible !important;

    opacity:1 !important;

    position:relative;

    width:100%;

    background:var(--markfield-navy);

    color:white;

    border-top:5px solid var(--markfield-orange);

}
/*
==========================================================
MARKFIELD HUB DASHBOARD RESTORE
Version 3.1

Dashboard Cards
Statistics
Panels
Header
==========================================================
*/


/* ==========================================================
   DASHBOARD HEADER
========================================================== */


.dashboard-header {

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow-medium);

}



.logo-placeholder {

    width:120px;

    height:120px;

    background:white;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border:4px solid var(--markfield-orange);

}



.logo-placeholder img {

    max-height:100px;

    object-fit:contain;

}



.system-title {

    color:var(--markfield-navy);

    font-weight:700;

}



.clock {

    color:var(--markfield-orange);

    font-weight:700;

    font-size:1.8rem;

}





/* ==========================================================
   STATISTICS CARDS
========================================================== */


.stat-card {

    background:white;

    border-radius:20px;

    padding:30px 20px;

    text-align:center;

    box-shadow:var(--shadow-small);

    border-bottom:5px solid var(--markfield-orange);

    height:100%;

    transition:.3s ease;

}



.stat-card:hover {

    transform:translateY(-8px);

    box-shadow:var(--shadow-medium);

}



.stat-card i {

    font-size:45px;

    color:var(--markfield-orange);

    margin-bottom:15px;

}



.stat-value {

    font-size:40px;

    font-weight:700;

    color:var(--markfield-navy);

}





/* ==========================================================
   MAIN DASHBOARD MODULE CARDS
========================================================== */


.dashboard-card {

    display:block;

    background:white;

    border-radius:20px;

    overflow:hidden;

    height:100%;

    text-decoration:none;

    color:inherit;

    box-shadow:var(--shadow-small);

    transition:.3s ease;

}



.dashboard-card:hover {

    transform:translateY(-10px);

    box-shadow:var(--shadow-medium);

}



.card-top {

    background:var(--markfield-navy);

    padding:35px;

    text-align:center;

}



.card-top i {

    color:var(--markfield-orange);

    font-size:50px;

}



.dashboard-card .card-body {

    padding:25px;

}



.dashboard-card .card-title {

    color:var(--markfield-navy);

    font-weight:700;

}



.dashboard-card p {

    color:var(--text-muted);

}





/* ==========================================================
   DASHBOARD PANELS
========================================================== */


.panel {

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow-small);

    height:100%;

}



.panel h4 {

    color:var(--markfield-navy);

}



.panel hr {

    border-color:#eee;

}





/* ==========================================================
   ACTIVITY FEED
========================================================== */


.activity-item {

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px;

    border-bottom:1px solid #eeeeee;

    color:#444;

}



.activity-item:last-child {

    border-bottom:none;

}



.activity-item i {

    color:var(--markfield-orange);

    font-size:24px;

}





/* ==========================================================
   DASHBOARD MOBILE
========================================================== */


@media(max-width:768px){


.dashboard-header {

    text-align:center;

}



.logo-placeholder {

    margin:auto;

}



.dashboard-card {

    margin-bottom:15px;

}



}/*
==========================================================
MARKFIELD HUB
PLAY SCHEME DASHBOARD STYLING
Version 1.0

Cards
Planning
Quick Actions
Colour Coding
==========================================================
*/


/* ==========================================================
   PLAY SCHEME PAGE
========================================================== */


.playscheme-page {

    padding:20px 0;

}



.playscheme-container {

    width:100%;

}





/* ==========================================================
   WELCOME HEADER
========================================================== */


.playscheme-welcome {

    background:var(--markfield-navy);

    color:white;

    padding:35px;

    border-radius:25px;

    margin-bottom:30px;

    box-shadow:var(--shadow-medium);

}



.playscheme-welcome h1 {

    color:white;

    font-weight:700;

}



.playscheme-welcome h1 i {

    color:var(--markfield-orange);

}



.playscheme-welcome p {

    margin:0;

    color:#dce5f0;

    font-size:1.1rem;

}





/* ==========================================================
   PLAY SCHEME STAT CARDS
========================================================== */


.playscheme-grid {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin-bottom:40px;

}



.playscheme-card {

    padding:35px;

    border-radius:25px;

    color:white;

    text-align:center;

    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    box-shadow:var(--shadow-medium);

    transition:.3s ease;

}



.playscheme-card:hover {

    transform:translateY(-10px);

}



.playscheme-card h2 {

    color:white;

    font-size:1.5rem;

}



.playscheme-card span {

    font-size:55px;

    font-weight:700;

    margin:15px 0;

}



.playscheme-card p {

    margin:0;

    font-size:1rem;

}




/* ==========================================================
   PLAY SCHEME COLOUR SYSTEM
========================================================== */


/* Staff */

.playscheme-blue {

    background:

    linear-gradient(
    135deg,
    #1976d2,
    #0d47a1
    );

}



/* Children */

.playscheme-green {

    background:

    linear-gradient(
    135deg,
    #43a047,
    #1b5e20
    );

}



/* Teams */

.playscheme-orange {

    background:

    linear-gradient(
    135deg,
    #fb8c00,
    #e65100
    );

}



/* 1:1 Support */

.playscheme-purple {

    background:

    linear-gradient(
    135deg,
    #8e24aa,
    #4a148c
    );

}





/* ==========================================================
   QUICK ACTIONS
========================================================== */


.playscheme-actions {

    background:white;

    padding:30px;

    border-radius:25px;

    box-shadow:var(--shadow-small);

    margin-bottom:30px;

}



.playscheme-actions h2 {

    color:var(--markfield-navy);

    margin-bottom:25px;

}





/* ACTION BUTTONS */


.playscheme-btn {

    display:inline-block;

    background:var(--markfield-orange);

    color:white;

    padding:12px 25px;

    border-radius:30px;

    margin:5px;

    font-weight:600;

    transition:.3s ease;

}



.playscheme-btn:hover {

    background:var(--markfield-navy);

    color:white;

}





/* ==========================================================
   SIX WEEK PLANNING
========================================================== */


.planning-step {

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px;

    margin-bottom:15px;

    background:#f5f7fa;

    border-radius:15px;

    font-weight:500;

}



.planning-step span {

    width:45px;

    height:45px;

    border-radius:50%;

    background:var(--markfield-orange);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:700;

}





/* ==========================================================
   MOBILE
========================================================== */


@media(max-width:768px){


.playscheme-welcome {

    padding:25px;

}



.playscheme-card {

    min-height:180px;

}



.playscheme-actions {

    padding:20px;

}



.playscheme-btn {

    width:100%;

    text-align:center;

    margin:5px 0;

}



}/* ==========================================================
   MARKFIELD HUB SIDEBAR NAVIGATION
========================================================== */


.sidebar {

    position:fixed;

    left:0;

    top:0;

    width:260px;

    height:100vh;

    background:var(--markfield-navy);

    padding:25px 20px;

    overflow-y:auto;

    z-index:1000;

    box-shadow:4px 0 15px rgba(0,0,0,.15);

}



/* Logo Area */

.sidebar-logo {

    text-align:center;

    color:white;

    margin-bottom:20px;

}



.sidebar-logo h3 {

    color:white;

    font-size:24px;

    font-weight:700;

}



.sidebar-logo i {

    color:var(--markfield-orange);

    font-size:45px;

}




/* Divider */

.sidebar hr {

    border-color:rgba(255,255,255,.2);

    margin:20px 0;

}





/* Sidebar Links */

.sidebar a {


    display:flex;

    align-items:center;

    gap:15px;

    color:white;

    text-decoration:none;

    padding:13px 15px;

    margin-bottom:8px;

    border-radius:12px;

    font-weight:500;

    transition:.3s ease;


}



.sidebar a i {


    width:25px;

    text-align:center;

    font-size:20px;

    color:var(--markfield-orange);


}




.sidebar a:hover {


    background:var(--markfield-orange);

    color:white;

    transform:translateX(5px);


}



.sidebar a:hover i {


    color:white;


}





/* Active Link */

.sidebar a.active {


    background:var(--markfield-orange);

    color:white;


}



.sidebar a.active i {


    color:white;


}





/* ==========================================================
   DASHBOARD CONTENT OFFSET
========================================================== */


.main-content {


    margin-left:260px;

    padding:30px;

    min-height:100vh;


}





/* ==========================================================
   MARKFIELD MOBILE SIDEBAR SYSTEM
========================================================== */


.sidebar-overlay {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    z-index:1100;

}



/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */


.mobile-menu-btn {


    display:none;

    position:fixed;

    top:15px;

    left:15px;

    width:50px;

    height:50px;

    border-radius:50%;

    border:none;

    background:var(--markfield-orange);

    color:white;

    font-size:24px;

    align-items:center;

    justify-content:center;

    z-index:2000;


}






/* ==========================================================
   TABLET AND MOBILE
========================================================== */


@media(max-width:992px){



.mobile-menu-btn {

    display:flex;

}



.sidebar {


    transform:translateX(-100%);

    transition:.3s ease;

    width:260px;

    z-index:1500;


}




.sidebar.active {


    transform:translateX(0);


}




.sidebar-overlay.active {


    display:block;


}





.main-content {


    margin-left:0;

    padding:20px;


}




.page-header {


    margin-top:70px;

    flex-direction:column;

    gap:20px;


}



.header-user {


    text-align:center!important;


}





.dashboard-card {


    margin-bottom:20px;


}



}







/* ==========================================================
   SMALL PHONES
========================================================== */


@media(max-width:576px){



.sidebar {


    width:85%;


}




.stat-card {


    margin-bottom:15px;


}




.dashboard-card {


    border-radius:15px;


}


}/*
==========================================================
MARKFIELD HUB
HEADER + FOOTER SYSTEM STYLES
Version 3.0

Includes:
- Main Header
- Sidebar Support
- Mobile Menu
- Footer
- Accessibility Centre
- News Panel

==========================================================
*/



/* ==========================================================
   SYSTEM HEADER
========================================================== */


.page-header {


    background:var(--markfield-navy);

    color:white;

    padding:25px 30px;

    border-radius:20px;

    box-shadow:var(--shadow-medium);

    margin-bottom:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;


}



.page-header h1 {


    color:white;

    margin:0;

    font-size:1.8rem;


}



.page-header p {


    color:#dbe4ef!important;

}



.page-header i {


    color:var(--markfield-orange);

}



.brand-logo {


    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--markfield-orange);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;


}



.header-user {


    color:white;

    font-size:1rem;


}



.header-user i {


    color:var(--markfield-orange);

}





/* ==========================================================
   SIDEBAR
========================================================== */


.sidebar {


    position:fixed;

    left:0;

    top:0;

    height:100vh;

    width:260px;

    background:var(--markfield-navy);

    padding:25px;

    z-index:1500;

    overflow-y:auto;


}



.sidebar-logo {


    text-align:center;

    color:white;

}



.sidebar-logo i {


    color:var(--markfield-orange);

    font-size:40px;


}



.sidebar a {


    display:flex;

    align-items:center;

    gap:12px;

    color:white;

    padding:12px 15px;

    border-radius:12px;

    margin-bottom:8px;

    transition:.3s;


}



.sidebar a i {


    color:var(--markfield-orange);


}



.sidebar a:hover {


    background:var(--markfield-orange);

    color:white;


}



.sidebar a:hover i {


    color:white;


}





/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */


.mobile-menu-btn {


    display:none;

    position:fixed;

    top:15px;

    left:15px;

    width:50px;

    height:50px;

    border-radius:50%;

    border:none;

    background:var(--markfield-orange);

    color:white;

    font-size:25px;

    z-index:2000;


}





.sidebar-overlay {


    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    z-index:1400;


}




.sidebar-overlay.active {


    display:block;


}







/* ==========================================================
   FOOTER
========================================================== */


.markfield-footer-accessible {


    background:var(--markfield-navy);

    color:white;

    border-top:6px solid var(--markfield-orange);

    padding:50px 0 30px;

    margin-top:50px;


}




.footer-title {


    color:var(--markfield-orange);

    font-weight:700;

    margin-bottom:20px;


}




.markfield-footer-accessible p {


    color:#dbe4ef;

    line-height:1.7;


}



.footer-version {


    color:#cbd5e1;

    font-size:.9rem;


}



.footer-divider {


    border-color:rgba(255,255,255,.3);

    margin:35px 0;


}



.footer-small {


    color:#dbe4ef;

    font-size:.9rem;


}






/* ==========================================================
   ACCESSIBILITY BUTTONS
========================================================== */


.accessibility-buttons {


    display:flex;

    flex-wrap:wrap;

    gap:10px;


}



.access-btn {


    background:white;

    color:var(--markfield-navy);

    border:none;

    padding:10px 15px;

    border-radius:25px;

    font-weight:600;

    transition:.3s;


}



.access-btn i {


    margin-right:6px;


}



.access-btn:hover {


    background:var(--markfield-orange);

    color:white;


}





/* ==========================================================
   ACCESSIBILITY NEWS
========================================================== */


.access-news {


    background:white;

    color:var(--text-dark);

    border-radius:15px;

    padding:20px;


}



.news-item {


    padding:15px 0;

    border-bottom:1px solid #ddd;


}



.news-item:last-child {


    border-bottom:none;


}



.news-item strong {


    color:var(--markfield-navy);


}



.news-item p {


    color:#555;

    margin-bottom:0;


}





/* ==========================================================
   MOBILE RESPONSIVE
========================================================== */


@media(max-width:992px){



.mobile-menu-btn {


    display:flex;

    align-items:center;

    justify-content:center;


}



.sidebar {


    transform:translateX(-100%);

    transition:.3s ease;


}



.sidebar.active {


    transform:translateX(0);


}



.main-content {


    margin-left:0;

    padding:20px;


}



.page-header {


    margin-top:70px;

    flex-direction:column;

    gap:20px;


}



.header-user {


    text-align:center;


}


}





@media(min-width:993px){


.main-content {


    margin-left:260px;

    padding:30px;


}


}






@media(max-width:576px){



.sidebar {


    width:85%;


}



.accessibility-buttons {


    flex-direction:column;


}



.access-btn {


    width:100%;


}



.page-header h1 {


    font-size:1.4rem;


}


}/* ==========================================================
   COLLAPSIBLE DESKTOP SIDEBAR
========================================================== */


.sidebar {

    width:260px;
    transition:.3s ease;

}



.sidebar.collapsed {

    width:80px;

}



.sidebar.collapsed span {

    display:none;

}



.sidebar.collapsed a {

    justify-content:center;

}



.sidebar.collapsed .sidebar-logo {

    justify-content:center;

}



.sidebar-collapse-btn {


    background:none;

    border:none;

    color:white;

    font-size:20px;

}



.main-content {


    margin-left:260px;

    transition:.3s ease;


}



body.sidebar-collapsed .main-content {


    margin-left:80px;


}



/* ==========================================================
   MOBILE
========================================================== */


@media(max-width:992px){


.sidebar {


    transform:translateX(-100%);

}



.sidebar.active {


    transform:translateX(0);

}



.sidebar-collapse-btn {


    display:none;

}



.main-content,
body.sidebar-collapsed .main-content {


    margin-left:0;


}



.sidebar-overlay {


    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.5);

    z-index:1100;


}



.sidebar-overlay.active {


    display:block;


}



}/* ==========================================================
   SYSTEM FOOTER ENHANCEMENTS
========================================================== */


.system-footer {

    background:var(--markfield-navy);

    color:white;

    border-top:6px solid var(--markfield-orange);

    padding:60px 30px 30px;

    margin-top:50px;

}



.system-footer .footer-brand {

    display:flex;

    flex-direction:column;

    justify-content:center;

}



.system-footer .footer-title {

    color:var(--markfield-orange);

    font-weight:700;

}



.system-footer p {

    color:#dbe4ef;

    line-height:1.7;

}



.system-footer .footer-links {

    list-style:none;

    padding:0;

}



.system-footer .footer-links li {

    margin-bottom:12px;

}



.system-footer .footer-links a {

    color:white;

}



.system-footer .footer-links a:hover {

    color:var(--markfield-orange);

}



.system-footer .accessibility-box {

    background:rgba(255,255,255,.08);

    padding:20px;

    border-radius:15px;

}



@media(max-width:768px){

.system-footer {

    text-align:center;

}

}