/* theme.css */

/* LIGHT THEME (default) */
/*body {
  color: #222324;
  background-color: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
  color: #242424;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #242424;
}
em, li {
  color: #242424;
}
p {
  color: #656565;
}
.s-header__shrink .s-header__container,
.s-header__shrink .s-header__navbar {
  background-color: #ffffff;
}
.s-header__trigger-icon {
  background: #000000;
  border-bottom: none;
}
.s-header__trigger-icon:before,
.s-header__trigger-icon:after {
  background: #000000;
  border-bottom: none;
}
.s-header__shrink.-is-open .s-header__trigger-icon {
  background: #ffffff;
}

/* DARK THEME */
/*html[data-theme="dark"] body {
  color: #ffffff;
  background-color: #000000;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #ffffff;
}
html[data-theme="dark"] h1 a,
html[data-theme="dark"] h2 a,
html[data-theme="dark"] h3 a,
html[data-theme="dark"] h4 a,
html[data-theme="dark"] h5 a,
html[data-theme="dark"] h6 a {
  color: #ffffff;
}
html[data-theme="dark"] em,
html[data-theme="dark"] li {
  color: #c9c9c9;
}
html[data-theme="dark"] p {
  color: #cecece;
}
html[data-theme="dark"] .s-header__shrink .s-header__container,
html[data-theme="dark"] .s-header__shrink .s-header__navbar {
  background-color: #000000;
}
html[data-theme="dark"] .s-header__trigger-icon {
  background: #ffffff;
  border-bottom: solid 1px #ffffff;
}
html[data-theme="dark"] .s-header__trigger-icon:before,
html[data-theme="dark"] .s-header__trigger-icon:after {
  background: #ffffff;
  border-bottom: solid 1px #ffffff;
}
html[data-theme="dark"] .s-header__shrink.-is-open .s-header__trigger-icon {
  background: #000000;
}
*/

/* Default = light theme → no overlay  [for index.html]*/
.theme-overlay {
  background-color: transparent;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  transition: background-color 0.4s ease;
}

/* Dark theme → enable overlay */
[data-theme="dark"] .theme-overlay {
  background-color: rgba(0, 0, 0, 0.4);
}



:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --heading-color: #242424;
  --em-color: #242424;
  --p-color: #656565;
  --navbar-bg: #ffffff;
  --icon-color: #000000;
}

[data-theme='dark'] {
  --bg-color: #000000;
  --text-color: #ffffff;
  --heading-color: #ffffff;
  --em-color: #c9c9c9;
  --p-color: #cecece;
  --navbar-bg: #000000;
  --icon-color: #ffffff;
}

body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: var(--heading-color) !important;
}

p {
  color: var(--p-color) !important;
}

em,
li {
  color: var(--em-color) !important;
}

.s-header__shrink .s-header__container,
.s-header__shrink .s-header__navbar {
  background-color: var(--navbar-bg) !important;
}

.s-header__trigger-icon,
.s-header__trigger-icon:before,
.s-header__trigger-icon:after {
  background: var(--icon-color) !important;
  border-bottom: solid 1px var(--icon-color) !important;
}

.s-header__shrink.-is-open .s-header__trigger-icon {
  background: var(--bg-color) !important;
}