/* ============================================================
   PAEDZ – Global Site Stylesheet (all pages)
   Overrides Blocksy header/footer to match dark gaming theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Tajawal:wght@400;500;700;800&family=Bebas+Neue&display=swap');

:root {
  --bg:      #0a0a0f;
  --bg2:     #111118;
  --bg3:     #18181f;
  --accent:  #e8ff00;
  --accent2: #ff3c3c;
  --text:    #f0f0f0;
  --muted:   #888;
  --border:  rgba(255,255,255,0.07);
}

/* ── Global body dark background ── */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Cairo', sans-serif !important;
  direction: rtl !important;
}

/* ════════════════════════════════════
   NUKE ALL BLOCKSY WHITE GHOST AREAS
════════════════════════════════════ */

/* Kill any white/light backgrounds sitewide */
.ct-header-builder,
.ct-header-builder > *,
.ct-header-top-bar,
.ct-header-middle-row,
.ct-header-bottom-row,
.ct-sticky-header,
.ct-sticky-header-container,
[data-row="top"],
[data-row="middle"],
[data-row="bottom"],
.header-builder-top,
.header-builder-middle,
.header-builder-bottom {
  background: rgba(10,10,15,0.97) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Any transparent/white panel that Blocksy injects */
.ct-panel,
.ct-offcanvas,
[data-behaviour="modal"],
.ct-sidebar {
  background: var(--bg2) !important;
}

/* Kill white blocks above header */
.ct-header > *:not(.ct-container),
.site-header > *:not(.ct-header-inner) {
  background: rgba(10,10,15,0.97) !important;
}

/* Ensure no white flash on page load */
html { background: var(--bg) !important; }

/* ════════════════════════════════════
   BLOCKSY HEADER – Dark Override
════════════════════════════════════ */
.ct-header,
header.ct-header,
[data-id="header"] {
  background: rgba(10,10,15,0.97) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(20px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

/* Logo text */
.ct-header .site-title a,
.ct-header .site-logo,
.ct-header a.site-title {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--accent) !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.08em !important;
}
.ct-header .site-logo img { filter: brightness(0) invert(1); }

/* Nav links */
.ct-header nav a,
.ct-header .ct-nav-links a,
.ct-header .ct-menu a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}
.ct-header nav a:hover,
.ct-header .ct-nav-links a:hover,
.ct-header .ct-menu a:hover,
.ct-header .current-menu-item > a {
  color: var(--accent) !important;
}

/* Dropdown menus */
.ct-header .sub-menu,
.ct-header .dropdown-menu {
  background: rgba(10,10,15,0.98) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.ct-header .sub-menu a { color: var(--muted) !important; }
.ct-header .sub-menu a:hover { color: var(--accent) !important; }

/* Mobile hamburger */
.ct-header .ct-toggle-dropdown-mobile,
.ct-header button[data-toggle] {
  color: var(--text) !important;
}

/* ════════════════════════════════════
   BLOCKSY FOOTER – Dark Override
════════════════════════════════════ */
.ct-footer,
footer.ct-footer,
[data-id="footer"] {
  background: var(--bg2) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.ct-footer a { color: var(--muted) !important; transition: color 0.2s !important; }
.ct-footer a:hover { color: var(--text) !important; }
.ct-footer .widget-title,
.ct-footer h3,
.ct-footer h4 { color: var(--text) !important; }

/* ════════════════════════════════════
   SINGLE POST / PAGE – Dark Content
════════════════════════════════════ */

/* Post container */
.site-content,
.ct-container,
.entry-content,
article.post,
article.page,
.single-post .site-main,
.page .site-main {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Post title */
.entry-title,
.page-title,
h1.entry-title {
  color: var(--accent2) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
}

/* Post meta (date, category, author) */
.entry-meta,
.ct-post-meta,
.posted-on,
.byline,
.cat-links {
  color: var(--muted) !important;
  font-size: 0.82rem !important;
}
.entry-meta a,
.ct-post-meta a { color: var(--muted) !important; }
.entry-meta a:hover { color: var(--accent) !important; }

/* Post body text */
.entry-content p,
.entry-content li,
.entry-content td {
  color: rgba(240,240,240,0.85) !important;
  line-height: 1.8 !important;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: #fff !important;
  font-family: 'Tajawal', sans-serif !important;
}
.entry-content a {
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(232,255,0,0.3) !important;
}
.entry-content a:hover { text-decoration-color: var(--accent) !important; }

/* Blockquote */
.entry-content blockquote {
  border-right: 4px solid var(--accent) !important;
  border-left: none !important;
  background: rgba(232,255,0,0.04) !important;
  padding: 1rem 1.2rem !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--text) !important;
}

/* Images */
.entry-content img {
  border-radius: 10px !important;
  max-width: 100% !important;
}

/* ── Category/archive page ── */
.ct-archive-header,
.page-header { background: var(--bg2) !important; color: var(--text) !important; }

/* ── Post cards on archive ── */
.ct-post-card,
article.type-post {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.2s, transform 0.2s !important;
}
.ct-post-card:hover,
article.type-post:hover {
  border-color: rgba(232,255,0,0.3) !important;
  transform: translateY(-3px) !important;
}
.ct-post-card .entry-title a,
article.type-post .entry-title a {
  color: var(--text) !important;
}
.ct-post-card:hover .entry-title a,
article.type-post:hover .entry-title a {
  color: var(--accent) !important;
}

/* ── Sidebar widgets ── */
.widget {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 1.2rem !important;
  margin-bottom: 1.5rem !important;
}
.widget-title {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--text) !important;
  border-bottom: 2px solid var(--accent) !important;
  padding-bottom: 0.4rem !important;
  margin-bottom: 0.85rem !important;
  letter-spacing: 0.05em !important;
}
.widget a { color: var(--muted) !important; }
.widget a:hover { color: var(--accent) !important; }

/* ── Comments ── */
#comments { background: var(--bg2) !important; border-radius: 12px !important; padding: 1.5rem !important; }
.comment-list li { background: var(--bg3) !important; border-radius: 8px !important; padding: 1rem !important; margin-bottom: 0.5rem !important; }
.comment-author b { color: var(--accent) !important; }
.comment-content p { color: var(--text) !important; }
#respond { background: var(--bg2) !important; border-radius: 12px !important; padding: 1.5rem !important; margin-top: 1rem !important; }
#respond h3 { color: var(--text) !important; }
#respond input, #respond textarea {
  background: var(--bg3) !important; border: 1px solid var(--border) !important;
  color: var(--text) !important; border-radius: 8px !important; padding: 0.6rem 0.9rem !important;
}
#respond .submit {
  background: var(--accent) !important; color: #000 !important;
  border: none !important; border-radius: 8px !important;
  font-weight: 700 !important; padding: 0.6rem 1.5rem !important;
  cursor: pointer !important;
}

/* ── Search results ── */
.search-no-results,
.search-results article {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
}

/* ── 404 page ── */
.error-404 { background: var(--bg) !important; color: var(--text) !important; text-align: center !important; }

/* ── Pagination ── */
.page-numbers {
  background: var(--bg2) !important; color: var(--muted) !important;
  border: 1px solid var(--border) !important; border-radius: 6px !important;
  padding: 0.4rem 0.8rem !important;
}
.page-numbers.current,
.page-numbers:hover { background: var(--accent) !important; color: #000 !important; border-color: var(--accent) !important; }

/* ── WP Admin Bar compensation ── */
.admin-bar .ct-header { top: 32px !important; }
@media (max-width: 782px) { .admin-bar .ct-header { top: 46px !important; } }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Logo image in Blocksy header (inner pages) ── */
.ct-header .site-logo img,
.ct-header .custom-logo,
.ct-header .site-logo-container img,
.ct-header .custom-logo-link img {
  height: 80px !important;
  max-height: 80px !important;
  width: auto !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.15) !important;
}
/* Hide Blocksy text logo if image is present */
.ct-header .custom-logo-link ~ .site-title,
.ct-header .site-title { font-size: 0 !important; }
/* But keep "Play and Enjoy" site title if no image logo */
.ct-header .site-title a { font-size: 0 !important; }
.ct-header .site-title a::after {
  content: 'Play & Enjoy';
  font-size: 1.2rem;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  color: #fff;
}

/* ── Ensure logo link is always clickable ── */
.ct-header .site-logo-container a,
.ct-header .custom-logo-link,
.ct-header .site-branding a,
.ct-header a[rel="home"] {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* ── Footer logo transparent ── */
.pdz-footer-logo { margin-bottom: 0.75rem; text-align: center; }
.pdz-footer-logo a { display: inline-block; }
.pdz-footer-logo-img { height: 70px; width: auto; display: block; margin: 0 auto; }

/* ═══════════════════════════════════════════
   ENHANCED SINGLE POST – DARK MODE
═══════════════════════════════════════════ */

/* Hero area with featured image */
.single-post .ct-hero-section,
.single-post .hero-section,
.single-post [data-hero] {
  background: var(--bg) !important;
}

/* Post title enhanced */
.single-post .entry-title,
.single-post h1.entry-title {
  font-size: 2rem !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  color: #fff !important;
  font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* Author box */
.single-post .ct-author-box,
.single-post .author-box {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
}
.single-post .ct-author-box .author-name a,
.single-post .author-box .author-name { color: var(--accent) !important; }

/* Related posts */
.single-post .ct-related-posts,
.single-post .related-posts {
  background: var(--bg) !important;
}
.single-post .ct-related-posts .entry-title a,
.single-post .related-posts .entry-title a {
  color: var(--text) !important;
}
.single-post .ct-related-posts .entry-title a:hover,
.single-post .related-posts .entry-title a:hover {
  color: var(--accent) !important;
}

/* Share buttons */
.single-post .ct-share-box a,
.single-post .share-links a {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}
.single-post .ct-share-box a:hover,
.single-post .share-links a:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Post navigation */
.single-post .post-navigation,
.single-post .ct-post-navigation {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 1.2rem !important;
  margin-top: 2rem !important;
}
.single-post .post-navigation a,
.single-post .ct-post-navigation a {
  color: var(--muted) !important;
  text-decoration: none !important;
}
.single-post .post-navigation a:hover,
.single-post .ct-post-navigation a:hover {
  color: var(--accent2) !important;
}

/* Featured image rounded */
.single-post .wp-post-image,
.single-post .ct-featured-image img {
  border-radius: 14px !important;
}

/* Code blocks */
.entry-content pre,
.entry-content code {
  background: var(--bg3) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 0.2em 0.5em !important;
  font-size: 0.88em !important;
}
.entry-content pre {
  padding: 1rem 1.2rem !important;
  overflow-x: auto !important;
}
.entry-content pre code {
  border: none !important;
  padding: 0 !important;
  background: none !important;
}

/* Tables */
.entry-content table {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.entry-content th {
  background: var(--bg3) !important;
  color: var(--accent) !important;
  font-weight: 800 !important;
  padding: 0.75rem 1rem !important;
  text-align: right !important;
}
.entry-content td {
  padding: 0.65rem 1rem !important;
  border-top: 1px solid var(--border) !important;
}

/* Lists enhanced */
.entry-content ul { list-style: none !important; }
.entry-content ul li { position: relative; padding-right: 1.2em !important; }
.entry-content ul li::before {
  content: '▸' !important;
  position: absolute !important;
  right: 0 !important;
  color: var(--accent2) !important;
  font-weight: bold !important;
}

/* HR / separator */
.entry-content hr,
.wp-block-separator {
  border: none !important;
  height: 1px !important;
  background: var(--border) !important;
  margin: 2rem 0 !important;
}

/* Captions */
.entry-content figcaption,
.wp-caption-text {
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  text-align: center !important;
  margin-top: 0.5rem !important;
}

/* ═══════════════════════════════════════════
   PERFORMANCE: Smooth font loading
═══════════════════════════════════════════ */
@font-face {
  font-display: swap;
}