/* v41: add the light-mode ribbon background and strengthen dark-mode text contrast. */

/* Theme-specific page artwork across the full portfolio canvas. */
:root:not([data-theme="light"]) body main#main,
:root[data-theme="dark"] body main#main,
body main#main {
  background-color:#08160f !important;
  background-image:url('../assets/images/hero-background.png') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}

:root[data-theme="light"] body main#main {
  background-color:#eef4e7 !important;
  background-image:url('../assets/images/hero-background-light.png') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}

/* Keep the old helper layer from hiding the artwork. */
body main#main::before,
:root[data-theme="dark"] body main#main::before,
:root[data-theme="light"] body main#main::before {
  background:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Dark theme readability tune-up. */
:root:not([data-theme="light"]) #home .hero-v14-first,
:root:not([data-theme="light"]) #home .hero-v14-name,
:root:not([data-theme="light"]) #home .hero-v14-lead,
:root:not([data-theme="light"]) #home .hero-v14-preface,
:root:not([data-theme="light"]) #home .hero-v14-bottom,
:root:not([data-theme="light"]) #home .hero-v14-textlink,
:root[data-theme="dark"] #home .hero-v14-first,
:root[data-theme="dark"] #home .hero-v14-name,
:root[data-theme="dark"] #home .hero-v14-lead,
:root[data-theme="dark"] #home .hero-v14-preface,
:root[data-theme="dark"] #home .hero-v14-bottom,
:root[data-theme="dark"] #home .hero-v14-textlink {
  color:#edf3eb !important;
}

:root:not([data-theme="light"]) #home .hero-v14-preface,
:root[data-theme="dark"] #home .hero-v14-preface {
  color:#93dfb4 !important;
}

:root:not([data-theme="light"]) #home .hero-v14-lead,
:root[data-theme="dark"] #home .hero-v14-lead {
  color:#d6e1d9 !important;
}

:root:not([data-theme="light"]) #about .section-body p,
:root:not([data-theme="light"]) #experience .journey-heading p,
:root:not([data-theme="light"]) #experience .journey-card p,
:root:not([data-theme="light"]) #experience .journey-company,
:root:not([data-theme="light"]) #experience .journey-duties,
:root:not([data-theme="light"]) #skills .talent-tree p,
:root:not([data-theme="light"]) #credentials .section-heading p,
:root:not([data-theme="light"]) #contact p,
:root[data-theme="dark"] #about .section-body p,
:root[data-theme="dark"] #experience .journey-heading p,
:root[data-theme="dark"] #experience .journey-card p,
:root[data-theme="dark"] #experience .journey-company,
:root[data-theme="dark"] #experience .journey-duties,
:root[data-theme="dark"] #skills .talent-tree p,
:root[data-theme="dark"] #credentials .section-heading p,
:root[data-theme="dark"] #contact p {
  color:#c7d3cb !important;
}

:root:not([data-theme="light"]) #about .section-body p.lead,
:root:not([data-theme="light"]) #experience .journey-heading h2,
:root:not([data-theme="light"]) #experience .journey-card h3,
:root:not([data-theme="light"]) #skills h2,
:root:not([data-theme="light"]) #credentials h2,
:root:not([data-theme="light"]) #contact h2,
:root[data-theme="dark"] #about .section-body p.lead,
:root[data-theme="dark"] #experience .journey-heading h2,
:root[data-theme="dark"] #experience .journey-card h3,
:root[data-theme="dark"] #skills h2,
:root[data-theme="dark"] #credentials h2,
:root[data-theme="dark"] #contact h2 {
  color:#f1f5ef !important;
}

:root:not([data-theme="light"]) #experience .section-number,
:root:not([data-theme="light"]) #skills .section-number,
:root:not([data-theme="light"]) #credentials .section-number,
:root:not([data-theme="light"]) #contact .section-number,
:root[data-theme="dark"] #experience .section-number,
:root[data-theme="dark"] #skills .section-number,
:root[data-theme="dark"] #credentials .section-number,
:root[data-theme="dark"] #contact .section-number {
  color:#d9b06a !important;
}

/* v42: fix the nearly invisible Experience heading in light mode,
   plus other hardcoded light-on-light legacy headings. */
:root[data-theme="light"] body main#main #experience .journey-heading h2,
:root[data-theme="light"] body main#main #experience .journey-card h3,
:root[data-theme="light"] body main#main #about h2,
:root[data-theme="light"] body main#main #skills h2,
:root[data-theme="light"] body main#main #credentials h2,
:root[data-theme="light"] body main#main #contact h2 {
  color:#183d2a !important;
  text-shadow:none !important;
}
:root[data-theme="light"] body main#main #experience .journey-heading h2 em {
  color:#86663a !important;
}
:root[data-theme="light"] body main#main #experience .journey-heading p,
:root[data-theme="light"] body main#main #experience .journey-company,
:root[data-theme="light"] body main#main #experience .journey-card p,
:root[data-theme="light"] body main#main #experience .journey-duties,
:root[data-theme="light"] body main#main #experience .journey-duties li {
  color:#345340 !important;
}
:root:not([data-theme="light"]) body main#main #experience .journey-heading h2 em,
:root[data-theme="dark"] body main#main #experience .journey-heading h2 em {
  color:#d5b478 !important;
}
/* Ensure the artwork is also visible on the hero even with prior section overrides. */
:root[data-theme="light"] body main#main > section#home.hero.hero-v14,
:root[data-theme="light"] body main#main > section#home.hero.hero-v14.deck-active {
  background:transparent !important;
  background-image:none !important;
}