/*
Theme Name: Stegall
Description: Minimalist two-column theme for james.stegall.org — readable text stream on the right, polished Flickr photo rail with lightbox on the left.
Author: James Stegall
Version: 0.1.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: stegall
*/

:root {
  --bg: #faf9f7;
  --surface: #ffffff;
  --text: #211f1c;
  --muted: #6f6a62;
  --line: #e5e1da;
  --accent: #a0522d;
  --radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131217;
    --surface: #1e1d22;
    --text: #e8e5df;
    --muted: #9b968c;
    --line: #35323c;
    --accent: #d08556;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
/* Dark-rainbow fade: near-black at the top, drifting through deep red,
   amber, green, and blue tints down to purple. Must come after the base
   body rule to win the cascade. Fixed so the fade spans the viewport;
   falls back to document-height on iOS, which still reads fine. */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--bg)
      linear-gradient(
        180deg,
        #131217 0%,
        #2c1520 20%,
        #2d2113 38%,
        #14291d 56%,
        #16224a 76%,
        #452a7a 100%
      )
      no-repeat fixed;
  }
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ---- Two-column shell ---- */
.site {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas:
    "rail    main"
    "widgets main"
    "footer  footer";
  grid-template-rows: auto 1fr auto;
  column-gap: 3.5rem;
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.rail { grid-area: rail; }
.rail-widgets { grid-area: widgets; font-size: 0.9375rem; }
.stream { grid-area: main; }
.site-footer { grid-area: footer; }
.rail-widgets .widget { margin-top: 1.5rem; }
.rail-widgets .widget ul { list-style: none; margin: 0; padding: 0; }
.rail-widgets .widget li { margin: 0.2rem 0; }
.rail-widgets h2 {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* ---- Left rail (scrolls with the page as one column) ---- */
.rail {
  font-size: 0.9375rem;
}
.site-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.site-title a { color: var(--text); }
.site-title a:hover { color: var(--accent); text-decoration: none; }
.site-tagline { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.875rem; }

.rail-nav { margin-top: 1.25rem; }
.rail-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.rail-nav a { color: var(--muted); }
.rail-nav a:hover { color: var(--accent); text-decoration: none; }

.rail h2 {
  margin: 2rem 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* ---- Photo gallery ---- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.photo-grid a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line);
}
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.photo-grid a:hover img,
.photo-grid a:focus-visible img { transform: scale(1.06); opacity: 0.9; }
.gallery-more {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.gallery-more:hover { color: var(--accent); }

.rail .widget { margin-top: 1.5rem; }
.rail .widget ul { list-style: none; margin: 0; padding: 0; }
.rail .widget li { margin: 0.2rem 0; }

/* ---- Content stream ---- */
.stream { min-width: 0; }
.post {
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
  max-width: 62ch;
}
.post:first-child { padding-top: 0.5rem; }
.post-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.375rem;
}
.post-meta a { color: var(--muted); }
.post-meta a:hover { color: var(--accent); }
.post-title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.post-title a { color: var(--text); }
.post-title a:hover { color: var(--accent); text-decoration: none; }
.single .post-title { font-size: 1.875rem; }

.entry-content > * { margin-block: 0 1.1rem; }
.entry-content p:last-child { margin-bottom: 0; }
.entry-content blockquote {
  margin: 0 0 1.1rem;
  padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
.entry-content pre {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  font-size: 0.875rem;
}
.entry-content code { font-size: 0.9em; }

/* Attached art: images in posts get gallery treatment */
.entry-content img {
  border-radius: var(--radius);
  cursor: zoom-in;
}
.entry-content .wp-block-gallery,
.entry-content .gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.entry-content .gallery .gallery-item { margin: 0; }
.entry-content .gallery img { width: 100%; height: 100%; object-fit: cover; }

.post-tags { margin-top: 1rem; font-size: 0.8125rem; }
.post-tags a { color: var(--muted); }
.post-tags a:hover { color: var(--accent); }

/* ---- Featured art in stream ---- */
.post-art { margin: 0 0 1.1rem; }
.post-art img { display: block; border-radius: var(--radius); cursor: zoom-in; }

/* ---- Comments ---- */
.comments-area { max-width: 62ch; padding: 2rem 0; }
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.comments-area label { display: block; font-size: 0.875rem; color: var(--muted); margin-bottom: 0.25rem; }
.comments-area p { margin: 0 0 1rem; }
.comments-area .submit,
.rail button, .rail input[type="submit"], .rail-widgets button {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.comments-area .submit:hover { border-color: var(--accent); color: var(--accent); }
.rail input[type="search"], .rail-widgets input[type="search"] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  max-width: 100%;
}

/* ---- Pagination / single nav ---- */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0;
  max-width: 62ch;
  font-size: 0.9375rem;
}

/* ---- Footer ---- */
.site-footer {
  grid-column: 1 / -1;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
}

/* ---- Lightbox ---- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12, 11, 9, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lb.open { display: flex; }
.lb img {
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  user-select: none;
  -webkit-user-drag: none;
}
.lb-caption {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80vw;
  color: #d8d4cc;
  font-size: 0.875rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-caption a { color: #e8b48f; }
.lb button {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  color: #eee;
  border: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb button:hover { background: rgba(255, 255, 255, 0.18); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---- Mobile ---- */
@media (max-width: 860px) {
  .site {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "main" "widgets" "footer";
    grid-template-rows: none;
    gap: 0;
    padding: 1.5rem 1.25rem 3rem;
  }
  .rail { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
  .rail-widgets { padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post { padding: 1.75rem 0; }
  .lb-prev, .lb-next { display: none; } /* swipe instead */
  .lb img { max-width: 100vw; border-radius: 0; }
}