/* Northline theme modes: light, grid, dark and image. */
:root {
  --nl-image-theme-url: url("https://img.k123.qzz.io/");
}

html[data-theme="grid"] {
  --nl-bg: #ffffff;
  --nl-surface: #ffffff;
  --nl-surface-soft: rgba(255, 255, 255, 0.94);
  --nl-ink: #172033;
  --nl-muted: #6e788b;
  --nl-line: #e3e8ef;
  --nl-blue: #1688f8;
  --nl-blue-dark: #0870dc;
  --nl-blue-soft: #eaf5ff;
  --nl-navy: #10263f;
}

html[data-theme="dark"] {
  --nl-bg: #0d1524;
  --nl-surface: #141e30;
  --nl-surface-soft: rgba(20, 30, 48, 0.94);
  --nl-ink: #e8f0fb;
  --nl-muted: #9fb0c9;
  --nl-line: #26364d;
  --nl-blue: #4ea6ff;
  --nl-blue-dark: #7cbfff;
  --nl-blue-soft: #122b46;
  --nl-navy: #0b1423;
  --nl-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

html[data-theme="image"] {
  --nl-bg: transparent;
  --nl-surface: rgba(255, 255, 255, 0.9);
  --nl-surface-soft: rgba(255, 255, 255, 0.96);
  --nl-ink: #172033;
  --nl-muted: #5a677d;
  --nl-line: #d9e2ee;
  --nl-blue: #0f7ff0;
  --nl-blue-dark: #0762c4;
  --nl-blue-soft: #e8f4ff;
  --nl-navy: #10263f;
  --nl-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

html[data-theme="grid"] body {
  background-color: #ffffff;
  background-image: linear-gradient(to right, rgba(100, 116, 139, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, 0.18) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 32px 32px;
}

html[data-theme="image"] body {
  background-color: #0f172a;
  background-image: var(--nl-image-theme-url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.theme-switch {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #536077;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.theme-switch:hover,
.theme-switch:focus-visible {
  color: var(--nl-blue);
  background: var(--nl-blue-soft);
}

html[data-theme="dark"] .theme-switch {
  color: #a9bad5;
}

html[data-theme="dark"] .theme-switch:hover,
html[data-theme="dark"] .theme-switch:focus-visible {
  color: #fff;
}

/* Dark mode fixes for hard-coded light surfaces in the base theme. */
html[data-theme="dark"] .site-header {
  background: rgba(20, 30, 48, 0.92);
  border-bottom: 1px solid #26364d;
}

html[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(20, 30, 48, 0.97);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .search-field,
html[data-theme="dark"] .widget .wp-block-search__input,
html[data-theme="dark"] .comment-form input:not([type="submit"]):not([type="checkbox"]),
html[data-theme="dark"] .comment-form textarea {
  color: var(--nl-ink);
  background: #101a2b;
  border: 1px solid #2b3d58;
}

html[data-theme="dark"] .search-close,
html[data-theme="dark"] .language-options,
html[data-theme="dark"] .search-popover,
html[data-theme="dark"] .main-navigation .sub-menu,
html[data-theme="dark"] .mobile-navigation nav,
html[data-theme="dark"] .comments-area,
html[data-theme="dark"] .entry-content pre {
  color: var(--nl-ink);
  background: #141e30;
  border: 1px solid #26364d;
}

html[data-theme="dark"] .entry-content pre {
  background: #0b1220;
}

html[data-theme="dark"] .search-close {
  color: #a9bad5;
}

html[data-theme="dark"] .search-close:hover {
  color: #fff;
}

html[data-theme="dark"] .entry-content :not(pre) > code,
html[data-theme="dark"] .entry-content th,
html[data-theme="dark"] .tag-cloud a,
html[data-theme="dark"] .category-count {
  color: #bfd9f5;
  background: #17283d;
}

html[data-theme="dark"] .entry-content blockquote,
html[data-theme="dark"] .post-card:hover,
html[data-theme="dark"] .search-result:hover,
html[data-theme="dark"] .language-options a:hover,
html[data-theme="dark"] .language-options a:focus-visible,
html[data-theme="dark"] .current-menu-item > a {
  background: #1b2a41;
}

html[data-theme="dark"] .brand-subtitle {
  color: #8fa1ba;
  border-left: 1px solid #26364d;
}

html[data-theme="dark"] .post-thumbnail,
html[data-theme="dark"] .single-featured {
  background: #1c2b42;
}

html[data-theme="dark"] .site-footer {
  background: #0b1320;
}

/* Image theme keeps panels readable over a full-screen background image. */
html[data-theme="image"] .site-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(228, 233, 240, 0.9);
  backdrop-filter: blur(14px);
}

html[data-theme="image"] .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
}

html[data-theme="image"] .search-popover,
html[data-theme="image"] .language-options,
html[data-theme="image"] .main-navigation .sub-menu,
html[data-theme="image"] .mobile-navigation nav {
  background: #fff;
  border: 1px solid var(--nl-line);
}

html[data-theme="image"] .site-footer {
  background: rgba(16, 27, 45, 0.94);
}

html[data-theme="image"] .post-card,
html[data-theme="image"] .posts-panel,
html[data-theme="image"] .sidebar-panel,
html[data-theme="image"] .comments-area,
html[data-theme="image"] .single-article,
html[data-theme="image"] .post-navigation .nav-previous a,
html[data-theme="image"] .post-navigation .nav-next a {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}