/* ============================================================
   REBELLICIOUS - CUSTOM CSS
   Website: older-gamers.eu
   Last updated: March 2026

   TABLE OF CONTENTS:
   1.  Font Imports & Definitions
   2.  Typography - Body & Global Text
   3.  Typography - Headings
   4.  Layout & Background
   5.  Header & Navigation
   6.  Widgets & Sidebar
   7.  Forms & Input Fields
   8.  Lists & Text Formatting
   9.  Mobile / Responsive
   10. PeepSo - Social Stream
   11. PeepSo - Members & Avatars
   12. PeepSo - Userbar & Navigation
   13. PeepSo - Registration Form
   14. wpForo - Forum Styling
   15. wpForo - Heading Fixes
   16. User Submitted Posts
   ============================================================ */


/* ============================================================
   1. FONT IMPORTS & DEFINITIONS
   Loads Exo 2 from Google Fonts and Sauce Tomato from server.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'Sauce Tomato';
    src: url('/wp-content/themes/astra-child/fonts/Sauce Tomato.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   2. TYPOGRAPHY - BODY & GLOBAL TEXT
   Body text, paragraphs and inputs use Exo 2.
   Scoped to main content areas to avoid breaking plugins.
   ============================================================ */

body {
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.7;
}

.site-content p,
.site-content li,
.entry-content p,
.entry-content li,
.widget p,
.widget li {
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.7;
}

.site-content a,
.entry-content a {
    font-family: 'Exo 2', sans-serif;
}

.site-content input,
.site-content textarea,
.site-content select {
    font-family: 'Exo 2', sans-serif;
}

button,
.button,
.ast-button,
input[type="submit"] {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ============================================================
   3. TYPOGRAPHY - HEADINGS
   Homepage (body.home): all headings use Sauce Tomato Regular.
   All other pages: headings use Exo 2 Bold.
   ============================================================ */

/* --- Default: all pages except homepage --- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.widget-title,
.widgettitle,
.page-title {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- Homepage only: switch headings to Sauce Tomato --- */
body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home h5,
body.home h6,
body.home .entry-title,
body.home .site-title,
body.home .widget-title,
body.home .widgettitle,
body.home .page-title {
    font-family: 'Sauce Tomato', 'Impact', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Widget titles - consistent size and colour across all pages */
.widget-title,
.widgettitle {
    font-size: 18px !important;
    margin-bottom: 14px;
    color: #f10545;
}

/* Single post/page titles */
.ast-single-post .entry-title {
    color: #f10545;
}


/* ============================================================
   4. LAYOUT & BACKGROUND
   Main background colour and general page containers.
   ============================================================ */

.ast-builder-grid-row-container-inner {
    background-color: #2c2d32;
    margin: 2px;
    padding: 10px;
}


/* ============================================================
   5. HEADER & NAVIGATION
   Site header background and link colours.
   ============================================================ */

.site-header a * {
    color: #2c2d32;
}

.header-widget-area.widget-area.site-header-focus-item.header-widget-area-inner {
    color: #2c2d32;
}


/* ============================================================
   6. WIDGETS & SIDEBAR
   Widget text sizing and spacing.
   ============================================================ */

.widget,
.sidebar {
    margin-bottom: 25px;
}

.widget p,
.widget li,
.sidebar p,
.sidebar li {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 500;
    font-size: 16px !important;
    line-height: 1.7;
}


/* ============================================================
   7. FORMS & INPUT FIELDS
   General input styling for login and other site forms.
   Note: Plugin-specific form styles are in their own sections.
   ============================================================ */

/* (Plugin-specific form styles are handled in sections 13 and 14) */


/* ============================================================
   8. LISTS & TEXT FORMATTING
   Fixes bullets, numbered lists, bold and italic text
   inside widgets and article content.
   ============================================================ */

/* Unordered lists */
.widget_text ul,
.widget_block ul,
.elementor-widget-text-editor ul,
.wp-block-list ul,
article ul {
    list-style-type: disc !important;
    list-style-position: outside !important;
    margin-left: 1.5em !important;
    padding-left: 1em !important;
    margin-bottom: 1em !important;
}

.widget_text ul li,
.widget_block ul li,
.elementor-widget-text-editor ul li,
.wp-block-list li,
article ul li {
    list-style-type: disc !important;
    display: list-item !important;
    margin-bottom: 0.5em !important;
}

/* Nested lists */
.widget_text ul ul,
.widget_block ul ul,
article ul ul {
    list-style-type: circle !important;
    margin-left: 1.5em !important;
    margin-top: 0.5em !important;
}

/* Ordered lists */
.widget_text ol,
.widget_block ol,
.elementor-widget-text-editor ol,
article ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
    margin-left: 1.5em !important;
    padding-left: 1em !important;
    margin-bottom: 1em !important;
}

.widget_text ol li,
.widget_block ol li,
.elementor-widget-text-editor ol li,
article ol li {
    list-style-type: decimal !important;
    display: list-item !important;
    margin-bottom: 0.5em !important;
}

/* Italic text */
.widget_text em, .widget_text i,
.widget_block em, .widget_block i,
.elementor-widget-text-editor em, .elementor-widget-text-editor i,
article em, article i {
    font-style: italic !important;
}

/* Bold text */
.widget_text strong, .widget_text b,
.widget_block strong, .widget_block b,
.elementor-widget-text-editor strong, .elementor-widget-text-editor b,
article strong, article b {
    font-weight: bold !important;
}


/* ============================================================
   9. MOBILE / RESPONSIVE
   Adjustments for screens smaller than 921px.
   ============================================================ */

/* Show hamburger menu on mobile */
@media (max-width: 921px) {
    .ast-mobile-header-wrap {
        display: block !important;
    }

    .main-header-bar {
        display: flex !important;
        background-color: #2c2d32 !important;
    }

    .ast-mobile-menu-trigger {
        display: flex !important;
    }

    /* Fix white background on mobile */
    body,
    .site-content,
    #content,
    .ast-container {
        background-color: #2c2d32 !important;
    }
}

/* Font size adjustments for small screens */
@media (max-width: 767px) {
    body {
        font-size: 16px;
    }

    .widget-title,
    .widgettitle {
        font-size: 20px !important;
    }

    .widget p,
    .widget li {
        font-size: 15px !important;
    }
}


/* ============================================================
   10. PEEPSO - SOCIAL STREAM
   Icon colours, post actions, reactions, filters, links.
   ============================================================ */

#peepso-wrap {
    background-color: #2c2d32;
}

#peepso-wrap .ps-stream,
#peepso-wrap .ps-postbox,
#peepso-wrap .ps-post,
#peepso-wrap .ps-comment,
#peepso-wrap .ps-dropdown,
#peepso-wrap .ps-toolbar {
    background-color: #2c2d32;
}

#peepso-wrap .ps-stream,
#peepso-wrap .ps-postbox {
    border-color: #f105cb;
}

/* Post type icons */
.pso-postbox__type > i {
    color: #f105cb;
}

.pso-postbox__type:hover > i {
    color: #f2e206;
}

/* Filter toggle */
.pso-posts-filter__toggle > i {
    color: #a8f205;
}

.pso-posts-filters__start .pso-posts-filter__toggle > span {
    color: #23ccf3;
}

/* Icons */
.pso-i-users-alt.ps-js-icon {
    color: #f105cb;
}

.pso-i-bars-staggered {
    color: #a8f205;
}

/* General PeepSo links */
.plg-peepso a:hover,
.peepso a:hover {
    color: #23ccf3;
}

.plg-peepso a:hover {
    border-width: 0px;
}

/* Reaction counts */
.ps-reactions__likes {
    border-bottom-color: #202dd9;
    border-bottom-width: 0px;
}

.ps-post__actions-inner .ps-reactions__likes {
    color: #23ccf3;
}

/* "No more posts" empty state */
#ps-no-more-posts.ps-posts__empty,
.ps-posts__empty {
    color: #f10545;
    border-width: 0px;
}


/* ============================================================
   11. PEEPSO - MEMBERS & AVATARS
   Avatars should always be transparent (no coloured backgrounds).
   Note: Do NOT add broad img rules here as they break plugin
   emoji rendering (learned from Better Messages emoji issue).
   ============================================================ */

.ps-focus__cover,
.ps-focus__cover img {
    background-color: transparent !important;
    background: none !important;
}

.ps-avatar,
.ps-avatar img {
    background-color: transparent !important;
    background: none !important;
    border: 0px solid #a8f205 !important;
}

.ps-avatar img {
    border-width: 0px;
}

.psw-members__item .ps-avatar--member img {
    border-color: #702929;
    width: 40px;
}

.ps-avatar--member img {
    border-color: #b86969;
}

.psw-members__item .ps-avatar--member {
    border-width: 0px;
}

.psw-members.ps-js-widget-content {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    overflow: visible !important;
}

.psw-members .psw-members__item {
    display: inline-flex !important;
    margin: 2px !important;
    padding: 0 !important;
    width: auto !important;
}


/* ============================================================
   12. PEEPSO - USERBAR & NAVIGATION
   The top userbar with username and navigation links.
   ============================================================ */

/* PeepSo message chat headers - always Exo 2 */
.bp-messages-wrap h4,
.bp-messages-wrap .thread h4,
.bm-info h4 {
    font-family: 'Exo 2', sans-serif !important;
    color: #23ccf3 !important;
}

.psw-userbar__name {
    background-color: #f105cb;
    color: #2c2d32;
}

.psw-userbar__name a,
.psw-userbar__name,
.header-widget-area .psw-userbar__name a {
    background-color: #1ea5e8;
    color: #823737;
}

.psw-userbar__name > a {
    color: #2c2d32;
}

.psw-userbar__name > a:hover {
    color: #2c2d32;
}

.psw-userbar__name a:hover,
.header-widget-area .psw-userbar__name a:hover {
    color: #a8f205 !important;
}

.psw-userbar__user {
    color: #0f0c0f;
}

.pso-navbar-user__toggle > span {
    color: #23ccf3;
}

/* Navbar links */
.pso-navbar__link.ps-js-navbar-menu {
    color: #a8f205;
}

.pso-navbar__link {
    color: #f10545;
}

.pso-navbar__link:hover,
.pso-active .pso-navbar__link {
    color: #f10545;
}


/* ============================================================
   13. PEEPSO - REGISTRATION FORM
   Field labels and input styling for the registration form.
   ============================================================ */

.ps-register label,
.ps-register .ps-field-label,
.ps-register .ps-label,
.peepso-register label,
#peepso-register label,
.ps-form label {
    color: #ffffff !important;
}

.ps-input {
    background-color: #3a3b40 !important;
    color: #ffffff !important;
    border-color: #23ccf3 !important;
}

.ps-input::placeholder {
    color: #aaaaaa !important;
}

/* Description text under fields */
.lbl-descript {
    color: #aaaaaa !important;
}

/* Required field asterisk */
.required-sign {
    color: #f10545 !important;
}


/* ============================================================
   14. WPFORO - FORUM STYLING
   Colours for forum titles, links, inputs and backgrounds.
   ============================================================ */

#wpforo #wpforo-wrap #wpforo-title {
    color: #f10545;
}

/* Scoped span styling - only targets specific forum navigation spans
   to avoid affecting other elements inside wpForo */
#wpforo #wpforo-wrap .wpf-nav span,
#wpforo #wpforo-wrap .wpf-breadcrumb span,
#wpforo #wpforo-wrap .wpf-stats span,
#wpforo #wpforo-wrap .wpf-forum-info span {
    color: #23ccf3;
    background-color: #2c2d32;
}

#wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item a {
    color: #23ccf3;
}

#wpforo #wpforo-wrap a:hover {
    color: #f105cb;
    background-color: #2c2d32;
}

#wpforo #wpforo-wrap a:link {
    color: #23ccf3;
    background-color: #2c2d32;
}

/* Forum topic title input field */
#wpforo #wpforo-wrap .wpf-topic-create .wpf-field.wpf-field-name-title input[type="text"] {
    background-color: #23ccf3;
    color: #2c2d32;
}

#wpforo #wpforo-wrap .wpf-topic-form-wrap .wpf-field-name-title input[type="text"],
#wpforo #wpforo-wrap .wpf-field input[type="text"],
#wpforo #wpforo-wrap input[type="text"],
#wpforo #wpforo-wrap input {
    color: #2c2d32;
}


/* ============================================================
   15. WPFORO - HEADING FIXES
   Fixes spaced-out heading fonts caused by Tailwind classes
   injected into post content, and the main forum title.
   ============================================================ */

#wpforo-title {
    font-family: 'Exo 2', sans-serif !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-transform: none !important;
    font-weight: 700 !important;
}

.wpforo-post-content h1,
.wpforo-post-content h2,
.wpforo-post-content h3,
.wpf-content h2,
.wpf-content h3,
[class*="font-claude"],
[class*="font-bold"].mt-3,
.wpforo-post-content [class*="text-text"] {
    font-family: 'Exo 2', sans-serif !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-weight: 700 !important;
    text-transform: none !important;
}


/* ============================================================
   16. USER SUBMITTED POSTS
   Styling for the user submitted posts form and tag buttons.
   ============================================================ */

#user-submitted-posts label {
    color: #ffffff;
}

#tag-buttons-container {
    display: flex;
    flex-wrap: wrap;
}

#tag-buttons-container button {
    background: #2c2d32;
    color: #ffffff;
    border: 1px solid #f10545;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin: 4px;
}

#tag-buttons-container button.selected {
    background: #f10545;
    color: #ffffff;
}
a[href*="peepso.com/external-link"] { 
    display: none !important; 
}