/* ============================================
   ByteBlick — Modern Dark Tech Design v3
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS Variables ── */
:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-card: #16161f;
  --bg-card-hover: #1c1c28;
  --accent: #6c63ff;
  --accent-2: #00d4ff;
  --text-primary: #f0f0f8;
  --text-secondary: #8888aa;
  --text-muted: #55556a;
  --border: rgba(255,255,255,0.07);
  --border-accent: rgba(108, 99, 255, 0.4);
  --radius: 12px;
  --radius-sm: 8px;
  --font-main: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── Base ── */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-main) !important;
  -webkit-font-smoothing: antialiased;
}

/* ── HEADER FIX — kill all excess height ── */
/* Target every possible wrapper in the header template */
.wp-block-template-part[data-slug="header"],
.wp-block-template-part[data-slug="header"] > div,
.wp-block-template-part[data-slug="header"] > div > div {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The group block wrapping logo + nav */
header .wp-block-group,
.wp-site-blocks > header .wp-block-group,
#masthead .wp-block-group {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Kill inline min-height style on any element inside header */
header [style*="min-height"],
.wp-block-template-part[data-slug="header"] [style*="min-height"] {
  min-height: 0 !important;
}

/* Header styling */
header, .site-header, #masthead,
.wp-block-template-part[data-slug="header"] {
  background: rgba(10, 10, 15, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: var(--text-primary) !important;
}

p { color: var(--text-secondary) !important; line-height: 1.8 !important; }

a {
  color: var(--accent) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
a:hover { color: var(--accent-2) !important; }

/* ── Logo ── */
.wp-block-site-title,
.wp-block-site-title a {
  font-family: var(--font-mono) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--accent) !important;
}

/* ── Navigation ── */
.wp-block-navigation-item__content {
  font-family: var(--font-main) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s ease !important;
}

.wp-block-navigation-item__content:hover {
  color: var(--text-primary) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* ── Hero ── */
.wp-block-cover:not(header *):not(.wp-block-template-part *) {
  background: transparent !important;
  padding: 80px 32px !important;
}

.wp-block-cover h1,
.wp-block-cover .wp-block-heading {
  font-size: clamp(2rem, 5vw, 3.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(135deg, #f0f0f8 30%, #6c63ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1.1 !important;
}

/* ── Post Cards ── */
article, .post, .hentry {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  transition: all 0.3s ease !important;
}

article:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-accent) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}

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

.entry-meta {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  color: var(--text-muted) !important;
}

/* ── Buttons ── */
.wp-block-button__link {
  background: transparent !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent) !important;
  font-family: var(--font-main) !important;
  font-size: 0.85rem !important;
  padding: 7px 16px !important;
  border-radius: 100px !important;
  transition: all 0.25s ease !important;
}

.wp-block-button__link:hover {
  background: var(--accent) !important;
  color: white !important;
  box-shadow: 0 0 20px rgba(108,99,255,0.35) !important;
}

/* ── Post images ── */
.post-thumbnail img, .wp-post-image {
  border-radius: var(--radius-sm) !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* ── Footer ── */
footer, .site-footer {
  background: var(--bg-secondary) !important;
  border-top: 1px solid var(--border) !important;
  padding: 40px 32px !important;
  margin-top: 60px !important;
}

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

/* ── Selection ── */
::selection { background: rgba(108,99,255,0.35); color: white; }

/* ── Post animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
article { animation: fadeInUp 0.35s ease both; }
article:nth-child(2) { animation-delay: 0.05s; }
article:nth-child(3) { animation-delay: 0.1s; }
article:nth-child(4) { animation-delay: 0.15s; }

/* ── Responsive ── */
@media (max-width: 768px) {
  header .wp-block-group { padding: 10px 16px !important; }
  .wp-block-cover:not(header *) { padding: 50px 20px !important; }
  article { padding: 18px !important; }
}