/*
Theme Name: JV Gaming Dark
Theme URI: https://example.com/jvgaming
Author: Sterbane
Author URI: https://example.com
Description: Theme WordPress gaming en mode sombre integral. Header avec coupes angulaires (clip-path), logo central, menu a gauche, recherche a droite. Articles en cartes arrondies sombres avec image en haut et gros titre blanc. Sidebar avec widgets dans cartes sombres. Police Unbounded.
Version: 3.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jvgaming
Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready, dark-mode
*/

/* ================= RESET ================= */
* { margin: 0; padding: 0; outline: none; box-sizing: border-box; }

:root {
  --accent: #FF4074;
  --dark: #2B2B2B;
  --darker: #1a1a1a;
  --bg: #000000;
  --card: #161616;
  --card-border: #232323;
  --text: #e6e6e6;
  --muted: #9a9a9a;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Unbounded", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { border: 0; max-width: 100%; height: auto; display: block; }

a { color: #fff; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--accent); }

h1, h2, h3, h4, h5, h6 { color: #fff; line-height: 1.2; font-weight: 600; margin: 0 0 .5em; }
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p { margin: 0 0 1em; color: var(--text); }

.clear { clear: both; }

/* ================= CONTAINER ================= */
.container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

#pageholder { background: var(--bg); min-height: 100vh; }

/* Custom grid */
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; align-items: stretch; }
.row > [class*="col-"] { padding: 0 12px; }
.col-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
@media (max-width: 991px) {
  .col-8, .col-4 { flex: 0 0 100%; max-width: 100%; }
}

/* ================= HEADER (clean dark bar) ================= */
.mainhead {
  background: var(--dark);
  position: relative;
  z-index: 100;
  border-bottom: 3px solid var(--accent);
}

.main-header {
  position: relative;
  padding: 0;
}

.header-sec { padding: 0; }

.header-sec .row { margin: 0; align-items: center; min-height: 110px; }
.header-sec .row > div { padding: 0; }

.header-col-menu,
.header-col-logo,
.header-col-search {
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 110px;
}

.header-col-menu { flex: 0 0 41.666%; max-width: 41.666%; padding-left: 24px; }
.header-col-logo {
  flex: 0 0 16.666%;
  max-width: 16.666%;
  justify-content: center;
  padding: 10px 18px;
}
.header-col-search {
  flex: 0 0 41.666%;
  max-width: 41.666%;
  justify-content: flex-end;
  padding-right: 24px;
}

/* Logo content with subtle glow */
.classic-gaming-logo {
  display: inline-block;
  position: relative;
  z-index: 2;
  text-align: center;
  filter: drop-shadow(0 2px 10px rgba(255, 64, 116, .35));
}

.classic-gaming-logo img,
.custom-logo {
  max-height: 130px;
  width: auto;
  display: block;
  margin: 0 auto;
}

h1.site-title, p.site-title {
  font-size: 22px;
  margin: 0;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}
h1.site-title a, p.site-title a { color: #fff; font-size: 22px; }
.site-description { color: #fff; opacity: .6; font-size: 12px; text-align: center; margin-top: 4px; }

/* ================= NAVIGATION ================= */
.toggle-nav { display: none; }
.toggle-nav button {
  background: #fff;
  border: 0;
  color: var(--dark);
  padding: 8px 22px;
  border-radius: 25px;
  font-family: inherit;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 1px;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.main-nav li {
  display: inline-flex;
  position: relative;
  align-items: center;
  padding: 10px 4px;
}

.main-nav a {
  font-size: 12px;
  display: block;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 4px;
}

.main-nav a:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
  color: #fff;
  position: relative;
}

.main-nav .current-menu-item > a::before,
.main-nav .current_page_item > a::before {
  content: "";
  position: absolute;
  background: var(--accent);
  height: 10px;
  width: 10px;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* Sub-menu */
.main-nav ul ul {
  position: absolute;
  background: #1c1c1c;
  min-width: 220px;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  flex-direction: column;
  padding: 6px 0;
  border-top: 3px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
  z-index: 9999;
  transition: opacity .2s ease;
}

.main-nav li:hover > ul,
.main-nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
}

.main-nav ul ul li {
  display: block;
  padding: 0;
  border-bottom: 1px solid #2a2a2a;
}
.main-nav ul ul li:last-child { border-bottom: 0; }

.main-nav ul ul a {
  display: block;
  padding: 10px 16px;
  color: #ddd;
  font-size: 12px;
}

.main-nav ul ul a:hover {
  background: var(--accent);
  color: #fff;
}

@media (max-width: 991px) {
  .toggle-nav { display: block; }
  .header-col-menu { padding: 14px; justify-content: center; }
  .classic-gaming-logo { filter: none; }

  .header-col-menu,
  .header-col-logo,
  .header-col-search {
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: center;
  }

  .main-nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #1c1c1c;
    border-radius: 8px;
    padding: 8px;
    margin-top: 10px;
  }
  .main-nav.toggled ul { display: flex; }
  .main-nav li { display: block; padding: 0; width: 100%; text-align: center; }
  .main-nav a { padding: 12px; text-align: center; }
  .main-nav ul ul {
    position: static;
    opacity: 1;
    visibility: visible;
    border-top: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* ================= SEARCH FORM (header) — FIXED ================= */
.top-search {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  max-width: 100%;
  overflow: hidden;
}

.search_box,
.top-search form,
.top-search .search-form {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 280px;
  min-width: 0;
}

.search-form,
.is-search-form {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.main-header .search-field,
.main-header .is-search-input,
.main-header input[type="search"],
.top-search input[type="search"] {
  flex: 1 1 auto;
  border: 0;
  background: #555;
  color: #fff;
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 22px 0 0 22px;
  font-family: inherit;
  min-width: 0;
  width: auto;
  max-width: 100%;
}

.main-header .search-field::placeholder,
.top-search input::placeholder {
  color: #fff;
  opacity: .55;
}

.main-header .search-submit,
.main-header .is-search-submit,
.top-search button,
.top-search input[type="submit"] {
  background: #555;
  border: 0;
  color: #fff;
  padding: 0 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 0 22px 22px 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

.main-header .search-submit:hover,
.top-search button:hover {
  background: var(--accent);
}

/* Ensure header doesn't allow horizontal overflow */
.mainhead,
.main-header,
.header-sec,
.header-sec .row {
  overflow: hidden;
  max-width: 100%;
}

@media (max-width: 991px) {
  .top-search { justify-content: center; padding: 0 16px 14px; overflow: visible; }
  .search_box, .top-search form { max-width: none; }
}

/* ================= CONTENT WRAPPER ================= */
.contentsecwrap { padding: 35px 0; clear: both; }

.site-main { width: 100%; }

/* ================= ARTICLE LIST (.postsec-list) ================= */
.postsec-list { display: flex; flex-direction: column; gap: 0; }

.postsec-list article.hentry,
.postsec-list .blog-post {
  background: var(--card);
  padding: 30px;
  position: relative;
  border-radius: 12px;
  margin-bottom: 30px;
  border: 1px solid var(--card-border);
  transition: box-shadow .3s ease, transform .3s ease;
}

.postsec-list article.hentry:hover {
  box-shadow: 0 0 20px rgba(255, 64, 116, .15);
  transform: translateY(-2px);
}

.listarticle { border-radius: 5px; }

.post-thumb {
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 8px;
}

.post-thumb a { display: block; }

.post-thumb img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .4s ease;
}

.post-thumb a:hover img { transform: scale(1.03); }

.entry-header { margin-bottom: 10px; }

.listarticle h2,
.listarticle .single_title,
h2.single_title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.25;
}

.listarticle h2 a,
.single_title a {
  color: #fff;
  text-decoration: none;
  word-wrap: break-word;
  font-size: 28px;
}

.listarticle h2 a:hover,
.single_title a:hover {
  color: var(--accent);
}

.entry-summary { margin-bottom: 0; }

.entry-summary p,
.entry-summary .entry-content,
.entry-summary .entry-content p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.sticky-label {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ================= SINGLE POST / PAGE ================= */
.single-post-wrap,
.single-page-wrap,
article.type-post.single-wrap,
article.type-page.single-wrap {
  background: var(--card);
  border-radius: 12px;
  padding: 32px 34px;
  border: 1px solid var(--card-border);
}

.single-post-wrap .post-thumbnail,
.single-page-wrap .post-thumbnail {
  margin: -32px -34px 28px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.single-post-wrap .post-thumbnail img,
.single-page-wrap .post-thumbnail img { width: 100%; display: block; }

.entry-title {
  font-size: 30px;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.2;
}

.entry-meta {
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 16px;
  border-bottom: 1px solid #2a2a2a;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.entry-meta a { color: #bbb; }

.entry-content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  margin-top: 22px;
}

.entry-content h2,
.entry-content h3 { margin-top: 1.6em; color: #fff; }

.entry-content h2 {
  font-size: 22px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2a2a2a;
}

.entry-content a {
  color: var(--accent);
  text-decoration: underline;
}

.entry-content a:hover { opacity: .85; }

.entry-content img { margin: 1em 0; border-radius: 8px; }

.entry-content blockquote {
  border-left: 4px solid var(--accent);
  background: #0d0d0d;
  margin: 1.4em 0;
  padding: 14px 20px;
  color: #ddd;
  font-style: italic;
  border-radius: 0 6px 6px 0;
}

.entry-content ul,
.entry-content ol { margin: 0 0 1em 1.5em; }
.entry-content li { margin-bottom: .4em; }

.entry-content code {
  background: #0a0a0a;
  color: #ffd479;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: .9em;
}

.entry-footer {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #2a2a2a;
  font-size: 13px;
  color: var(--muted);
}

.tags a,
.tags-links a {
  text-decoration: none;
  color: #fff;
  background: var(--dark);
  padding: 6px 12px;
  margin: 4px 4px 4px 0;
  border-radius: 5px;
  display: inline-block;
  font-size: 12px;
}

.tags a:hover,
.tags-links a:hover {
  background: var(--accent);
  color: #fff;
}

/* Post navigation */
.post-navigation {
  margin-top: 22px;
  background: var(--card);
  padding: 16px 22px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
}

.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.post-navigation .nav-subtitle {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.post-navigation .nav-title { color: #fff; font-weight: 600; font-size: 14px; }

/* ================= PAGINATION ================= */
.pagination,
.navigation.pagination,
nav.navigation.pagination {
  margin: 30px auto;
  text-align: center;
}

.nav-links .page-numbers {
  background: var(--dark);
  color: #fff !important;
  padding: 10px 15px;
  text-decoration: none;
  display: inline-block;
  margin: 0 3px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
  background: var(--accent);
  color: #fff;
}

/* ================= COMMENTS ================= */
.comments-area {
  margin-top: 28px;
  background: var(--card);
  border-radius: 12px;
  padding: 28px 30px;
  border: 1px solid var(--card-border);
}

.comments-title { font-size: 22px; margin-bottom: 22px; color: #fff; }

.comment-list { list-style: none; padding: 0; margin: 0 0 26px; }
ol.comment-list li {
  list-style: none;
  margin-bottom: 5px;
  border-bottom: 1px solid #2a2a2a;
  padding: 16px 0;
}

.comment-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.comment-content p { color: var(--text); }

h2#reply-title {
  border-top: 1px solid #2a2a2a;
  padding-top: 20px;
  color: #fff;
}

.comment-respond label { color: #ccc; font-size: 13px; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #2a2a2a;
  background: #0d0d0d;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 12px;
  font-family: inherit;
}

.comment-respond input[type="submit"] {
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 10px 22px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  font-family: inherit;
}

.comment-respond input[type="submit"]:hover {
  background: #d62e5f;
}

/* ================= SIDEBAR / WIDGETS ================= */
#sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#sidebar .widget,
aside.widget {
  padding: 22px 24px;
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--card-border);
  border-bottom: 3px solid var(--accent);
  margin-bottom: 24px;
  transition: box-shadow .3s ease;
}

#sidebar .widget:hover {
  box-shadow: 0 0 18px rgba(255, 64, 116, .12);
}

#sidebar .widget-title,
.widget-title,
#sidebar h3 {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  padding-bottom: 10px;
  margin-bottom: 14px;
  text-transform: capitalize;
}

#sidebar ul { list-style: none; padding: 0; margin: 0; }

#sidebar ul li {
  padding: 6px 0 6px 22px;
  position: relative;
  color: var(--text);
  border-bottom: 1px solid #232323;
  font-size: 13px;
}

#sidebar ul li:last-child { border-bottom: 0; }

#sidebar ul li::before {
  color: var(--accent);
  content: "\25B8";
  position: absolute;
  left: 4px;
  top: 6px;
  font-size: 12px;
}

#sidebar .widget a,
#sidebar .widget a:visited { color: var(--text); }
#sidebar .widget a:hover { color: var(--accent); }

#sidebar input[type="search"],
#sidebar input[type="text"] {
  border: 1px solid #2a2a2a;
  background: #0d0d0d;
  color: #fff;
  padding: 10px 12px;
  width: 100%;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

#sidebar input.search-submit,
#sidebar .search-submit,
#sidebar form .wp-block-search__button {
  padding: 10px 18px;
  border: 0;
  background: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 1px;
  font-family: inherit;
}

#sidebar form .wp-block-search__button:hover,
#sidebar input.search-submit:hover {
  background: #d62e5f;
}

#sidebar .textwidget,
#sidebar .custom-html-widget { color: var(--text); }

#sidebar .textwidget a {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  margin: 6px 0;
}

#sidebar .textwidget img,
#sidebar img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0;
}

#sidebar iframe,
.textwidget iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 8px;
  border: 0;
  background: #000;
}

/* Tag cloud in sidebar */
.widget .tagcloud a {
  border: 1px solid #2a2a2a;
  color: #fff;
  display: inline-block;
  font-size: 13px !important;
  line-height: 1.5;
  margin: 0 4px 6px 0;
  padding: 5px 12px;
  border-radius: 4px;
}

.widget .tagcloud a:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* ================= FOOTER ================= */
#footer {
  background: #000;
  color: #fff;
  margin-top: 40px;
}

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { color: #fff; }
#footer a, #footer p { color: #fff; }
#footer a:hover, #footer h6 { color: var(--accent); }

.copywrap {
  font-size: 14px;
  padding: 14px 10px !important;
  background: var(--dark);
}

.copywrap p,
.copywrap p a {
  color: #fff !important;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 13px;
}

#footer .copywrap a:hover { color: var(--accent); }

.copywrap .copywrap-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.copywrap .copywrap-info.center-content {
  justify-content: center;
  text-align: center;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-menu a {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.footer-menu a:hover { color: var(--accent); }

/* Scroll to top */
#button,
a.scroll-btn {
  background: var(--dark);
  color: #fff;
  cursor: pointer;
  width: 60px;
  height: 60px;
  text-align: center;
  position: fixed;
  border-radius: 50%;
  bottom: 50px;
  right: 20px;
  z-index: 999;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}

#button:hover,
.scroll-btn:hover { background: var(--accent); color: #fff; }

/* ================= 404 / NO RESULTS ================= */
.error-404,
.no-results {
  text-align: center;
  padding: 50px 24px;
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--card-border);
}

.error-404 h1 {
  font-size: 80px;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 700;
}

.error-404 h2,
.no-results h2 { color: #fff; }
.error-404 p, .no-results p { color: var(--muted); }

/* Page header (archive titles, search) */
.page-header {
  margin-bottom: 24px;
  background: var(--card);
  padding: 22px 26px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
}

.page-title { margin: 0; color: #fff; font-size: 24px; }

/* ================= UTILITIES ================= */
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption { max-width: 100%; margin-bottom: 1em; }
.wp-caption-text {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding-top: 6px;
}

.skip-link { background: #fff; color: #1a1a1a; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }