/**
 * NovaFolio — Dark Mode Color Overrides
 *
 * Overrides the light-mode CSS custom properties when `html[data-theme="dark"]`
 * is set (either by user toggle or by `prefers-color-scheme: dark` auto-detect).
 *
 * Only color tokens are overridden; layout, spacing, typography remain identical.
 * Values are based on the existing "Dark" preset in the Customizer (colors.php).
 *
 * @since 1.4.0
 */

/* ── Automatic OS-level preference (no toggle clicked yet) ────────── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

/* ── Manual dark mode via toggle ──────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
}

/* ── Dark token overrides ─────────────────────────────────────────── */
/* JS (anti-FOUC + toggle) always sets data-theme, so one selector suffices. */
html[data-theme="dark"] {

  /* ── Primitives (monochrome gallery palette) ─────────────────────── */
  --nvf-color-white: #1a1d23;
  --nvf-color-surface: #1e2128;
  --nvf-color-soft: #252830;
  --nvf-color-border: #2e323c;
  --nvf-color-gray: #6B7280;
  --nvf-color-slate: #9CA3AF;
  --nvf-color-slate-dark: #c4c9d4;
  --nvf-color-ink: #eaeaea;
  --nvf-color-ink-deep: #f5f5f5;
  --nvf-color-black: #ffffff;
  --nvf-color-accent: #ffffff;
  --nvf-color-accent-soft: rgba(255, 255, 255, .08);
  --nvf-color-on-ink: #0f1115;
  --nvf-color-on-accent: #0f1115;

  /* ── Semantic aliases ───────────────────────────────────────────── */
  --nvf-color-body: #0f1115;
  --nvf-color-bg: #0f1115;
  --nvf-color-text: #d4d4d8;
  --nvf-color-headings: #ffffff;
  --nvf-color-link: #ffffff;
  --nvf-color-link-hover: rgba(255, 255, 255, .65);
  --nvf-color-links: #ffffff;
  --nvf-color-links-hover: rgba(255, 255, 255, .65);
  --nvf-color-light-1: #1a1d23;
  --nvf-color-light-2: #252830;
  --nvf-color-dark-1: #f5f5f5;
  --nvf-color-muted: #9CA3AF;

  /* ── Surface system ─────────────────────────────────────────────── */
  --nvf-bg: #0f1115;
  --nvf-surface-1: #1a1d23;
  --nvf-surface-2: #252830;
  --nvf-surface-3: #1e2128;
  --nvf-text: #eaeaea;
  --nvf-text-muted: #9CA3AF;
  --nvf-text-inverse: #0f1115;
  --nvf-border: #2e323c;
  --nvf-border-weak: rgba(255, 255, 255, .08);
  --nvf-border-soft: rgba(255, 255, 255, .12);
  --nvf-border-strong: rgba(255, 255, 255, .2);
  --nvf-border-focus: rgba(255, 255, 255, .35);
  --nvf-color-border-hover: rgba(255, 255, 255, .28);

  /* ── Header / Mobile menu ─── laissés au Customizer (ne pas modifier) */

  /* ── Footer ─────────────────────────────────────────────────────── */
  --nvf-footer-bg: #080a0d;
  --nvf-footer-text: rgba(255, 255, 255, .82);
  --nvf-footer-text-hover: rgba(255, 255, 255, .98);
  --nvf-color-footer-bg: #080a0d;
  --nvf-color-footer-text: rgba(255, 255, 255, .82);
  --nvf-color-footer-link: rgba(255, 255, 255, .82);

  /* ── Titlebar / Breadcrumbs ── laissés au Customizer (ne pas modifier) */

  /* ── Sidebar ────────────────────────────────────────────────────── */
  --nvf-color-sidebar-bg: #1a1d23;
  --nvf-color-sidebar-text: #d4d4d8;
  --nvf-color-sidebar-link: #ffffff;

  /* ── Buttons (monochrome: white bg / dark text) ─────────────────── */
  --nvf-color-button-bg: #e8e8e8;
  --nvf-color-button-text: #0f1115;
  --nvf-color-button-bg-hover: #ffffff;
  --nvf-color-button-text-hover: #0f1115;
  --nvf-color-button-primary-bg: #f5f5f5;
  --nvf-color-button-primary-text: #0f1115;
  --nvf-color-button-secondary-bg: rgba(255, 255, 255, .08);
  --nvf-color-button-secondary-text: #eaeaea;
  --nvf-btn-primary-bg: #f5f5f5;
  --nvf-btn-primary-text: #0f1115;
  --nvf-btn-primary-border: rgba(255, 255, 255, .2);
  --nvf-btn-outline-color: rgba(255, 255, 255, .22);
  --nvf-btn-soft-bg: rgba(255, 255, 255, .08);
  --nvf-btn-soft-text: #eaeaea;
  --nvf-btn-soft-border: rgba(255, 255, 255, .12);
  --nvf-btn-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  --nvf-btn-shadow-hover: 0 18px 46px rgba(0, 0, 0, .45);

  /* ── Forms ──────────────────────────────────────────────────────── */
  --nvf-color-field-bg: #1a1d23;
  --nvf-color-field-text: #eaeaea;
  --nvf-color-field-border: #2e323c;
  --nvf-color-field-focus: #ffffff;
  --nvf-form-input-bg: #1a1d23;
  --nvf-form-input-border: 1px solid #2e323c;
  --nvf-form-input-text: #d4d4d8;
  --nvf-form-input-focus-border: 2px solid #ffffff;
  --nvf-form-placeholder-color: #6B7280;

  /* ── Pagination ─────────────────────────────────────────────────── */
  --nvf-color-pagination-bg: #1a1d23;
  --nvf-color-pagination-text: #eaeaea;
  --nvf-color-pagination-active: #ffffff;

  /* ── Selection ──────────────────────────────────────────────────── */
  --nvf-color-selection-bg: rgba(255, 255, 255, .12);
  --nvf-color-selection-text: #ffffff;

  /* ── Shadows (darker, more intense for dark surfaces) ───────────── */
  --nvf-shadow-s: 0 8px 18px rgba(0, 0, 0, .25);
  --nvf-shadow-m: 0 12px 28px rgba(0, 0, 0, .3);
  --nvf-shadow-soft: 0 6px 18px rgba(0, 0, 0, .35);
  --nvf-shadow-card: 0 18px 55px rgba(0, 0, 0, .2);
  --nvf-shadow-card-hover: 0 24px 70px rgba(0, 0, 0, .28);
  --nvf-shadow-xs: 0 2px 4px rgba(0, 0, 0, .3);
  --nvf-shadow-sm: 0 4px 8px rgba(0, 0, 0, .3);
  --nvf-shadow-md: 0 8px 16px rgba(0, 0, 0, .35);
  --nvf-shadow-lg: 0 12px 24px rgba(0, 0, 0, .4);
  --nvf-shadow-xl: 0 16px 32px rgba(0, 0, 0, .45);
  --nvf-shadow-card-md: 0 1px 3px rgba(0, 0, 0, .3);
  --nvf-shadow-ui-offcanvas: -4px 0 35px rgba(0, 0, 0, .6);
  --nvf-shadow-ui-dropdown-classic: 0 8px 20px rgba(0, 0, 0, .2), 0 20px 48px rgba(0, 0, 0, .3);

  /* ── Overlays / dividers ────────────────────────────────────────── */
  --nvf-overlay-dark-soft: rgba(0, 0, 0, .45);
  --nvf-overlay-dark-mid: rgba(0, 0, 0, .55);
  --nvf-overlay-dark-strong: rgba(0, 0, 0, .8);
  --nvf-overlay-light: rgba(0, 0, 0, .6);
  --nvf-overlay-medium: rgba(0, 0, 0, .65);
  --nvf-overlay-strong: rgba(0, 0, 0, .85);
  --nvf-divider-light: rgba(255, 255, 255, .06);
  --nvf-divider-medium: rgba(255, 255, 255, .1);
  --nvf-divider-strong: rgba(255, 255, 255, .2);

  /* ── Single post ────────────────────────────────────────────────── */
  --nvf-single-post-bg: #1a1d23;
  --nvf-single-post-text: #eaeaea;
  --nvf-single-post-link-color: #ffffff;
  --nvf-single-post-link-hover: rgba(255, 255, 255, .65);
  --nvf-single-post-code-bg: #252830;
  --nvf-single-post-code-text: #e0e4ec;
  --nvf-single-post-code-border: 1px solid #2e323c;
  --nvf-single-post-blockquote-bg: #1e2128;
  --nvf-single-post-blockquote-text: #eaeaea;
  --nvf-single-post-table-border: #2e323c;
  --nvf-single-post-table-header-bg: #252830;
  --nvf-single-post-table-row-hover-bg: #1e2128;
  --nvf-single-quote-bg: #1e2128;
  --nvf-single-quote-color: #ffffff;

  /* ── Blog / archive ─────────────────────────────────────────────── */
  --nvf-blog-readmore-color: #ffffff;
  --nvf-blog-readmore-hover: rgba(255, 255, 255, .65);
  --nvf-blog-rm-color: #0f1115;
  --nvf-blog-rm-hover: #0f1115;
  --nvf-blog-rm-bg: #e8e8e8;
  --nvf-blog-date-color: #9CA3AF;

  /* ── Portfolio ──────────────────────────────────────────────────── */
  --nvf-portfolio-item-bg: #1a1d23;
  --nvf-portfolio-item-text: #eaeaea;
  --nvf-portfolio-content-bg: #1a1d23;
  --nvf-portfolio-content-border: rgba(255, 255, 255, .12);

  /* ── Mega menu ──────────────────────────────────────────────────── */
  --nvf-mm-link-color: #eaeaea;
  --nvf-mm-link-hover: #ffffff;
  --nvf-mm-divider-color: #2e323c;
  --nvf-mm-section-title-text: #9CA3AF;
  --nvf-mm-icon-color: #9CA3AF;

  /* ── Filter bar ─────────────────────────────────────────────────── */
  --nvf-filter-bar-bg: #1a1d23;
  --nvf-filter-bar-border: #2e323c;
  --nvf-filter-label-text: #eaeaea;
  --nvf-filter-item-bg-active: #f5f5f5;
  --nvf-filter-item-text-active: #0f1115;

  /* ── Shop (WooCommerce) ─────────────────────────────────────────── */
  --nvf-color-shop-addtocart-bg: #e8e8e8;
  --nvf-color-shop-addtocart-text: #0f1115;
  --nvf-color-shop-list-price: #d4d4d8;
  --nvf-color-shop-list-sale: #ffffff;
  --nvf-color-shop-single-title: #ffffff;

  /* ── Testimonials ───────────────────────────────────────────────── */
  --nvf-testimonial-bg: #1e2128;
  --nvf-testimonial-text: #eaeaea;
  --nvf-testimonial-quote-color: #ffffff;

  /* ── Cursor ─────────────────────────────────────────────────────── */
  --nvf-color-cursor: #ffffff;

  /* ── NF (plugin) bridge tokens ──────────────────────────────────── */
  --nf-color-text: #eaeaea;
  --nf-color-text-subtle: #252830;
  --nf-color-bg: #0f1115;
  --nf-color-bg-secondary: #252830;
  --nf-color-accent: #ffffff;
  --nf-color-headings: #ffffff;
  --nf-color-link: #ffffff;
  --nf-color-link-hover: rgba(255, 255, 255, .65);
  --nf-color-border: #2e323c;

  /* ── Misc ───────────────────────────────────────────────────────── */
  --nvf-focus-ring: 0 0 0 3px rgba(255, 255, 255, .25);
  --nvf-focus-ring-color: #ffffff;

  /* ── Plugin block inline-style overrides ─────────────────────────── */

  /* Hero block inline colors */
  --nvf-hero-title-color: #ffffff;
  --nvf-hero-subtitle-color: rgba(255, 255, 255, .78);

  /* Counter block */
  --nvf-counter-number-color: #ffffff;
  --nvf-counter-label-color: #9CA3AF;

  /* FAQ */
  --nvf-faq-border: #2e323c;
  --nvf-faq-bg: #1a1d23;
  --nvf-faq-text: #eaeaea;
  --nvf-faq-title-color: #ffffff;

  /* Section block */
  --nvf-section-bg: #1a1d23;

} /* end dark overrides */

/* ── Smooth color transition (targeted, not *) ────────────────────── */
html[data-theme] body,
html[data-theme] .nova-header,
html[data-theme] .nova-header-inner,
html[data-theme] .nova-primary-nav a,
html[data-theme] .nvf-topbar,
html[data-theme] .nvf-titlebar,
html[data-theme] .nvf-footer,
html[data-theme] .nvf-footer-inner,
html[data-theme] .nvf-cta,
html[data-theme] .nvf-dark-toggle,
html[data-theme] .nvf-portfolio-card,
html[data-theme] .nvf-portfolio-content,
html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select,
html[data-theme] .wp-block-button__link {
  transition:
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease;
}

/* Disable transition on page load (set by anti-FOUC script, removed after 500ms) */
html.nvf-no-transitions,
html.nvf-no-transitions *,
html.nvf-no-transitions *::before,
html.nvf-no-transitions *::after {
  transition: none !important;
}

/* ── Toggle button styles ─────────────────────────────────────────── */
.nvf-dark-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--nvf-radius-pill, 999px);
  background: transparent;
  color: var(--nvf-color-text, #111827);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.nvf-dark-toggle:hover {
  background: var(--nvf-border-soft, rgba(15, 23, 42, .12));
}

.nvf-dark-toggle:focus-visible {
  outline: var(--nvf-focus-ring-width, 3px) solid var(--nvf-focus-ring-color, #4F46E5);
  outline-offset: var(--nvf-focus-ring-offset, 2px);
}

.nvf-dark-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Moon icon uses fill (crescent shape), sun uses stroke */
.nvf-dark-toggle .nvf-icon-moon path {
  fill: currentColor;
  stroke: none;
}

/* Sun icon visible in dark mode, moon icon visible in light mode */
.nvf-dark-toggle .nvf-icon-sun  { display: none; }
.nvf-dark-toggle .nvf-icon-moon { display: block; }

html[data-theme="dark"] .nvf-dark-toggle .nvf-icon-sun  { display: block; }
html[data-theme="dark"] .nvf-dark-toggle .nvf-icon-moon { display: none; }

/* Note: No @media fallback needed — JS always resolves auto → dark/light
   and sets data-theme, so html[data-theme="dark"] rules above handle icons. */

/* ── Offcanvas toggle (mobile / side-panel) ───────────────────────── */
.nvf-dark-toggle--offcanvas {
  width: 36px;
  height: 36px;
}

/* ── Force dark colors on hardcoded inline bg from block editor ───── */
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color: white"] {
  background-color: var(--nvf-surface-1, #1a1d23) !important;
}

html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color: #111"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: black"] {
  color: var(--nvf-text, #eaeaea) !important;
}

/* ── Gutenberg block background safety net ────────────────────────── */
html[data-theme="dark"] .has-white-background-color {
  background-color: var(--nvf-color-surface, #1a1d23) !important;
}
html[data-theme="dark"] .has-light-gray-background-color {
  background-color: var(--nvf-surface-1, #1a1d23) !important;
}

/* ── Hero + CTA blocks: preserve editor-defined appearance ────────── */
/* The hero sits on its own photo/overlay — its button colors are
   chosen BY THE USER for that specific context. Same for CTA --bg-dark.
   We scope-reset the tokens so dark mode doesn't alter them. */
html[data-theme="dark"] .nvf-hero {
  --nvf-color-surface: #f8f9fa;
  --nvf-color-black: #111827;
}
html[data-theme="dark"] .nvf-hero .nvf-hero__title {
  color: var(--nvf-hero-title-color, #ffffff) !important;
}

/* Hero Slider — the slider sits on its own photo/overlay, so its text must
   stay light regardless of dark mode. Reset the custom-prop indirections that
   hero-slider.css declares via var(--nvf-color-white) / var(--nvf-color-border),
   which resolve to dark values in dark mode. */
html[data-theme="dark"] .nvf-hero-slider {
  --nvf-hero-title-color: #ffffff;
  --nvf-hero-subtitle-color: rgba(255, 255, 255, .78);
}
html[data-theme="dark"] .nvf-hero-slider.nvf-hero-layout-full {
  --nvf-hero-title-color: #ffffff;
  --nvf-hero-subtitle-color: rgba(255, 255, 255, .78);
}

/* CTA with dark bg is self-contained — preserve its dark background
   and light text/button colors exactly as in light mode. */
html[data-theme="dark"] .nvf-cta--bg-dark {
  --nvf-color-ink-deep: #0F172A;
  --nvf-color-on-accent: #ffffff;
  --nvf-color-accent: #ffffff;
}

/* ── Header: override Customizer's #nova-header !important rules ───── */
/* The Customizer outputs bg:#ffffff and color:#000000 with #nova-header ID
   specificity + !important. We must beat that with html[data-theme] + ID. */
html[data-theme="dark"] #nova-header.header-main {
  background: #151515 !important;
}
html[data-theme="dark"] #nova-header .nova-primary-nav > li > a {
  color: #d4d4d8 !important;
}
html[data-theme="dark"] #nova-header .nova-primary-nav > li:hover > a {
  color: #ffffff !important;
}
html[data-theme="dark"] #nova-header .nova-primary-nav > li > a::after {
  background: #ffffff !important;
}
/* Dropdown submenus */
html[data-theme="dark"] #nova-header .nova-primary-nav > li:not(.nvf-mm) ul {
  background: #1a1d23;
  border: 1px solid rgba(255, 255, 255, .08);
}
html[data-theme="dark"] #nova-header .nova-primary-nav > li:not(.nvf-mm) ul li a {
  color: #d4d4d8 !important;
}
html[data-theme="dark"] #nova-header .nova-primary-nav > li:not(.nvf-mm) ul li a:hover {
  color: #ffffff !important;
}
/* Toggle & search icons */
html[data-theme="dark"] #nova-header .nvf-dark-toggle,
html[data-theme="dark"] #nova-header .nvf-search-toggle {
  color: #ffffff !important;
}
html[data-theme="dark"] #nova-header .nvf-dark-toggle:hover,
html[data-theme="dark"] #nova-header .nvf-search-toggle:hover {
  background: rgba(255, 255, 255, .1);
}
html[data-theme="dark"] #nova-header .nvf-dark-toggle svg,
html[data-theme="dark"] #nova-header .nvf-search-toggle svg {
  stroke: #ffffff !important;
}
html[data-theme="dark"] #nova-header .nvf-dark-toggle .nvf-icon-moon path {
  fill: #ffffff !important;
}
/* Burger */
html[data-theme="dark"] .nova-burger-menu:hover {
  background: #1e2128;
}
html[data-theme="dark"] .nova-burger-menu:hover span {
  background: #ffffff !important;
}

/* ── Footer social icons: dark hover ──────────────────────────────── */
html[data-theme="dark"] #site-footer.site-footer a.nvf-social-link:hover,
html[data-theme="dark"] #site-footer.site-footer a.nvf-social-link:focus-visible {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .2);
  color: #ffffff !important;
}

/* ── Contact form submit ──────────────────────────────────────────── */
html[data-theme="dark"] .nvf-contact .nvf-contact__submit {
  background: var(--nvf-color-button-bg, #e8e8e8) !important;
  color: var(--nvf-color-button-text, #0f1115) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25) !important;
}
html[data-theme="dark"] .nvf-contact .nvf-contact__submit:hover:not(:disabled) {
  background: var(--nvf-color-button-bg-hover, #ffffff) !important;
  color: var(--nvf-color-button-text-hover, #0f1115) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .3) !important;
}

/* ── Mini-cart panel ──────────────────────────────────────────────── */
html[data-theme="dark"] .nvf-mini-cart__panel {
  background: var(--nvf-color-bg, #0f1115);
  color: var(--nvf-color-text, #d4d4d8);
}
html[data-theme="dark"] .nvf-mini-cart__header {
  border-color: var(--nvf-color-border, #2e323c);
}
html[data-theme="dark"] .nvf-mini-cart__item {
  border-color: var(--nvf-color-border, #2e323c);
}
html[data-theme="dark"] .nvf-mini-cart__footer {
  border-color: var(--nvf-color-border, #2e323c);
}
html[data-theme="dark"] .nvf-mini-cart__name a {
  color: var(--nvf-color-text, #d4d4d8);
}
html[data-theme="dark"] .nvf-mini-cart__name a:hover {
  color: #ffffff;
}

/* ── WooCommerce tab decorative pseudo-elements ───────────────────── */
/* content: " " creates 5×5px corner decoration squares — hide in dark mode */
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li::after,
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li::before {
  content: none !important;
}
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-color: var(--nvf-color-border, #2e323c);
  background: var(--nvf-color-surface, #1e2128);
}
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--nvf-color-bg, #0f1115);
  border-bottom-color: var(--nvf-color-bg, #0f1115);
}
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom-color: var(--nvf-color-border, #2e323c);
}
html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs .panel {
  background: var(--nvf-color-bg, #0f1115);
}

/* ── WooCommerce: override Customizer body-scoped button vars ─────── */
/* The Customizer (woocommerce-css.php) sets --nvf-woo-*-button-bg on
   body.single-product / body.post-type-archive-product etc.
   We re-set them with higher specificity so dark values win. */
html[data-theme="dark"] :is(body.woocommerce-shop, body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag) {
  --nvf-woo-shop-button-bg: var(--nvf-color-button-bg, #e8e8e8);
  --nvf-woo-shop-button-text: var(--nvf-color-button-text, #0f1115);
}
html[data-theme="dark"] body.single-product {
  --nvf-woo-shop-button-bg: var(--nvf-color-button-bg, #e8e8e8);
  --nvf-woo-shop-button-text: var(--nvf-color-button-text, #0f1115);
  --nvf-woo-single-button-bg: var(--nvf-color-button-bg, #e8e8e8);
  --nvf-woo-single-button-text: var(--nvf-color-button-text, #0f1115);
}
html[data-theme="dark"] :is(body.woocommerce-cart, body.nvf-woo-checkout) {
  --nvf-woo-single-button-bg: var(--nvf-color-button-bg, #e8e8e8);
  --nvf-woo-single-button-text: var(--nvf-color-button-text, #0f1115);
}

/* ── Blog post card buttons (readmore as button) ──────────────────── */
html[data-theme="dark"] .nvf-blog-posts .nvf-post-button a,
html[data-theme="dark"] .nvf-posts-list .nvf-post-button a {
  background: var(--nvf-blog-rm-bg, var(--nvf-color-button-bg, #e8e8e8));
  color: var(--nvf-blog-rm-color, var(--nvf-color-button-text, #0f1115));
  border-color: rgba(255, 255, 255, .1);
}

/* ── Portfolio archive: data-theme="dark" overrides ───────────────── */
/* These mirror @media(prefers-color-scheme:dark) rules from portfolio.css
   so the toggle-based dark mode works without relying on OS preference. */

html[data-theme="dark"] .nvf-portfolio-archive {
  --nvf-filter-bg: rgba(255, 255, 255, .06);
  --nvf-filter-text: rgba(255, 255, 255, .82);
  --nvf-filter-active-bg: rgba(255, 255, 255, .92);
  --nvf-filter-active-text: rgba(15, 23, 42, .92);
  --nvf-filter-hover-bg: rgba(255, 255, 255, .08);
  --nvf-filter-border: rgba(255, 255, 255, .1);
  --nvf-filter-active-border: rgba(255, 255, 255, .92);
  --nvf-filter-active-shadow: 0 16px 55px rgba(0, 0, 0, .35);
  --nvf-focus-ring: 0 0 0 3px rgba(255, 255, 255, .25);
  --nvf-portfolio-card-border: rgba(255, 255, 255, .08);
}

/* Filter items (hardcoded white bg override) */
html[data-theme="dark"] .nvf-portfolio-filter-item {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .82);
}
html[data-theme="dark"] .nvf-portfolio-filter-item:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .nvf-portfolio-filter-item.is-active {
  background: rgba(255, 255, 255, .92);
  color: rgba(15, 23, 42, .92);
  border-color: rgba(255, 255, 255, .92);
}

/* Pills filter variant */
html[data-theme="dark"] .nvf-portfolio-filter--pills .nvf-portfolio-filter-item {
  background: var(--nvf-portfolio-bg);
  border-color: rgba(255, 255, 255, .1);
}
html[data-theme="dark"] .nvf-portfolio-filter--pills .nvf-portfolio-filter-item:hover {
  border-color: rgba(255, 255, 255, .2);
  background: var(--nvf-portfolio-surface);
}

/* Tabs filter variant */
html[data-theme="dark"] .nvf-portfolio-filter--tabs .nvf-portfolio-filter-item {
  background: rgba(17, 24, 39, .55);
  border-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .82);
}
html[data-theme="dark"] .nvf-portfolio-filter--tabs .nvf-portfolio-filter-item:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
html[data-theme="dark"] .nvf-portfolio-filter--tabs .nvf-portfolio-filter-item.is-active,
html[data-theme="dark"] .nvf-portfolio-filter--tabs .nvf-portfolio-filter-item[aria-pressed="true"] {
  background: rgba(255, 255, 255, .92);
  color: rgba(15, 23, 42, .92);
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 55px rgba(0, 0, 0, .35);
}

/* Card v2 (.nvf-card--portfolio) */
html[data-theme="dark"] .nvf-card.nvf-card--portfolio {
  background: var(--nvf-portfolio-dark-bg, rgba(17, 24, 39, .72));
  border-color: var(--nvf-portfolio-dark-border, rgba(255, 255, 255, .08));
  box-shadow: var(--nvf-portfolio-dark-shadow, 0 22px 70px rgba(0, 0, 0, .35));
}
html[data-theme="dark"] .nvf-card__subtitle,
html[data-theme="dark"] .nvf-card__excerpt {
  color: var(--nvf-portfolio-dark-text, rgba(255, 255, 255, .72));
}

/* Card excerpt */
html[data-theme="dark"] .nvf-portfolio-archive .nvf-portfolio-card-excerpt {
  color: rgba(255, 255, 255, .55);
}

/* Shimmer skeleton */
html[data-theme="dark"] .nvf-portfolio-thumb.nvf-sk {
  background: linear-gradient(90deg, #2a2a2e 25%, #333338, #2a2a2e 75%);
  background-size: 200% 100%;
}

/* Pagination */
html[data-theme="dark"] .nvf-portfolio-archive .page-numbers {
  background: var(--nvf-color-surface, #1a1d23);
  border-color: rgba(255, 255, 255, .1);
  color: var(--nvf-color-text, #d4d4d8);
}
html[data-theme="dark"] .nvf-portfolio-archive .page-numbers.current {
  background: rgba(255, 255, 255, .92);
  color: #0f1115;
  border-color: rgba(255, 255, 255, .92);
}
html[data-theme="dark"] .nvf-portfolio-pagination .page-numbers.current {
  background: rgba(255, 255, 255, .92);
  color: #0f1115;
  border-color: rgba(255, 255, 255, .92);
}

/* Project nav on single portfolio */
html[data-theme="dark"] .nvf-project-nav__item {
  border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .nvf-project-nav__item:hover {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .16);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body,
  html[data-theme] body *,
  html[data-theme] body *::before,
  html[data-theme] body *::after {
    transition-duration: 1ms !important;
  }
}