/* Dark Mode for Freeport FL News - Mainroad Theme */

/* CSS Custom Properties for theming */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f7;
  --bg-tertiary: #f5f5f5;
  --bg-dark: #2a2a2a;
  --text-primary: #000000;
  --text-secondary: #666666;
  --text-light: #ffffff;
  --border-color: #e0e0e0;
  --highlight-color: #e22d30;
  --link-color: #2a2a2a;
  --widget-title-bg: #2a2a2a;
  --widget-title-color: #ffffff;
  --code-bg: #f5f5f5;
  --quote-border: #e0e0e0;
  --quote-color: #666;
  --table-border: #e0e0e0;
  --table-stripe: #f5f5f5;
}

[data-theme="dark"] {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-tertiary: #0f3460;
  --bg-dark: #e94560;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-light: #1a1a2e;
  --border-color: #2a2a4a;
  --highlight-color: #e94560;
  --link-color: #e0e0e0;
  --widget-title-bg: #0f3460;
  --widget-title-color: #e0e0e0;
  --code-bg: #16213e;
  --quote-border: #2a2a4a;
  --quote-color: #a0a0a0;
  --table-border: #2a2a4a;
  --table-stripe: #16213e;
}

/* Apply variables */
[data-theme="dark"] body {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .wrapper,
[data-theme="dark"] .main__content,
[data-theme="dark"] .content {
  background: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .sidebar .widget {
  background: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .widget-title {
  background: var(--widget-title-bg);
  color: var(--widget-title-color);
}

[data-theme="dark"] .widget ul li a {
  color: var(--text-primary);
}

[data-theme="dark"] .widget ul li a:hover {
  color: var(--highlight-color);
}

[data-theme="dark"] .widget ul li .widget-list__count {
  color: var(--text-secondary);
}

[data-theme="dark"] .logo__text,
[data-theme="dark"] .logo__text a {
  color: var(--text-primary);
}

[data-theme="dark"] .menu__link {
  color: var(--text-primary);
}

[data-theme="dark"] .menu__link:hover,
[data-theme="dark"] .menu__link--active {
  color: var(--highlight-color);
}

[data-theme="dark"] .post__title a {
  color: var(--text-primary);
}

[data-theme="dark"] .post__title a:hover {
  color: var(--highlight-color);
}

[data-theme="dark"] .post__meta {
  color: var(--text-secondary);
}

[data-theme="dark"] .post__content,
[data-theme="dark"] .post-content {
  color: var(--text-primary);
}

[data-theme="dark"] .post__content a,
[data-theme="dark"] .post-content a {
  color: var(--highlight-color);
}

[data-theme="dark"] .post__content h1,
[data-theme="dark"] .post__content h2,
[data-theme="dark"] .post__content h3,
[data-theme="dark"] .post__content h4,
[data-theme="dark"] .post__content h5,
[data-theme="dark"] .post__content h6,
[data-theme="dark"] .post-content h1,
[data-theme="dark"] .post-content h2,
[data-theme="dark"] .post-content h3,
[data-theme="dark"] .post-content h4,
[data-theme="dark"] .post-content h5,
[data-theme="dark"] .post-content h6 {
  color: var(--text-primary);
}

[data-theme="dark"] .post__content blockquote,
[data-theme="dark"] .post-content blockquote {
  border-color: var(--quote-border);
  color: var(--quote-color);
}

[data-theme="dark"] .post__content code,
[data-theme="dark"] .post-content code {
  background: var(--code-bg);
  color: var(--text-primary);
}

[data-theme="dark"] .post__content pre,
[data-theme="dark"] .post-content pre {
  background: var(--code-bg);
  color: var(--text-primary);
}

[data-theme="dark"] .post__content table th,
[data-theme="dark"] .post__content table td,
[data-theme="dark"] .post-content table th,
[data-theme="dark"] .post-content table td {
  border-color: var(--table-border);
}

[data-theme="dark"] .post__content table tr:nth-child(even),
[data-theme="dark"] .post-content table tr:nth-child(even) {
  background: var(--table-stripe);
}

[data-theme="dark"] .footer {
  background: var(--bg-primary);
  color: var(--text-secondary);
}

[data-theme="dark"] .footer a {
  color: var(--text-secondary);
}

[data-theme="dark"] .footer a:hover {
  color: var(--highlight-color);
}

[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span {
  color: var(--text-primary);
  background: var(--bg-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .pagination a:hover {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .form__input,
[data-theme="dark"] .form__textarea {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .form__button {
  background: var(--highlight-color);
  color: var(--text-light);
}

[data-theme="dark"] .breadcrumb a {
  color: var(--text-secondary);
}

[data-theme="dark"] .post__thumbnail img {
  border-color: var(--border-color);
}

[data-theme="dark"] .widget input[type="search"] {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Toggle sits inside menu bar */
.dark-mode-toggle {
  cursor: pointer;
  font-size: 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .dark-mode-toggle .icon-sun { display: inline; }
[data-theme="dark"] .dark-mode-toggle .icon-moon { display: none; }
[data-theme="light"] .dark-mode-toggle .icon-sun { display: none; }
[data-theme="light"] .dark-mode-toggle .icon-moon { display: inline; }

/* Auto theme: follow system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --bg-dark: #e94560;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-light: #1a1a2e;
    --border-color: #2a2a4a;
    --highlight-color: #e94560;
    --link-color: #e0e0e0;
    --widget-title-bg: #0f3460;
    --widget-title-color: #e0e0e0;
    --code-bg: #16213e;
    --quote-border: #2a2a4a;
    --quote-color: #a0a0a0;
    --table-border: #2a2a4a;
    --table-stripe: #16213e;
  }

  :root:not([data-theme="light"]) body {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }

  :root:not([data-theme="light"]) .wrapper,
  :root:not([data-theme="light"]) .main__content,
  :root:not([data-theme="light"]) .content {
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  :root:not([data-theme="light"]) .sidebar .widget {
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  :root:not([data-theme="light"]) .widget-title {
    background: var(--widget-title-bg);
    color: var(--widget-title-color);
  }

  :root:not([data-theme="light"]) .widget ul li a {
    color: var(--text-primary);
  }

  :root:not([data-theme="light"]) .logo__text,
  :root:not([data-theme="light"]) .logo__text a {
    color: var(--text-primary);
  }

  :root:not([data-theme="light"]) .menu__link {
    color: var(--text-primary);
  }

  :root:not([data-theme="light"]) .post__title a {
    color: var(--text-primary);
  }

  :root:not([data-theme="light"]) .post__meta {
    color: var(--text-secondary);
  }

  :root:not([data-theme="light"]) .post__content,
  :root:not([data-theme="light"]) .post-content {
    color: var(--text-primary);
  }

  :root:not([data-theme="light"]) .post__content h1,
  :root:not([data-theme="light"]) .post__content h2,
  :root:not([data-theme="light"]) .post__content h3,
  :root:not([data-theme="light"]) .post__content h4,
  :root:not([data-theme="light"]) .post__content h5,
  :root:not([data-theme="light"]) .post__content h6,
  :root:not([data-theme="light"]) .post-content h1,
  :root:not([data-theme="light"]) .post-content h2,
  :root:not([data-theme="light"]) .post-content h3,
  :root:not([data-theme="light"]) .post-content h4,
  :root:not([data-theme="light"]) .post-content h5,
  :root:not([data-theme="light"]) .post-content h6 {
    color: var(--text-primary);
  }

  :root:not([data-theme="light"]) .footer {
    background: var(--bg-primary);
    color: var(--text-secondary);
  }

  :root:not([data-theme="light"]) .footer a {
    color: var(--text-secondary);
  }

  :root:not([data-theme="light"]) .pagination a,
  :root:not([data-theme="light"]) .pagination span {
    color: var(--text-primary);
    background: var(--bg-primary);
    border-color: var(--border-color);
  }

  :root:not([data-theme="light"]) .dark-mode-toggle .icon-sun { display: inline; }
  :root:not([data-theme="light"]) .dark-mode-toggle .icon-moon { display: none; }
}

.dark-mode-toggle {
  margin-left: auto;
  order: 10;
  font-size: 1.3em;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 50%;
  background: rgba(128,128,128,0.1);
  border: 1px solid transparent;
}

.dark-mode-toggle:hover {
  background: rgba(128,128,128,0.2);
  border-color: rgba(128,128,128,0.3);
}

/* Ensure widget text colors work in dark mode */
[data-theme="dark"] .widget {
  color: var(--text-primary);
}

[data-theme="dark"] .widget-list li,
[data-theme="dark"] .widget-list li a {
  color: var(--text-primary);
}

[data-theme="dark"] .widget-list li a:hover {
  color: var(--highlight-color);
}

/* Gas and weather widget dark mode */
[data-theme="dark"] #gas-widget,
[data-theme="dark"] #weather-widget {
  color: var(--text-primary);
}

[data-theme="dark"] #gas-lowest {
  color: #4da6ff !important;
}

[data-theme="dark"] #gas-label,
[data-theme="dark"] #gas-updated,
[data-theme="dark"] #weather-desc,
[data-theme="dark"] #weather-wind,
[data-theme="dark"] #weather-humidity {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] #gas-stations div span,
[data-theme="dark"] #weather-forecast div span {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #gas-stations div span:last-child {
  color: #4da6ff !important;
}

[data-theme="dark"] #gas-updated a {
  color: #4da6ff !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #gas-lowest {
    color: #4da6ff !important;
  }
  :root:not([data-theme="light"]) #gas-label,
  :root:not([data-theme="light"]) #gas-updated,
  :root:not([data-theme="light"]) #weather-desc,
  :root:not([data-theme="light"]) #weather-wind,
  :root:not([data-theme="light"]) #weather-humidity {
    color: var(--text-secondary) !important;
  }
  :root:not([data-theme="light"]) #gas-stations div span,
  :root:not([data-theme="light"]) #weather-forecast div span {
    color: var(--text-primary) !important;
  }
  :root:not([data-theme="light"]) #gas-stations div span:last-child {
    color: #4da6ff !important;
  }
  :root:not([data-theme="light"]) #gas-updated a {
    color: #4da6ff !important;
  }
  :root:not([data-theme="light"]) .dark-mode-toggle {
    margin-left: auto;
    order: 10;
  }
}

/* Dark menu bar */
[data-theme="dark"] .menu,
[data-theme="dark"] .menu__list,
[data-theme="dark"] .js .menu__list {
  background: #0f3460;
}

[data-theme="dark"] .menu__item:hover {
  background: #e94560;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .menu,
  :root:not([data-theme="light"]) .menu__list,
  :root:not([data-theme="light"]) .js .menu__list {
    background: #0f3460;
  }
  :root:not([data-theme="light"]) .menu__item:hover {
    background: #e94560;
  }
}

/* Widget title and content in dark mode */
[data-theme="dark"] .widget__title {
  color: var(--text-primary);
  border-bottom-color: var(--highlight-color);
}

[data-theme="dark"] .widget__content,
[data-theme="dark"] .widget__item,
[data-theme="dark"] .joke__text,
[data-theme="dark"] .widget-joke p {
  color: var(--text-primary);
}

[data-theme="dark"] .widget__item a {
  color: var(--text-primary);
}

[data-theme="dark"] .widget__item a:hover {
  color: var(--highlight-color);
}

[data-theme="dark"] .widget__counter {
  color: var(--text-secondary);
}

[data-theme="dark"] .widget {
  background: var(--bg-primary);
  color: var(--text-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .widget__title {
    color: var(--text-primary);
    border-bottom-color: var(--highlight-color);
  }
  :root:not([data-theme="light"]) .widget__content,
  :root:not([data-theme="light"]) .widget__item,
  :root:not([data-theme="light"]) .joke__text,
  :root:not([data-theme="light"]) .widget-joke p {
    color: var(--text-primary);
  }
  :root:not([data-theme="light"]) .widget__item a {
    color: var(--text-primary);
  }
  :root:not([data-theme="light"]) .widget {
    background: var(--bg-primary);
    color: var(--text-primary);
  }
}

/* Category and page titles */
[data-theme="dark"] .main__title,
[data-theme="dark"] .main__subtitle,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .main__title,
  :root:not([data-theme="light"]) .main__subtitle,
  :root:not([data-theme="light"]) h1,
  :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3,
  :root:not([data-theme="light"]) h4,
  :root:not([data-theme="light"]) h5,
  :root:not([data-theme="light"]) h6 {
    color: var(--text-primary);
  }
}

/* Links in dark mode - slightly brighter */
[data-theme="dark"] a,
[data-theme="dark"] .post__content a,
[data-theme="dark"] .post-content a,
[data-theme="dark"] .widget a,
[data-theme="dark"] .widget-list a,
[data-theme="dark"] .widget__item a {
  color: #6db3f2;
}

[data-theme="dark"] a:hover,
[data-theme="dark"] .post__content a:hover,
[data-theme="dark"] .post-content a:hover,
[data-theme="dark"] .widget a:hover,
[data-theme="dark"] .widget-list a:hover,
[data-theme="dark"] .widget__item a:hover {
  color: #9ecbfa;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a,
  :root:not([data-theme="light"]) .post__content a,
  :root:not([data-theme="light"]) .post-content a,
  :root:not([data-theme="light"]) .widget a,
  :root:not([data-theme="light"]) .widget-list a,
  :root:not([data-theme="light"]) .widget__item a {
    color: #6db3f2;
  }
  :root:not([data-theme="light"]) a:hover,
  :root:not([data-theme="light"]) .post__content a:hover,
  :root:not([data-theme="light"]) .post-content a:hover,
  :root:not([data-theme="light"]) .widget a:hover,
  :root:not([data-theme="light"]) .widget-list a:hover,
  :root:not([data-theme="light"]) .widget__item a:hover {
    color: #9ecbfa;
  }
}