/* --- Header & Navigation --- */
header {
    background-color: var(--header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
nav { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; text-decoration: none; color: var(--text-primary); font-weight: 600; font-size: 1.2rem; }
.logo img { margin-right: 8px; }
.nav-right-cluster { display: flex; align-items: center; gap: 20px; }
.desktop-nav-links { list-style: none; display: flex; gap: 25px; align-items: center; }
.desktop-nav-links a { text-decoration: none; color: var(--text-secondary); font-weight: 500; transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; padding-bottom: 20px; border-bottom: 2px solid transparent; }
.desktop-nav-links a:not(.btn):hover { color: var(--primary-color); }
.desktop-nav-links a.active { color: var(--primary-color); font-weight: 600; border-bottom-color: var(--primary-color); }
.desktop-nav-links .btn-primary {
    padding: 10px 22px !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    background: #7c83f6;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(124, 131, 246, 0.4);
    color: white !important;
}
 .desktop-nav-links .btn-primary:hover {
    background: #6366F1;
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.5);
 }

.desktop-nav-links li { position: relative; }
.dropdown-container { position: absolute; top: calc(100% + 25px); left: 50%; transform: translateX(-50%); background-color: var(--background-card); border-radius: 12px; box-shadow: 0 10px 30px rgba(var(--shadow-dark-rgb), 0.1); border: 1px solid var(--border-color); padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, top 0.3s ease; z-index: 1001; pointer-events: none; }
.desktop-nav-links li:hover > .dropdown-container { opacity: 1; visibility: visible; top: calc(100% + 20px); pointer-events: auto; }
.dropdown-menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px 30px; }
.dropdown-menu.cols-2 { grid-template-columns: repeat(2, auto); }
.dropdown-menu.cols-1 { grid-template-columns: 1fr; }
.dropdown-menu a { text-decoration: none; color: var(--text-secondary); font-weight: 500; padding: 8px 12px; display: block; border-radius: 6px; transition: background-color 0.3s ease, color 0.3s ease; white-space: nowrap; }
.dropdown-menu a:hover { background-color: var(--hover-bg); color: var(--primary-color); }

.hamburger-menu { display: none; cursor: pointer; background: none; border: none; z-index: 1002; }
.hamburger-menu .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--text-primary); transition: all 0.3s ease-in-out; }
.mobile-nav { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background-color: var(--background-main); z-index: 1001; transform: translateX(100%); transition: transform 0.4s ease-in-out; padding: 80px 30px 30px; overflow-y: auto; }
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-close { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 2.5rem; line-height: 1; color: var(--text-primary); cursor: pointer; z-index: 1003; }
.mobile-nav-links { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.mobile-nav-links > li > a { display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; font-weight: 600; color: var(--text-primary); padding: 10px 0; text-decoration: none; }
.mobile-nav-links .arrow { transition: transform 0.3s ease; }
.mobile-nav-links .submenu { list-style: none; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; padding-left: 15px; }
.mobile-nav-links .submenu a { display: block; padding: 8px 0; text-decoration: none; color: var(--text-secondary); }
.mobile-nav-links > li.active > .submenu { max-height: 600px; /* Adjust as needed */ }
.mobile-nav-links > li.active .arrow { transform: rotate(90deg); }

.theme-switcher { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.theme-switcher .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.theme-switcher .switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(20px); }
html.dark-mode .fa-sun { color: var(--primary-color); }
html:not(.dark-mode) .fa-moon { color: var(--primary-color); }

@media (max-width: 1100px) {
    .desktop-nav-links { display: none; }
    .hamburger-menu { display: block; }
}