/* Site additions on top of the Weebly theme CSS:
   - dark theme (html.theme-dark), overriding the theme's inline/!important colors
   - theme toggle button (injected by js/site.js)
   - hero headline on the home banner
   - site footer
   - zoom affordance on lightbox images
   Load order: after sites.css / main_style.css so equal-specificity rules win. */

/* ---------- header: no rule/edge under the bar ---------- */
.unite-header, .nav-wrap {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Anchor the active-page underline (.nav a:after) to its own link — without
   this the absolutely-positioned ::after sizes against the whole header. */
.desktop-nav .wsite-menu-default > li > a.wsite-menu-item { position: relative; }

/* ---------- site footer ---------- */
.site-footer {
  text-align: center;
  padding: 26px 20px 30px;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer a:hover { color: #444; }

/* ---------- lightbox affordance ---------- */
a[rel="lightbox"] img, img.slb-clickable {
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}
a[rel="lightbox"]:hover img, img.slb-clickable:hover { opacity: 0.9; }

/* ---------- theme toggle ---------- */
/* A bare sun/moon icon. On toggle a horizon line fades in (js adds
   .is-animating while the bodies are in transit): the outgoing body sets
   behind the horizon while the incoming one rises through it from the other
   side, with a small tilt and a springy overshoot. Sun "lives" below the
   right horizon, moon below the left. The sky wrapper is clipped at the
   horizon so bodies vanish at the line, not the button's edge. */
.theme-toggle {
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 34px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #333;
  cursor: pointer;
  line-height: 0;
  z-index: 20;
}
.theme-toggle:hover { color: #000; }
/* the horizon line (painted over the sky, so bodies slip behind it) */
.theme-toggle::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 17%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.theme-toggle.is-animating::after { opacity: 0.5; }
.theme-toggle-sky {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 20% 0);   /* bodies set at the horizon, not the rim */
}
.theme-toggle svg {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}
/* light theme: moon up, sun parked below the right horizon
   (resting bodies sit lifted a touch so they clear the horizon line) */
.theme-toggle .icon-moon {
  transform: translateY(-8%);
  opacity: 1;
  transition-delay: 0.1s;             /* rises after the sun has dipped */
}
.theme-toggle .icon-sun {
  transform: translate(40%, 130%) rotate(120deg);
  opacity: 0;
  transition-delay: 0s;
}

/* Header variant: anchored to .unite-header (position:relative in the theme).
   It must NOT live inside .container: that element is display:table and its
   column sizing reacts even to absolutely-positioned children in Chrome.
   Hidden once the hamburger takes over (theme's mobile breakpoint, 1024px) —
   the menu variant serves small screens instead. */
.theme-toggle--header {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 1024px) {
  .theme-toggle--header { display: none; }
}

/* Mobile menu: shrink-wrap the links so the active-page underline hugs the
   text instead of spanning the whole menu width. */
.mobile-nav .wsite-menu-default > li { text-align: center; }
.mobile-nav .wsite-menu-default > li > a.wsite-menu-item { display: inline-block; }
.mobile-nav .wsite-menu-default > li.active > a.wsite-menu-item:after {
  left: 0;
  width: 100%;
}

/* Menu variant: sits centered below the links inside the mobile menu. */
.theme-toggle--menu {
  display: block;
  margin: 30px auto 0;
}
.mobile-nav .theme-toggle--menu { color: #333; }
html.theme-dark .mobile-nav .theme-toggle--menu { color: #d6d8e2; }

/* ====================================================================
   DARK THEME
   ==================================================================== */
html.theme-dark { color-scheme: dark; background: #0e0f14; }
html.theme-dark body { background: #0e0f14; }

/* header / nav — same ground as the page so there's no seam under the bar */
html.theme-dark .unite-header {
  color: #e9eaf0;
  background: #0e0f14;
}
html.theme-dark .unite-header .logo #wsite-title,
html.theme-dark #wsite-title { color: #e9eaf0 !important; }
html.theme-dark .nav a { color: #cfd1db; }
html.theme-dark .nav a:hover { color: #ffffff; }
html.theme-dark .nav li.active > a:after { background: rgba(255, 255, 255, 0.45); }
html.theme-dark label.hamburger span,
html.theme-dark label.hamburger span:before,
html.theme-dark label.hamburger span:after { background: #e9eaf0; }
html.theme-dark.slb-noscroll label.hamburger span { background: transparent; }
html.theme-dark body.nav-open .unite-header label.hamburger span { background: transparent; }

/* mobile menu */
html.theme-dark .mobile-nav { background: #0e0f14; }
html.theme-dark .mobile-nav .wsite-menu-item { color: #e9eaf0 !important; }

/* content sections (theme sets background-color inline, hence !important) */
html.theme-dark .wsite-section.wsite-body-section {
  background-color: #0e0f14 !important;
}

/* text — the head <style> block sets these with !important, so match it */
html.theme-dark .wsite-elements.wsite-not-footer:not(.wsite-header-elements) div.paragraph,
html.theme-dark .wsite-elements.wsite-not-footer:not(.wsite-header-elements) p,
html.theme-dark #wsite-content div.paragraph,
html.theme-dark #wsite-content p {
  color: #b6b8c2 !important;
}
html.theme-dark #wsite-content h2,
html.theme-dark .wsite-elements.wsite-not-footer:not(.wsite-header-elements) h2 {
  color: #e9eaf0 !important;
}
html.theme-dark #wsite-content .paragraph strong,
html.theme-dark #wsite-content p strong { color: #d6d8e2; }

/* rules + small chrome */
html.theme-dark hr.styled-hr {
  background: #23242e !important;
  border-color: #23242e !important;
}
html.theme-dark .footer-wrap {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: #0e0f14;
}
html.theme-dark .site-footer { color: #7f818c; }
html.theme-dark .site-footer a:hover { color: #c9cbd6; }
html.theme-dark ::selection { background: #3a3f5c; color: #fff; }

/* toggle in dark */
html.theme-dark .theme-toggle { color: #d6d8e2; }
html.theme-dark .theme-toggle:hover { color: #ffffff; }
/* dark theme: sun up (pinwheeling in from the right), moon set to the left */
html.theme-dark .theme-toggle .icon-sun {
  transform: translateY(-8%);
  opacity: 1;
  transition-delay: 0.1s;
}
html.theme-dark .theme-toggle .icon-moon {
  transform: translate(-40%, 130%) rotate(-45deg);
  opacity: 0;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  a[rel="lightbox"] img, img.slb-clickable { transition: none; }
  .theme-toggle svg, .theme-toggle::after { transition: none; }
}