/* --- CSS VARIABLES & THEME --- */
:root {
    --sidebar-width: 185px;
    --header-bg: #000000;
    --header-border: #333333;
    
    /* Light Mode Defaults */
    --bg-body: #f4f4f4; 
    --bg-card: #ffffff;
    --text-main: #333333; 
    --text-muted: #999999;
    --text-sidebar: #ffffff; 

    --accent-blue: #0073e6;
    --mobile-header-height: 65px;
    --mobile-footer-height: 64px; 
    --admin-bar-height: 0px; 
    --cream: #fdfdd0;
    --slide-speed: 0.3s;
}

[data-theme="dark"] {
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --text-main: #e0e0e0;
}

/* WP Admin Bar Compatibility */
body.admin-bar {
    --admin-bar-height: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar { --admin-bar-height: 46px; }
}

/* --- RESET & BASE --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    overflow-x: hidden; /* Prevent horizontal scroll */
    transition: background-color 0.3s, color 0.3s;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- LAYOUT WRAPPER (For Content Slide Effect) --- */
/* Note: Sidebar is now OUTSIDE this wrapper */
#app-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    transition: transform var(--slide-speed) ease;
    background-color: var(--bg-body); /* Ensure background covers during slide */
}

/* --- SIDEBAR (Desktop: Fixed Left / Mobile: Off-canvas) --- */
.socialheader {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--header-bg);
    border-right: 1.5px solid var(--header-border);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    color: var(--text-sidebar);
    /* Transition for mobile slide */
    transition: transform var(--slide-speed) ease;
}

/* Logo Area */
.brand-logo {
    padding: 20px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: -1px;
    color: #fff;
}

/* Search */
.search-container {
    padding: 0 20px;
    margin-bottom: 20px;
}
.search-btn-trigger {
    background: #222;
    border: 1px solid #444;
    color: #aaa;
    padding: 8px 12px;
    border-radius: 4px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
}
.search-btn-trigger:hover { background: #333; color: #fff; }

/* Menu */
.menu-title {
    padding: 10px 20px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.main-nav ul li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #bbb;
    font-size: 14px;
    transition: 0.2s;
    position: relative;
}
.main-nav ul li a:hover, .main-nav ul li a.active {
    color: #fff;
    background: rgba(255,255,255,0.05);
    border-left: 3px solid var(--accent-blue);
}
.main-nav ul li a i {
    width: 25px;
    text-align: center;
    margin-right: 10px;
}

/* Sidebar Notification Badge */
.sidebar-count-bubble {
    background-color: var(--accent-blue);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
    font-weight: bold;
}

/* Spacer to push footer down */
.spacer { flex-grow: 1; }

/* Auth Buttons */
.auth-section {
    padding: 20px;
}
.btn-auth {
    display: block;
    text-align: center;
    padding: 8px 0;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}
.btn-signup { background: var(--accent-blue); color: #fff; border-radius: 3px; }
.btn-login-trigger { 
    background: transparent; 
    color: #aaa; 
    border: 1px solid #444; 
    border-radius: 3px;
    position: relative;
}

/* Login Bubble Dropdown (Desktop) */
.login-dropdown {
    position: absolute;
    bottom: 110%; 
    left: 10px;
    width: 200px;
    background: #000;
    border: 1px solid #333;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    padding: 10px 0;
    display: none; 
    z-index: 1010;
}
.login-dropdown.active { display: block; }
.login-dropdown::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 30px;
    width: 0; height: 0; 
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
}
.login-dropdown a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    font-size: 13px;
    transition: background 0.2s;
}
.login-dropdown a:hover { background: #222; }

/* Sidebar Footer */
#footer_global {
    padding: 20px;
    font-size: 10px;
    color: #666;
    border-top: 1px solid #222;
    position: relative;
}
#footer_global .link { margin-right: 5px; display: inline-block; }
#footer_global a { color: #888; text-decoration: none; }
#footer_global a:hover { color: #ccc; }
#footer_global .network { display: block; margin-top: 10px; color: #444; font-style: italic; }

/* Site Info Popup */
#site-info { cursor: pointer; text-decoration: underline; }
#site-info-popup {
    position: absolute;
    bottom: 30px;
    left: 20px;
    background: #222;
    padding: 15px;
    border-radius: 4px;
    width: 200px;
    border: 1px solid #444;
    color: #ccc;
    z-index: 100;
}
#site-info-popup .arrow {
    position: absolute;
    bottom: -5px;
    left: 10px;
    width: 10px; height: 10px;
    background: #222;
    transform: rotate(45deg);
    border-bottom: 1px solid #444;
    border-right: 1px solid #444;
}

/* --- MAIN CONTENT --- */
.socialpagecontent {
    margin-left: var(--sidebar-width); /* Desktop margin */
    padding: 0px 0px 5px 0px;
    min-height: 100vh;
    color: var(--text-main);
    transition: color 0.3s;
}

.demo-content-box {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    max-width: 800px;
    margin-bottom: 20px;
}

.theme-switch-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* --- OVERLAY SEARCH --- */
.search-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-overlay-close {
    position: absolute;
    top: 30px; right: 30px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}
.search-overlay input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #555;
    color: #fff;
    font-size: 30px;
    width: 80%;
    padding: 10px;
    outline: none;
    margin-bottom: 40px;
}

.search-results-demo {
    width: 80%;
    max-height: 60vh;
    overflow-y: auto;
    text-align: left;
}
.result-category {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
    letter-spacing: 1px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}
.result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}
.result-item:hover { background: rgba(255,255,255,0.1); }
.result-img {
    width: 40px; height: 40px;
    background: #333;
    border-radius: 50%;
    margin-right: 15px;
    display: flex; align-items: center; justify-content: center;
    color: #666;
    font-size: 14px;
}
.result-info h4 { color: #fff; font-size: 14px; font-weight: 500; }
.result-info span { color: #888; font-size: 12px; }

/* --- MOBILE ELEMENTS (Hidden on Desktop) --- */
.mobile-header { display: none; }
.mobile-footer { display: none; }
.mobile-overlay-dimmer { display: none; }
.mobile-login-menu { display: none; }
.mobile-notification-panel { display: none; }

/* =========================================
   RESPONSIVE MOBILE VIEW 
   ========================================= */
@media screen and (max-width: 768px) {
    
    /* 1. Modify Layout for Mobile */
    .socialheader {
        /* Transform sidebar into off-canvas drawer */
        transform: translateX(-100%); /* Start Hidden (Left -185px) */
        width: 185px; /* STRICTLY 185px */
        border-right: none;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
        padding-top: var(--admin-bar-height);
        height: 100%;
        /* Reset Desktop Margin/Positioning implications if any */
        left: 0;
    }

    .socialpagecontent {
        margin-left: 0; /* Remove desktop margin */
        padding: 0px;
        padding-top: calc(var(--mobile-header-height) + 0px);
        padding-bottom: calc(var(--mobile-footer-height) + 0px);
    }

    /* 2. Mobile Sticky Header */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--mobile-header-height);
        width: 100%;
        background: #000;
        position: fixed;
        top: var(--admin-bar-height);
        left: 0;
        z-index: 900;
        padding: 0 20px;
        border-bottom: 1px solid #222;
        transition: transform var(--slide-speed) ease;
    }

    .mobile-header .mh-left { display: flex; align-items: center; gap: 20px; }
    .mobile-header .hamburger { color: var(--cream); font-size: 24px; cursor: pointer; }
    .mobile-header .mh-logo { color: var(--cream); font-weight: bold; font-size: 20px; }
    .mobile-header .mh-login { color: var(--cream); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }

    /* Mobile Login Dropdown */
    .mobile-login-menu {
        display: block;
        position: fixed;
        top: calc(var(--mobile-header-height) + var(--admin-bar-height));
        right: 0;
        width: 200px;
        background: #111;
        border-bottom-left-radius: 10px;
        box-shadow: -2px 5px 15px rgba(0,0,0,0.5);
        transform: translateY(-150%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 890;
        overflow: hidden;
    }
    .mobile-login-menu.active { transform: translateY(0); }
    .mobile-login-menu ul { display: flex; flex-direction: column; }
    .mobile-login-menu ul li a {
        display: block;
        padding: 15px 20px;
        color: #fff;
        font-size: 14px;
        border-bottom: 1px solid #222;
        transition: background 0.2s;
    }
    .mobile-login-menu ul li a:hover { background: #222; }
    .mobile-login-menu ul li.divider { height: 5px; background: #000; border: none; padding: 0; }
    .mobile-login-menu ul li.logout a { color: #f55; }

    /* 3. Sticky Bottom Footer */
    .mobile-footer {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: var(--mobile-footer-height);
        width: 100%;
        background: #000;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 900;
        border-top: 1px solid #222;
    }

    .mf-item {
        position: relative;
        color: #888;
        font-size: 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }
    .mf-item.active { color: var(--cream); }
    
    .notif-badge {
        position: absolute;
        top: -5px; right: -5px;
        background: var(--accent-blue);
        color: #fff;
        font-size: 10px;
        width: 16px; height: 16px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }

    /* Mobile Notification Panel */
    .mobile-notification-panel {
        display: block;
        position: fixed;
        bottom: var(--mobile-footer-height);
        left: 0;
        width: 100%;
        max-height: 60vh;
        background: #1a1a1a;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
        transform: translateY(110%);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 850;
        overflow-y: auto;
    }
    .mobile-notification-panel.active { transform: translateY(0); }
    
    .mn-header {
        padding: 15px;
        border-bottom: 1px solid #333;
        display: flex; justify-content: space-between; align-items: center;
        color: #fff; font-weight: bold;
        background: #222;
        position: sticky; top: 0;
    }
    .mn-item {
        padding: 15px;
        display: flex; align-items: center;
        border-bottom: 1px solid #222;
        color: #eee;
    }
    .mn-item:last-child { border-bottom: none; }
    .mn-icon {
        width: 35px; height: 35px;
        background: #333; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin-right: 15px; flex-shrink: 0;
        color: var(--accent-blue);
    }
    .mn-text { font-size: 13px; line-height: 1.4; }
    .mn-text strong { color: #fff; }

    /* 4. Slide Animation Logic - REVISED */
    
    /* Sidebar: Move from -100% (-185px) to 0 */
    body.menu-open .socialheader {
        transform: translateX(0); 
    }

    /* Content Wrapper: Move from 0 to 185px */
    body.menu-open #app-wrapper {
        transform: translateX(185px);
    }
    
    /* Mobile Header: Move from 0 to 185px (Follows content) */
    body.menu-open .mobile-header {
        transform: translateX(185px);
    }
    
    body.menu-open {
        overflow: hidden;
    }

    .mobile-overlay-dimmer {
        display: block;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 950;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    body.menu-open .mobile-overlay-dimmer {
        opacity: 1;
        pointer-events: auto;
    }
}