/* Timeline-specific light-mode overrides
   Loaded only on timeline.html. This file makes the timeline page adopt the
   same light-mode styling as other pages (via css/light_mode.css) but
   intentionally prevents inversion of photos and the meme image on this page.

   Rationale:
   - `css/light_mode.css` inverts many images to make them readable on white
     backgrounds site-wide. For the timeline page we want all other light-mode
     styles but we do NOT want the photographs or the timeline/meme images to
     be color-inverted.
*/

/* Reset any image inversion applied by the shared light mode for timeline images */
body.light-mode .timeline-image-wrapper img,
body.light-mode .timeline-right img,
body.light-mode .timeline-left img,
body.light-mode .timeline-hero-image,
body.light-mode .meme-wrapper img,
body.light-mode #meme-wrapper img,
body.light-mode img.timeline-hero-image,
body.light-mode .timeline-component img {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Ensure any photo wrappers that might apply a different filter are neutralized */
body.light-mode .timeline-image-wrapper,
body.light-mode .meme-wrapper,
body.light-mode #meme-wrapper {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Keep the meme overlay and reveal button light-mode styles from shared file
   (we intentionally don't override overlay/background here). If you want the
   reveal button to look different on timeline, add rules here. */

/* In light mode, invert the small timeline circle so it has a black fill and
  a white outer ring (matches requested inversion). This keeps the circle
  visible and consistent against a white page background. */
body.light-mode .timeline-circle {
  background-color: #000 !important; /* black fill */
  box-shadow: 0 0 0 4px #ffffff !important; /* white border ring */
}

/* Make the header white with black text in light mode on the timeline page.
   Ensure links, nav items, and controls inside the header use dark text so
   the header reads correctly on a white background. Use !important to
   override any site-wide header theming that may apply. */
body.light-mode header{
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
}
body.light-mode header a,
body.light-mode header a:link,
body.light-mode header a:visited,
body.light-mode header a:hover,
body.light-mode header a:focus{
  color: #000000 !important;
}
/* Theme toggle and hamburger should be visible on white background */
body.light-mode header .theme-toggle,
body.light-mode header .hamburger{
  color: #000000 !important;
}
/* nav container may be separately styled by shared light_mode.css; ensure
   the site nav uses a transparent background here so the header's white
   background shows through, and make nav links dark. */
body.light-mode nav#site-nav{
  background: transparent !important;
}
body.light-mode nav#site-nav a,
body.light-mode nav#site-nav a:link,
body.light-mode nav#site-nav a:visited,
body.light-mode nav#site-nav a:hover,
body.light-mode nav#site-nav a:focus{
  color: #000000 !important;
}
/* Hamburger bars use .bar and are set white in shared light_mode.css; force
   them dark here so they are visible on the white header. */
body.light-mode .hamburger .bar{
  background-color: #000000 !important;
}
/* Ensure the logo image isn't forced to a light-mode filter; show it normally */
body.light-mode .logo{ filter: none !important; }

/* Make theme property changes instantaneous on the timeline page, even when
   the user-initiated `.theme-animate` class is present. This targets only
   theme-related properties so other animations (transforms, keyframes,
   hover effects) remain unaffected. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-animate *, body.theme-animate * {
    transition-property: background-color, color, border-color, box-shadow, opacity, filter, -webkit-filter, backdrop-filter !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    transition-timing-function: linear !important;
  }
}