/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Base Styles */
:root {
--primary-color: #001f5c;
--primary-color-dark: #001238;
--primary-color-light: #001f5c;
--secondary-color: #feffff;
--text-color: #333;
--text-color-light: #666;
--text-color-dark: #000;
--white: #fff;
--gray-light: #e8e8f094;
--gray-medium: #a6acb3;
--border-radius: 10px;
--box-shadow: 0 2px 5px rgb(1 6 33 / 77%);
--box-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
--transition-fast: 0.2s;
--transition-medium: 0.3s;
--font-family: 'Poppins', sans-serif;
/* --accent-color: #f60707; */
--accent-light: #ff3b3b;
--alert-bg-color: #c41e3a;
--alert-border-color: #e8334a;
--alert-shadow-color: rgba(196, 30, 58, 0.4);
}
/* Dark mode variables */
.dark-mode {
--secondary-color: #121212;
--text-color: #e0e0e0;
--text-color-light: #999;
--text-color-dark: #fff;
--white: #1e1e1e;
--gray-light: #2a2a2a;
--gray-medium: #444;
--box-shadow: 0 2px 8px rgba(0,0,0,0.3);
--box-shadow-hover: 0 4px 12px rgba(0,0,0,0.4);
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 62.5%; /* 10px = 1rem */
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
font-size: 1.6rem;
margin: 0;
padding: 0;
background-color: var(--secondary-color);
display: flex;
flex-direction: column;
min-height: 100vh;
color: var(--text-color);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
/* display: block; */
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--primary-color-light);
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}

.article-content p + p { margin-top: 1rem; }

/* Skip to content link for accessibility */
.skip-to-content {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-to-content:focus {
position: fixed;
left: 0;
top: 0;
width: auto;
height: auto;
padding: 1rem;
background: var(--primary-color);
color: var(--white);
z-index: 9999;
overflow: auto;
}
/* Header Styles */
.site-header {
background: var(--primary-color);
padding: 1rem;
color: var(--white);
box-shadow: var(--box-shadow);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 1001;
position: relative;
border-bottom: 3px solid var(--white);
}
.logo-container {
display: flex;
align-items: center;
gap: 1rem;
}
.logo-container img {
width: 48px;
height: 48px;
margin-right: 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 31, 92, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: rgb(0, 0, 0);
padding: 1px;
}

/* Hide logo image visually but keep it for SEO */
.logo-img {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}

.logo-container img:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 31, 92, 0.4);
}
.logo-container a {
color: var(--white);
text-decoration: none;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
transition: color 0.3s ease;
}
.logo-container a:hover {
color: #e6e6e6;
}

/* Site name styling */
.site-name {
font-size: 1.8rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
margin-left: 0.5rem;
font-family: 'Poppins', sans-serif;
}

.nav-links {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-evenly;
flex: 1;
padding: 0 1rem;
}

/* Professional navigation link styling */
.nav-link {
color: var(--white);
font-size: 1.1rem;
text-decoration: none;
padding: 0.8rem 1rem;
border-radius: 0;
transition: all var(--transition-medium);
font-weight: 500;
box-shadow: none;
background: var(--primary-color);
display: flex;
align-items: center;
gap: 0.6rem;
font-family: 'Poppins', sans-serif;
border: none;
cursor: pointer;
white-space: nowrap;
flex: 1;
justify-content: center;
text-align: center;
}

.nav-link:hover, .nav-link:focus {
color: var(--primary-color);
background: transparent;
outline: none;
transform: scale(1.05);
box-shadow: none;
position: relative;
}

.nav-link:active, .nav-link.active {
color: var(--white);
background: var(--primary-color);
transform: scale(1.05);
}

.nav-link i {
font-size: 1.1rem;
}

/* Show icons in navigation before text */
.nav-link i {
display: inline;
margin-right: 0.5rem;
font-size: 1.4rem;
}

.nav-text {
font-weight: 500;
}

/* Legacy styles - cleaning up */
.nav-links a i {
margin-right: 0.5rem;
}

/* Logo text - hidden visually but visible for SEO */
.logo-text {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}

/* Hidden navigation items (for SEO) */
.nav-links a.hidden-nav {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}

/* Legacy button styling (keeping for compatibility with icon buttons) */
.nav-btn {
background: var(--primary-color);
color: var(--white);
border: none;
padding: 0.8rem 1rem;
border-radius: 0;
cursor: pointer;
transition: all var(--transition-medium);
font-size: 1.1rem;
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: none;
}

.nav-btn:hover {
transform: scale(1.1);
color: var(--accent-color);
background-color: var(--primary-color);
}

.nav-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}

.nav-btn:disabled:hover {
transform: none;
background-color: var(--primary-color);
}

/* User admin link with name */
#headerUserAdmin {
width: auto;
padding: 0.6rem 1rem;
border-radius: 2rem;
gap: 0.5rem;
min-width: 40px;
background: var(--primary-color);
color: var(--white);
box-shadow: var(--box-shadow);
}

#headerUserAdmin:hover {
color: var(--accent-color);
background-color: var(--primary-color);
}

#headerUserAdmin:hover .nav-text,
#headerUserAdmin:hover .user-name {
color: var(--white);
}

.user-name, 
#headerUserAdmin .nav-text {
font-size: 1.1rem;
font-weight: 500;
white-space: nowrap;
color: var(--white);
}

/* Legacy support - keeping old classes for compatibility */
.dark-mode-toggle {
background: var(--primary-color);
color: var(--white);
border: none;
padding: 0.6rem;
border-radius: 50%;
cursor: pointer;
transition: all var(--transition-medium);
font-size: 1.2rem;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--box-shadow);
}

.dark-mode-toggle:hover {
transform: scale(1.1);
color: var(--accent-color);
background-color: var(--primary-color);
}

.auth-btn {
background: var(--white);
color: var(--primary-color);
border: none;
padding: 0.6rem;
border-radius: 50%;
cursor: pointer;
transition: all var(--transition-medium);
font-size: 1.2rem;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.5rem;
}

.auth-btn:hover {
transform: scale(1.1);
}

/* Auth button loading state */
.auth-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}

.auth-btn:disabled:hover {
transform: none;
}
/* Mobile menu */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
color: var(--white);
font-size: 1.8rem;
cursor: pointer;
padding: 0.5rem;
}
.mobile-menu-toggle:focus {
outline: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 0.4rem;
}
/* Main Content Layout */
.main-container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
display: flex;
gap: 3rem;
padding: 2rem;
flex: 1;
}
.content-area {
flex: 3;
}
.content-area h1 {
color: var(--primary-color);
font-size: 3.2rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
.content-area h2 {
color: var(--text-color);
font-size: 2.8rem;
font-weight: 600;
margin-bottom: 1.5rem;
line-height: 1.3;
}


/* Forum specific styles */
.forum-container {
background: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
margin-bottom: 2rem;
}
.forum-header {
/* Hidden visually but kept for SEO */
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.forum-header h1 {
font-size: 2.4rem;
margin: 0;
color: #ffffff;
}


/* Make forum description text darker blue and bigger */
.forum-description {
margin-top: 0.8rem;
font-size: 21px;
opacity: 1;
color: #ffffff !important;
font-weight: bold;
}

/* Forum Categories */
.category {
border-bottom: 1px solid var(--gray-light);
margin-bottom: 2rem;
}
.category:last-child {
border-bottom: none;
margin-bottom: 0;
}
.category-header {
padding: 1rem 1.5rem;
background-color: var(--primary-color);
font-weight: 600;
color: white;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 0.5rem;
transition: background-color 0.3s ease;
user-select: none;
}
.category-header:hover {
background-color: var(--white);
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.category-header:hover h2 {
color: var(--primary-color);
}
.category-header:hover i {
color: var(--primary-color);
}
.category-header h2 {
color: white;
font-size: 1.8rem;
margin: 0;
}
.category-header i {
color: white;
}
.forum-section {
border-bottom: 1px solid var(--gray-light);
transition: background-color var(--transition-fast);
}
.forum-section:last-child {
border-bottom: none;
}
/* Create embossed boxes for forum subjects */
.forum-section-link {
display: flex;
padding: 1.5rem 2rem;
text-decoration: none;
color: inherit;
gap: 2rem;
width: 100%;
background: var(--white);
border-radius: 8px;
margin: 1rem 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 
inset 0 1px 0 rgba(255,255,255,0.7),
inset 0 -1px 0 rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.05);
}
.forum-section-link:hover {
background-color: var(--gray-light);
text-decoration: none;
color: inherit;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0,0,0,0.1), 
inset 0 1px 0 rgba(255,255,255,0.7),
inset 0 -1px 0 rgba(0,0,0,0.05);
}
.forum-icon {
font-size: 2.2rem;
color: var(--primary-color);
width: 4rem;
text-align: center;
}
.forum-content {
flex: 1;
}
.forum-title {
font-weight: 600;
font-size: 1.6rem;
margin-bottom: 0.5rem;
color: var(--primary-color);
}
.forum-description {
color: var(--text-color-light);
margin-bottom: 0.5rem;
font-size: 1.4rem;
}
.forum-stats {
display: flex;
gap: 2rem;
margin-top: 1rem;
font-size: 1.2rem;
color: var(--text-color-light);
}
.forum-stat {
display: flex;
align-items: center;
gap: 0.5rem;
}
.forum-latest {
width: 20rem;
text-align: right;
font-size: 1.2rem;
color: var(--text-color-light);
}
.latest-time {
font-style: italic;
margin-top: 0.3rem;
}
/* Auth Modal */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: var(--white);
margin: 10% auto;
padding: 2rem;
border-radius: var(--border-radius);
max-width: 50rem;
position: relative;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
animation: modalFadeIn 0.3s;
}
@keyframes modalFadeIn {
from {opacity: 0; transform: translateY(-20px);}
to {opacity: 1; transform: translateY(0);}
}
.close-btn {
position: absolute;
top: 1.5rem;
right: 2rem;
color: var(--text-color-light);
font-size: 2.2rem;
font-weight: bold;
cursor: pointer;
transition: color var(--transition-fast);
}
.close-btn:hover {
color: var(--text-color);
}
.modal-header {
margin-bottom: 1.5rem;
}
.modal-title {
color: var(--primary-color);
font-size: 2rem;
margin: 0;
}
.form-tabs {
display: flex;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--gray-light);
}
.form-tab {
padding: 0.8rem 1.5rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all var(--transition-fast);
}
.form-tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
font-weight: 500;
}
.form-control {
width: 100%;
padding: 1rem;
margin-bottom: 1.5rem;
border: 1px solid var(--gray-medium);
border-radius: 0.4rem;
font-family: inherit;
background-color: var(--white);
color: var(--text-color);
}
.form-control:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 2px rgba(0, 62, 145, 0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-color);
}
.auth-btn {
width: 100%;
background-color: var(--primary-color);
color: var(--white);
border: none;
padding: 1rem;
border-radius: 0.4rem;
cursor: pointer;
font-weight: 500;
transition: background-color var(--transition-fast);
}
.auth-btn:hover {
background-color: var(--primary-color-dark);
}

/* Google Authentication Styles */
.google-auth-section {
margin-bottom: 1.5rem;
}

.google-auth-btn {
width: 100%;
background-color: #fff;
color: #333;
border: 2px solid #ddd;
padding: 1rem;
border-radius: 0.4rem;
cursor: pointer;
font-weight: 500;
transition: all var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
font-size: 1.4rem;
}

.google-auth-btn:hover {
background-color: #f8f8f8;
border-color: #ccc;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.google-auth-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}

.google-auth-btn i {
color: #001f5c;
font-size: 1.6rem;
}

.auth-divider {
display: flex;
align-items: center;
margin: 1.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: #ddd;
}

.auth-divider span {
padding: 0 1rem;
color: var(--text-color-light);
font-size: 1.2rem;
}

.form-footer {
text-align: center;
margin-top: 1.5rem;
font-size: 1.2rem;
color: var(--text-color-light);
}
.form-footer a {
color: var(--primary-color);
}
.forgot-password {
text-align: right;
font-size: 1.2rem;
margin-top: -1rem;
margin-bottom: 1.5rem;
}
.forgot-password a {
color: var(--primary-color);
}
.auth-error {
color: #dc3545;
background-color: #f8d7da;
padding: 1rem;
border-radius: 0.4rem;
margin-bottom: 1.5rem;
display: none;
}
/* New Thread Modal */
.new-thread-btn {
background-color: var(--primary-color);
color: var(--white);
border: none;
padding: 0.8rem 1.5rem;
border-radius: 0.4rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
cursor: pointer;
margin-bottom: 2rem;
}
.new-thread-btn:hover {
background-color: var(--primary-color-dark);
}
.thread-form {
margin-top: 1rem;
}
/* Sidebar Content */
.sidebar-content {
flex: 1;
}
/* Category navigation */
.categories-widget {
background: var(--white);
border-radius: var(--border-radius);
padding: 2rem;
margin-bottom: 3rem;
box-shadow: var(--box-shadow);
}
.categories-list {
list-style: none;
padding: 0;
margin: 0;
}
.category-item {
margin-bottom: 1rem;
}
.category-item a {
display: flex;
align-items: center;
color: var(--text-color);
text-decoration: none;
padding: 0.8rem 1rem;
border-radius: 0.4rem;
transition: background-color var(--transition-medium);
}
.category-item a:hover, .category-item a:focus {
background-color: var(--gray-light);
outline: none;
}
.category-item i {
margin-right: 1rem;
width: 2rem;
text-align: center;
color: var(--primary-color);
}
/* Widget Styles */
.widget {
background: var(--white);
border-radius: var(--border-radius);
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--box-shadow);
}
.widget-title {
color: var(--primary-color);
font-size: 2rem;
font-weight: 600;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--gray-light);
}
/* User widget */
.user-widget {
background: var(--primary-color);
color: var(--white);
border-radius: var(--border-radius);
padding: 2rem;
margin-bottom: 3rem;
box-shadow: var(--box-shadow);
}
.user-widget-title {
color: var(--white);
font-size: 2rem;
font-weight: 600;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.user-content {
display: flex;
flex-direction: column;
align-items: center;
}
.user-avatar-lg {
width: 6rem;
height: 6rem;
border-radius: 50%;
background-color: var(--white);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-weight: 600;
font-size: 2.6rem;
margin-bottom: 1rem;
}
.user-name-lg {
color: var(--white);
font-weight: 500;
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.login-btn-lg {
background: var(--white);
color: var(--primary-color);
border: none;
padding: 1rem 2rem;
border-radius: 0.4rem;
font-weight: 500;
cursor: pointer;
transition: background-color var(--transition-fast);
font-size: 1.4rem;
width: 100%;
text-align: center;
}
.login-btn-lg:hover {
background-color: var(--gray-light);
}
.logout-btn-lg {
background: rgba(255, 255, 255, 0.2);
color: var(--white);
border: none;
padding: 1rem 2rem;
border-radius: 0.4rem;
cursor: pointer;
transition: background-color var(--transition-fast);
font-size: 1.4rem;
margin-top: 1rem;
width: 100%;
text-align: center;
}
.logout-btn-lg:hover {
background-color: rgba(255, 255, 255, 0.3);
}
/* Search Widget */
.search-form {
display: flex;
flex-direction: column;
}
.search-form input {
width: 100%;
padding: 1rem;
border: 1px solid var(--gray-medium);
border-radius: 0.4rem;
margin-bottom: 1rem;
transition: border-color var(--transition-fast);
background-color: var(--white);
color: var(--text-color);
}
.search-form input:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 2px rgba(0, 62, 145, 0.1);
}
.search-form button {
width: 100%;
padding: 1rem;
background: var(--primary-color);
color: var(--white);
border: none;
border-radius: 0.4rem;
cursor: pointer;
font-weight: 500;
transition: background-color var(--transition-fast);
}
.search-form button:hover, .search-form button:focus {
background-color: var(--primary-color-dark);
outline: none;
}
/* Recent Posts */
.recent-post {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
padding: 1rem;
border: 1px solid var(--gray-light);
border-radius: 0.4rem;
background: var(--white);
transition: background-color var(--transition-fast);
}
.recent-post:hover, .recent-post:focus-within {
background: var(--gray-light);
}
.recent-post-content {
width: 100%;
}
.recent-post-content h3 {
font-size: 1.4rem;
margin: 0;
line-height: 1.4;
}
.recent-post-content a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: color var(--transition-fast);
}
.recent-post-content a:hover, .recent-post-content a:focus {
color: var(--primary-color-light);
text-decoration: underline;
outline: none;
}
/* Popular Tags Widget */
.tags-widget {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.tag-item {
background-color: var(--gray-light);
padding: 0.5rem 1.2rem;
border-radius: 1.5rem;
font-size: 1.3rem;
transition: background-color var(--transition-fast);
cursor: pointer;
display: inline-flex;
align-items: center;
}
.tag-item:hover, .tag-item:focus {
background-color: var(--gray-medium);
outline: none;
}
.tag-count {
background-color: var(--primary-color);
color: var(--white);
padding: 0.2rem 0.6rem;
border-radius: 1rem;
font-size: 1rem;
margin-left: 0.5rem;
display: inline-block;
}
/* Newsletter Widget */
.newsletter-form {
display: flex;
flex-direction: column;
}
.newsletter-form input {
width: 100%;
padding: 1rem;
border: 1px solid var(--gray-medium);
border-radius: 0.4rem;
margin-bottom: 1rem;
transition: border-color var(--transition-fast);
background-color: var(--white);
color: var(--text-color);
}
.newsletter-form input:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 2px rgba(0, 62, 145, 0.1);
}
.newsletter-form button {
width: 100%;
padding: 1rem;
background: var(--primary-color);
color: var(--white);
border: none;
border-radius: 0.4rem;
cursor: pointer;
font-weight: 500;
transition: background-color var(--transition-fast);
}
.newsletter-form button:hover, .newsletter-form button:focus {
background-color: var(--primary-color-dark);
outline: none;
}
/* Footer */
.site-footer {
background: #001f5c !important;
background-color: #001f5c !important;
color: var(--white) !important;
padding: 4rem 2rem 2rem;
margin-top: 2rem;
}

/* Additional footer specificity */
body .site-footer,
html .site-footer,
.site-footer.site-footer {
background: #001f5c !important;
background-color: #001f5c !important;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
.footer-section h2 {
color: var(--white);
font-size: 1.8rem;
margin-bottom: 2rem;
position: relative;
padding-bottom: 1rem;
}
.footer-section h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 5rem;
height: 2px;
background-color: var(--white);
}
.footer-section p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1.5rem;
font-size: 1.4rem;
line-height: 1.6;
}
/* Force social media icons to be visible in both light and dark modes */
.footer-social a {
color: var(--white) !important;
background-color: var(--primary-color) !important;
}
.footer-social a:hover, .footer-social a:focus {
opacity: 0.8 !important;
background-color: var(--primary-color-dark) !important;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 1rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color var(--transition-fast);
font-size: 1.4rem;
display: inline-block;
}
.footer-links a:hover, .footer-links a:focus {
color: var(--white);
outline: none;
}
.footer-social {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
}
.footer-social a {
color: var(--white);
font-size: 1.8rem;
transition: opacity var(--transition-fast);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 3.6rem;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.footer-social a:hover, .footer-social a:focus {
opacity: 0.8;
background-color: rgba(255, 255, 255, 0.2);
outline: none;
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p {
margin: 0;
color: rgba(255, 255, 255, 0.7);
font-size: 1.4rem;
}
.footer-bottom a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color var(--transition-fast);
}
.footer-bottom a:hover, .footer-bottom a:focus {
color: var(--white);
text-decoration: underline;
outline: none;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
margin: 3rem 0;
flex-wrap: wrap;
gap: 0.5rem;
}
.pagination-btn {
padding: 0.8rem 1.5rem;
background-color: var(--primary-color);
color: var(--white);
border: 2px solid var(--primary-color-dark);
margin: 0 0.5rem;
cursor: pointer;
border-radius: 0.4rem;
transition: all var(--transition-fast);
font-size: 1.4rem;
}
.pagination-btn.active {
background-color: var(--primary-color);
color: var(--white);
border-color: var(--primary-color-dark);
}
.pagination-btn:hover, .pagination-btn:focus {
background-color: var(--primary-color-dark);
border-color: var(--primary-color-dark);
outline: none;
}
.pagination-btn.active:hover, .pagination-btn.active:focus {
background-color: var(--primary-color-dark);
}
/* Loading indicator */
.loading {
text-align: center;
padding: 2rem;
}
.loading-spinner {
display: inline-block;
width: 4rem;
height: 4rem;
border: 0.4rem solid var(--gray-light);
border-top: 0.4rem solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Emergency numbers widget */
.emergency-widget {
background-color: var(--accent-light);
color: var(--white);
border-radius: var(--border-radius);
padding: 1.5rem;
margin-bottom: 3rem;
box-shadow: var(--box-shadow);
}
.emergency-widget h2 {
color: var(--white);
font-size: 1.8rem;
margin-bottom: 1rem;
font-weight: 600;
}
.emergency-numbers {
list-style: none;
padding: 0;
margin: 0;
}
.emergency-numbers li {
display: flex;
align-items: center;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.emergency-numbers li i {
margin-right: 1rem;
font-size: 1.8rem;
}
.emergency-numbers a {
color: var(--white);
text-decoration: none;
font-weight: 500;
}
.emergency-numbers a:hover,
.emergency-numbers a:focus {
text-decoration: underline;
}
/* Breadcrumbs */
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 2rem;
font-size: 1.4rem;
color: var(--text-color-light);
}
.breadcrumbs a {
color: var(--primary-color);
text-decoration: none;
}
.breadcrumbs a:hover, .breadcrumbs a:focus {
text-decoration: underline;
outline: none;
}
.breadcrumbs .separator {
margin: 0 0.5rem;
}
.breadcrumbs .current {
font-weight: 500;
color: var(--text-color);
}
/* Accessibility Enhancements */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
:focus {
outline: 3px solid rgba(0, 62, 145, 0.3);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 3px solid rgba(0, 62, 145, 0.5);
outline-offset: 2px;
}
/* Dark mode text color adjustments */
.dark-mode .site-header a,
.dark-mode .nav-links a,
.dark-mode .logo-container a {
color: white !important;
font-weight: bold !important;
}
/* Header navigation items */
.dark-mode #navLinks a,
.dark-mode .nav-links a {
color: white !important;
font-weight: bold !important;
}
/* Search text */
.dark-mode .search-form button,
.dark-mode .widget-title:contains("Zoeken") {
color: white !important;
font-weight: bold !important;
}
/* Forum titles */
.dark-mode .forum-title,
.dark-mode .content-area h1 {
color: white !important;
font-weight: bold !important;
}
/* Category titles */
.dark-mode .widget-title:contains("Categorieën"),
.dark-mode .category-item a {
color: white !important;
font-weight: bold !important;
}
/* Recent posts text */
.dark-mode .recent-post-content a,
.dark-mode .recent-post-content h3 {
color: white !important;
}
/* Footer section titles */
.dark-mode .footer-section h2 {
color: white !important;
font-weight: bold !important;
}
/* Footer navigation links - make them more visible */
.dark-mode .footer-links a {
color: rgba(255, 255, 255, 0.9) !important;
}
/* Dark mode specific override */
.dark-mode .forum-section-link:hover {
background-color: #2a2a2a !important;
}
.dark-mode .category-header {
background-color: #001f5c !important;
color: white !important;
}
.dark-mode .category-header:hover {
background-color: var(--white) !important;
color: var(--primary-color) !important;
border: 2px solid var(--primary-color) !important;
}
.dark-mode .category-header:hover h2 {
color: var(--primary-color) !important;
}
.dark-mode .category-header:hover i {
color: var(--primary-color) !important;
}
.dark-mode .category-header h2 {
color: white !important;
}
.dark-mode .category-header i {
color: white !important;
}
.dark-mode .forum-header {
background: #2a2a2a !important;
color: white !important;
border-color: #001f5c !important;
}
.dark-mode .forum-header h1 {
color: white !important;
}
.dark-mode .forum-header .forum-description {
color: white !important;
}
.dark-mode .forum-description,
.dark-mode .forum-stats,
.dark-mode .forum-latest,
.dark-mode .latest-time {
color: #e0e0e0 !important;
}
.dark-mode .modal-content,
.dark-mode .form-control {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
}
.dark-mode .form-control {
border-color: #444 !important;
}
.dark-mode .form-tab.active {
color: white !important;
border-bottom-color: white !important;
}
.dark-mode .close-btn {
color: white !important;
}

/* Dark mode Google authentication styles */
.dark-mode .google-auth-btn {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
border-color: #444 !important;
}

.dark-mode .google-auth-btn:hover {
background-color: #333 !important;
border-color: #555 !important;
}

.dark-mode .auth-divider::before,
.dark-mode .auth-divider::after {
background: #444 !important;
}

.dark-mode .auth-divider span {
color: #999 !important;
}

/* Dark mode navigation button styles */
.dark-mode .nav-btn {
background: var(--primary-color) !important;
color: var(--white) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.dark-mode .nav-btn:hover {
color: var(--accent-color) !important;
background-color: var(--primary-color) !important;
}

.dark-mode #headerUserAdmin {
background: var(--primary-color) !important;
color: var(--white) !important;
}

.dark-mode #headerUserAdmin:hover {
color: var(--accent-color) !important;
background-color: var(--primary-color) !important;
}

.dark-mode #headerUserAdmin:hover .user-name {
color: var(--accent-color) !important;
}

.dark-mode .user-name {
color: var(--white) !important;
}

.dark-mode .form-group label {
color: #e0e0e0 !important;
}

/* Comprehensive dark mode text color overrides */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode div,
.dark-mode li,
.dark-mode td,
.dark-mode th,
.dark-mode label,
.dark-mode legend,
.dark-mode dt,
.dark-mode dd,
.dark-mode blockquote,
.dark-mode caption,
.dark-mode figcaption,
.dark-mode summary,
.dark-mode details,
.dark-mode article,
.dark-mode section,
.dark-mode main,
.dark-mode aside,
.dark-mode header,
.dark-mode time,
.dark-mode address,
.dark-mode pre,
.dark-mode code,
.dark-mode small,
.dark-mode strong,
.dark-mode em,
.dark-mode b,
.dark-mode i,
.dark-mode mark,
.dark-mode del,
.dark-mode ins,
.dark-mode sub,
.dark-mode sup {
color: var(--white) !important;
}

/* Dark mode links - keep blue for accessibility */
.dark-mode a {
color: #9ec1ff !important;
}

.dark-mode a:hover {
color: var(--white) !important;
}

/* Dark mode text in specific components */
.dark-mode .article-content,
.dark-mode .article-excerpt,
.dark-mode .article-title,
.dark-mode .thread-title,
.dark-mode .thread-content,
.dark-mode .comment-content,
.dark-mode .post-content,
.dark-mode .widget-content,
.dark-mode .sidebar-content,
.dark-mode .forum-content,
.dark-mode .category-description,
.dark-mode .user-bio,
.dark-mode .profile-info,
.dark-mode .message-content,
.dark-mode .notification-text,
.dark-mode .status-text,
.dark-mode .meta-info,
.dark-mode .timestamp,
.dark-mode .author-name,
.dark-mode .tag-text,
.dark-mode .breadcrumb-text,
.dark-mode .pagination-text,
.dark-mode .search-results,
.dark-mode .error-message,
.dark-mode .success-message,
.dark-mode .warning-message,
.dark-mode .info-message {
color: var(--white) !important;
}

/* News Flasher Style */
.news-flasher {
background-color: #cd2c05;
color: #ffffff;
display: flex;
height: 40px;
align-items: center;
box-shadow: 0 2px 5px rgb(23 5 5 / 88%);
font-family: 'Poppins', sans-serif;
position: relative;
width: 100%;
box-sizing: border-box;
border: 2px solid #fff;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.flasher-label {
background-color: #001f5c;
color: #ffffff;
font-weight: bold;
padding: 0 15px;
height: 100%;
display: flex;
align-items: center;
font-size: 14px;
min-width: 150px;
justify-content: center;
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.5px;
animation: pulse-bg 1.5s infinite, blink-text 1s infinite; 
border-right: 2px solid #fff; 
}
/* Blinking text animation */
@keyframes blink-text {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0.5; }
}
@keyframes pulse-bg {
0%, 100% { background-color: #001f5c; }
50% { background-color: #003399; }
}
.flasher-label::after {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #001f5c;
z-index: 2;
animation: pulse-arrow 1.5s infinite;
}  
/* Ensure the arrow color matches the background */
@keyframes pulse-arrow {
0%, 100% { border-left-color: #001f5c; }
50% { border-left-color: #003399; }
}
.flasher-container {
overflow: hidden;
position: relative;
height: 100%;
flex: 1;
margin-left: 10px;
}
.flasher-content {
display: flex;
align-items: center;
position: absolute;
white-space: nowrap;
animation: scroll-news 100s linear infinite;
height: 100%;
padding-left: 100%;
font-weight: 900;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.8px;
font-size: 14px;
}
.flasher-content:hover {
animation-play-state: paused;
}
@keyframes scroll-news {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.flasher-content span {
padding: 0.4rem 0.8rem;
font-weight: 700;
font-size: 16px;
background-color: #001f5c;
color: #ffffff;
border-radius: 4px;
margin: 0 1rem;
display: inline-block;
}
.flasher-separator {
display: none;
}
/* Mobile adjustments */
@media (max-width: 992px) {
.main-container {
flex-direction: column;
padding: 1.5rem;
}
.content-area {
margin-bottom: 2rem;
}
.sidebar-content {
width: 100%;
}
.footer-container {
grid-template-columns: repeat(2, 1fr);
}
.forum-latest {
display: none;
}
}
@media (max-width: 768px) {
html {
font-size: 55%;
}
.site-header {
flex-direction: column;
align-items: flex-start;
padding: 1rem;
}
.logo-container {
margin-bottom: 1rem;
width: 100%;
justify-content: space-between;
align-items: center;
}
.nav-links {
display: none;
width: 100%;
flex-direction: column;
gap: 0.5rem;
}
.nav-links.show {
display: flex;
}

/* Show text on mobile for better UX */
.nav-links.show .nav-text {
position: static;
width: auto;
height: auto;
overflow: visible;
margin-left: 0.5rem;
}

/* Show hidden navigation items on mobile */
.nav-links.show .hidden-nav {
position: static;
width: auto;
height: auto;
overflow: visible;
display: flex;
align-items: center;
}

/* Show logo text on mobile */
@media (max-width: 768px) {
.logo-text {
position: static;
width: auto;
height: auto;
overflow: visible;
}

/* Hide site name on mobile to save space */
.site-name {
display: none;
}

/* Compact user admin on mobile */
#headerUserAdmin .user-name {
display: none;
}

#headerUserAdmin {
width: 40px;
padding: 0.6rem;
border-radius: 50%;
}
}

.mobile-menu-toggle {
display: block;
position: absolute;
top: 1.5rem;
right: 1.5rem;
}
.forum-header {
padding: 1.5rem;
}
.forum-section-link {
flex-direction: column;
gap: 1rem;
}
.forum-icon {
width: auto;
}
.forum-stats {
flex-direction: column;
gap: 0.5rem;
}
.flasher-label {
min-width: 80px;
font-size: 14px;
}
.flasher-content span {
font-size: 14px;
background-color: #001f5c;
color: #ffffff;
border-radius: 4px;
padding: 0.3rem 0.6rem;
margin: 0 0.2rem;
display: inline-block;
}
.footer-container {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 480px) {
html {
font-size: 52%;
}
.forum-section-link {
padding: 1rem;
}
.modal-content {
width: 90%;
padding: 1.5rem;
}
}
/* Fix forum description color in subject boxes */
.forum-section-link .forum-description {
color: var(--primary-color) !important; 
opacity: 0.8;
}
/* Ensure login button in header has proper styling */
.nav-links .login-btn {
background: rgba(255, 255, 255, 0.2);
color: var(--white);
border: none;
padding: 0.8rem 1.2rem;
border-radius: 0.4rem;
font-weight: 500;
cursor: pointer;
margin-left: 1rem;
font-size: 1.4rem;
transition: background-color var(--transition-fast);
}
.nav-links .login-btn:hover {
background-color: rgba(255, 255, 255, 0.3);
}
/* Make sure forum-header description stays darker blue */
.forum-header .forum-description {
color: #ffffff !important;
}
/* Article Meta Styles */
.article-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--gray-light);
font-size: 1.2rem;
color: var(--text-color-light);
}
.article-date,
.reading-time {
display: flex;
align-items: center;
gap: 0.5rem;
}
.article-date i,
.reading-time i {
color: var(--primary-color);
}
/* Read More Link Styles */
.read-more {
display: inline-block;
margin-top: 1rem;
padding: 0.8rem 1.5rem;
background-color: var(--primary-color);
color: var(--white);
text-decoration: none;
border-radius: 0.4rem;
font-weight: 500;
font-size: 1.4rem;
transition: background-color var(--transition-fast);
border: 2px solid var(--primary-color);
}
.read-more:hover {
background-color: var(--white);
color: var(--primary-color);
}
/* HetNieuws.app Style Article Components */
.article-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--gray-light);
font-size: 1.2rem;
color: var(--text-color-light);
}
.article-date,
.reading-time {
display: flex;
align-items: center;
gap: 0.5rem;
}
.article-date i,
.reading-time i {
color: var(--primary-color);
}
/* Read More Link Styles */
.read-more {
display: inline-block;
margin-top: 1rem;
padding: 0.8rem 1.5rem;
background-color: var(--primary-color);
color: var(--white);
text-decoration: none;
border-radius: 0.4rem;
font-weight: 500;
font-size: 1.4rem;
transition: background-color var(--transition-fast);
border: 2px solid var(--primary-color);
}
.read-more:hover {
background-color: var(--white);
color: var(--primary-color);
}
.dark-mode .read-more:hover {
background-color: var(--white);
color: var(--accent-color);
}
/* HetNieuws.app Style Article Components */
.article.featured-article {
border: 1px solid var(--gray-light);
border-radius: 8px;
margin-bottom: 3rem;
padding: 2rem;
background-color: var(--white);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
position: relative;
transition: box-shadow var(--transition-fast);
}
.article.featured-article:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.article.featured-article:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.featured-badge {
background-color: #d31057;
color: #ffffff;
padding: 0.4rem 0.8rem;
border-radius: 4px;
font-size: 1.2rem;
font-weight: 600;
box-shadow: 0 2px 4px rgb(0 0 0 / 85%);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 0.5rem;
display: inline-block;
}
.article-categories {
margin-bottom: 1rem;
}
.article-category {
background-color: var(--primary-color);
color: var(--white);
border: none;
padding: 0.4rem 0.8rem;
border-radius: 4px;
font-size: 1.2rem;
font-weight: 500;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.article-category:hover {
background-color: var(--primary-color);
color: #8B0000;
}
.article-title-link {
color: var(--primary-color);
text-decoration: none;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 1rem;
display: block;
transition: color var(--transition-fast);
}
.article-title-link:hover {
color: var(--primary-color-dark);
text-decoration: underline;
}
.article-actions {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.5rem;
}
.article-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.article-tag {
background-color: var(--gray-light);
color: var(--text-color);
border: 1px solid var(--gray-medium);
padding: 0.3rem 0.6rem;
border-radius: 4px;
font-size: 1.2rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.article-tag:hover {
background-color: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
}
.share-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.share-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
border-radius: 4px;
text-decoration: none;
font-size: 1.3rem;
font-weight: 500;
transition: all var(--transition-fast);
border: 1px solid transparent;
}
.share-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.facebook-share {
background-color: #1877f2;
color: var(--white);
}
.facebook-share:hover {
background-color: #166fe5;
}
.twitter-share {
background-color: #1da1f2;
color: var(--white);
}
.twitter-share:hover {
background-color: #1a91da;
}
.whatsapp-share {
background-color: #25d366;
color: var(--white);
}
.whatsapp-share:hover {
background-color: #22c55e;
}
.linkedin-share {
background-color: #0077b5;
color: var(--white);
}
.linkedin-share:hover {
background-color: #005885;
}
.email-share {
background-color: var(--gray-light);
color: var(--text-color);
border-color: var(--gray-medium);
}
.email-share:hover {
background-color: var(--gray-medium);
}
/* Dark mode adjustments for new article styles */
.dark-mode .article.featured-article {
background-color: #1e1e1e;
border-color: #444;
}
.dark-mode .article.featured-article:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.dark-mode .article-title-link {
color: #e0e0e0;
}
.dark-mode .article-title-link:hover {
color: #fff;
}
.dark-mode .article-tag {
background-color: #333;
color: #e0e0e0;
border-color: #555;
}
.dark-mode .article-tag:hover {
background-color: var(--accent-color);
color: var(--white);
}
.dark-mode .email-share {
background-color: #333;
color: #e0e0e0;
border-color: #555;
}
.dark-mode .email-share:hover {
background-color: #444;
}

/* ===== Forum hero (centered) - Hidden for professional look ===== */
.forum-header{
  /* Hidden visually but kept for SEO */
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Card in de header */
.forum-header .forum-card{
  width:100%;
  max-width: 980px;
  background: linear-gradient(135deg,#0b4fbe 0%,#0a3fa0 60%,#092d7a 100%);
  color:#fff;
  text-align:center;
  padding:2.4rem 2rem;
  border-radius:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  margin:0 auto;
}

/* Logo + titel in één rij, maar breekt netjes op mobiel */
.forum-header .forum-logo-title{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.2rem;
  flex-wrap:wrap;
  margin: .25rem 0 1rem;
}

.forum-header .forum-logo{
  width:256px;
  height:256px;
  border-radius:14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.forum-header .forum-title{
  margin:0;
  color:#fff;
  font-weight:800;
  letter-spacing:-.02em;
  font-size: clamp(2.2rem, 1.5rem + 2vw, 3.2rem);
}

/* Beschrijving gecentreerd en beter leesbaar */
.forum-header .forum-description{
  margin: .25rem auto 0;
  max-width: 760px;
  font-size: clamp(1.4rem, 1rem + .6vw, 1.8rem);
  line-height:1.6;
  color:#eaf2ff !important;
  font-weight:600;
}

/* Hover micro-interactie op logo */
.forum-header .forum-logo{ transition: transform .25s ease, box-shadow .25s ease; }
.forum-header .forum-logo:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.28); }

/* Dark mode varianten */
.dark-mode .forum-header{ background:#1b1b1b; border-color:#1e40af; }
.dark-mode .forum-header .forum-card{
  background: linear-gradient(135deg,#0a2d7a 0%,#0b3a9a 55%,#0b4fbe 100%);
  border-color: rgba(255,255,255,.12);
}
.dark-mode .forum-header .forum-description{ color:#e5ecff !important; }

/* Kleine schermen */
@media (max-width: 640px){
  .forum-header .forum-logo{ width:92px; height:92px; }
  .forum-header{ padding:1.6rem; }
}

/* COLUMN op alle schermen */
.forum-header.forum--col .forum-logo-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.2rem;
  flex-direction: column;      /* altijd onder elkaar */
}
.breadcrumbs .breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs .breadcrumbs-list li + li::before {
  content: "/";
  opacity: .6;
  margin-right: .5rem;
}
.breadcrumbs .current { font-weight: 600; }

:root { color-scheme: light dark; }

/* FINAL FOOTER OVERRIDE - MUST BE SAME BLUE AS HEADER */
footer,
.site-footer,
footer.site-footer,
body footer,
html body footer,
body .site-footer,
html body .site-footer {
background: #001f5c !important;
background-color: #001f5c !important;
}
html.dark, body.dark-mode { background:#0e1220; color:#e8ebf0; }
html.dark a, body.dark-mode a { color:#9ec1ff; }

.skip-link{
  position:absolute;left:11px;top:-40px;z-index:1000;
  background:#000;color:#fff;padding:8px;border-radius:4px;text-decoration:none;
}
.skip-link:focus,.skip-link:focus-visible{ top:11px; }

/* Categories widget - always open, no hover effects */
.categories-widget {
  background: var(--white, #ffffff);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.categories-widget .widget-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900, #1f2937);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--blue-600, #2563eb);
}

.categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block !important; /* Always visible */
  max-height: none !important; /* No height restrictions */
  overflow: visible !important; /* Content always visible */
}

.category-item {
  margin-bottom: 0.25rem;
}

.category-item a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--gray-700, #374151);
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 0.95rem;
  gap: 0.75rem;
}

.category-item a i {
  width: 20px;
  text-align: center;
  color: var(--gray-500, #6b7280);
  transition: color 0.2s ease;
}

/* Subtle hover effect - no collapse/expand */
.category-item a:hover {
  background-color: var(--gray-50, #f9fafb);
  color: var(--blue-600, #2563eb);
}

.category-item a:hover i {
  color: var(--blue-600, #2563eb);
}

/* Active category */
.category-item a.active,
.category-item a[aria-current="page"] {
  background-color: var(--blue-50, #eff6ff);
  color: var(--blue-700, #1d4ed8);
  font-weight: 500;
}

.category-item a.active i,
.category-item a[aria-current="page"] i {
  color: var(--blue-700, #1d4ed8);
}

/* Focus styles for accessibility */
.category-item a:focus {
  outline: 2px solid var(--blue-600, #2563eb);
  outline-offset: 2px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .categories-widget {
    background: var(--gray-800, #1f2937);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .categories-widget .widget-title {
    color: var(--gray-100, #f3f4f6);
    border-bottom-color: var(--blue-500, #3b82f6);
  }
  
  .category-item a {
    color: var(--gray-300, #d1d5db);
  }
  
  .category-item a i {
    color: var(--gray-500, #6b7280);
  }
  
  .category-item a:hover {
    background-color: var(--gray-700, #374151);
    color: var(--blue-400, #60a5fa);
  }
  
  .category-item a:hover i {
    color: var(--blue-400, #60a5fa);
  }
  
  .category-item a.active,
  .category-item a[aria-current="page"] {
    background-color: var(--gray-700, #374151);
    color: var(--blue-400, #60a5fa);
  }
  
  .category-item a.active i,
  .category-item a[aria-current="page"] i {
    color: var(--blue-400, #60a5fa);
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .categories-widget {
    padding: 0.75rem;
  }
  
  .category-item a {
    padding: 0.625rem 0.75rem;
    font-size: 0.9rem;
  }
  
  .category-item a i {
    width: 18px;
  }
}

/* Ensure no JavaScript collapse behavior */
.categories-widget[data-collapsed="true"] .categories-list,
.categories-widget.collapsed .categories-list {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove any expand/collapse indicators */
.categories-widget .toggle-btn,
.categories-widget .expand-icon,
.categories-widget .collapse-icon,
.categories-widget::after {
  display: none !important;
}