/* --- CORE VARIABLES --- */
:root {
    --sidebar-width: 185px;
    --header-height-mobile: 65px;
    --footer-height-mobile: 64px;
    
    --bg-color: #ffffff;
    --text-color: #333333;
    --content-bg: #f4f4f4;
    
    --sidebar-bg: #000000;
    --sidebar-border: #333333;
    --cream-text: #fdfdf0; /* Creamy white */
    --accent-blue: #0073e6;
    
    --transition-speed: 0.3s;
}

/* Dark Mode Override */
body.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --content-bg: #1e1e1e;
}

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

html, body {
    height: 100%;
    font-family: 'Arial', sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll during push */
    background-color: var(--bg-color);
    color: var(--text-color);
}

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

/* --- WORDPRESS ADMIN BAR COMPATIBILITY --- */
/* If WP Admin bar is present, push fixed elements down */
body.admin-bar #mobile-header,
body.admin-bar .socialheader {
    top: 32px !important;
}
body.admin-bar #mobile-header {
    top: 32px; /* WP Admin bar is usually 32px */
}
@media screen and (max-width: 782px) {
    body.admin-bar #mobile-header { top: 46px; } /* WP Mobile admin bar is larger */
}

/* --- WRAPPER FOR PUSH ANIMATION --- */
#site-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-color);
    transition: transform var(--transition-speed) ease;
    z-index: 10;
}

/* --- DESKTOP SIDEBAR (<aside>) --- */
.socialheader {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100%;
    background-color: var(--sidebar-bg);
    border-right: 1.5px solid var(--sidebar-border);
    color: var(--cream-text);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform var(--transition-speed) ease;
    overflow-y: auto;
}

/* Scrollbar styling for sidebar */
.socialheader::-webkit-scrollbar { width: 6px; }
.socialheader::-webkit-scrollbar-thumb { background: #333; }

.sh-logo {
    padding: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

/* Search */
.sh-search-trigger {
    padding: 10px 20px;
    cursor: pointer;
    color: #aaa;
    border-bottom: 1px solid #333;
}
.sh-search-trigger:hover { color: #fff; }

/* Search Overlay */
.search-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100px;
    background: #222;
    padding: 10px;
    display: none; /* Toggled via JS */
    flex-direction: column;
    z-index: 102;
}
.search-overlay.active { display: flex; }
.close-search {
    align-self: flex-end;
    cursor: pointer;
    color: #aaa;
    margin-bottom: 5px;
}
.search-overlay input {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 4px;
}
.search-suggestions {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

/* Menu */
.sh-menu-title {
    padding: 15px 20px 5px;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
}

.sh-menu-links li a {
    display: block;
    padding: 10px 20px;
    color: #ccc;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sh-menu-links li a:hover {
    background-color: #222;
    color: #fff;
    border-left: 3px solid var(--accent-blue);
}

/* Spacer */
.sh-spacer {
    flex-grow: 1;
    min-height: 20px;
}

/* Desktop Login/Signup Area */
.sh-auth {
    padding: 15px 20px;
    border-top: 1px solid #333;
    position: relative;
}
.auth-btn {
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    display: block;
    font-size: 13px;
}

/* Desktop Login Bubble Dropdown */
.login-bubble-menu {
    position: fixed; /* Use fixed to escape the overflow:hidden/auto of the sidebar */
    bottom: 200px; 
    left: 184px; 
    width: 160px;
    background: #000;
    border: 1px solid #333;
    border-radius: 4px;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.5);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 200; /* Ensure it is higher than the sidebar (100) */
}
.sh-auth:hover .login-bubble-menu,
.sh-auth.active .login-bubble-menu {
    display: flex;
}
.login-bubble-menu a {
    padding: 10px 15px;
    color: #fff;
    font-size: 13px;
}
.login-bubble-menu a:hover {
    background: #333;
}

/* Footer Global */
#footer_global {
    padding: 20px;
    font-size: 11px;
    color: #888;
    line-height: 1.6;
    border-top: 1px solid #333;
}
#footer_global a { color: #888; }
#footer_global a:hover { text-decoration: underline; }

#site-info-popup {
    background: #111;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #333;
}

/* --- MAIN CONTENT --- */
.socialpagecontent {
    padding: 0 !important;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    background-color: var(--bg-color);
    transition: margin-left var(--transition-speed);
}

.content-area {
    background: var(--content-bg);
    padding: 0px;
    border-radius: 4px;
    min-height: 80vh;
}

/* Theme Toggle Demo */
.theme-switch-wrapper {
    margin-bottom: 20px;
    padding: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    display: inline-block;
}
.theme-switch-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}

/* --- MOBILE HEADER (Hidden on Desktop) --- */
#mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height-mobile);
    background: #000;
    color: var(--cream-text);
    z-index: 90;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.mh-left { display: flex; align-items: center; gap: 15px; }
.mh-hamburger { font-size: 20px; cursor: pointer; }
.mh-logo { font-size: 18px; font-weight: bold; }

.mh-login { 
    font-size: 14px; 
    font-weight: bold; 
    cursor: pointer;
}

/* Mobile Login Dropdown */
.mh-login-dropdown {
    position: absolute;
    top: var(--header-height-mobile);
    right: 0;
    width: 200px;
    background: #111;
    display: none; /* JS toggle */
    flex-direction: column;
    border-bottom-left-radius: 8px;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
}
.mh-login-dropdown.active { display: flex; }
.mh-login-dropdown a {
    padding: 15px;
    border-bottom: 1px solid #333;
    color: #eee;
}
.mh-login-dropdown .divider { height: 5px; background: #000; }

/* --- MOBILE FOOTER (TikTok style) --- */
#mobile-footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height-mobile);
    background: #000;
    border-top: 1px solid #333;
    z-index: 90;
    justify-content: space-around;
    align-items: center;
}

.mf-item {
    color: #888;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.mf-item.active, .mf-item:hover { color: #fff; }

/* Notification Bubble */
.notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--accent-blue);
    color: white;
    font-size: 10px;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
}

/* Mobile Notification Slide-up Menu */
#mobile-notif-menu {
    position: fixed;
    bottom: var(--footer-height-mobile);
    left: 0;
    width: 100%;
    background: #fff;
    color: #000;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 85; /* Below header, above content */
    padding-bottom: 20px;
}
#mobile-notif-menu.active {
    transform: translateY(0);
}
.mn-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.mn-list li {
    padding: 15px;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    gap: 10px;
}

/* --- RESPONSIVE MEDIA QUERIES --- */

/* DESKTOP (Over 768px) */
@media screen and (min-width: 769px) {
    #mobile-header { display: none !important; }
    #mobile-footer { display: none !important; }
    #mobile-notif-menu { display: none !important; } /* Hidden on desktop */
    #site-wrapper { transform: none !important; }
    .socialheader { 
        left: 0 !important; 
        transform: none !important;
    }
}

/* MOBILE (Under 768px) */
@media screen and (max-width: 768px) {
    /* Transform sidebar to be off-screen initially */
    .socialheader {
        left: -185px; /* Hide off canvas */
        width: 185px;
        border-right: none;
        z-index: 80; /* Below mobile header */
        padding-top: var(--header-height-mobile); /* Don't overlap content under header */
    }

    /* Main Content Adjustments */
    .socialpagecontent {
        margin-left: 0; /* No sidebar margin on mobile init */
        padding-top: calc(var(--header-height-mobile) + 10px);
        padding-bottom: calc(var(--footer-height-mobile) + 20px); /* Extra spacer so footer doesn't cover */
    }

    #mobile-header { display: flex; }
    #mobile-footer { display: flex; }

    /* Desktop Specifics to hide */
    .sh-search-trigger { display: none; } /* Usually mobile has different search UI, simplified here */
    
    /* PUSH ANIMATION STATE */
    body.nav-open #site-wrapper {
        transform: translateX(186px); /* Push content right */
    }
    body.nav-open .socialheader {
        /* Method: Sidebar is fixed at -185px. 
           When active, Sidebar -> 0.
           Wrapper -> 186px.
        */
        transform: translateX(185px);
    }
    
    /* Hide the desktop specific auth in sidebar if we have mobile header auth */
    .socialheader .sh-auth {
        display: none; 
    }
}