/* =========================================================
   RED REBELLION — REFINED MAGAZINE CUSTOM CSS
   Theme: Refined Magazine
   Style: Black / Grey / Blood Red
   ========================================================= */


/* =========================================================
   1. MAIN COLOR CONTROLS
   Edit these first if you want to change the whole site.
   ========================================================= */

:root {
  /* Backgrounds */
  --rr-outer-bg: #000000;        /* Very outside/background of page */
  --rr-site-bg: #070707;         /* Main website background */
  --rr-section-bg: #0d0d0d;      /* General sections */
  --rr-card-bg: #111111;         /* Posts/cards/widgets */
  --rr-card-bg-alt: #181818;     /* Slightly lighter panels */

  /* Reds */
  --rr-blood: #3b0000;           /* Very dark blood red */
  --rr-dark-red: #650000;        /* Dark red */
  --rr-red: #9b0000;             /* Primary red */
  --rr-bright-red: #ff1a1a;      /* Bright red highlight */
  --rr-soft-red: #ff3333;        /* Link red */

  /* Accent */
  --rr-gold: #ffb000;            /* Gold accent */
  --rr-grey: #2b2b2b;            /* Dark grey */
  --rr-border: #ff0000;          /* Border red */

  /* Text */
  --rr-text: #e8e8e8;            /* Main text */
  --rr-muted: #a8a8a8;           /* Muted/meta text */
  --rr-white: #ffffff;           /* White text */
}


/* =========================================================
   2. FULL PAGE BACKGROUND
   Controls the outside area around the site.
   ========================================================= */

html,
body {
  background: var(--rr-outer-bg) !important;
  color: var(--rr-text) !important;
}


/* =========================================================
   3. MAIN SITE WRAPPERS
   Controls the main website body/container.
   ========================================================= */

#page,
.site,
.site-content,
#content,
.content-area,
.site-main,
#primary,
#main,
.wrapper,
.container,
.inner-wrapper,
.main-wrapper,
.main-container,
.content-wrapper {
  background: var(--rr-site-bg) !important;
  color: var(--rr-text) !important;
}


/* =========================================================
   4. TOP HEADER / DATE BAR
   This is the small top strip above the banner.
   ========================================================= */

.top-header,
.top-bar,
.header-top,
.site-header-top,
.header-info,
.header-date {
  background: var(--rr-blood) !important;
  color: var(--rr-white) !important;
  /*border-bottom: 1px solid var(--rr-border) !important;*/
}

.top-header a,
.top-bar a,
.header-top a,
.site-header-top a {
  color: var(--rr-gold) !important;
}


/* =========================================================
   5. LOGO / BANNER SECTION
   Controls the header/banner area.
   ========================================================= */

.site-header,
.header-wrapper,
.header-image,
.custom-header,
.header-media,
.site-branding,
.logo-section-wrapper,
.logo-section {
  background: var(--rr-blood) !important;
  color: var(--rr-white) !important;
  /*border-bottom: 1px solid var(--rr-border) !important;*/
}

/* Banner/header image behavior */
.site-header img,
.header-image img,
.custom-header img,
.header-media img,
.site-branding img,
.logo-section img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* =========================================================
   6. SITE TITLE / TAGLINE
   Only matters if you show text title instead of image.
   ========================================================= */

.site-title,
.site-title a {
  color: var(--rr-white) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.site-description,
.site-tagline {
  color: var(--rr-muted) !important;
}

.site-title a:hover {
  color: var(--rr-bright-red) !important;
}


/* =========================================================
   7. MAIN NAVIGATION MENU
   Controls Join / Events / Guides / Ranks / Uniform menu.
   ========================================================= */

.main-navigation,
#site-navigation,
.navbar,
.navigation,
.menu-primary-container,
.primary-menu,
.main-menu {
  background: #050505 !important;
  border-top: 1px solid var(--rr-border) !important;
  border-bottom: 1px solid var(--rr-border) !important;
}

.main-navigation ul,
#site-navigation ul,
.navbar ul,
.menu,
.primary-menu {
  background: #050505 !important;
}

.main-navigation a,
#site-navigation a,
.navbar a,
.menu a,
.primary-menu a {
  color: var(--rr-white) !important;
}

.main-navigation a:hover,
#site-navigation a:hover,
.navbar a:hover,
.menu a:hover,
.primary-menu a:hover,
.current-menu-item > a,
.current_page_item > a {
  background: var(--rr-red) !important;
  color: var(--rr-white) !important;
}

/* Home button */
.home-icon,
.menu-home,
.main-navigation .home,
#site-navigation .home {
  background: var(--rr-red) !important;
  color: var(--rr-white) !important;
}


/* =========================================================
   8. SEARCH ICON / SEARCH BOX
   ========================================================= */

.search-icon,
.search-toggle,
.search-submit,
button.search-submit {
  color: var(--rr-bright-red) !important;
}

.search-form,
.search-field,
input[type="search"] {
  background: #101010 !important;
  color: var(--rr-white) !important;
  border-top: 1px solid #ff0000 !important;
}
.search-icon-box {
  border-top: 1px solid var(--rr-border) !important;
	border-bottom: 1px solid var(--rr-border) !important;
  border-right: 1px solid var(--rr-border) !important;
  background: #9b0000 !important;
}
.current-menu-item {
	border-left: 1px solid var(--rr-border) !important;
	.search-icon {
		background: #ffffff !important
	}
}
/* Make search icon white like home icon */
.search-icon-box .fa-search,
.search-icon-box i.fa-search,
.search-icon-box .fa {
  color: #ffffff !important;
}

/* Make search icon box match home button */
.search-icon-box {
  background: #9b0000 !important;
  right-border: 1px solid #ff0000 !important;
}

/* Hover effect */
.search-icon-box:hover {
  background: #ff0000 !important;
}

.search-icon-box:hover .fa-search,
.search-icon-box:hover i.fa-search,
.search-icon-box:hover .fa {
  color: #ffffff !important;
}
/* =========================================================
   9. ATTENTION / TRENDING NEWS TICKER
   Rename this in theme settings if possible.
   Good names: RED ALERT, COMMAND WIRE, REBELLION FEED.
   ========================================================= */

.trending-news,
.trending-wrapper,
.ticker-news,
.news-ticker,
.trending-section,
.breaking-news,
.marquee,
.news-ticker-wrapper {
  background: #070707 !important;
  color: var(--rr-white) !important;
  border-top: 1px solid #ff0000 !important;
  border-bottom: 1px solid #ff0000 !important;
	border-left: 1px solid #ff0000 !important;
	border-right: 1px solid #ff0000 !important;
}

.trending-news .title,
.trending-title,
.ticker-title,
.news-ticker-title,
.breaking-news-title,
.attention,
.attention-title {
  background: var(--rr-red) !important;
  color: var(--rr-white) !important;
}

.trending-news a,
.ticker-news a,
.news-ticker a,
.breaking-news a {
  color: var(--rr-soft-red) !important;
}

.trending-news a:hover,
.ticker-news a:hover,
.news-ticker a:hover,
.breaking-news a:hover {
  color: var(--rr-gold) !important;
}


/* =========================================================
   10. FEATURED HOMEPAGE GRID / TOP STORIES
   Controls the large post blocks near the top.
   ========================================================= */

.featured-section,
.featured-slider,
.featured-post,
.slider-section,
.slider-wrapper,
.news-section,
.post-item,
.grid-item,
.featured-grid,
.featured-news,
.refined-magazine-featured {
  background: linear-gradient(180deg, #242424 0%, #101010 100%) !important;
  color: var(--rr-text) !important;
  border: 1px solid var(--rr-border) !important;
}

.featured-section *,
.featured-slider *,
.featured-post *,
.post-item *,
.grid-item * {
  color: inherit;
}


/* =========================================================
   11. POST CARDS / ARTICLE LIST
   Controls blog posts on homepage/archive.
   ========================================================= */

article,
.post,
.page,
.hentry,
.entry,
.blog-post,
.archive-post,
.single-post,
.wp-block-post {
  background: var(--rr-card-bg) !important;
  color: var(--rr-text) !important;
  border-bottom: 1px solid var(--rr-border) !important;
}

/* Inner article wrappers */
.entry-wrapper,
.article-wrapper,
.inside-article,
.post-inner,
.entry-inner,
.post-wrapper,
.single-post-wrapper,
.post-content,
.entry-content,
.entry-summary,
.entry-header,
.entry-footer {
  background: var(--rr-card-bg) !important;
  color: var(--rr-text) !important;
}


/* =========================================================
   12. MAIN POST CONTENT AREA
   This is where individual post text appears.
   ========================================================= */

.entry-content,
.entry-summary,
.post-content {
  background: var(--rr-card-bg) !important;
  color: var(--rr-text) !important;
  line-height: 1.75;
}

.entry-content p,
.entry-summary p {
  color: var(--rr-text) !important;
}


/* =========================================================
   13. HEADINGS / TITLES
   ========================================================= */

h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a,
.page-title,
.widget-title {
  color: var(--rr-white) !important;
}

.entry-title a:hover {
  color: var(--rr-bright-red) !important;
}


/* =========================================================
   14. NORMAL TEXT / META TEXT
   ========================================================= */

p,
li,
.entry-content,
.entry-summary {
  color: var(--rr-text) !important;
}

.entry-meta,
.entry-meta a,
.posted-on,
.byline,
.comments-link,
.cat-links,
.tags-links {
  color: var(--rr-muted) !important;
}


/* =========================================================
   15. LINKS
   ========================================================= */

a {
  color: var(--rr-soft-red) !important;
}

a:hover,
a:focus {
  color: var(--rr-gold) !important;
}


/* =========================================================
   16. CATEGORY LABELS / TAGS
   ========================================================= */

.cat-links a,
.category a,
.post-category,
.entry-meta .cat-links a,
span.cat-links a,
.tags-links a,
.post-categories a {
  background: var(--rr-red) !important;
  color: var(--rr-white) !important;
  border-radius: 3px !important;
  padding: 3px 7px !important;
  text-decoration: none !important;
}

.cat-links a:hover,
.tags-links a:hover,
.post-categories a:hover {
  background: var(--rr-bright-red) !important;
  color: var(--rr-white) !important;
}


/* =========================================================
   17. BUTTONS / READ MORE
   ========================================================= */

button,
input[type="submit"],
.wp-block-button__link,
.read-more,
.more-link,
.btn,
.button {
  background: var(--rr-red) !important;
  color: var(--rr-white) !important;
  border: 1px solid var(--rr-bright-red) !important;
  text-decoration: none !important;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.read-more:hover,
.more-link:hover,
.btn:hover,
.button:hover {
  background: var(--rr-bright-red) !important;
  color: var(--rr-white) !important;
}


/* =========================================================
   18. SIDEBAR / WIDGETS
   ========================================================= */

.sidebar,
.widget-area,
.widget,
.secondary,
#secondary {
  background: #0b0b0b !important;
  color: var(--rr-text) !important;
  border-color: var(--rr-border) !important;
}

.widget-title {
  background: var(--rr-blood) !important;
  color: var(--rr-white) !important;
  border-bottom: 1px solid var(--rr-border) !important;
  padding: 8px 10px !important;
}

.widget a {
  color: var(--rr-soft-red) !important;
}

.widget a:hover {
  color: var(--rr-gold) !important;
}


/* =========================================================
   19. COMMENTS
   ========================================================= */

.comments-area,
.comment-list,
.comment-body,
.comment-content,
#comments {
  background: var(--rr-card-bg) !important;
  color: var(--rr-text) !important;
  border-color: var(--rr-border) !important;
}

.comment-author,
.comment-meta,
.comment-meta a {
  color: var(--rr-muted) !important;
}


/* =========================================================
   20. FORMS / INPUTS
   ========================================================= */

input,
textarea,
select {
  background: #101010 !important;
  color: var(--rr-white) !important;
  border: 1px solid var(--rr-border) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--rr-bright-red) !important;
  outline: none !important;
}


/* =========================================================
   21. TABLES
   Good for ranks, event schedules, guide lists.
   ========================================================= */

table,
.wp-block-table table {
  background: #0b0b0b !important;
  color: var(--rr-text) !important;
  border: 1px solid var(--rr-border) !important;
}

th {
  background: var(--rr-blood) !important;
  color: var(--rr-white) !important;
}

td {
  background: #100707 !important;
  color: var(--rr-text) !important;
  border-color: var(--rr-border) !important;
}


/* =========================================================
   22. FOOTER
   ========================================================= */

.site-footer,
footer,
.footer-wrapper,
.footer-area {
  background: #050505 !important;
  color: var(--rr-muted) !important;
}

.site-footer a,
footer a {
  color: var(--rr-soft-red) !important;
}

.site-footer a:hover,
footer a:hover {
  color: var(--rr-gold) !important;
}


/* =========================================================
   23. WORDPRESS BLOCKS
   Covers pages/posts made with block editor.
   ========================================================= */

.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-column,
.wp-block-post,
.wp-block-post-content,
.wp-block-query,
.wp-block-template-part,
.wp-block-latest-posts,
.wp-block-media-text {
  background-color: transparent !important;
  color: var(--rr-text) !important;
}

.wp-block-separator,
hr {
  border-color: var(--rr-border) !important;
}


/* =========================================================
   24. IMAGES / CAPTIONS
   ========================================================= */

img {
  border-color: var(--rr-border) !important;
}

.wp-caption,
.gallery-caption {
  background: #0b0b0b !important;
  color: var(--rr-muted) !important;
}


/* =========================================================
   25. OPTIONAL POLISH
   Slightly cleaner blog look.
   ========================================================= */

.entry-title {
  letter-spacing: 0.5px !important;
}

.entry-content img {
  border: 1px solid var(--rr-border);
}


/* =========================================================
   26. EMERGENCY WHITE BACKGROUND FIXES
   If this creates weird issues, delete only this section.
   ========================================================= */

[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: white"],
[style*="background-color: white"],
[style*="background: rgb(255, 255, 255)"],
[style*="background-color: rgb(255, 255, 255)"] {
  background: var(--rr-card-bg) !important;
  background-color: var(--rr-card-bg) !important;
  color: var(--rr-text) !important;
}
/* =========================================================
   FIX WHITE MAIN CONTENT WRAPPERS
   Found via Inspect:f
   #content.site-content
   .container-inner.ct-container-main.clearfix
   .front-page-content-wrapper
   .refined-magazine-content-area
   ========================================================= */

#content.site-content,
.container-inner,
.ct-container-main,
.container-inner.ct-container-main,
.container-inner.ct-container-main.clearfix,
.front-page-content-wrapper,
.refined-magazine-content-area {
  background: #070707 !important;
  background-color: #070707 !important;
  color: #e8e8e8 !important;
}

/* If the post list itself needs dark spacing */
.front-page-content-wrapper article,
.refined-magazine-content-area article {
  background: #111111 !important;
  color: #e8e8e8 !important;
  border: 1px solid #ff0000 !important;
}

/* Keep post inner areas dark */
.front-page-content-wrapper .entry-header,
.front-page-content-wrapper .entry-content,
.front-page-content-wrapper .entry-summary,
.refined-magazine-content-area .entry-header,
.refined-magazine-content-area .entry-content,
.refined-magazine-content-area .entry-summary {
  background: #111111 !important;
  color: #e8e8e8 !important;
}