/*
Theme Name:   Enfold Night Lab
Theme URI:    https://solomonegash.com
Description:  Night Laboratory child theme for Solomon Negash's personal blog. Dark deep-space aesthetic with teal accents, code-meets-literary editorial design.
Author:       Solomon Negash
Author URI:   https://solomonegash.com
Template:     enfold
Version:      1.0.0
Tags:         dark, academic, editorial, personal-blog
Text Domain:  enfold-nightlab
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --nl-bg:          #080c10;
  --nl-bg2:         #0e1520;
  --nl-surface:     #111827;
  --nl-surface2:    #162030;
  --nl-border:      #1e2d42;
  --nl-border2:     #263546;
  --nl-text:        #c8d8e8;
  --nl-text-bright: #e8f2ff;
  --nl-muted:       #5a7290;
  --nl-muted2:      #3d5470;
  --nl-teal:        #2dd4bf;
  --nl-teal-dim:    rgba(45,212,191,.10);
  --nl-teal-glow:   rgba(45,212,191,.04);
  --nl-amber:       #f59e0b;
  --nl-amber-dim:   rgba(245,158,11,.10);
  --nl-red:         #ef4444;
  --nl-red-dim:     rgba(239,68,68,.10);
  --nl-sage:        #6ab08a;
  --nl-sage-dim:    rgba(106,176,138,.10);

  --nl-font-display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --nl-font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --nl-font-body:    'Karla', system-ui, sans-serif;

  --nl-radius-sm:   6px;
  --nl-radius:      10px;
  --nl-radius-lg:   16px;

  --nl-shadow:      0 4px 24px rgba(0,0,0,.35);
  --nl-shadow-lg:   0 8px 40px rgba(0,0,0,.5);
}

/* ============================================================
   2. BASE RESET & BODY
   ============================================================ */
html { scroll-behavior: smooth; }

body,
#wrap_all {
  background-color: var(--nl-bg) !important;
  color: var(--nl-text) !important;
  font-family: var(--nl-font-body) !important;
  font-size: 15px;
  line-height: 1.75;
}

/* Scanline + grid texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,.06) 3px,
      rgba(0,0,0,.06) 4px
    ),
    linear-gradient(rgba(45,212,191,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,.015) 1px, transparent 1px);
  background-size: auto, 52px 52px, 52px 52px;
  pointer-events: none;
  z-index: 0;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--nl-teal); transition: color .2s; }
a:hover { color: var(--nl-text-bright); }

img { max-width: 100%; height: auto; }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nl-font-display) !important;
  color: var(--nl-text-bright) !important;
  line-height: 1.2;
}

h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { color: var(--nl-text); margin-bottom: 1.2em; }

blockquote {
  border-left: 3px solid var(--nl-teal) !important;
  background: var(--nl-surface) !important;
  padding: 20px 28px !important;
  margin: 28px 0 !important;
  border-radius: 0 var(--nl-radius) var(--nl-radius) 0;
}
blockquote p { color: var(--nl-text) !important; font-style: italic; }

pre, code {
  font-family: var(--nl-font-mono) !important;
  background: var(--nl-surface) !important;
  color: var(--nl-teal) !important;
  border: 1px solid var(--nl-border) !important;
  border-radius: var(--nl-radius-sm) !important;
}
code { padding: 2px 7px; font-size: .87em; }
pre  { padding: 20px 24px; overflow-x: auto; font-size: .9em; }
pre code { background: transparent !important; border: none !important; padding: 0; }

/* ============================================================
   4. HEADER & NAVIGATION
   ============================================================ */
#header,
#header_main,
.av-logo-container,
nav#top {
  background-color: rgba(8,12,16,.97) !important;
  border-bottom: 1px solid var(--nl-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Logo */
#header .logo a,
.av-logo-container .logo a {
  font-family: var(--nl-font-mono) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--nl-text) !important;
  letter-spacing: .04em;
  text-decoration: none;
}
#header .logo a::before {
  content: '~/';
  color: var(--nl-teal);
}
#header .logo a img { display: none; } /* hide default logo img, use text */

/* Primary nav links */
#top nav > ul > li > a,
.main_menu ul > li > a {
  font-family: var(--nl-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  color: var(--nl-muted) !important;
  text-transform: lowercase !important;
  padding: 6px 14px !important;
  border: 1px solid transparent !important;
  border-radius: var(--nl-radius-sm) !important;
  transition: all .2s !important;
}
#top nav > ul > li > a:hover,
.main_menu ul > li > a:hover,
#top nav > ul > li.current > a,
.main_menu ul > li.current-menu-item > a {
  color: var(--nl-teal) !important;
  background: var(--nl-teal-dim) !important;
  border-color: rgba(45,212,191,.25) !important;
}

/* Dropdown menus */
#top nav .sub-menu,
.main_menu .sub-menu {
  background: var(--nl-surface) !important;
  border: 1px solid var(--nl-border) !important;
  border-radius: var(--nl-radius) !important;
  box-shadow: var(--nl-shadow-lg) !important;
  overflow: hidden;
}
#top nav .sub-menu li a,
.main_menu .sub-menu li a {
  font-family: var(--nl-font-mono) !important;
  font-size: 11px !important;
  color: var(--nl-muted) !important;
  border-bottom: 1px solid var(--nl-border) !important;
  padding: 10px 16px !important;
}
#top nav .sub-menu li:last-child a { border-bottom: none !important; }
#top nav .sub-menu li a:hover { color: var(--nl-teal) !important; background: var(--nl-teal-dim) !important; }

/* Mobile nav toggle */
#av-burger-menu-main .av-hamburger-bar {
  background: var(--nl-teal) !important;
}

/* ============================================================
   5. CONTENT AREA
   ============================================================ */
#main,
.main_color.container_wrap,
.entry-content-wrapper {
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}

.container, .template-blog .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================
   6. BLOG HERO BAND
   ============================================================ */
.nl-hero-band {
  background: linear-gradient(160deg, #0d1f35 0%, var(--nl-bg) 65%);
  border-bottom: 1px solid var(--nl-border);
  overflow: hidden;
  position: relative;
}
.nl-hero-band::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(45,212,191,.05) 0%, transparent 70%);
  pointer-events: none;
}
.nl-hero-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 64px 32px 56px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ============================================================
   7. SECTION LABELS (// style)
   ============================================================ */
.nl-section-label {
  font-family: var(--nl-font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nl-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.nl-section-label::before {
  content: '//';
  color: var(--nl-teal);
  font-size: 13px;
  letter-spacing: normal;
}
.nl-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nl-border);
}

/* ============================================================
   8. POST CARDS
   ============================================================ */
.nl-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.nl-card {
  background: var(--nl-surface);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius);
  padding: 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .2s, box-shadow .25s;
}
.nl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--nl-teal), transparent 80%);
  opacity: 0;
  transition: opacity .25s;
}
.nl-card:hover {
  border-color: rgba(45,212,191,.3);
  transform: translateY(-3px);
  box-shadow: var(--nl-shadow-lg);
}
.nl-card:hover::before { opacity: 1; }

.nl-card-tag {
  font-family: var(--nl-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--nl-teal);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.nl-card-title {
  font-family: var(--nl-font-display) !important;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nl-text-bright) !important;
  margin-bottom: 10px;
  flex: 1;
  transition: color .2s;
}
.nl-card:hover .nl-card-title { color: #fff !important; }

.nl-card-excerpt {
  font-size: 13.5px;
  color: var(--nl-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.nl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--nl-font-mono);
  font-size: 10px;
  color: var(--nl-muted);
  padding-top: 14px;
  border-top: 1px solid var(--nl-border);
  margin-top: auto;
}

/* Language badges */
.nl-lang-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nl-lang-badge.en { background: var(--nl-amber-dim); color: var(--nl-amber); }
.nl-lang-badge.am { background: var(--nl-red-dim);   color: var(--nl-red); }
.nl-lang-badge.ti { background: var(--nl-sage-dim);  color: var(--nl-sage); }
.nl-lang-badge.no { background: var(--nl-teal-dim);  color: var(--nl-teal); }

/* ============================================================
   9. LANG FILTER PILLS (sidebar)
   ============================================================ */
.nl-lang-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nl-lang-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--nl-surface);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius);
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
}
.nl-lang-pill:hover { border-color: rgba(45,212,191,.3); }
.nl-lang-pill.active,
.nl-lang-pill:focus {
  border-color: rgba(45,212,191,.5);
  background: var(--nl-teal-dim);
}
.nl-lang-pill-name {
  font-family: var(--nl-font-mono);
  font-size: 12px;
  color: var(--nl-text);
}
.nl-lang-pill.active .nl-lang-pill-name { color: var(--nl-teal); }
.nl-lang-pill-count {
  font-family: var(--nl-font-mono);
  font-size: 10px;
  color: var(--nl-muted);
  background: rgba(255,255,255,.04);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ============================================================
   10. SINGLE POST / BLOG ARTICLE
   ============================================================ */
.nl-post-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px 32px;
}
.nl-post-eyebrow {
  font-family: var(--nl-font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nl-teal);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.nl-post-eyebrow .sep { color: var(--nl-border2); }

.nl-post-title {
  font-family: var(--nl-font-display) !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  color: var(--nl-text-bright) !important;
  margin-bottom: 20px !important;
}

.nl-post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--nl-font-mono);
  font-size: 11px;
  color: var(--nl-muted);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--nl-border);
  margin-bottom: 40px;
}

.nl-post-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px 64px;
  font-family: var(--nl-font-display);
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--nl-text);
}
.nl-post-body p { margin-bottom: 1.5em; }
.nl-post-body h2 { margin-top: 2em; margin-bottom: .8em; font-size: 1.5rem; }
.nl-post-body h3 { margin-top: 1.6em; margin-bottom: .6em; }
.nl-post-body a { color: var(--nl-teal); border-bottom: 1px solid rgba(45,212,191,.3); text-decoration: none; }
.nl-post-body a:hover { border-color: var(--nl-teal); color: #fff; }
.nl-post-body ul, .nl-post-body ol { padding-left: 1.5em; margin-bottom: 1.5em; }
.nl-post-body li { margin-bottom: .4em; }

/* ============================================================
   11. ENFOLD ELEMENT OVERRIDES
   ============================================================ */

/* Buttons */
.avia-button,
.avia_button,
.av-button,
.btn {
  background: var(--nl-teal-dim) !important;
  border: 1px solid rgba(45,212,191,.3) !important;
  color: var(--nl-teal) !important;
  font-family: var(--nl-font-mono) !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  border-radius: var(--nl-radius-sm) !important;
  padding: 10px 20px !important;
  transition: all .2s !important;
}
.avia-button:hover,
.avia_button:hover,
.av-button:hover {
  background: rgba(45,212,191,.18) !important;
  border-color: var(--nl-teal) !important;
  color: #fff !important;
}

/* Content separator / hr */
hr, .av-section-split {
  border-color: var(--nl-border) !important;
}

/* Sidebar widgets */
.sidebar .widget {
  background: var(--nl-surface) !important;
  border: 1px solid var(--nl-border) !important;
  border-radius: var(--nl-radius) !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
}
.sidebar .widget-title,
.sidebar .widgettitle {
  font-family: var(--nl-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--nl-teal) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--nl-border) !important;
}
.sidebar .widget ul li a {
  color: var(--nl-muted) !important;
  font-size: 13px !important;
  transition: color .2s !important;
}
.sidebar .widget ul li a:hover { color: var(--nl-teal) !important; }

/* Search input */
.search-field,
input[type="search"],
input[type="text"],
input[type="email"],
textarea {
  background: var(--nl-surface) !important;
  border: 1px solid var(--nl-border) !important;
  color: var(--nl-text) !important;
  border-radius: var(--nl-radius-sm) !important;
  font-family: var(--nl-font-body) !important;
  padding: 10px 14px !important;
  transition: border-color .2s !important;
}
input:focus, textarea:focus {
  border-color: rgba(45,212,191,.5) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,.08) !important;
}

/* Pagination */
.pagination a, .pagination span,
.page-numbers {
  background: var(--nl-surface) !important;
  border: 1px solid var(--nl-border) !important;
  color: var(--nl-muted) !important;
  border-radius: var(--nl-radius-sm) !important;
  font-family: var(--nl-font-mono) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  transition: all .2s !important;
}
.pagination a:hover, .page-numbers:hover,
.page-numbers.current {
  border-color: var(--nl-teal) !important;
  color: var(--nl-teal) !important;
  background: var(--nl-teal-dim) !important;
}

/* Post/entry meta */
.entry-meta, .post-meta,
.av-subheading,
.blog-meta {
  font-family: var(--nl-font-mono) !important;
  font-size: 11px !important;
  color: var(--nl-muted) !important;
  letter-spacing: .06em;
}
.entry-meta a, .post-meta a { color: var(--nl-muted) !important; }
.entry-meta a:hover, .post-meta a:hover { color: var(--nl-teal) !important; }

/* Category tags */
.post-categories a,
.cat-links a,
.av-tag {
  background: var(--nl-teal-dim) !important;
  border: 1px solid rgba(45,212,191,.2) !important;
  color: var(--nl-teal) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-family: var(--nl-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* Comments */
#comments { position: relative; z-index: 1; }
.commentlist .comment-body,
.comment-content {
  background: var(--nl-surface) !important;
  border: 1px solid var(--nl-border) !important;
  border-radius: var(--nl-radius) !important;
  padding: 20px !important;
}
#respond .comment-form-comment textarea {
  background: var(--nl-surface) !important;
  border: 1px solid var(--nl-border) !important;
  color: var(--nl-text) !important;
}

/* ============================================================
   12. FOOTER
   ============================================================ */
#footer,
.container_wrap.socket_color,
#socket {
  background: var(--nl-bg) !important;
  border-top: 1px solid var(--nl-border) !important;
  color: var(--nl-muted) !important;
}
#footer a,
#socket a {
  color: var(--nl-muted) !important;
  font-family: var(--nl-font-mono);
  font-size: 12px;
  transition: color .2s !important;
}
#footer a:hover, #socket a:hover { color: var(--nl-teal) !important; }
.footer-widget-area .widget-title,
.footer-widget-area .widgettitle {
  font-family: var(--nl-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--nl-muted) !important;
}
#socket_inside { font-family: var(--nl-font-mono); font-size: 11px; }

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .nl-hero-inner    { grid-template-columns: 1fr; gap: 40px; }
  .nl-card-grid     { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nl-card-grid     { grid-template-columns: 1fr; }
  .nl-hero-inner    { padding: 40px 20px; }
  .nl-post-header,
  .nl-post-body     { padding-left: 20px; padding-right: 20px; }
  .container        { padding: 0 20px; }
}

/* ============================================================
   14. ANIMATIONS
   ============================================================ */
@keyframes nl-fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nl-card { animation: nl-fadeUp .45s ease both; }
.nl-card:nth-child(1) { animation-delay: .04s; }
.nl-card:nth-child(2) { animation-delay: .09s; }
.nl-card:nth-child(3) { animation-delay: .14s; }
.nl-card:nth-child(4) { animation-delay: .19s; }
.nl-card:nth-child(5) { animation-delay: .24s; }
.nl-card:nth-child(6) { animation-delay: .29s; }


/* ============================================================
   18. MOBILE HAMBURGER MENU FIX (v2)
   Uses exact Enfold class names to force the overlay above
   all Night Lab page content.
   ============================================================ */

/* The full-screen overlay panel */
#top #header .av-burger-overlay,
#top #header .av-burger-overlay-bg,
#top #header .av-burger-overlay-inner,
.av-burger-overlay,
.av-burger-overlay-bg {
  z-index: 99999 !important;
  position: fixed !important;
}

/* The menu list inside the overlay */
#top #av-burger-menu-ul,
#av-burger-menu-ul {
  z-index: 100000 !important;
  position: relative !important;
  vertical-align: top !important;
  padding-top: 20px !important;
}

/* The burger icon button */
#top li.av-burger-menu-main,
li.av-burger-menu-main,
#av-burger-menu-main {
  z-index: 99999 !important;
  position: relative !important;
}

/* Header must sit above page content but below overlay */
#top #header,
#top #masthead,
#top nav#top,
#wrap_all #header {
  z-index: 9999 !important;
  position: relative !important;
}

/* Pull the scanline texture completely out of the stacking order */
body::before {
  position: fixed !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Neutralise stacking contexts on Night Lab page wrappers
   so they cannot trap the Enfold overlay */
.nl-hero-band,
.nl-hero-inner,
#main,
#wrap_all,
.template-blog,
.codes-page,
.codes-wrapper,
.about-page,
.about-wrapper,
.books-page,
.books-wrapper {
  z-index: auto !important;
  isolation: auto !important;
  transform: none !important;
  will-change: auto !important;
}