/* ============================================================
   INVERTER110 GLOBAL COLOR MODE
   Light/Dark theme shared by every page.
   ============================================================ */
:root {
  color-scheme: light;
  --theme-bg: #f4fbf9;
  --theme-surface: #ffffff;
  --theme-surface-2: #e9f5f2;
  --theme-text: #073f3a;
  --theme-text-2: #365d67;
  --theme-muted: #64777d;
  --theme-border: #c7dfdb;
  --theme-nav: #0b6f77;
  --theme-gold: #f3c12b;
  --theme-link: #08737d;
  --theme-shadow: 0 12px 32px rgba(7,63,58,.09);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #0d1719;
  --theme-surface: #152326;
  --theme-surface-2: #1b3033;
  --theme-text: #f3fbf9;
  --theme-text-2: #c7ddda;
  --theme-muted: #a7bbb9;
  --theme-border: #355457;
  --theme-nav: #075c63;
  --theme-gold: #f4c52e;
  --theme-link: #71d5d1;
  --theme-shadow: 0 12px 34px rgba(0,0,0,.28);
}

html, body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  transition: background-color .2s ease, color .2s ease;
}

body {
  background-image: none;
}

body,
main,
section,
article,
aside,
footer,
.container,
.content,
.page,
.wrapper,
.card,
.topic-card,
.tool-card,
.post-card,
.post,
.article,
.article-card,
.calculator,
.calculator-card,
.results,
.result,
.panel,
.box,
.form-card {
  border-color: var(--theme-border);
}

html[data-theme="dark"] body {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] main,
html[data-theme="dark"] section,
html[data-theme="dark"] .section,
html[data-theme="dark"] .content,
html[data-theme="dark"] .page,
html[data-theme="dark"] .container,
html[data-theme="dark"] .wrapper {
  color: var(--theme-text);
}

html[data-theme="dark"] article,
html[data-theme="dark"] aside,
html[data-theme="dark"] .card,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .post,
html[data-theme="dark"] .article,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .calculator,
html[data-theme="dark"] .calculator-card,
html[data-theme="dark"] .results,
html[data-theme="dark"] .result,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .form-card {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow);
}

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: var(--theme-text) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] .intro,
html[data-theme="dark"] .description,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .excerpt {
  color: var(--theme-text-2) !important;
}

html[data-theme="dark"] a {
  color: var(--theme-link);
}

html[data-theme="dark"] header,
html[data-theme="dark"] .hp-header,
html[data-theme="dark"] .blog-header {
  background: var(--theme-nav) !important;
  border-bottom-color: var(--theme-gold) !important;
}

html[data-theme="dark"] header nav a,
html[data-theme="dark"] header nav a p,
html[data-theme="dark"] .hp-links a,
html[data-theme="dark"] .blog-nav a {
  color: #fff !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] button:not(.theme-toggle) {
  background: #122124 !important;
  color: #f3fbf9 !important;
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #9ab1ae !important;
}

html[data-theme="dark"] table {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] th {
  background: var(--theme-surface-2) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] td {
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] pre,
html[data-theme="dark"] code {
  background: #0a1214 !important;
  color: #e6f4f1 !important;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .section-head,
html[data-theme="dark"] .tool-section-head {
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .tag {
  background: var(--theme-surface-2) !important;
  color: #8ee2dc !important;
}

html[data-theme="dark"] .tool-icon {
  background: #20383b !important;
  color: #8ee2dc !important;
}

html[data-theme="dark"] .btn-secondary {
  background: transparent !important;
  color: #8ee2dc !important;
  border-color: #8ee2dc !important;
}

html[data-theme="dark"] .search input,
html[data-theme="dark"] .search button {
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .filters button {
  color: #dcecea !important;
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .filters button.active,
html[data-theme="dark"] .filters .active {
  background: #08737d !important;
  color: #fff !important;
}

html[data-theme="dark"] footer {
  background: #091416 !important;
  color: #cfe1de !important;
}

/* Theme switch */
.theme-toggle {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 38px;
  flex: 0 0 42px;
  margin-left: 10px;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  cursor: pointer;
  font-size: 18px !important;
  line-height: 1;
  box-shadow: none !important;
}

.theme-toggle:hover {
  background: rgba(255,255,255,.22) !important;
}

.theme-toggle .theme-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .theme-toggle {
    width: 38px;
    height: 36px;
    flex-basis: 38px;
    font-size: 16px !important;
    margin-left: 5px;
  }
}


/* Editor/admin brand bar */
.editor-brandbar, .admin-brandbar {
  height: 76px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: var(--theme-nav, #0b6f77);
  border-bottom: 3px solid var(--theme-gold, #f3c12b);
}
.editor-brandbar img, .admin-brandbar img {
  width: 245px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}
@media (max-width: 650px) {
  .editor-brandbar, .admin-brandbar { height: 64px; padding: 0 12px; }
  .editor-brandbar img, .admin-brandbar img { width: 190px; height: 50px; }
}


.editor-page-title {
  margin: 18px 24px 0;
  color: var(--theme-text);
  font-size: 28px;
}


/* ============================================================
   FINAL GLOBAL COLOR ACCESSIBILITY LAYER
   Ensures normal text remains readable in BOTH modes.
   ============================================================ */

/* LIGHT MODE — dark, high-contrast content text */
html:not([data-theme="dark"]) body {
  color: #073f3a !important;
  background: #f4fbf9 !important;
}
html:not([data-theme="dark"]) main,
html:not([data-theme="dark"]) main p,
html:not([data-theme="dark"]) main li,
html:not([data-theme="dark"]) main td,
html:not([data-theme="dark"]) main th,
html:not([data-theme="dark"]) main label,
html:not([data-theme="dark"]) main figcaption,
html:not([data-theme="dark"]) main small,
html:not([data-theme="dark"]) .hero-copy,
html:not([data-theme="dark"]) .hero p,
html:not([data-theme="dark"]) .topic-hero p,
html:not([data-theme="dark"]) .section-head p,
html:not([data-theme="dark"]) .feature-body p,
html:not([data-theme="dark"]) .mini-body p,
html:not([data-theme="dark"]) .tool-card p,
html:not([data-theme="dark"]) .about-box p,
html:not([data-theme="dark"]) .category p,
html:not([data-theme="dark"]) .post-card p {
  color: #365d67 !important;
}
html:not([data-theme="dark"]) main h1,
html:not([data-theme="dark"]) main h2,
html:not([data-theme="dark"]) main h3,
html:not([data-theme="dark"]) main h4,
html:not([data-theme="dark"]) main h5,
html:not([data-theme="dark"]) main h6,
html:not([data-theme="dark"]) .feature-body h3,
html:not([data-theme="dark"]) .mini-body h3,
html:not([data-theme="dark"]) .topic-body h2,
html:not([data-theme="dark"]) .section-head h2,
html:not([data-theme="dark"]) .tools-page h1,
html:not([data-theme="dark"]) .tools-page h2 {
  color: #073f3a !important;
}
html:not([data-theme="dark"]) main a:not(.btn),
html:not([data-theme="dark"]) .text-link,
html:not([data-theme="dark"]) .read-link,
html:not([data-theme="dark"]) .topic-body .text-link {
  color: #08737d !important;
}
html:not([data-theme="dark"]) .hero,
html:not([data-theme="dark"]) .topic-hero,
html:not([data-theme="dark"]) .blog-hero {
  color: #073f3a !important;
}
html:not([data-theme="dark"]) .hero-card,
html:not([data-theme="dark"]) .feature-card,
html:not([data-theme="dark"]) .mini-card,
html:not([data-theme="dark"]) .category,
html:not([data-theme="dark"]) .tool-card,
html:not([data-theme="dark"]) .about-box,
html:not([data-theme="dark"]) .post-card,
html:not([data-theme="dark"]) .topic-card {
  color: #073f3a !important;
  background: #ffffff !important;
}
html:not([data-theme="dark"]) .hero-card-caption,
html:not([data-theme="dark"]) .hero-card-caption strong {
  color: #073f3a !important;
}
html:not([data-theme="dark"]) .hero-card-caption span {
  color: #365d67 !important;
}
html:not([data-theme="dark"]) .eyebrow,
html:not([data-theme="dark"]) .tools-page .eyebrow {
  color: #07545d !important;
  background: #e4f2ef !important;
}
html:not([data-theme="dark"]) .btn-primary,
html:not([data-theme="dark"]) .search button {
  color: #ffffff !important;
}
html:not([data-theme="dark"]) .btn-secondary {
  color: #08737d !important;
  background: #ffffff !important;
}
html:not([data-theme="dark"]) .latest {
  background: #edf6f4 !important;
}
html:not([data-theme="dark"]) .stat {
  background: #eef7f5 !important;
  color: #073f3a !important;
}
html:not([data-theme="dark"]) .stat strong {
  color: #073f3a !important;
}
html:not([data-theme="dark"]) .cta-box,
html:not([data-theme="dark"]) .knowledge {
  color: #ffffff !important;
}
html:not([data-theme="dark"]) .cta-box h2,
html:not([data-theme="dark"]) .cta-box p,
html:not([data-theme="dark"]) .knowledge h2,
html:not([data-theme="dark"]) .knowledge p,
html:not([data-theme="dark"]) .knowledge a {
  color: #ffffff !important;
}

/* DARK MODE — light, high-contrast content text */
html[data-theme="dark"] body {
  color: #f3fbf9 !important;
  background: #0d1719 !important;
}
html[data-theme="dark"] main,
html[data-theme="dark"] main p,
html[data-theme="dark"] main li,
html[data-theme="dark"] main td,
html[data-theme="dark"] main th,
html[data-theme="dark"] main label,
html[data-theme="dark"] main figcaption,
html[data-theme="dark"] main small,
html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .topic-hero p,
html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .feature-body p,
html[data-theme="dark"] .mini-body p,
html[data-theme="dark"] .tool-card p,
html[data-theme="dark"] .about-box p,
html[data-theme="dark"] .category p,
html[data-theme="dark"] .post-card p {
  color: #c7ddda !important;
}
html[data-theme="dark"] main h1,
html[data-theme="dark"] main h2,
html[data-theme="dark"] main h3,
html[data-theme="dark"] main h4,
html[data-theme="dark"] main h5,
html[data-theme="dark"] main h6,
html[data-theme="dark"] .feature-body h3,
html[data-theme="dark"] .mini-body h3,
html[data-theme="dark"] .topic-body h2,
html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .tools-page h1,
html[data-theme="dark"] .tools-page h2 {
  color: #f3fbf9 !important;
}
html[data-theme="dark"] main a:not(.btn),
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .read-link,
html[data-theme="dark"] .topic-body .text-link {
  color: #71d5d1 !important;
}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .topic-hero,
html[data-theme="dark"] .blog-hero {
  color: #f3fbf9 !important;
  background: #0f2023 !important;
}
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .mini-card,
html[data-theme="dark"] .category,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .about-box,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .topic-card {
  color: #f3fbf9 !important;
  background: #152326 !important;
  border-color: #355457 !important;
}
html[data-theme="dark"] .hero-card-caption,
html[data-theme="dark"] .hero-card-caption strong,
html[data-theme="dark"] .feature-body h3,
html[data-theme="dark"] .mini-body h3 {
  color: #f3fbf9 !important;
}
html[data-theme="dark"] .hero-card-caption span {
  color: #c7ddda !important;
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .tools-page .eyebrow {
  color: #8ee2dc !important;
  background: #20383b !important;
}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .search button {
  color: #ffffff !important;
}
html[data-theme="dark"] .btn-secondary {
  color: #8ee2dc !important;
  background: transparent !important;
  border-color: #71d5d1 !important;
}
html[data-theme="dark"] .latest {
  background: #112225 !important;
}
html[data-theme="dark"] .stat {
  background: #20383b !important;
  color: #f3fbf9 !important;
}
html[data-theme="dark"] .stat strong {
  color: #f3fbf9 !important;
}
html[data-theme="dark"] .cta-box,
html[data-theme="dark"] .knowledge {
  color: #ffffff !important;
}
html[data-theme="dark"] .cta-box h2,
html[data-theme="dark"] .cta-box p,
html[data-theme="dark"] .knowledge h2,
html[data-theme="dark"] .knowledge p,
html[data-theme="dark"] .knowledge a {
  color: #ffffff !important;
}
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .blog-card .card-body,
html[data-theme="dark"] .blog-card .card-category,
html[data-theme="dark"] .blog-card h2,
html[data-theme="dark"] .blog-card p {
  color: #f3fbf9 !important;
}
html[data-theme="dark"] .blog-card p {
  color: #c7ddda !important;
}
html[data-theme="dark"] .filters button {
  color: #dcecea !important;
  background: #152326 !important;
  border-color: #355457 !important;
}
html[data-theme="dark"] .filters button.active {
  color: #ffffff !important;
  background: #08737d !important;
}
html[data-theme="dark"] .count {
  color: #c7ddda !important;
}
html[data-theme="dark"] .search input {
  color: #f3fbf9 !important;
  background: #122124 !important;
  border-color: #355457 !important;
}

/* Navigation: Home uses exactly the same visual treatment as the other links. */
header nav a:first-child,
.blog-nav a:first-child {
  font-weight: 800 !important;
}

/* Editor/admin home links */
.editor-home-link,
.admin-home-link {
  margin-left: auto;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  color: #fff !important;
  text-decoration: none !important;
  background: rgba(255,255,255,.10);
  font-weight: 800;
}
.editor-home-link:hover,
.admin-home-link:hover {
  background: rgba(255,255,255,.20);
}



/* ============================================================
   GLOBAL DROPDOWN / SELECT THEME FIX
   ============================================================ */
.dropdown-content {
  background: var(--theme-surface, #fff) !important;
  border: 1px solid var(--theme-border, #c7dfdb) !important;
  border-top: 2px solid var(--theme-gold, #f3c12b) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
}

.dropdown-content a,
.dropdown-content a:visited {
  background: var(--theme-surface, #fff) !important;
  color: var(--theme-text, #073f3a) !important;
}

.dropdown-content a:hover,
.dropdown-content a:focus {
  background: var(--theme-surface-2, #e9f5f2) !important;
  color: var(--theme-link, #08737d) !important;
}

html[data-theme="dark"] .dropdown-content {
  background: #152326 !important;
  border-color: #355457 !important;
  border-top-color: #f4c52e !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.42) !important;
}

html[data-theme="dark"] .dropdown-content a,
html[data-theme="dark"] .dropdown-content a:visited {
  background: #152326 !important;
  color: #f3fbf9 !important;
}

html[data-theme="dark"] .dropdown-content a:hover,
html[data-theme="dark"] .dropdown-content a:focus {
  background: #1f3639 !important;
  color: #8ee2dc !important;
}

/* Native calculator/input dropdowns */
select {
  background-color: var(--theme-surface, #fff) !important;
  color: var(--theme-text, #073f3a) !important;
  border: 1px solid var(--theme-border, #c7dfdb) !important;
  color-scheme: light;
}

select:focus {
  outline: 2px solid var(--theme-link, #08737d) !important;
  outline-offset: 1px;
}

option {
  background-color: #fff;
  color: #073f3a;
}

html[data-theme="dark"] select {
  background-color: #122124 !important;
  color: #f3fbf9 !important;
  border-color: #4a696b !important;
  color-scheme: dark;
}

html[data-theme="dark"] option {
  background-color: #122124 !important;
  color: #f3fbf9 !important;
}

/* Theme button is always visible in every navbar */
header .theme-toggle,
.blog-header .theme-toggle,
.hp-header .theme-toggle,
.editor-brandbar .theme-toggle,
.admin-brandbar .theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 38px !important;
  min-width: 42px !important;
  margin: 0 0 0 10px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 18px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  flex: 0 0 42px !important;
}

header .theme-toggle:hover,
.blog-header .theme-toggle:hover,
.hp-header .theme-toggle:hover {
  background: rgba(255,255,255,.24) !important;
  color: #fff !important;
}

@media (max-width: 900px) {
  header .theme-toggle,
  .blog-header .theme-toggle,
  .hp-header .theme-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    flex-basis: 38px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 650px) {
  header .theme-toggle,
  .blog-header .theme-toggle,
  .hp-header .theme-toggle {
    width: 36px !important;
    min-width: 36px !important;
    height: 34px !important;
    flex-basis: 36px !important;
  }
}



/* ============================================================
   FINAL SITE-WIDE THEME CONTROL
   One fresh control is placed in every page navbar.
   ============================================================ */
header nav > .theme-toggle,
header > .theme-toggle,
.hp-header nav > .theme-toggle,
.hp-header > .theme-toggle {
  position: relative !important;
  z-index: 10000 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  user-select: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
  flex: 0 0 42px !important;
  text-decoration: none !important;
}
header nav > .theme-toggle:hover,
header > .theme-toggle:hover,
.hp-header nav > .theme-toggle:hover,
.hp-header > .theme-toggle:hover {
  background: rgba(255,255,255,.28) !important;
  color: #fff !important;
  transform: none !important;
}
html[data-theme="dark"] header nav > .theme-toggle,
html[data-theme="dark"] header > .theme-toggle,
html[data-theme="dark"] .hp-header nav > .theme-toggle,
html[data-theme="dark"] .hp-header > .theme-toggle {
  background: rgba(0,0,0,.20) !important;
  border-color: rgba(255,255,255,.65) !important;
  color: #fff !important;
}
@media (max-width: 900px) {
  header nav > .theme-toggle,
  header > .theme-toggle,
  .hp-header nav > .theme-toggle,
  .hp-header > .theme-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
    flex-basis: 38px !important;
    font-size: 21px !important;
  }
}


/* FINAL NAVBAR THEME CONTROL NORMALIZATION */
header nav .theme-toggle[data-theme-toggle]{
  position:relative !important;
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  z-index:2 !important;
  margin-left:10px !important;
}
header nav .theme-toggle[data-theme-toggle] .theme-toggle__label{
  position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:nowrap;
}
@media (max-width:700px){
  header nav .theme-toggle[data-theme-toggle]{margin-left:6px !important;}
}