/* Custom CSS for Learn4 theme - Hide sidebar when not authenticated */

/* Adjust layout when sidebar is hidden */
.no-sidebar .learn-content {
    margin-left: 0 !important;
    max-width: 100% !important;
}

.no-sidebar #page-wrapper {
    padding-left: 0 !important;
}

/* Hide mobile toggle button when not authenticated */
.no-sidebar .off-canvas-toggle {
    display: none !important;
}

/* Ensure full width content when no sidebar */
.no-sidebar .learn-content .container {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

/* Improved login form styling when no sidebar */
.no-sidebar .login-form,
.no-sidebar .forgot-form,
.no-sidebar .register-form {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    background: #fff;
}

/* Fix login form button layout */
.no-sidebar .login-form .form-actions,
.no-sidebar .forgot-form .form-actions,
.no-sidebar .register-form .form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Ensure buttons stay side by side */
.no-sidebar .login-form .btn,
.no-sidebar .forgot-form .btn,
.no-sidebar .register-form .btn {
    flex: 0 0 auto;
    min-width: 100px;
}

/* Remember me checkbox styling */
.no-sidebar .login-form .form-field.remember,
.no-sidebar .forgot-form .form-field.remember,
.no-sidebar .register-form .form-field.remember {
    flex: 1 1 auto;
    margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .no-sidebar .learn-content .container {
        padding: 0 1rem !important;
    }
    
    .no-sidebar .login-form,
    .no-sidebar .forgot-form,
    .no-sidebar .register-form {
        margin: 1rem auto;
        padding: 1.5rem;
    }
    
    /* Stack buttons on mobile if needed */
    .no-sidebar .login-form .form-actions,
    .no-sidebar .forgot-form .form-actions,
    .no-sidebar .register-form .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .no-sidebar .login-form .btn,
    .no-sidebar .forgot-form .btn,
    .no-sidebar .register-form .btn {
        width: 100%;
        margin-bottom: 10px;
    }
}


/* Remove numbers from sidebar menu items - targets the <b> tags */
.learn-sidebar .topics li a span b {
    display: none !important;
}

/* Alternative selector in case the above doesn't work */
.learn-sidebar a span b {
    display: none !important;
}


/* Remove search box from sidebar */
.learn-sidebar .searchbox-container {
    display: none !important;
}

/* Remove "Clear history" button */
.learn-sidebar a[data-clear-history-toggle] {
    display: none !important;
}

/* Remove the horizontal rule above clear history */
.learn-sidebar hr {
    display: none !important;
}

/* Hide checkmark squares - the correct class */
.fa-check-square,
.fa-check-square.read-icon,
i.fa.fa-check-square.read-icon {
    display: none !important;
}

/* Hide all variations of checkmarks */
.fa-check,
.fa-check-square,
.read-icon {
    display: none !important;
}

/* Nuclear option - hide checkmarks with maximum specificity */
i[class*="fa-check"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
}

/* Target the specific combination you found */
i.fa.fa-check-square.read-icon,
.fa.fa-check-square.read-icon,
[class*="fa-check-square"],
[class*="read-icon"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* Global form field styling for registration and other forms */

.grav-form input[type="text"],
.grav-form input[type="email"], 
.grav-form input[type="password"],
.grav-form select,
.grav-form textarea,
/* Also target generic form classes that Login plugin might use */
form input[type="text"],
form input[type="email"], 
form input[type="password"],
form select,
form textarea {
    max-width: 300px !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Ensure form containers don't stretch too wide */

.grav-form,
.login-form,
form {
    max-width: 600px;
    margin: 0 auto;
}

/* Style the form field containers */

.form-field,
.grav-form .form-field {
    margin-bottom: 1rem;
}

/* Make labels look consistent */

.form-field label,
.grav-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}



/* Mobile-Safe Sticky Footer for Copyright Notice */
.Site {
  display: flex;
  min-height: calc(100vh - 80px); /* Leave space for mobile navigation */
  flex-direction: column;
}
.Site-content {
  flex: 1;
}

/* Only use full height on desktop */
@media (min-width: 769px) {
  .Site {
    min-height: 100vh;
  }
}

/* Force dark navigation area */
:root {
  color-scheme: light dark;
}

html {
  color-scheme: light;
}

@media (max-width: 768px) {
  html {
    color-scheme: dark light;
  }
}

.mobile-nav-icon {
    color: #000000; /* Sets the icon color to black */
}

.bottom-nav {
    z-index: 9999;
    /* You can also try adding 'position: fixed;' here if it's not already */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}



/* Center YouTube Embedded Videos */

.video-container {
    text-align: center;
    margin: 20px 0;
}

.video-container iframe {
    display: block;
    margin: 0 auto;
}


/* Faint background image for login page */
body[data-url="/login"]::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/login-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
}



<script>
// Wait for page to load, then remove all checkmarks
window.addEventListener('load', function() {
    // Remove all checkmark elements
    document.querySelectorAll('.fa-check-square, .read-icon, i.fa.fa-check-square').forEach(function(element) {
        element.remove();
    });
});




</script>