/* ============================================================
   styles.css — The Chosen Mirrors
   ============================================================ */

:root {
  --cm-bg: #faf9f6;
  --cm-text: #2c2c2c;
  --cm-text-soft: #6b6259;
  --cm-accent: #a05c3b;
  --cm-line: rgba(44, 44, 44, 0.12);
  --cm-line-strong: rgba(44, 44, 44, 0.25);
  --cm-card: #ffffff;
  --cm-max: 700px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cm-bg);
  color: var(--cm-text);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.8;
}

a { color: inherit; }
img { max-width: 100%; display: block; border-radius: 4px; }

h1 { font-size: 3.5rem; margin: 0 0 0.4em; line-height: 1.15; }
h2 { font-size: 1.8rem; margin: 0 0 0.6em; }
h3 { font-size: 1.5rem; margin: 0 0 0.5em; }

.cm-container {
  max-width: var(--cm-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.cm-header {
  border-bottom: 1px solid var(--cm-line);
  padding: 24px 0;
  margin-bottom: 48px;
}
.cm-header .cm-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
}
.cm-site-title { font-size: 1.6rem; margin: 0; }
.cm-site-title a { text-decoration: none; }
.cm-header-nav a {
  margin-left: 20px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cm-text-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cm-header-nav a:hover { color: var(--cm-accent); }

/* ---------- Hero ---------- */
.cm-hero { text-align: left; margin-bottom: 56px; }
.cm-hero .cm-tagline {
  font-style: italic;
  color: var(--cm-accent);
  font-size: 1.15rem;
  margin-bottom: 20px;
}
.cm-hero p { margin: 0 0 10px; color: var(--cm-text-soft); }
.cm-hero .cm-hero-close { color: var(--cm-accent); font-style: italic; }

/* ---------- Section ---------- */
.cm-section { margin-bottom: 56px; }
.cm-section h2 {
  border-bottom: 1px solid var(--cm-line);
  padding-bottom: 14px;
  margin-bottom: 28px;
}

/* ---------- Reflection card ---------- */
.cm-reflection-card {
  padding: 24px 0;
  border-bottom: 1px solid var(--cm-line);
  transition: transform 0.25s ease, padding-left 0.25s ease;
}
.cm-reflection-card:last-child { border-bottom: none; }
.cm-reflection-card:hover { transform: translateX(5px); padding-left: 4px; }
.cm-date {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cm-text-soft);
  margin-bottom: 8px;
}
.cm-reflection-card h3 { margin-bottom: 8px; }
.cm-reflection-card h3 a { text-decoration: none; transition: color 0.2s ease; }
.cm-reflection-card h3 a:hover { color: var(--cm-accent); }
.cm-excerpt { font-style: italic; color: var(--cm-text-soft); margin: 0 0 12px; }
.cm-read-link {
  color: var(--cm-accent);
  text-decoration: none;
  font-size: 0.95rem;
  transition: letter-spacing 0.2s ease;
}
.cm-read-link:hover { text-decoration: underline; letter-spacing: 0.02em; }
.cm-card-reactions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--cm-text-soft);
  margin-top: 8px;
  opacity: 0.8;
}

/* ---------- Feedback ---------- */
.cm-feedback-block {
  background: var(--cm-card);
  border: 1px solid var(--cm-line);
  border-left: 3px solid var(--cm-accent);
  border-radius: 6px;
  padding: 24px 28px;
}
.cm-feedback-block p { font-style: italic; margin: 0 0 12px; }
.cm-feedback-attr { color: var(--cm-text-soft); font-size: 0.9rem; }

/* ---------- Conversation list ---------- */
.cm-conversation-list { list-style: none; padding: 0; margin: 0; }
.cm-conversation-list li { padding: 10px 0; border-bottom: 1px solid var(--cm-line); }
.cm-conversation-list li:last-child { border-bottom: none; }
.cm-conversation-list a { color: var(--cm-accent); text-decoration: none; }

/* ---------- Newsletter form ---------- */
.cm-newsletter-form { display: flex; gap: 10px; margin: 16px 0 8px; }
.cm-newsletter-form input[type="email"] {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--cm-line-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}
.cm-newsletter-form input[type="email"]:focus { border-color: var(--cm-accent); outline: none; }
.cm-newsletter-form button {
  padding: 12px 22px;
  background: var(--cm-accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.cm-newsletter-form button:hover { opacity: 0.9; transform: translateY(-1px); }
.cm-newsletter-note { font-size: 0.8rem; color: var(--cm-text-soft); }
.cm-form-message { padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; font-size: 0.9rem; }
.cm-form-message.success { background: #eaf3ea; color: #2f5d34; }
.cm-form-message.error { background: #f7e9e6; color: #8a3b2a; }

/* ---------- Single reflection ---------- */
.cm-single h1 { font-size: 2.6rem; }
.cm-single-content { line-height: 2; position: relative; }
.cm-single-content p { margin: 0 0 24px; }
.cm-back-link {
  display: inline-block;
  margin-bottom: 30px;
  color: var(--cm-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
.cm-back-link:hover { color: var(--cm-accent); transform: translateX(-3px); }

/* ---------- Footer ---------- */
.cm-footer {
  border-top: 1px solid var(--cm-line);
  margin-top: 60px;
  padding: 40px 0;
  text-align: center;
  color: var(--cm-text-soft);
  font-size: 0.9rem;
}
.cm-footer-quote {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cm-text);
  max-width: 480px;
  margin: 0 auto 24px;
}
.cm-footer-nav { margin-bottom: 16px; }
.cm-footer-nav a {
  margin: 0 12px;
  color: var(--cm-text-soft);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.cm-footer-nav a:hover { color: var(--cm-accent); }
.cm-footer-social { margin-bottom: 20px; }
.cm-footer-social a { margin: 0 8px; color: var(--cm-text-soft); text-decoration: none; transition: color 0.2s ease; }
.cm-footer-social a:hover { color: var(--cm-accent); }

/* ---------- Admin ---------- */
.cm-admin-wrap { max-width: 900px; margin: 40px auto; padding: 0 24px; }
.cm-admin-card {
  background: #fff;
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 24px;
}
.cm-admin-card h2 { margin-top: 0; }
.cm-stat-grid { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.cm-stat-box {
  flex: 1; min-width: 120px;
  background: #fff;
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
.cm-stat-box .num { font-size: 2rem; color: var(--cm-accent); }
.cm-stat-box .label { font-size: 0.85rem; color: var(--cm-text-soft); }
.cm-admin-table { width: 100%; border-collapse: collapse; }
.cm-admin-table th, .cm-admin-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--cm-line);
  font-size: 0.9rem;
}
.cm-admin-table img { max-width: 80px; max-height: 60px; object-fit: cover; border-radius: 4px; }
.cm-form-row { margin-bottom: 16px; }
.cm-form-row label { display: block; margin-bottom: 6px; font-size: 0.9rem; }
.cm-form-row input[type="text"],
.cm-form-row input[type="url"],
.cm-form-row input[type="date"],
.cm-form-row input[type="password"],
.cm-form-row select,
.cm-form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cm-line-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
}
.cm-btn {
  display: inline-block;
  padding: 10px 22px;
  background: var(--cm-accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.95rem;
  transition: opacity 0.2s ease;
}
.cm-btn:hover { opacity: 0.88; }
.cm-btn.danger { background: #a03b3b; }
.cm-btn-link { color: var(--cm-accent); text-decoration: none; font-size: 0.9rem; transition: opacity 0.15s ease; }
.cm-btn-link:hover { opacity: 0.75; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  h1 { font-size: 2.3rem; }
  .cm-header .cm-container { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cm-header-nav a { margin-left: 0; margin-right: 16px; }
  .cm-newsletter-form { flex-direction: column; }
  .cm-stat-grid { flex-direction: column; }
}

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cm-accent);
  outline-offset: 2px;
}

/* ============================================================
   ANIMATIONS & INTERACTIVITY
   ============================================================ */

/* ---- Reading progress bar ---- */
#cm-progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: var(--cm-accent);
  z-index: 9999;
  transition: width 0.08s linear;
  pointer-events: none;
  opacity: 0;
}
#cm-progress-bar.cm-progress-active { opacity: 1; }

/* ---- Scroll-reveal ---- */
.cm-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.cm-reveal.cm-visible { opacity: 1; transform: translateY(0); }
.cm-reveal-d1 { transition-delay: 0.08s; }
.cm-reveal-d2 { transition-delay: 0.16s; }
.cm-reveal-d3 { transition-delay: 0.24s; }

/* ---- Hero breathing ---- */
@keyframes cm-breathe {
  0%,  100% { opacity: 1; }
  50%        { opacity: 0.82; }
}
.cm-hero h1 { animation: cm-breathe 7s ease-in-out infinite; }

/* ---- Reading time badge ---- */
.cm-read-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cm-text-soft);
  margin-bottom: 24px;
}

/* ---- Reactions ---- */
.cm-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0 10px;
  padding: 24px 0;
  border-top: 1px solid var(--cm-line);
  border-bottom: 1px solid var(--cm-line);
}
.cm-reactions-label {
  width: 100%;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cm-text-soft);
  margin-bottom: 4px;
}
.cm-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--cm-line-strong);
  border-radius: 100px;
  padding: 8px 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--cm-text-soft);
  transition: all 0.2s ease;
  user-select: none;
}
.cm-reaction-btn:hover {
  border-color: var(--cm-accent);
  color: var(--cm-accent);
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(160, 92, 59, 0.15);
}
.cm-reaction-btn.cm-reacted {
  background: #fdf0e8;
  border-color: var(--cm-accent);
  color: var(--cm-accent);
  font-weight: 600;
}
.cm-reaction-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.cm-reaction-emoji { font-size: 1.15rem; line-height: 1; }
.cm-reaction-count { font-variant-numeric: tabular-nums; min-width: 12px; text-align: center; }

/* ---- Quote share button ---- */
.cm-quote-share-btn {
  display: none;
  position: fixed;
  background: var(--cm-text);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  z-index: 200;
  transform: translateX(-50%) translateY(-100%);
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.cm-quote-share-btn::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--cm-text);
}

/* ---- Comments ---- */
.cm-comments { margin-top: 48px; }
.cm-comments h3 { border-bottom: 1px solid var(--cm-line); padding-bottom: 12px; margin-bottom: 24px; }
.cm-comment { padding: 18px 0; border-bottom: 1px solid var(--cm-line); animation: cm-fadeup 0.4s ease both; }
.cm-comment:last-child { border-bottom: none; }
.cm-comment-meta { font-size: 0.8rem; color: var(--cm-text-soft); margin-bottom: 6px; display: flex; gap: 10px; align-items: center; }
.cm-comment-meta strong { color: var(--cm-text); }
.cm-comment-body { font-style: italic; margin: 0; color: var(--cm-text); }
.cm-comment-form { margin-top: 28px; }
.cm-comment-form h4 { font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cm-text-soft); margin: 0 0 18px; font-weight: normal; }
.cm-no-comments { color: var(--cm-text-soft); font-style: italic; font-size: 0.95rem; margin-bottom: 28px; }

@keyframes cm-fadeup {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SIDE PANELS — fixed image strips in the left & right margins
   Only visible when the viewport is wide enough to show them.
   ============================================================ */

.cm-side-panel {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  /* Width = half of whatever space remains outside the 700px content column */
  width: calc((100vw - var(--cm-max)) / 2 - 48px);
  max-width: 200px;
  min-width: 100px;
  z-index: 5;
  /* Hide on screens too narrow to fit alongside content */
  display: none;
}

/* Show only when there's at least 180px on each side */
@media (min-width: 1100px) {
  .cm-side-panel { display: block; }
}
@media (min-width: 1400px) {
  .cm-side-panel { max-width: 240px; }
}

.cm-side-panel--left  { left:  24px; }
.cm-side-panel--right { right: 24px; }

/* Each image slide */
.cm-side-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity 1s ease;
  text-align: center;
}

/* First slide is visible by default; JS takes over */
.cm-side-slide:first-child { opacity: 1; }
.cm-side-slide.cm-side-active { opacity: 1; }
.cm-side-slide.cm-side-leaving { opacity: 0; }

/* The image itself */
.cm-side-slide img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  display: block;
}

/* Caption beneath the image */
.cm-side-slide figcaption {
  margin-top: 10px;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--cm-text-soft);
  line-height: 1.5;
  padding: 0 4px;
}

/* Dot indicators (shown when >1 image per side) */
.cm-side-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  /* pushed below the tallest slide via JS — set as inline margin-top */
}
.cm-side-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cm-line-strong);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.cm-side-dot.cm-dot-active {
  background: var(--cm-accent);
  transform: scale(1.3);
}