/*
Theme Name: 1 Bit Pixel - Arcade Theme
Theme URI: https://1bitpixel.com
Description: Professional dark arcade theme with images and proper layout
Author: 1 Bit Pixel
Author URI: https://1bitpixel.com
Template: astra
Version: 1.0
Text Domain: astra-child
Domain Path: /languages
*/

@import url("../astra/style.css");

/* CSS VARIABLES */
:root {
  --primary-dark: #1a1a2e;
  --primary-darker: #0f0f1e;
  --secondary-dark: #16213e;
  --accent-pink: #ff006e;
  --accent-cyan: #00d9ff;
  --accent-purple: #8338ec;
  --text-light: #e8e8f0;
  --text-secondary: #b8b8c8;
  --border-color: rgba(131, 56, 236, 0.3);
}

/* AGGRESSIVE RESETS TO OVERRIDE ASTRA */
* {
  background-color: transparent !important;
}

html,
body,
.site {
  background-color: var(--primary-darker) !important;
  background-image: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary-dark) 100%) !important;
  color: var(--text-light) !important;
}

body {
  background-attachment: fixed !important;
}

.site-content,
.ast-main-header-wrap,
.ast-container,
main {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-light) !important;
}

/* HEADER - DARK */
.site-header,
.main-header-bar,
.ast-main-header-wrap {
  background-color: var(--primary-darker) !important;
  background-image: none !important;
  border-bottom: 2px solid var(--border-color) !important;
}

.site-branding {
  background: transparent !important;
}

.site-title {
  color: var(--accent-cyan) !important;
  font-size: 1.75rem !important;
  margin: 0 !important;
}

.site-title a {
  color: var(--accent-cyan) !important;
  text-decoration: none !important;
}

/* LOGO */
.site-logo img,
.custom-logo {
  height: 60px !important;
  width: auto !important;
  background: transparent !important;
}

/* MENU */
.primary-menu,
.main-navigation {
  background: transparent !important;
}

.primary-menu a,
.main-navigation a,
.menu-item a {
  color: var(--text-light) !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.3s ease !important;
}

.primary-menu a:hover,
.main-navigation a:hover,
.menu-item a:hover {
  color: var(--accent-cyan) !important;
  border-bottom: 2px solid var(--accent-pink) !important;
}

/* FEATURED IMAGES - FORCE DISPLAY */
.post-thumbnail,
.ast-blog-featured-section,
.featured-image-container,
.featured-image,
.entry-image {
  width: 100% !important;
  height: 280px !important;
  background-color: var(--accent-purple) !important;
  background-image: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 8px !important;
  margin-bottom: 1.5rem !important;
  overflow: hidden !important;
  display: block !important;
}

.post-thumbnail img,
.featured-image img,
.entry-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ARTICLE CONTAINERS - DARK */
.ast-post-format,
.post,
.entry,
.blog-list-item,
article {
  background-color: rgba(22, 33, 62, 0.8) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  color: var(--text-light) !important;
  width: 100% !important;
}

/* GRID LAYOUT - PROPER WIDTH */
.ast-row,
.posts-inner,
.blog-posts-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 2rem !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

@media (max-width: 768px) {
  .ast-row,
  .posts-inner,
  .blog-posts-container {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ast-row,
  .posts-inner,
  .blog-posts-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1025px) {
  .ast-row,
  .posts-inner,
  .blog-posts-container {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* TYPOGRAPHY - LIGHT TEXT */
p, span, div, li, td, th {
  color: var(--text-light) !important;
  background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--accent-pink) !important;
  background-color: transparent !important;
}

a {
  color: var(--accent-cyan) !important;
}

a:hover {
  color: var(--accent-pink) !important;
}

.entry-title {
  color: var(--accent-pink) !important;
  font-size: 1.75rem !important;
}

.entry-title a {
  color: var(--accent-pink) !important;
  text-decoration: none !important;
}

.entry-title a:hover {
  color: var(--accent-cyan) !important;
}

/* AUTHOR INFO */
.entry-meta,
.post-meta {
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
  background: transparent !important;
}

.byline,
.posted-on {
  color: var(--text-secondary) !important;
}

/* AUTHOR BIO BOX */
.author-bio {
  background: rgba(131, 56, 236, 0.2) !important;
  border-left: 4px solid var(--accent-purple) !important;
  padding: 1.5rem !important;
  margin: 2rem 0 !important;
  border-radius: 8px !important;
  color: var(--text-secondary) !important;
}

.author-bio h4 {
  color: var(--accent-cyan) !important;
  margin-top: 0 !important;
}

.author-bio p {
  color: var(--text-secondary) !important;
  background: transparent !important;
}

/* FOOTER */
.site-footer {
  background: linear-gradient(135deg, rgba(15, 15, 30, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%) !important;
  border-top: 2px solid var(--border-color) !important;
  color: var(--text-light) !important;
  padding: 3rem 2rem !important;
}

.site-footer h3,
.site-footer h4 {
  color: var(--accent-cyan) !important;
}

.site-footer a {
  color: var(--accent-cyan) !important;
}

.site-footer a:hover {
  color: var(--accent-pink) !important;
}

.footer-widget {
  background: transparent !important;
  border: none !important;
}

/* WIDGETS */
.widget {
  background: transparent !important;
  border: none !important;
  color: var(--text-light) !important;
}

.widget-title {
  color: var(--accent-cyan) !important;
  background: transparent !important;
}

.widget a {
  color: var(--accent-cyan) !important;
}

.widget a:hover {
  color: var(--accent-pink) !important;
}

/* WCAG ACCESSIBILITY */
a:focus-visible {
  outline: 2px solid var(--accent-cyan) !important;
  outline-offset: 2px !important;
}

button:focus-visible {
  outline: 2px solid var(--accent-cyan) !important;
  outline-offset: 2px !important;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent-cyan) !important;
  outline-offset: 2px !important;
}

/* FORMS */
input,
textarea,
select {
  background-color: rgba(22, 33, 62, 0.8) !important;
  color: var(--text-light) !important;
  border: 1px solid var(--border-color) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-secondary) !important;
}

button {
  background-color: var(--accent-purple) !important;
  color: var(--text-light) !important;
  border: 1px solid var(--accent-purple) !important;
}

button:hover {
  background-color: var(--accent-pink) !important;
  border-color: var(--accent-pink) !important;
}

/* BLOCKQUOTES */
blockquote {
  border-left: 4px solid var(--accent-purple) !important;
  padding-left: 1.5rem !important;
  margin: 1.5rem 0 !important;
  color: var(--text-secondary) !important;
}

/* CODE */
code,
pre {
  background-color: rgba(22, 33, 62, 0.8) !important;
  color: var(--accent-cyan) !important;
  border: 1px solid var(--border-color) !important;
}

/* TABLES */
table {
  background: transparent !important;
  border-collapse: collapse !important;
}

th {
  background-color: rgba(131, 56, 236, 0.3) !important;
  color: var(--text-light) !important;
  border: 1px solid var(--border-color) !important;
}

td {
  border: 1px solid var(--border-color) !important;
  color: var(--text-light) !important;
}

/* LISTS */
ul, ol {
  background: transparent !important;
  color: var(--text-light) !important;
}

li {
  color: var(--text-light) !important;
  background: transparent !important;
}

/* GENERIC BACKGROUND RESETS */
[class*="bg-"],
[class*="background-"],
.bg,
.background {
  background-color: transparent !important;
}

/* COMMENT SECTION */
.comments-area {
  background: rgba(22, 33, 62, 0.6) !important;
  border: 1px solid var(--border-color) !important;
  padding: 2rem !important;
  border-radius: 8px !important;
  margin: 2rem 0 !important;
}

.comment-respond label {
  color: var(--text-light) !important;
}

/* SIDEBAR */
.sidebar,
.primary-sidebar {
  background: transparent !important;
}

/* BREADCRUMBS */
.breadcrumb {
  background: transparent !important;
  color: var(--text-secondary) !important;
}

.breadcrumb a {
  color: var(--accent-cyan) !important;
}

/* PAGINATION */
.pagination,
.page-numbers {
  background: transparent !important;
}

.page-numbers a,
.page-numbers span {
  background-color: rgba(131, 56, 236, 0.2) !important;
  color: var(--accent-cyan) !important;
  border: 1px solid var(--border-color) !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem !important;
}

.page-numbers a:hover,
.page-numbers.current {
  background-color: var(--accent-purple) !important;
  color: var(--text-light) !important;
}