/* Respect system dark mode */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  /* Base background & text */
  html, body { background:#0b0d0f; color:#e5e7eb99; }
  #main { background:#0b0d0f; color:#e5e7eb99; }
  /* Keep theme's header gradient/background intact */

  /* Links */
  a { color:#8ab4f8; }
  a:hover { color:#b3d4ff; }

  /* Buttons */
  .button { background:#0b0d0f; border-color:#e5e7eb67; color:#ffffff73 !important; }
  .button:hover { background:#e5e7eb37; border-color:#e5e7eb67; }

  /* Cards / text accents */
  .post-card { background:transparent; }
  .post-card h3 a { color:#e5e7ebb0; }
  .post-card p.small { color:#9aa0a6dd; }

  /* Borders and placeholders */
  .thumb-placeholder { background:#171a1f; border-color:#2a2f36; }
  hr, .table-wrapper table, .table-wrapper table td, .table-wrapper table th { border-color:#2a2f36; }

  /* Forms */
  input, select, textarea { background:#111418; color:#e5e7eb; border-color:#2a2f36; }

  /* Code: inline and blocks */
  code { background:#111418; border-color:#2a2f36; color:#e5e7eb; }
  pre { background:#0d1117; color:#e5e7eb; border-radius:0.35em; }
  pre code {
    background:#0d1117;
    border:1px solid #1f2937;
    color:#e5e7eb;
    line-height:1.7;
  }

  /* Headings */
  h1, h2 { color:#ffffff; }
}
/* Image sizing fixes and post card styles */

/* Ensure content images never overflow the text width */
#main img,
.content img,
.post img,
.post .content img,
img {
  max-width: 100%;
  height: auto;
}

/* Utility: constrain to main text width and center */
.text-width {
  max-width: 54em; /* match #main max-width in theme */
  margin-left: auto;
  margin-right: auto;
}

/* Utility: half-width content (e.g., figures) */
.half-width {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 736px) {
  .half-width { max-width: 100%; }
}

/* Utility: two-up side-by-side layout */
.two-up {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0.5em 0 1em;
}
.two-up > * { flex: 1 1 0; }
.two-up img { width: 100%; height: auto; display: block; }
@media screen and (max-width: 736px) {
  .two-up { flex-direction: column; }
}

/* Responsive 16:9 video embeds */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  margin: 1em 0;
  border-radius: 0.35em;
  background: #000; /* fallback while loading */
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-color-scheme: dark) {
  .video-container { background: #0b0d0f; }
}

/* Optional: nicer figure spacing */
.post .content figure { margin: 0 0 1.25em; }

/* Post listing cards */
.post-card .image.fit,
.post-card .image.fit img { height:220px !important; }
.post-card .image.fit { display:block; position: relative; }
.post-card { position: relative; }
.post-card .image.fit img {
  display:block;
  width:100% !important;
  object-fit:cover !important;
  object-position:center center;
}

/* Hover overlay + "View" label on post thumbnails (match .image.thumb) */
.post-card .image.fit:after {
  -moz-transition: opacity 0.2s ease-in-out;
  -webkit-transition: opacity 0.2s ease-in-out;
  -ms-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
  border-radius: 0.35em;
  border: solid 3px rgba(255, 255, 255, 0.5);
  color: #fff;
  content: 'View';
  display: inline-block;
  font-size: 0.8em;
  font-weight: 400;
  left: 50%;
  line-height: 2.25em;
  margin: -1.25em 0 0 -3em;
  opacity: 0;
  padding: 0 1.5em;
  position: absolute;
  text-align: center;
  text-decoration: none;
  top: 50%;
  white-space: nowrap;
  pointer-events: none; /* don't block clicks outside the image */
}

/* Also ensure the before overlay never intercepts clicks */
.post-card .image.fit:before { pointer-events: none; }

.post-card .image.fit:hover:after { opacity: 1.0; }
.post-card .image.fit:hover:before {
  background: url("images/overlay.png"), url("images/overlay.png");
  opacity: 1.0;
}

/* Placeholder for posts without a cover image */
.post-card .thumb-placeholder { display:block; width:100%; height:220px; background:#f3f3f3; border:1px solid #e6e6e6; }

/* Responsive tweak: smaller thumbnails on narrow screens */
@media screen and (max-width: 736px) {
  .post-card .image.fit,
  .post-card .image.fit img { height: 160px !important; }
  .post-card .thumb-placeholder { height: 160px; }
}
.post-card h3 { margin-top: 0.6em; }
.post-card p.small { opacity: 0.8; margin-bottom: 0.5em; }

/* Match work-item typography for post cards */
.post-card h3 { font-size: 1em; margin: 0 0 0.5em 0; }
.post-card p { font-size: 0.8em; line-height: 1.5em; margin: 0; }

/* Ongoing status badge (top-right) */
.post-card .status-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ffffff;
  color: #14532d; /* deep green text */
  border: 1px solid #d1e7dd; /* light green border */
  border-radius: 999px;
  padding: 2px 8px 2px 18px; /* room for dot */
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1.6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  z-index: 3;
  pointer-events: none; /* don't block clicks */
}
.post-card .status-badge:before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #22c55e; /* green LED */
  box-shadow: 0 0 6px 1px rgba(34, 197, 94, 0.7);
}

@media (prefers-color-scheme: dark) {
  .post-card .status-badge {
    background: #0f172a; /* dark slate */
    border-color: #1f2937;
    color: #a7f3d0; /* mint text */
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
}

/* Sidebar title/date styling on post pages */
#header .post-title {
  font-size: 2.2em;
  display: block; /* ensure line break before date on all screens */
  line-height: 1.25; /* loosen multi-line title spacing */
  margin: 0 0 0.35em 0; /* add space before date */
}
#header .post-date {
  display: block; /* prevent inline flow with title when <br> is hidden on mobile */
  margin-top: 0.35em;
  font-size: 0.95em;
  font-weight: 400;
  opacity: 0.85;
}

/* In post header, hide the <br> elements we used previously to force breaks */
#header h1 .post-title ~ br {
  display: none !important;
}

/* Slightly more relaxed line-height on smaller screens */
@media screen and (max-width: 736px) {
  #header .post-title { line-height: 1.3; }
}

/* Compact UI for Recent Work controls */
.recent-controls {
  margin-bottom: 0.5em !important;
}
.recent-controls label.small {
  font-size: 0.8em;
  color: rgba(120,120,120,0.95);
  margin-right: 0.25em;
}
.recent-controls select {
  font-size: 0.9em;
  padding: 0.3em 0.6em;
  height: 2.2em;
  min-width: 9.5em;
}
.recent-controls .small { opacity: 0.85; }
@media screen and (max-width: 980px) {
  .recent-controls label.small { display: none; }
  .recent-controls select { min-width: 9em; }
}
@media (prefers-color-scheme: dark) {
  .recent-controls label.small { color: #9aa0a6; }
}

/* Keep Recent Work selects on one line */
.recent-controls .controls-inline {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}
.recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  margin-bottom: 0.5em;
  position: relative; /* ensure it establishes a stacking context */
  z-index: 5; /* keep controls above any thumbnail overlays */
}
.recent-header .controls-inline {
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  position: relative;
  z-index: 5;
}
.recent-header select {
  font-size: 0.8em;
  padding: 0.3em 0.6em;
  height: 2.1em;
  min-width: 6em;
  pointer-events: auto; /* be explicit */
}
@media screen and (max-width: 736px) {
  .recent-header { gap: 0.5em; }
  .recent-header h2 { font-size: 1.35em; }
  .recent-header select { min-width: 8em; }
}
.recent-controls .controls-inline select {
  min-width: 8.5em !important;
  max-width: 12em;
}
@media screen and (max-width: 736px) {
  .recent-controls .controls-inline select { min-width: 7.5em !important; }
}

/* Generic section header with inline action(s) */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  margin-bottom: 0.5em;
  width: 100%;
}
.section-header .controls-inline {
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  margin-left: auto; /* push controls to the far right */
}
.section-header h2 { flex: 1 1 auto; }
.section-header .controls-inline { flex: 0 0 auto; }
@media screen and (max-width: 736px) {
  .section-header h2 { font-size: 1.35em; }
}

/* Subtle count text beside section titles */
#rw-count {
  font-size: 0.5em;
  font-weight: 400;
  opacity: 0.4;
}
#rw-count a { color: inherit; text-decoration: none; }
@media (prefers-color-scheme: dark) {
  #rw-count { opacity: 0.5; }
}

/* Sidebar enhancements on desktop */
@media screen and (min-width: 981px) {
  #header .sidebar-tagline {
    margin: 0.35em 0 0.75em 0;
    opacity: 0.9;
    overflow: hidden; /* allow height collapse */
    transition: opacity .25s ease, transform .25s ease, max-height .25s ease, margin-bottom .25s ease;
    will-change: opacity, transform, max-height, margin-bottom;
  }
  #sidebar-sections { margin-top: 0.2em; }
  #sidebar-sections { transition: opacity .25s ease, transform .25s ease; will-change: opacity, transform; }
  #sidebar-sections ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35em; }
  #sidebar-sections a {
    text-decoration: none;
    font-size: inherit; /* match container (same as h1) */
    color: rgba(255,255,255,0.6);
    opacity: 0.6;
    transition: opacity .2s ease, color .2s ease;
  }
  #sidebar-sections a:hover { text-decoration: none; opacity: 0.8; }
  #sidebar-sections a.active { opacity: 1; font-weight: 600; color: rgba(255,255,255,1); }
}

/* Match tagline & TOC font-size to #header h1 across breakpoints */
@media screen and (min-width: 1281px) {
  /* Default desktop: #header h1 is 1.35em in theme */
  #header .sidebar-tagline,
  #sidebar-sections { font-size: 1.35em; }
}
@media screen and (min-width: 981px) and (max-width: 1280px) {
  /* Large breakpoint: #header h1 is 1.25em */
  #header .sidebar-tagline,
  #sidebar-sections { font-size: 1.25em; }
}
@media screen and (max-width: 980px) {
  /* Mobile: make tagline smaller for readability */
  #header .sidebar-tagline {
    font-size: 1.15em;
    line-height: 1.4;
  }
}

/* Extra small phones: nudge a bit smaller */
@media screen and (max-width: 736px) {
  #header .sidebar-tagline {
    font-size: 1.05em;
  }
}

/* Optional hard-hide class when fully collapsed */
@media screen and (min-width: 981px) {
  #header .sidebar-tagline.is-hidden {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    margin-bottom: 0;
  }
}

/* Hide TOC on mobile/top-header layout */
@media screen and (max-width: 980px) {
  #sidebar-sections { display: none !important; }
}

/* Anchor offset for year-tagged post cards (used in Edge-friendly timeline) */
article.post-card[id^="year-"] {
  scroll-margin-top: 56px; /* space below fixed header when using smooth scroll */
}

/* Simple responsive gallery grid for posts */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.gallery-grid a {
  display: block;
  position: relative;
  border-radius: 0.35em;
  overflow: hidden;
  background: #f3f4f6; /* subtle light bg */
  border: 1px solid rgba(0,0,0,0.05);
}
/* Maintain consistent 3:2 tiles */
.gallery-grid a::before {
  content: "";
  display: block;
  padding-top: 66.666%;
}
.gallery-grid img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
.gallery-grid a:hover img { transform: scale(1.03); }

@media (prefers-color-scheme: dark) {
  .gallery-grid a { background: #0f172a; border-color: #1f2937; }
}

/* Masonry/collage style gallery using CSS columns */
.masonry-gallery {
  column-count: 3;
  column-gap: 10px;
}
@media screen and (max-width: 980px) { .masonry-gallery { column-count: 2; } }
@media screen and (max-width: 736px) { .masonry-gallery { column-count: 1; } }
.masonry-gallery a {
  display: inline-block;
  width: 100%;
  margin: 0 0 10px;
  border-radius: 0.35em;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid rgba(0,0,0,0.05);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.masonry-gallery img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .25s ease;
}
.masonry-gallery a:hover img { transform: scale(1.02); }
@media (prefers-color-scheme: dark) {
  .masonry-gallery a { background: #0f172a; border-color: #1f2937; }
}