/* =========================================================
   WorldofPC — site-wide DARK THEME
   Loaded last (after parent-style + site.css) on every page.
   Palette:
     page bg      #0e1322
     surface      #141a2e   (cards, panels, widgets)
     elevated     #1c2438   (inputs, tab headers, pills)
     border       rgba(255,255,255,.08)
     text         #d9deec   muted #9aa3b8   heading #f1f3fa
     accent       #8b5cf6   (matches cards/badges)
   Brand accent colours from the theme options (main_color1/2/3)
   are kept on small accent elements (badges, buttons); only large
   surfaces are forced dark so nothing stays light.
   ========================================================= */

/* ---------- Base ---------- */
html body {
	background: #0e1322 !important;   /* replaces images/bg.png */
	color: #d9deec;
}
body,
p, li, dd, dt, address, .home-content {
	color: #d9deec;
}
h1, h2, h3, h4, h5, h6 { color: #f1f3fa; }

a { color: #b4a0f0; }
a:hover { color: #ffffff; }

hr { border-color: rgba(255, 255, 255, .1); }

/* generic light dividers used around the theme */
.line_bottom_col,
.line_widget_col,
#single-share,
#page-title-box,
.entry hr { border-color: rgba(255, 255, 255, .1) !important; }

/* ---------- Header: trending / top bar (the bar is transparent over the body) ---------- */
.top-navigation,
.trending-articles,
.trend-slide a,
.toplist a { color: #d9deec; }
.trend-slide a:hover,
.toplist a:hover { color: #fff; }

/* ---------- Main content containers ---------- */
.home-content {
	background: #141a2e !important;
	border-color: rgba(255, 255, 255, .08) !important;
	color: #d9deec;
}
.cat-info { color: #c3cadd; }

/* archive left mini-sidebar (forced dark; it normally uses main_color2) */
#small-sidebar { background: #141a2e !important; border-radius: 8px; }
#small-sidebar a,
.wrap-categories .menu-left a { color: #cdd3e3 !important; }
.wrap-categories .menu-left a:hover { color: #fff !important; }

/* ---------- Right sidebar + widgets ---------- */
.sidebar, aside.sidebar, .widget { color: #c8cfe2; }
.widget a { color: #c3cadd; }
.widget a:hover { color: #fff; }

/* widget title bar: dark with an accent edge (normally main_color3) */
.widget-title { background: #1c2438 !important; border-left: 3px solid #8b5cf6; }
.widget-title h3 { color: #f1f3fa !important; }

/* Gutenberg block widgets that ship light backgrounds */
ol.wp-block-latest-comments,
ul.wp-block-latest-posts,
ul.wp-block-rss {
	background: #141a2e !important;
	border-color: rgba(255, 255, 255, .08) !important;
}
ol.wp-block-latest-comments li,
ul.wp-block-latest-posts li,
ul.wp-block-rss li,
div.widget ol.wp-block-latest-comments li,
.wp-block-page-list li,
.widget_recent_entries li,
.widget_recent_comments li,
.widget_nav_menu li,
.widget_pages li,
.widget_categories li { border-bottom-color: rgba(255, 255, 255, .08) !important; }

/* tag clouds */
p.wp-block-tag-cloud a.tag-cloud-link,
.tagcloud a {
	background: #1c2438 !important;
	color: #cdd3e3 !important;
	border-color: rgba(255, 255, 255, .1) !important;
}

/* search inputs (widget + header) */
div.widget_search #searchform2 #s,
.wp-block-search .wp-block-search__input,
.header-search input[type="text"],
#searchform2 #s {
	background: #1c2438 !important;
	color: #e6e9f2 !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
}

/* calendar */
#wp-calendar caption { color: #e6e9f2; }
#wp-calendar thead th { color: #9aa3b8; }
#wp-calendar tbody,
#wp-calendar tbody td,
#wp-calendar tbody td:hover {
	background: #141a2e !important;
	color: #cdd3e3;
	border-color: rgba(255, 255, 255, .08) !important;
}
#wp-calendar tbody td a { color: #b4a0f0 !important; }

/* ---------- Single post ---------- */
.wrap-fullwidth,
.single-content,
.post,
.media-single-content { color: #d9deec; }

.entry,
.entry p,
.entry li,
.entry span,
.entry td,
.entry dl,
.entry dd { color: #d3d9e8; }
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6,
.single-content h1, .single-content h2,
.entry strong, .entry b { color: #f1f3fa; }
.entry a { color: #b4a0f0; }

/* entry meta (author/date/views row + custom game meta) */
.entry-top, .entry-top a,
.entry-top div.link-author a,
.entry-top div.time-article a,
.entry-top div.views-article a,
.entry-top div.views-article a span { color: #cdd3e3 !important; }
/* meta boxes: theme-options CSS gives .releaseGroup/.gameVersion a #e3e3e3
   (light) background — darken them so the labels are readable. Keep the
   purple/green value badges. */
.parentCustomMeta { background: transparent !important; border: 0 !important; }
.releaseGroup, .gameVersion { background: #1c2438 !important; }
.releaseGroupSpan, .gameVersionSpan { color: #e6e9f2 !important; }
.releaseGroupValue, .gameVersionValue { color: #fff !important; }

/* tables, quotes, code inside posts */
.entry table, .entry th, .entry td { border-color: rgba(255, 255, 255, .12) !important; }
.entry th { background: #1c2438; color: #f1f3fa; }
blockquote, blockquote p {
	background: #161d2e !important;
	color: #cdd3e3 !important;
	border-left: 3px solid #8b5cf6;
}
code, pre, tt, kbd {
	background: #11162a !important;
	color: #e6e9f2 !important;
	border: 1px solid rgba(255, 255, 255, .08);
}

/* related articles container (normally main_color3) */
#related-wrap { background: #141a2e !important; }

/* ---------- Tabby responsive tabs (game posts) ----------
   The plugin's JS rebuilds the markup into responsive-tabs__* classes;
   tabby.css styles the active tab + panel white, so override those. */
.responsive-tabs .responsive-tabs__list__item {
	background: transparent !important;
	color: #cdd3e3 !important;
}
.responsive-tabs .responsive-tabs__list__item:hover { color: #fff !important; }
.responsive-tabs .responsive-tabs__list__item--active,
.responsive-tabs .responsive-tabs__list__item--active:hover {
	background: #8b5cf6 !important;
	border-color: #8b5cf6 !important;
	color: #fff !important;
}
.responsive-tabs ul.responsive-tabs__list { border-color: rgba(255, 255, 255, .1) !important; }

.responsive-tabs .responsive-tabs__panel {
	background: #141a2e !important;
	border-color: rgba(255, 255, 255, .1) !important;
	color: #d3d9e8 !important;
}
.responsive-tabs .responsive-tabs__panel a { color: #b4a0f0 !important; }

/* mobile accordion headings */
.responsive-tabs .responsive-tabs__heading {
	background: #1c2438 !important;
	border-color: rgba(255, 255, 255, .1) !important;
	color: #cdd3e3 !important;
}
.responsive-tabs .responsive-tabs__heading--active {
	background: #8b5cf6 !important;
	color: #fff !important;
}

/* gallery captions */
.gallery-caption, .wp-caption-text { color: #9aa3b8; }

/* ---------- Comments ---------- */
.comments, #respond, #comments { color: #d3d9e8; }
.comments h3.comment-reply-title { background: #1c2438 !important; color: #f1f3fa !important; }
ul.comment li .comment-body {
	background: #141a2e;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 8px;
	color: #d3d9e8;
}
.comment-author, .comment-author a,
.comment-author cite, .comment-author cite a { color: #f1f3fa !important; }
.comment-date, .comment-date a { color: #9aa3b8 !important; }
#commentform label { color: #cdd3e3; }

/* ---------- Forms / inputs site-wide ---------- */
input[type="text"], input[type="email"], input[type="url"],
input[type="search"], input[type="password"], input[type="tel"],
input[type="number"], textarea, select,
#commentform input, #commentform textarea {
	background: #1c2438 !important;
	color: #e6e9f2 !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
}
::placeholder { color: #8a93ab !important; opacity: 1; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #8a93ab !important; }

/* ---------- Pagination (normally main_color3 / main_color2) ---------- */
.wp-pagenavi a, .wp-pagenavi span,
.my-paginated-posts a, .my-paginated-posts span {
	background: #1c2438 !important;
	color: #cdd3e3 !important;
	border-color: rgba(255, 255, 255, .08) !important;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current,
.my-paginated-posts a:hover {
	background: #8b5cf6 !important;
	color: #fff !important;
	border-color: #8b5cf6 !important;
}
.wp-pagenavi span.pages, .wp-pagenavi span.extend { background: transparent !important; color: #9aa3b8 !important; border: 0 !important; }

/* ---------- Footer (forced dark; normally main_color3) ---------- */
footer { background: #0b0f1a !important; }
footer, footer .wrap, footer p, footer li, footer span,
footer .widget, footer a { color: #c3cadd; }
footer a:hover { color: #fff; }
footer .widget-title, footer .widget-title h3 { color: #f1f3fa !important; }
footer div.tagcloud a { color: #cdd3e3 !important; }
.footer-copyright, .footer-copyright a { color: #9aa3b8; }

/* ---------- Light tinted message boxes -> dark tinted ---------- */
.boxinfo    { background: #14223a !important; color: #cfe0f5 !important; }
.boxsucces  { background: #14291c !important; color: #d6f3c9 !important; }
.boxerror   { background: #2e1618 !important; color: #ffd3d3 !important; }
.boxnotice  { background: #2b2710 !important; color: #f4ecc0 !important; }

/* =========================================================
   Color-scheme overrides (video-wp/css/colors/default.css)
   This is the theme's real colour scheme — source of the white
   page wrappers and most dark text. Make the big wrappers
   transparent so the dark page shows and the cards/widgets pop.
   ========================================================= */

/* the white/grey page wrappers -> transparent (dark page shows through) */
.wrap-fullwidth,
.wrap-fullwidth-bg,
.wrap-content,
.wrap-left-content,
.single-content {
	background: transparent !important;
	border-color: rgba(255, 255, 255, .08) !important;
	box-shadow: none !important;
}

/* top bar (trending / quick links) was solid white */
.top-navigation, .footer-navigation {
	background: #0b0f1a !important;
}
.wrap-footer { background: transparent !important; border-top-color: rgba(255, 255, 255, .08) !important; }

/* base text + headings + links from the scheme */
html body { color: #d9deec; }
h1, h2, h3, h4, h5, h6,
h1.article-title, h1.page-title { color: #f1f3fa; }
a:link, a:visited { color: #b4a0f0; }

/* card title text colour (the title-overlay gradient lives in site.css) */
ul.modern-articles li a h2 { color: #fff; }

/* single-post media/featured area */
.media-single-content { background: #141a2e !important; }

/* header search field (scheme forces white bg + black text) */
#searchform2 #s { background: #1c2438 !important; color: #e6e9f2 !important; }

/* live-search results dropdown */
ul.search_results { background: #141a2e !important; border: 1px solid rgba(255, 255, 255, .1) !important; }
ul.search_results li { color: #d3d9e8; }
ul.search_results li:hover { background: #1c2438 !important; }

/* category dropdown panels in the main menu (were white with black text) */
.jquerycssmenu ul li ul { background: #141a2e !important; border: 1px solid rgba(255, 255, 255, .08); }
.jquerycssmenu ul li ul li a { color: #cdd3e3 !important; }
.jquerycssmenu ul li ul li:hover a,
.jquerycssmenu ul li ul li:hover a:hover { background: #1c2438 !important; color: #fff !important; }

/* left mini-sidebar group headers (menuline) were white blocks */
ul.menu-left li.menuline { background: #1c2438 !important; box-shadow: none !important; }
ul.menu-left li.menuline a,
ul.menu-left li.menuline a:hover { color: #d9deec !important; }

/* tag clouds + tag buttons */
div.tagcloud a, div.tags-btns a { background: #1c2438 !important; color: #cdd3e3 !important; }
div.tagcloud-entry a { background: #1c2438 !important; color: #cdd3e3 !important; }

/* footer scheme bits */
footer .widget-title { background: #1c2438 !important; }
footer .widget-title h3 { color: #f1f3fa !important; }
footer #wp-calendar tbody, footer #wp-calendar tbody td { background: #11162a !important; }
.footer-copyright { color: #9aa3b8 !important; }

/* scheme borders/dividers */
.line_widget_col,
.line_bottom_related,
ul.comment li,
.article_list li { border-color: rgba(255, 255, 255, .08) !important; }

/* comment + contact form input text colour (#333) */
#commentform #author, #commentform #email, #commentform #url,
#commentform textarea,
#contactform #contactName, #contactform #emaill, #contactform #subject,
#contactform textarea,
form.wpcf7-form input, form.wpcf7-form textarea {
	background: #1c2438 !important;
	color: #e6e9f2 !important;
	border-color: rgba(255, 255, 255, .12) !important;
}

/* ---------- Updates page (recently-updated-games shortcode) ----------
   The shortcode renders inside a normal Page (.single-content > .entry). The
   theme-options Custom CSS (stored in the DB, injected inline in <head> AFTER
   this file, with !important) styles the rows light — so we override it with
   higher-specificity selectors (body + full class chain) + !important to force
   the dark theme on every part. */
body .recently-updated-games-posts-wrap {
	background: #11162a !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-radius: 10px !important;
	padding: 6px 16px 16px !important;
	color: #c3cadd !important;
}
/* date group header → purple pill */
body .recently-updated-games-posts-wrap .recently-updated-games-date {
	display: inline-block !important;
	background: #8b5cf6 !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 5px 13px !important;
	border-radius: 6px !important;
	margin: 18px 0 10px !important;
	border: 0 !important;
}
/* each updated-game row (holds the title chip + " - Version: x" text) */
body .recently-updated-games-posts-wrap .recently-updated-games-post {
	background: transparent !important;
	color: #9aa3b8 !important;             /* the "- Version: x" text */
	border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
	padding: 8px 0 !important;
}
/* the linked game title (was a light #e3e3e3 chip) */
body .recently-updated-games-posts-wrap .recently-updated-games-post-title {
	display: inline-block !important;
	background: #1c2438 !important;
	border-radius: 6px !important;
	padding: 6px 12px !important;
	margin: 0 6px 0 0 !important;
}
body .recently-updated-games-posts-wrap .recently-updated-games-post-title a { color: #e6e9f2 !important; }
body .recently-updated-games-posts-wrap .recently-updated-games-post-title a:hover { color: #b4a0f0 !important; }

/* Unify the page title box with the updates list into a single card.
   #page-title-box (the "Updates" heading + share row) and .entry (which holds
   the shortcode) are siblings inside the .post div; we make the title box the
   card header and .entry the card body, and drop the inner wrap's own panel so
   there's no double frame. The .wopc-updates-page class is added by a post_class
   filter (functions.php) only on the page that contains the shortcode. */
.wopc-updates-page #page-title-box {
	background: #11162a !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-bottom: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 16px 18px 12px !important;
	box-sizing: border-box;
}
.wopc-updates-page .entry {
	background: #11162a !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
	border-top: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 4px 18px 16px !important;
	box-sizing: border-box;
}

/* Updates page is a simple list — make it full width (no sidebar) and remove
   the wrapper's bottom gap so the footer sits right below the card. */
body.wopc-updates .single-content { width: 100% !important; float: none !important; }
body.wopc-updates .sidebar { display: none !important; }
body.wopc-updates .wrap-fullwidth { padding-bottom: 0 !important; margin-bottom: 0 !important; }
/* trailing <br> the template adds after the content — drop the dead gap */
.wopc-updates-page .entry > br { display: none !important; }
/* inner wrap no longer needs its own frame — .entry is the card body now */
.wopc-updates-page .recently-updated-games-posts-wrap {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ---------- Header / main menu ----------
   Theme options inject `.main-menu { background-color:#259de8 !important }`
   inline in <head> AFTER this file loads, so we beat it with higher-specificity
   `!important` rules (header .main-menu / .stickytop.main-menu) to bring the
   header in line with the dark theme. */
header .main-menu,
.stickytop.main-menu {
	background: #0b0f1a !important;
	border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
/* sticky (scrolled) header bar keeps the dark skin + a little lift */
header .stickytop.main-menu,
.stickytop.main-menu {
	box-shadow: 0 6px 22px rgba(0, 0, 0, .45) !important;
}

/* menu + logo-area link colour (was forced #FFFFFF by theme options) */
header .main-menu a { color: #e6e9f2 !important; }

/* top-level menu hover / current item → purple accent to match the site */
header .jquerycssmenu > ul > li > a:hover,
header .jquerycssmenu > ul > li.current-menu-item > a,
header .jquerycssmenu > ul > li.current_page_item > a,
header .jquerycssmenu > ul > li.current-home > a,
header .jquerycssmenu > ul > li.current-menu-parent > a,
header .jquerycssmenu > ul > li.current-menu-ancestor > a {
	color: #b4a0f0 !important;
}

/* social icons in the menu bar */
header .top-social li a { color: #c3cadd !important; }
header .top-social li a:hover { color: #fff !important; }

/* Search button (the modal trigger) — was invisible on the dark bar.
   The theme's Font Awesome 6 (SVG+JS) doesn't resolve the <i class="fa fa-search">
   glyph here, so we draw our own magnifier as an inline-SVG background and hide
   the empty icon element. Render it as a clear round button on the right that
   opens the popup search. */
header .top-social li.search { opacity: 1 !important; margin-left: 6px; }
header .top-social li.search a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .07) !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23e6e9f2'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.35-4.35'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 19px 19px !important;
	border: 1px solid rgba(255, 255, 255, .14);
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
/* hide the empty FA icon (and any svg FA injects) so only our magnifier shows */
header .top-social li.search a > i,
header .top-social li.search a > svg { display: none !important; }
header .top-social li.search a:hover {
	background-color: #8b5cf6 !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.35-4.35'/%3E%3C/svg%3E") !important;
	border-color: #8b5cf6 !important;
	transform: translateY(-2px);
}