/**
 * JTZL's Dark Mode - Block Theme Styles
 * Uses CSS custom properties for FSE/block themes
 *
 * @package JTZL\JTZL_Dark_Mode
 */

@media (prefers-color-scheme: dark) {
  /* CSS Custom Properties for theming */
  :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;
  }

  /* Base dark mode styles */
  html {
    color-scheme: dark;
  }

  body {
    background-color: var(--id-bg-primary);
    color: var(--id-text-primary);
  }

  /* Links */
  a {
    color: var(--id-link-color);
  }

  a:hover,
  a:focus {
    color: var(--id-link-hover);
  }

  /* Common form elements */
  input,
  textarea,
  select,
  button {
    background-color: var(--id-bg-secondary);
    color: var(--id-text-primary);
    border-color: var(--id-border-color);
  }

  /* Tables */
  table,
  th,
  td {
    border-color: var(--id-border-color);
  }

  th {
    background-color: var(--id-bg-secondary);
  }

  /* WordPress navigation responsive overlay (hamburger menu drawer).
     WordPress core sets background-color: #fff and color: #000 on the overlay
     using high-specificity selectors with :not(.has-background) / :not(.has-text-color).
     Inner items use color: inherit !important and background: transparent !important.
     We must match or exceed that specificity and use !important to override. */
  .wp-block-navigation:not(.has-background)
    .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--id-bg-primary) !important;
  }

  .wp-block-navigation:not(.has-text-color)
    .wp-block-navigation__responsive-container.is-menu-open {
    color: var(--id-text-primary) !important;
  }

  .wp-block-navigation.has-background
    .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--id-bg-primary) !important;
  }

  .wp-block-navigation.has-text-color
    .wp-block-navigation__responsive-container.is-menu-open {
    color: var(--id-text-primary) !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item
    .wp-block-navigation__submenu-container,
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
    color: inherit !important;
    background: transparent !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    a {
    color: var(--id-link-color) !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    a:hover,
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    a:focus {
    color: var(--id-link-hover) !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-close {
    color: var(--id-text-primary) !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-close
    svg {
    fill: currentColor;
  }

  .wp-block-navigation__responsive-container-open {
    color: var(--id-text-primary) !important;
  }
}