/* ─── Light Mode (:root) ─────────────────────────────── */
:root {
  --color-bg:               #f5f3ef;
  --color-text-main:        #2c2416;
  --color-text-secondary:   #7a6a56;
  --color-text-muted:       #9a8a76;
  --color-primary:          #507844;
  --color-primary-light:    #3d5c33;
  --color-border:           #ddd8d0;
  --color-border-light:     #e8e4de;
  --color-border-dark:      #c8c0b4;

  --bg-input:               #ffffff;
  --bg-tag-cloud:           #ddd8d0;
  --bg-catalog-active:      #ede9e3;
  --bg-mobile-menu:         #f5f3ef;
  --bg-tag-active:          rgba(80,120,68,0.15);
  --bg-tag-invert:          rgba(80,120,68,0.08);
  --bg-pager:               #f5f3ef;
  --bg-disabled:            #2c2416;

  --sidebar-text:           #7a6a56;
  --sidebar-heading:        #4a3a28;

  --navbar-text:            #2c2416;
  --navbar-text-hover:      #507844;
  --navbar-toggle-icon-invert: #2c2416;

  --link-color:             #2c2416;
  --link-color-post:        #507844;
  --link-hover:             #b07d2a;

  --tag-border:             rgba(80,120,68,0.5);
  --tag-text:               #3d5c33;
  --tag-border-hover:       #507844;

  --btn-default-hover:      #507844;
  --btn-default-text:       #2c2416;

  --table-bg:               #ffffff;
  --table-header-bg:        #ede9e3;
  --table-border:           #ddd8d0;
  --table-text:             #2c2416;
  --table-stripe-bg:        rgba(80,120,68,0.05);
  --table-hover-bg:         rgba(80,120,68,0.08);

  --caption-text:           #7a6a56;
  --copyright-link:         #507844;
  --pager-disabled:         #9a8a76;
  --selection-bg:           #507844;
  --selection-text:         #ffffff;
  --shadow-color:           rgba(44,36,22,0.15);
  --mobile-menu-shadow:     rgba(44,36,22,0.10);
  --mobile-menu-shadow-2:   rgba(44,36,22,0.20);
  --tagcloud-start:         #a3bf9a;
  --tagcloud-end:           #507844;
}

/* ─── Light Mode explicit override ([data-theme="light"] wins over :root) ── */
[data-theme="light"] {
  --color-bg:               #f5f3ef;
  --color-text-main:        #2c2416;
  --color-text-secondary:   #7a6a56;
  --color-text-muted:       #9a8a76;
  --color-primary:          #507844;
  --color-primary-light:    #3d5c33;
  --color-border:           #ddd8d0;
  --color-border-light:     #e8e4de;
  --color-border-dark:      #c8c0b4;

  --bg-input:               #ffffff;
  --bg-tag-cloud:           #ddd8d0;
  --bg-catalog-active:      #ede9e3;
  --bg-mobile-menu:         #f5f3ef;
  --bg-tag-active:          rgba(80,120,68,0.15);
  --bg-tag-invert:          rgba(80,120,68,0.08);
  --bg-pager:               #f5f3ef;
  --bg-disabled:            #2c2416;

  --sidebar-text:           #7a6a56;
  --sidebar-heading:        #4a3a28;

  --navbar-text:            #2c2416;
  --navbar-text-hover:      #507844;
  --navbar-toggle-icon-invert: #2c2416;

  --link-color:             #2c2416;
  --link-color-post:        #507844;
  --link-hover:             #b07d2a;

  --tag-border:             rgba(80,120,68,0.5);
  --tag-text:               #3d5c33;
  --tag-border-hover:       #507844;

  --btn-default-hover:      #507844;
  --btn-default-text:       #2c2416;

  --table-bg:               #ffffff;
  --table-header-bg:        #ede9e3;
  --table-border:           #ddd8d0;
  --table-text:             #2c2416;
  --table-stripe-bg:        rgba(80,120,68,0.05);
  --table-hover-bg:         rgba(80,120,68,0.08);

  --caption-text:           #7a6a56;
  --copyright-link:         #507844;
  --pager-disabled:         #9a8a76;
  --selection-bg:           #507844;
  --selection-text:         #ffffff;
  --shadow-color:           rgba(44,36,22,0.15);
  --mobile-menu-shadow:     rgba(44,36,22,0.10);
  --mobile-menu-shadow-2:   rgba(44,36,22,0.20);
  --tagcloud-start:         #a3bf9a;
  --tagcloud-end:           #507844;
}

/* ─── Dark Mode ([data-theme="dark"]) ───────────────── */
[data-theme="dark"] {
  --color-bg:               #1a2233;
  --color-text-main:        #ffffff;
  --color-text-secondary:   rgba(255,255,255,0.70);
  --color-text-muted:       rgba(255,255,255,0.50);
  --color-primary:          #6aaa5a;
  --color-primary-light:    #7abc6a;
  --color-border:           rgba(80,120,68,0.30);
  --color-border-light:     rgba(80,120,68,0.20);
  --color-border-dark:      rgba(80,120,68,0.45);

  --bg-input:               #1e2a3a;
  --bg-tag-cloud:           rgba(30,42,58,0.75);
  --bg-catalog-active:      rgba(30,42,58,0.78);
  --bg-mobile-menu:         rgba(26,34,51,0.90);
  --bg-tag-active:          rgba(80,120,68,0.20);
  --bg-tag-invert:          rgba(80,120,68,0.10);
  --bg-pager:               rgba(30,42,58,0.78);
  --bg-disabled:            rgba(26,34,51,0.70);

  --sidebar-text:           rgba(255,255,255,0.60);
  --sidebar-heading:        #ffffff;

  --navbar-text:            #ffffff;
  --navbar-text-hover:      #6aaa5a;

  --link-color:             #6aaa5a;
  --link-color-post:        #7abc6a;
  --link-hover:             #b07d2a;

  --tag-border:             rgba(80,120,68,0.50);
  --tag-text:               #a7f3d0;
  --tag-border-hover:       #507844;

  --btn-default-hover:      #507844;
  --btn-default-text:       rgba(255,255,255,0.85);

  --table-bg:               rgba(30,42,58,0.78);
  --table-header-bg:        rgba(26,34,51,0.85);
  --table-border:           rgba(80,120,68,0.25);
  --table-text:             #ffffff;
  --table-stripe-bg:        rgba(80,120,68,0.05);
  --table-hover-bg:         rgba(80,120,68,0.10);

  --caption-text:           rgba(255,255,255,0.55);
  --copyright-link:         #6aaa5a;
  --pager-disabled:         rgba(255,255,255,0.30);
  --selection-bg:           #507844;
  --selection-text:         #ffffff;
  --shadow-color:           rgba(0,8,16,0.60);
  --mobile-menu-shadow:     rgba(0,5,15,0.65);
  --mobile-menu-shadow-2:   rgba(0,4,12,0.70);
  --tagcloud-start:         rgba(167,243,208,0.60);
  --tagcloud-end:           #6aaa5a;
}

/* ─── Light mode code blocks ─────────────────────────── */
/* Dracula syntax colors are kept as-is; only background and border are adjusted */
pre,
.highlight,
.chroma {
  background: #1e2535 !important;
  border: 1px solid rgba(80,120,68,0.35) !important;
  border-radius: 4px;
}

code {
  background: rgba(80,120,68,0.12);
  color: #3d5c33;
  border-radius: 3px;
  padding: 0.15em 0.4em;
}

pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0;
}

[data-theme="light"] pre,
[data-theme="light"] .highlight,
[data-theme="light"] .chroma {
  background: #1e2535 !important;
  border: 1px solid rgba(80,120,68,0.35) !important;
}

[data-theme="light"] code {
  background: rgba(80,120,68,0.12) !important;
  color: #3d5c33 !important;
}

[data-theme="light"] pre code {
  background: transparent !important;
  color: inherit !important;
}

/* ─── Dark mode code blocks ─────────────────────────── */
[data-theme="dark"] pre,
[data-theme="dark"] .highlight,
[data-theme="dark"] .chroma,
[data-theme="dark"] pre code,
[data-theme="dark"] .post-container pre,
[data-theme="dark"] .post-container .highlight {
  background: rgba(14,20,35,0.97) !important;
  border-color: rgba(80,120,68,0.30) !important;
}

[data-theme="dark"] pre {
  border: 1px solid rgba(80,120,68,0.30) !important;
}

[data-theme="dark"] code {
  background: rgba(26,34,51,0.85) !important;
  color: #a7f3d0 !important;
  border-radius: 3px;
  padding: 0.15em 0.4em;
}

[data-theme="dark"] pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0;
}

[data-theme="dark"] .code-header,
[data-theme="dark"] .code-footer {
  background: rgba(10,15,28,0.85) !important;
  border-color: rgba(80,120,68,0.25) !important;
}

[data-theme="dark"] .filename,
[data-theme="dark"] .lang {
  color: rgba(255,255,255,0.5) !important;
}

/* ─── Body background (ensure override applies) ─────── */
body {
  background-color: var(--color-bg);
}

/* ─── Bullet point markers ───────────────────────────── */
ul li::marker,
ol li::marker,
.post-container ul li::marker,
.post-container ol li::marker {
  color: var(--color-primary);
}

[data-theme="dark"] ul li::marker,
[data-theme="dark"] ol li::marker,
[data-theme="dark"] .post-container ul li::marker,
[data-theme="dark"] .post-container ol li::marker {
  color: var(--color-primary) !important;
}

/* ─── Override hardcoded dark mode link colors (!important in theme) ─── */
[data-theme="dark"] a,
[data-theme="dark"] .ds-user-name,
[data-theme="dark"] .ds-link {
  color: var(--link-color) !important;
}
[data-theme="dark"] a:hover,
[data-theme="dark"] .ds-user-name:hover {
  color: var(--link-hover) !important;
}
/* Keep post content links in dark mode slightly brighter */
[data-theme="dark"] .post-container a {
  color: var(--link-color-post) !important;
}
[data-theme="dark"] .post-container a:hover {
  color: var(--link-hover) !important;
}

/* ─── Tags in post list and tag pages ────────────────── */
.tags a,
.tags .tag {
  border-color: var(--tag-border) !important;
  color: var(--tag-text) !important;
}
.tags a:hover,
.tags .tag:hover,
.tags a:active,
.tags .tag:active {
  border-color: var(--tag-border-hover) !important;
  color: var(--tag-text) !important;
  background-color: var(--bg-tag-active) !important;
}

/* ─── Social icons (sidebar + footer) ───────────────── */
.sidebar-container .short-about .list-inline a,
footer .list-inline a {
  color: var(--color-primary) !important;
}
.sidebar-container .short-about .list-inline a:hover,
footer .list-inline a:hover {
  color: var(--link-hover) !important;
}

/* ─── General link color override ────────────────────── */
a {
  color: var(--link-color);
}
a:hover, a:focus {
  color: var(--link-hover);
}

/* ─── Post content links ─────────────────────────────── */
.post-container a,
.post-content a {
  color: var(--link-color-post);
}
.post-container a:hover,
.post-content a:hover {
  color: var(--link-hover);
}

/* ─── Mobile select dropdown (hardcoded #337ab7 override) */
@media screen and (max-width: 768px) {
  select {
    color: var(--color-text-main) !important;
    border-color: var(--color-border) !important;
  }
}

/* ─── Bootstrap btn-default active/focus blue override ── */
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: var(--btn-default-text);
  background-color: var(--btn-default-hover);
  border-color: var(--btn-default-hover);
}

/* ─── Pagination active state ────────────────────────── */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.pagination > li > a,
.pagination > li > span {
  color: var(--link-color-post);
}

/* ─── Dark mode: navbar scrolled state ───────────────── */
[data-theme="dark"] .navbar-custom.is-fixed,
[data-theme="dark"] .navbar-custom.is-visible {
  background-color: rgba(26,34,51,0.92) !important;
}

/* ─── Navbar dropdown open state ─────────────────────── */
.navbar-nav .dropdown.open>a,
.navbar-nav .dropdown.open>a:hover,
.navbar-nav .dropdown.open>a:focus,
.navbar-custom.is-fixed .navbar-nav .dropdown.open>a,
.navbar-custom.is-fixed .navbar-nav .dropdown.open>a:hover,
.navbar-custom.is-fixed .navbar-nav .dropdown.open>a:focus {
  background-color: rgba(80,120,68,0.2) !important;
  color: #507844 !important;
}

[data-theme="dark"] .navbar-nav .dropdown.open>a,
[data-theme="dark"] .navbar-nav .dropdown.open>a:hover,
[data-theme="dark"] .navbar-nav .dropdown.open>a:focus,
[data-theme="dark"] .navbar-custom.is-fixed .dropdown.open>a,
[data-theme="dark"] .navbar-custom.is-fixed .dropdown.open>a:hover,
[data-theme="dark"] .navbar-custom.is-fixed .dropdown.open>a:focus {
  background-color: rgba(80,120,68,0.25) !important;
  color: #6aaa5a !important;
}

/* Dropdown menu item hover */
.navbar-nav .dropdown-menu>li>a:hover,
.navbar-nav .dropdown-menu>li>a:focus,
.navbar-custom.is-fixed .dropdown-menu>li>a:hover {
  background-color: rgba(80,120,68,0.25) !important;
}

/* ─── Pager (Newer Posts / Older Posts) ──────────────── */
.pager li>a,
.pager li>span {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  background-color: transparent;
}

.pager li>a:hover,
.pager li>a:focus {
  color: #fff !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

[data-theme="dark"] .pager li>a,
[data-theme="dark"] .pager li>span {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-color: transparent !important;
}

[data-theme="dark"] .pager li>a:hover,
[data-theme="dark"] .pager li>a:focus {
  color: #fff !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}