/* ------------------------------------- */
/* Interactive UI (Mobile Menu & Toggles)*/
/* ------------------------------------- */

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    cursor: pointer;
    min-height: 44px; /* Accessible touch target */
}

#primary-menu {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 24px;
}
#site-navigation a { color: var(--text-main); font-weight: 600; }

@media (max-width: 768px) {
    .menu-toggle { display: block; }
    #primary-menu {
        display: none !important;
        flex-direction: column; width: 100%;
        position: absolute; top: 60px; left: 0; /* Giảm khoảng cách top */
        background: var(--bg-main); padding: 16px; /* Giảm padding */
        box-shadow: var(--shadow-soft); z-index: 100;
        box-sizing: border-box;
        align-items: flex-start !important;
    }
    #primary-menu.toggled { display: flex !important; }
    
    #primary-menu li { width: 100%; text-align: left; }
    #primary-menu > li > a { border-bottom: 1px solid rgba(0,0,0,0.05); padding: 10px 0; width: 100%; font-size: 13px; }
    body.dark-mode #primary-menu > li > a { border-color: rgba(255,255,255,0.05); }
    #primary-menu > li:last-child > a { border-bottom: none; }
    
    /* Fix Sub-menu on Mobile */
    #primary-menu .sub-menu {
        display: none !important; /* Ẩn mặc định trên mobile */
        flex-direction: column;
        position: static !important; width: 100% !important;
        box-shadow: none !important; border: none !important;
        background: rgba(0,0,0,0.02) !important;
        transform: none !important; opacity: 1 !important;
        visibility: visible !important; pointer-events: auto !important;
        padding-left: 16px !important; margin-top: 8px; gap: 8px;
    }
    #primary-menu li.mobile-active > .sub-menu {
        display: flex !important; /* Hiện khi được click */
    }
    #primary-menu li.mobile-active > a::after {
        content: " ▴" !important; /* Đổi mũi tên khi mở */
    }
    body.dark-mode #primary-menu .sub-menu { background: rgba(255,255,255,0.02) !important; }
}

/* Dark Mode Toggle Button */
.dark-mode-toggle button {
    background: #f3f4f6; color: #111827;
    border: none; border-radius: 50%;
    width: 44px; height: 44px; /* Accessible touch target */
    cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.dark-mode-toggle button:hover { background: #e5e7eb; }

/* ------------------------------------- */
/* Dark Mode Variables & Overrides       */
/* ------------------------------------- */
body.dark-mode {
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    --bg-main: #111827;
    --bg-box: #1f2937;
    --primary-color: #60a5fa; /* Lighter blue for better contrast */
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.5);
}

body.dark-mode .site-header { border-bottom-color: #374151; }
body.dark-mode .modern-card .card-thumbnail { background: #374151; }
body.dark-mode .list-thumbnail { background: #374151; }
body.dark-mode .aio-takeaways-box { background: #1f2937; }
body.dark-mode .entry-meta { border-bottom-color: #374151; }
body.dark-mode .entry-content { color: #d1d5db; }

body.dark-mode .dark-mode-toggle button {
    background: #374151; color: #fff;
}
body.dark-mode .dark-mode-toggle button:hover {
    background: #4b5563;
}