/**
 * JTZL's Dark Mode - Classic Theme Styles
 * Uses color inversion for broad compatibility with classic themes
 *
 * @package JTZL\JTZL_Dark_Mode
 */

@media (prefers-color-scheme: dark) {
  /* CSS Custom Properties (available for custom CSS filter) */
  :root {
    --id-bg-primary: #1a1a1a;
    --id-bg-secondary: #2d2d2d;
    --id-text-primary: #e0e0e0;
    --id-text-secondary: #a0a0a0;
    --id-border-color: #404040;
    --id-link-color: #6db3f2;
    --id-link-hover: #8ec5f5;
    --id-preserve-filter: invert(1) hue-rotate(180deg);
  }

  /* Color scheme hint for browser */
  html {
    color-scheme: dark;
  }

  /* Invert entire page colors */
  html {
    filter: invert(1) hue-rotate(180deg);
    background-color: #fff; /* Will become black after inversion */
  }

  /* Media Preservation - Double invert to restore original colors.
     Note: svg is intentionally excluded. Inline SVGs in WordPress are
     almost always UI icons that should invert with the page for proper
     contrast. Content SVGs are typically delivered via <img> tags. */
  img,
  picture,
  video,
  canvas,
  iframe,
  embed,
  object {
    filter: var(--id-preserve-filter) !important;
  }

  /* WordPress block media elements */
  figure img,
  .wp-block-image img,
  .wp-block-video video,
  .wp-block-embed iframe,
  .wp-block-gallery img {
    filter: var(--id-preserve-filter) !important;
  }

  /* WordPress embed wrappers */
  .wp-block-embed__wrapper {
    filter: var(--id-preserve-filter) !important;
  }

  /* Google Maps embeds */
  .google-maps-wrapper,
  .gmap,
  iframe[src*="google.com/maps"],
  iframe[src*="maps.google.com"] {
    filter: var(--id-preserve-filter) !important;
  }

  /* YouTube and video embeds */
  iframe[src*="youtube.com"],
  iframe[src*="youtube-nocookie.com"],
  iframe[src*="vimeo.com"],
  iframe[src*="dailymotion.com"] {
    filter: var(--id-preserve-filter) !important;
  }

  /* WooCommerce product images */
  .woocommerce-product-gallery img,
  .woocommerce img.attachment-woocommerce_thumbnail,
  .woocommerce-product-gallery__image img,
  .products .product img {
    filter: var(--id-preserve-filter) !important;
  }
}