/* =========================================================
   NING NEOBRUTALIST MASTER STYLESHEET
   Inspired by modern brutalist SaaS UI
   Optimized for Ning 3.0 + Groups/Hubs
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root{
    --neo-bg:#f5f1eb;
    --neo-surface:#ffffff;
    --neo-text:#111111;
    --neo-border:#111111;

    --neo-pink:#ff5ea8;
    --neo-green:#6ee26e;
    --neo-yellow:#ffd84d;
    --neo-blue:#7b7cff;
    --neo-red:#ff6a5f;

    --neo-shadow:6px 6px 0px #111111;
    --neo-shadow-hover:8px 8px 0px #111111;

    --neo-radius:14px;

    --neo-font:"Inter", "Helvetica Neue", sans-serif;
}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

body{
    background:var(--neo-bg)!important;
    color:var(--neo-text)!important;
    font-family:var(--neo-font)!important;
    font-weight:500;
    letter-spacing:-0.02em;
}

a{
    color:inherit!important;
    text-decoration:none!important;
}

img{
    border-radius:12px;
}


/* =========================================================
   MAIN CONTENT CONTAINERS
   ========================================================= */

.xg_theme .module,
.xg_theme .xg_module,
.xg_theme .xg_module_body,
.xg_theme .xg_module_foot,
.xg_theme .xg_module_head,
.xg_theme .matrix-item,
.xg_theme .xg_list_groups_main,
.xg_theme .discussion,
.xg_theme .blog-post,
.xg_theme .xg_widget_profiles,
.xg_theme .xg_widget_groups,
.xg_theme .xg_widget_forum,
.xg_theme .xg_widget_activity{
    background:var(--neo-surface)!important;
    border:4px solid var(--neo-border)!important;
    border-radius:var(--neo-radius)!important;
    box-shadow:var(--neo-shadow)!important;
}


/* =========================================================
   HEADER
   ========================================================= */

#xg_head,
.site-header,
.xg_theme .header{
    background:var(--neo-surface)!important;
    border-bottom:4px solid var(--neo-border)!important;
    box-shadow:0 5px 0 #111!important;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

#xg_navigation ul li a,
.xg_theme .nav a{
    background:#fff!important;
    border:3px solid #111!important;
    border-radius:10px!important;
    padding:10px 16px!important;
    margin:4px!important;
    display:inline-block!important;
    font-weight:700!important;
    box-shadow:4px 4px 0 #111!important;
    transition:all .15s ease;
}

#xg_navigation ul li a:hover,
.xg_theme .nav a:hover{
    transform:translate(-2px,-2px);
    box-shadow:6px 6px 0 #111!important;
    background:var(--neo-yellow)!important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.button,
input[type=submit],
a.button,
.xg_theme .button{
    background:var(--neo-lime)!important;
    border:3px solid #111!important;
    color:#111!important;
    border-radius:12px!important;
    padding:12px 20px!important;
    font-weight:800!important;
    text-transform:uppercase;
    letter-spacing:.03em;
    box-shadow:5px 5px 0 #111!important;
    transition:all .15s ease;
}

button:hover,
.button:hover,
input[type=submit]:hover,
a.button:hover{
    transform:translate(-2px,-2px);
    box-shadow:7px 7px 0 #111!important;
}


/* =========================================================
   FORUM LISTS
   ========================================================= */

.xg_widget_forum .discussion,
.xg_widget_forum .topic,
.xg_widget_forum .forum-entry{
    background:#fff!important;
    border:4px solid #111!important;
    border-radius:14px!important;
    margin-bottom:18px!important;
    padding:18px!important;
    box-shadow:6px 6px 0 #111!important;
}


/* =========================================================
   INDIVIDUAL DISCUSSION THREADS
   ========================================================= */

.xg_widget_forum .discussion-entry,
.xg_widget_forum .forumDiscussion{
    background:#fff!important;
    border:4px solid #111!important;
    border-radius:16px!important;
    padding:30px!important;
    box-shadow:8px 8px 0 #111!important;
}


/* =========================================================
   COMMENTS / REPLIES
   ========================================================= */

.comment,
.xg_lightborder,
.xg_theme .xg_module.comment{
    background:#fff!important;
    border:3px solid #111!important;
    border-radius:14px!important;
    padding:16px!important;
    margin-bottom:18px!important;
    box-shadow:5px 5px 0 #111!important;
}


/* =========================================================
   GROUPS / HUBS
   ========================================================= */

.xg_widget_groups .group,
.group-item,
.groupHeader,
.group-description,
.group-forum{
    background:#fff!important;
    border:4px solid #111!important;
    border-radius:16px!important;
    box-shadow:7px 7px 0 #111!important;
}


/* =========================================================
   GROUP HERO BANNERS
   ========================================================= */

.groupHeader{
    background:var(--neo-blue)!important;
    color:#111!important;
    padding:30px!important;
}

.groupHeader h1{
    font-size:3rem!important;
    font-weight:900!important;
    text-transform:uppercase;
}


/* =========================================================
   SIDEBARS
   ========================================================= */

.xg_sidebar,
.sidebar,
.xg_theme .column.sidebar{
    background:#fff!important;
    border:4px solid #111!important;
    border-radius:16px!important;
    padding:20px!important;
    box-shadow:6px 6px 0 #111!important;
}


/* =========================================================
   PROFILE CARDS
   ========================================================= */

.xg_widget_profiles .vcard,
.member-item{
    background:#fff!important;
    border:4px solid #111!important;
    border-radius:16px!important;
    box-shadow:6px 6px 0 #111!important;
    overflow:hidden;
}


/* =========================================================
   CARDS HOVER EFFECT
   ========================================================= */

.xg_module:hover,
.matrix-item:hover,
.discussion:hover,
.group:hover,
.vcard:hover{
    transform:translate(-3px,-3px);
    transition:all .15s ease;
    box-shadow:10px 10px 0 #111!important;
}


/* =========================================================
   FORMS
   ========================================================= */

input[type=text],
input[type=password],
textarea,
select{
    background:#fff!important;
    border:3px solid #111!important;
    border-radius:10px!important;
    padding:12px!important;
    font-weight:600!important;
    box-shadow:3px 3px 0 #111 inset!important;
}


/* =========================================================
   SEARCH BAR
   ========================================================= */

input[type=search]{
    background:#fff!important;
    border:4px solid #111!important;
    border-radius:14px!important;
    padding:14px 18px!important;
    box-shadow:5px 5px 0 #111!important;
}


/* =========================================================
   TABS
   ========================================================= */

ul.tabContainer li a{
    background:#fff!important;
    border:3px solid #111!important;
    border-radius:12px 12px 0 0!important;
    box-shadow:4px 4px 0 #111!important;
    font-weight:800!important;
}


/* =========================================================
   ACTIVITY FEED
   ========================================================= */

.activityFeed,
.feed-story{
    background:#fff!important;
    border:4px solid #111!important;
    border-radius:14px!important;
    box-shadow:6px 6px 0 #111!important;
    padding:18px!important;
    margin-bottom:20px!important;
}


/* =========================================================
   BLOG POSTS
   ========================================================= */

.blog-post,
.post{
    background:#fff!important;
    border:4px solid #111!important;
    border-radius:16px!important;
    padding:28px!important;
    box-shadow:7px 7px 0 #111!important;
}


/* =========================================================
   FEATURED CALLOUTS
   ========================================================= */

.featured,
.highlight,
.notice{
    background:var(--neo-yellow)!important;
    border:4px solid #111!important;
    border-radius:14px!important;
    padding:20px!important;
    box-shadow:6px 6px 0 #111!important;
}


/* =========================================================
   TAGS
   ========================================================= */

.tag,
a.tag{
    background:var(--neo-green)!important;
    border:3px solid #111!important;
    border-radius:999px!important;
    padding:6px 12px!important;
    font-weight:800!important;
    box-shadow:3px 3px 0 #111!important;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.pagination a{
    background:#fff!important;
    border:3px solid #111!important;
    border-radius:10px!important;
    box-shadow:4px 4px 0 #111!important;
    padding:10px 14px!important;
}


/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */

@media(max-width:768px){

    .groupHeader h1{
        font-size:2rem!important;
    }

    .xg_module,
    .discussion,
    .group,
    .vcard{
        margin-bottom:16px!important;
    }

    button,
    .button{
        width:100%!important;
    }
}


/* =========================================================
   EXTRA NEO TOUCHES
   ========================================================= */

h1,h2,h3,h4{
    font-weight:900!important;
    text-transform:uppercase;
    letter-spacing:-0.03em;
}

::selection{
    background:var(--neo-pink);
    color:#111;
}


/* =========================================================
   GROUP FORUM THREADS
   ========================================================= */

.group-forum .discussion,
.group-forum .comment{
    background:#fff!important;
    border:4px solid #111!important;
    border-radius:16px!important;
    box-shadow:6px 6px 0 #111!important;
}


/* =========================================================
   MEMBER PROFILE HEADER
   ========================================================= */

.profileHeader{
    background:var(--neo-pink)!important;
    border:4px solid #111!important;
    border-radius:20px!important;
    box-shadow:8px 8px 0 #111!important;
    padding:30px!important;
}


/* =========================================================
   END
   ========================================================= */