/*
 * NewVib Magazine Theme — Dark Mode Stylesheet
 * Applied via: body.nv-dark-mode class (JS toggle)
 * Also respects: @media (prefers-color-scheme: dark) automatically
 */

/* ================================================================
   DARK MODE VARIABLES
================================================================ */
.nv-dark-mode,
@media (prefers-color-scheme: dark) {
  :root {
    /* Inverted palette */
    --nv-cream:         #0D0F14;
    --nv-pure:          #161920;
    --nv-white:         #1C1F27;
    --nv-charcoal:      #F0EDE8;
    --nv-dark:          #C8CCD6;
    --nv-mid:           #9DA3B0;
    --nv-grey:          #7A8090;
    --nv-light-grey:    #5A5E6B;
    --nv-silver:        #3A3E4A;
    /* Gold stays */
    --nv-gold:          #C9A84C;
    --nv-gold-light:    #E4C97A;
    --nv-gold-dark:     #A07D30;
    /* Accent stays */
    --nv-accent:        #E05A3A;
    /* Shadows become lighter overlays */
    --shadow-sm:        0 2px 8px rgba(0,0,0,0.4);
    --shadow:           0 8px 32px rgba(0,0,0,0.5);
    --shadow-lg:        0 20px 60px rgba(0,0,0,0.6);
    --shadow-xl:        0 32px 80px rgba(0,0,0,0.7);
  }
}

/* ── Class-based dark mode (for JS toggle, overrides media query) ── */
body.nv-dark-mode {
  --nv-cream:         #0D0F14;
  --nv-pure:          #161920;
  --nv-white:         #1C1F27;
  --nv-charcoal:      #F0EDE8;
  --nv-dark:          #C8CCD6;
  --nv-mid:           #9DA3B0;
  --nv-grey:          #7A8090;
  --nv-light-grey:    #5A5E6B;
  --nv-silver:        #3A3E4A;
  background-color: var(--nv-cream);
  color: var(--nv-dark);
}

/* ================================================================
   COMPONENT-SPECIFIC DARK OVERRIDES
================================================================ */

/* ── Top Bar ── */
.nv-dark-mode .nv-top-bar {
  background: #05060A;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ── Header ── */
.nv-dark-mode .nv-header {
  background: #0D0F14;
  border-bottom-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-logo__mark {
  background: var(--nv-gold);
}

.nv-dark-mode .nv-logo__mark::before { color: var(--nv-black); }

.nv-dark-mode .nv-nav__link {
  color: var(--nv-dark);
}

.nv-dark-mode .nv-header__search-btn:hover,
.nv-dark-mode .nv-header__menu-btn:hover {
  background: rgba(255,255,255,0.06);
}

/* ── Category Nav ── */
.nv-dark-mode .nv-cat-nav {
  background: #07080D;
  border-bottom-color: rgba(255,255,255,0.04);
}

/* ── Cards ── */
.nv-dark-mode .nv-card {
  background: #161920;
  border-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.nv-dark-mode .nv-card__title {
  color: var(--nv-charcoal);
}

.nv-dark-mode .nv-card__excerpt {
  color: var(--nv-grey);
}

.nv-dark-mode .nv-card__footer {
  border-top-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-card__author-name {
  color: var(--nv-dark);
}

.nv-dark-mode .nv-card__author-img {
  border-color: rgba(255,255,255,0.1);
}

.nv-dark-mode .nv-card--mag {
  background: none;
}

.nv-dark-mode .nv-card--list {
  border-bottom-color: rgba(255,255,255,0.06);
  background: none;
}

/* ── Section headers ── */
.nv-dark-mode .nv-section-head h2 {
  color: var(--nv-charcoal);
}

.nv-dark-mode .nv-view-all {
  color: var(--nv-grey);
  border-color: var(--nv-silver);
}

/* ── Sections ── */
.nv-dark-mode .nv-section--pattern {
  background-color: #0D0F14;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
}

.nv-dark-mode .nv-mag-section {
  background: #161920;
  border-top-color: rgba(255,255,255,0.05);
}

.nv-dark-mode .nv-trending {
  background: #0D0F14;
  border-color: rgba(255,255,255,0.05);
}

.nv-dark-mode .nv-trending__item {
  color: var(--nv-dark);
}

/* ── Sidebar ── */
.nv-dark-mode .nv-sidebar {
  /* inherits background from parent */
}

.nv-dark-mode .nv-widget {
  background: #161920;
  border-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-widget__header {
  border-bottom-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-widget__title {
  color: var(--nv-charcoal);
}

.nv-dark-mode .nv-widget-post__title {
  color: var(--nv-charcoal);
}

.nv-dark-mode .nv-widget-popular__title {
  color: var(--nv-charcoal);
}

.nv-dark-mode .nv-widget-cat {
  color: var(--nv-dark);
}

.nv-dark-mode .nv-widget-cat:hover {
  background: rgba(255,255,255,0.05);
}

.nv-dark-mode .nv-widget-cat__count {
  background: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-widget-tag {
  border-color: rgba(255,255,255,0.1);
  color: var(--nv-grey);
}

/* ── Post ── */
.nv-dark-mode .nv-post__content {
  color: #C0C5D0;
}

.nv-dark-mode .nv-post__content h2,
.nv-dark-mode .nv-post__content h3 {
  color: var(--nv-charcoal);
}

.nv-dark-mode .nv-post__content blockquote {
  background: rgba(255,255,255,0.04);
}

.nv-dark-mode .nv-post__content a {
  color: var(--nv-gold-light);
}

.nv-dark-mode .nv-post__meta-bar {
  border-color: rgba(255,255,255,0.08);
}

.nv-dark-mode .nv-post__author-name {
  color: var(--nv-charcoal);
}

.nv-dark-mode .nv-post__tags {
  border-top-color: rgba(255,255,255,0.08);
}

.nv-dark-mode .nv-post__tag {
  border-color: rgba(255,255,255,0.1);
  color: var(--nv-grey);
}

.nv-dark-mode .nv-post__subtitle {
  color: var(--nv-grey);
  border-left-color: var(--nv-gold);
}

.nv-dark-mode .nv-author-box {
  background: #161920;
  border-color: rgba(255,255,255,0.06);
  border-left-color: var(--nv-gold);
}

.nv-dark-mode .nv-author-box__name {
  color: var(--nv-charcoal);
}

.nv-dark-mode .nv-author-box__bio {
  color: var(--nv-grey);
}

/* ── Related section ── */
.nv-dark-mode .nv-related {
  border-top-color: rgba(255,255,255,0.08);
}

/* ── Comments ── */
.nv-dark-mode .nv-comment-item {
  border-bottom-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-form-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: var(--nv-charcoal);
}

.nv-dark-mode .nv-form-input:focus {
  border-color: var(--nv-gold);
  background: rgba(255,255,255,0.06);
}

/* ── Page ── */
.nv-dark-mode .nv-page-content h1 {
  color: var(--nv-charcoal);
}

/* ── Breadcrumb ── */
.nv-dark-mode .nv-breadcrumb a {
  color: var(--nv-grey);
}

/* ── Pagination ── */
.nv-dark-mode .nv-pagination a,
.nv-dark-mode .nv-pagination span {
  border-color: rgba(255,255,255,0.1);
  color: var(--nv-grey);
  background: transparent;
}

.nv-dark-mode .nv-pagination .current {
  background: var(--nv-gold);
  color: var(--nv-black);
  border-color: var(--nv-gold);
}

.nv-dark-mode .nv-pagination a:hover {
  border-color: var(--nv-gold);
  color: var(--nv-gold);
  background: rgba(201,168,76,0.08);
}

/* ── Ads ── */
.nv-dark-mode .nv-ad {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

/* ── TOC ── */
.nv-dark-mode .nv-toc {
  background: #161920;
  border-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-toc__title {
  color: var(--nv-charcoal);
  border-bottom-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-toc__link {
  color: var(--nv-grey);
}

.nv-dark-mode .nv-toc__link:hover,
.nv-dark-mode .nv-toc__link.is-active {
  color: var(--nv-gold);
  background: rgba(201,168,76,0.08);
}

/* ── Skeleton ── */
.nv-dark-mode .nv-skeleton__line,
.nv-dark-mode .nv-skeleton__image {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
}

/* ── Bookmarks ── */
.nv-dark-mode .nv-bookmark-panel {
  background: #161920;
  border-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-bookmark-item {
  border-bottom-color: rgba(255,255,255,0.05);
}

.nv-dark-mode .nv-bookmark-item__title {
  color: var(--nv-charcoal);
}

/* ── Mobile nav ── */
.nv-dark-mode .nv-mobile-nav__panel {
  background: #0D0F14;
}

.nv-dark-mode .nv-mobile-nav__header {
  border-bottom-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-mobile-nav__link {
  color: var(--nv-charcoal);
  border-bottom-color: rgba(255,255,255,0.04);
}

.nv-dark-mode .nv-mobile-nav__close {
  background: rgba(255,255,255,0.06);
  color: var(--nv-charcoal);
}

/* ── Mega Menu ── */
.nv-dark-mode .nv-mega-menu {
  background: #0D0F14;
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

.nv-dark-mode .nv-mega-menu__cat-link {
  color: var(--nv-dark);
  border-right-color: rgba(255,255,255,0.06);
}

.nv-dark-mode .nv-mega-menu__cat-link:hover,
.nv-dark-mode .nv-mega-menu__cat-link.is-active {
  background: rgba(255,255,255,0.04);
  color: var(--nv-gold);
}

.nv-dark-mode .nv-mega-menu__post-title {
  color: var(--nv-charcoal);
}

/* ── Search overlay ── */
.nv-dark-mode .nv-search-overlay {
  background: rgba(0,0,0,0.97);
}

/* ── Back to top ── */
.nv-dark-mode .nv-back-top {
  background: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.nv-dark-mode .nv-back-top:hover {
  background: var(--nv-gold);
  color: var(--nv-black);
}

/* ── Dark toggle button ── */
.nv-dark-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid rgba(0,0,0,0.1);
  color: var(--nv-grey);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.nv-dark-mode .nv-dark-toggle {
  border-color: rgba(255,255,255,0.1);
  color: var(--nv-gold);
  background: rgba(255,255,255,0.04);
}

.nv-dark-toggle:hover {
  border-color: var(--nv-gold);
  color: var(--nv-gold);
  background: rgba(201,168,76,0.08);
  transform: rotate(20deg);
}

/* ── Dividers in dark ── */
.nv-dark-mode .nv-divider {
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
}

/* ── Transitions for smooth mode switch ── */
body,
.nv-header,
.nv-card,
.nv-widget,
.nv-top-bar,
.nv-cat-nav,
.nv-mobile-nav__panel,
.nv-footer,
.nv-post__content,
.nv-toc,
.nv-bookmark-panel {
  transition-property: background-color, color, border-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* ── System preference (auto dark) ── */
@media (prefers-color-scheme: dark) {
  body:not(.nv-force-light) {
    background-color: #0D0F14;
    color: #C8CCD6;
  }

  body:not(.nv-force-light) .nv-header  { background: #0D0F14; border-bottom-color: rgba(255,255,255,0.06); }
  body:not(.nv-force-light) .nv-top-bar { background: #05060A; }
  body:not(.nv-force-light) .nv-card    { background: #161920; border-color: rgba(255,255,255,0.06); }
  body:not(.nv-force-light) .nv-widget  { background: #161920; border-color: rgba(255,255,255,0.06); }
  body:not(.nv-force-light) .nv-cat-nav { background: #07080D; }
  body:not(.nv-force-light) .nv-footer  { background: #020305; }
  body:not(.nv-force-light) .nv-post__content { color: #C0C5D0; }
  body:not(.nv-force-light) .nv-section--pattern { background-color: #0D0F14; }
}