/* Structural CSS only — every color/font/radius value comes from the
   active theme's tokens.css, loaded before this file. This is the
   mechanism that lets Cyclone's World Default and Dark Foundry share
   one template set. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
}

a { color: inherit; }

.page {
  max-width: 1120px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg);
}

header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.mobile-nav-toggle {
  display: none;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 18px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-decoration: none;
}
.brand-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.01em;
  /* Gradient wordmark — accent-to-link fill with a soft matching glow.
     Uses theme tokens throughout, so it automatically re-colors per theme
     (blue/cyan for Cyclone's World Default, acid green/cyan for Dark
     Foundry) rather than being hardcoded to one look. */
  background: linear-gradient(90deg, var(--accent), var(--link));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 35%, transparent));
}
.brand-tagline {
  display: block;
  color: var(--meta);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.navlinks { display: flex; align-items: center; gap: 8px; }
.navlinks a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--meta);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.navlinks a.active {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.navlinks a:not(.active):hover { color: var(--text-soft); }

.body-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 22px;
  padding: 30px;
}
/* Sidebar comes first in the HTML source (see layout.twig) so a stray
   unclosed tag in migrated post content can't swallow it into the wrong
   part of the page. These rules explicitly pin each side to its column
   regardless of source order — more robust than relying on `order`. */
.body-grid .feed { grid-column: 1; grid-row: 1; min-width: 0; }
.body-grid .sidebar { grid-column: 2; grid-row: 1; min-width: 0; }

@media (max-width: 800px) {
  .body-grid { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  /* Both grid-column AND grid-row need explicit mobile values — the
     desktop rules pin both .feed and .sidebar to grid-row: 1 (correct
     for sitting side-by-side in different columns), but that row value
     was never overridden here, so collapsing them into one column
     without also separating their rows left them stacked directly on
     top of each other in the same cell instead of flowing one after
     another. `order` alone can't fix this — it only affects painting
     sequence, not which cell an explicitly-placed item occupies. */
  .body-grid .feed { grid-column: 1; grid-row: 1; order: 1; }
  .body-grid .sidebar { grid-column: 1; grid-row: 2; order: 2; margin-top: 8px; }
}

/* ---- post cards ---- */
.post {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--accent);
  padding: 24px 26px;
  margin-bottom: 20px;
}
.post-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 10px;
}
.post-title a { color: var(--text); text-decoration: none; }
.post-title a:hover { color: var(--accent); }
.post-title-lg { font-size: 28px; }
.post-title-md { font-size: 24px; }

.post-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--meta);
  margin-bottom: 16px;
}
.tag {
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-family: var(--font-mono);
  background: var(--tag-a-bg, var(--accent-bg));
  color: var(--tag-a, var(--accent));
}

.post-body { font-size: 14px; line-height: 1.75; color: var(--text-soft); overflow-wrap: break-word; }
.post-body p { margin: 0 0 13px; }
.post-body img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  margin: 14px 0;
}

.matted-img {
  margin: 18px 0 6px;
  background: var(--panel2);
  border-radius: var(--radius);
  padding: 8px 8px 0;
  border: 1px solid var(--line);
}
.matted-img img { width: 100%; border-radius: 3px; display: block; }
.matted-img .cap {
  padding: 8px 4px 10px;
  text-align: center;
  font-style: italic;
  font-size: 12px;
  color: var(--meta);
}

/* ---- gallery grid ---- */
.gallery {
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.gallery a {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

.continue-row {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.continue-link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  padding: 5px 12px;
  border-radius: var(--radius);
}
.permalink { font-family: var(--font-mono); font-size: 10px; color: var(--meta); }

/* ---- sidebar widgets ---- */
.widget {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 20px 16px;
  margin-bottom: 18px;
}
.widget h4 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.w-list a {
  display: block;
  font-size: 13px;
  color: var(--text-soft);
  text-decoration: none;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.w-list a:first-child { border-top: none; }
.w-list a:hover { color: var(--accent); }

.search-box { display: flex; gap: 8px; }
.search-box input {
  flex: 1;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 12px;
  color: var(--text);
  font-size: 12.5px;
  font-family: var(--font-body);
}
.search-box button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  padding: 0 16px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  font-family: var(--font-mono);
}

.pub-pagination {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 20px;
}
.pub-pagination .page-info { font-family: var(--font-mono); font-size: 11.5px; color: var(--meta); }
.pub-pagination .page-links { display: flex; gap: 8px; }
.pub-pagination .page-btn {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  color: var(--text-soft); text-decoration: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 12px;
}
.pub-pagination .page-btn:hover { border-color: var(--accent); color: var(--accent); }

.subpages-block {
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.subpages-block a {
  display: block;
  padding: 13px 18px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  border-bottom: 1px solid var(--line);
}
.subpages-block a:last-child { border-bottom: none; }
.subpages-block a:hover { color: var(--accent); background: var(--panel2); }
.subpages-nested {
  border-top: 1px solid var(--line);
}
.subpages-nested a {
  padding-left: 32px;
  font-size: 13.5px;
  color: var(--text-soft);
}
.subpages-nested .subpages-nested a { padding-left: 46px; }

.admin-edit-link {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 5px 11px; text-decoration: none;
  white-space: nowrap;
}
.admin-edit-link:hover { filter: brightness(1.15); }

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  border: none;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px -4px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .15s, transform .15s;
  z-index: 500;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover { filter: brightness(1.1); }
@media (max-width: 700px) {
  .back-to-top { bottom: 18px; right: 18px; width: 40px; height: 40px; font-size: 16px; }
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 20px 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

footer.site-footer {
  padding: 18px 32px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--meta);
  background: var(--panel);
}

/* ---- lightbox ---- */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; z-index: 999;
}
.lightbox-overlay.open { display: flex; }
.lightbox-stage { max-width: 90vw; max-height: 75vh; }
.lightbox-stage img { max-width: 100%; max-height: 75vh; border-radius: var(--radius); }
.lightbox-controls {
  display: flex; gap: 12px; align-items: center; margin-top: 16px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-soft);
}
.lightbox-btn {
  background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent);
  padding: 6px 14px; border-radius: var(--radius); cursor: pointer; font-family: var(--font-mono);
}
.lightbox-close {
  position: absolute; top: 20px; right: 30px; color: #fff;
  font-size: 24px; cursor: pointer; background: none; border: none;
}
.lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.18); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
@media (max-width: 700px) {
  .lightbox-arrow { width: 40px; height: 40px; font-size: 18px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }

  /* ---- header / nav ---- */
  header.site-header { padding: 14px 18px; }
  .mobile-nav-toggle { display: flex; }
  .navlinks {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 14px;
    order: 3; /* after brand + toggle in the flex-wrapped header */
  }
  .navlinks.open { display: flex; }
  .navlinks a { text-align: left; padding: 10px 14px; }

  /* ---- hero / homepage intro ---- */
  .hero { padding: 28px 18px 20px; }
  .hero h2 { font-size: 22px; }
  .hero p { font-size: 13.5px; }

  /* ---- post cards ---- */
  .post { padding: 18px 16px; }
  .post-title { font-size: 18px; }
  .post-title-lg { font-size: 22px; }
  .post-title-md { font-size: 20px; }
  .post-body { font-size: 13.5px; }

  /* ---- gallery grids ---- */
  .gallery { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }

  /* ---- lightbox controls ---- */
  .lightbox-controls { flex-direction: column; gap: 10px; text-align: center; }

  /* ---- footer ---- */
  footer.site-footer { flex-direction: column; gap: 8px; text-align: center; padding: 16px 18px; }

  /* ---- sidebar widgets ---- */
  .widget { padding: 16px 16px 12px; }

  /* ---- admin edit badge shouldn't crowd a narrow title ---- */
  .admin-edit-link { font-size: 10px; padding: 4px 8px; }
}

/* ---- media picker modal ---- */
.picker-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: none; align-items: center; justify-content: center; z-index: 1000;
  padding: 24px;
}
.picker-overlay.open { display: flex; }
.picker-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  width: 100%; max-width: 720px; max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6);
}
.picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.picker-title { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--text); }
.picker-close { background: none; border: none; color: var(--meta); font-size: 22px; cursor: pointer; }
.picker-tabs {
  display: flex; align-items: center; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--line);
}
.picker-tab {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  color: var(--meta); background: none; border: 1px solid transparent; border-radius: var(--radius);
  padding: 6px 12px; cursor: pointer;
}
.picker-tab.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.picker-upload-btn {
  margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  background: var(--accent); color: var(--bg); border-radius: var(--radius); padding: 6px 12px; cursor: pointer;
}
.picker-body { flex: 1; overflow-y: auto; padding: 20px; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.picker-tile {
  aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  border: 2px solid var(--line); position: relative;
}
.picker-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picker-tile.selected { border-color: var(--accent); }
.picker-tile.selected::after {
  content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
  background: var(--accent); color: var(--bg); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.picker-loading { font-family: var(--font-mono); font-size: 12.5px; color: var(--meta); padding: 20px 0; }
.picker-gallery-row {
  display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--radius);
  cursor: pointer; border: 1px solid var(--line); margin-bottom: 8px;
}
.picker-gallery-row:hover { border-color: var(--accent); }
.picker-gallery-row img { width: 52px; height: 52px; border-radius: var(--radius); object-fit: cover; }
.picker-gallery-name { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--text); }
.picker-gallery-count { font-family: var(--font-mono); font-size: 11px; color: var(--meta); margin-top: 2px; }
.picker-footer {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line);
}
.picker-pagination { display: flex; align-items: center; gap: 10px; }
.picker-page-btn {
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text-soft); width: 28px; height: 28px; cursor: pointer;
}
.picker-page-info { font-family: var(--font-mono); font-size: 11px; color: var(--meta); }
.picker-selected-info { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); flex: 1; text-align: right; }
.picker-confirm-btn {
  background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius);
  padding: 8px 16px; font-weight: 700; font-size: 12.5px; cursor: pointer;
}