/* Homepage only: header is transparent over the hero image until the user
   scrolls, then becomes solid (matching nav-theme.css's site-wide look).
   Loaded after nav-theme.css so these rules win for the home page. */

#topBar,
#siteHeader,
html.dark #topBar,
html.dark #siteHeader {
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.25) !important;
}

#siteHeader .nav-link,
#siteHeader .nav-link i,
#topBar a,
.topbar-icon,
#siteHeader #theme-icon,
#siteHeader #menu-icon {
  color: #ffffff !important;
}

.topbar-icon {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

#siteHeader .section-btn,
#siteHeader .btn-translucent {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

#siteHeader .section-btn a,
#siteHeader .btn-translucent a,
#siteHeader .section-btn .button__icon,
#siteHeader .btn-translucent .button__icon {
  color: #ffffff !important;
}

/* Scrolled state — solid, same as the rest of the site */
#mainNav.scrolled #topBar,
#mainNav.scrolled #siteHeader {
  background: #ffffff !important;
  border-bottom-color: rgba(13, 27, 42, 0.12) !important;
}

#mainNav.scrolled #siteHeader .nav-link,
#mainNav.scrolled #siteHeader .nav-link i,
#mainNav.scrolled #topBar a,
#mainNav.scrolled .topbar-icon,
#mainNav.scrolled #siteHeader #theme-icon,
#mainNav.scrolled #siteHeader #menu-icon {
  color: #0f172a !important;
}

#mainNav.scrolled .topbar-icon {
  background: rgba(13, 27, 42, 0.06) !important;
  border-color: rgba(13, 27, 42, 0.15) !important;
}

#mainNav.scrolled #siteHeader .section-btn,
#mainNav.scrolled #siteHeader .btn-translucent {
  background: transparent !important;
  border-color: rgba(13, 27, 42, 0.3) !important;
}

#mainNav.scrolled #siteHeader .section-btn a,
#mainNav.scrolled #siteHeader .btn-translucent a,
#mainNav.scrolled #siteHeader .section-btn .button__icon,
#mainNav.scrolled #siteHeader .btn-translucent .button__icon {
  color: #0f172a !important;
}

html.dark #mainNav.scrolled #topBar,
html.dark #mainNav.scrolled #siteHeader {
  background: #000000 !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark #mainNav.scrolled #siteHeader .nav-link,
html.dark #mainNav.scrolled #siteHeader .nav-link i,
html.dark #mainNav.scrolled #topBar a,
html.dark #mainNav.scrolled .topbar-icon,
html.dark #mainNav.scrolled #siteHeader #theme-icon,
html.dark #mainNav.scrolled #siteHeader #menu-icon {
  color: #ffffff !important;
}

html.dark #mainNav.scrolled .topbar-icon {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Same reasoning as nav-theme.css: .icon-wrapper's circle is always dark,
   so its arrow must stay white in every header state on the home page too
   (transparent, solid, scrolled, dark mode). */
#siteHeader .icon-wrapper .button__icon,
html.dark #siteHeader .icon-wrapper .button__icon,
#mainNav.scrolled #siteHeader .icon-wrapper .button__icon,
html.dark #mainNav.scrolled #siteHeader .icon-wrapper .button__icon {
  color: #ffffff !important;
}