/* ===============================
   Gregor: The Afterlight — styles.css (Balanced)
   =============================== */

/* Base */
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  color: #222;
  background: #efe7fb; /* lavender site background */
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid #4a2e8e;
  margin: 6px 8px;
}
.btn-primary { background: #4a2e8e; color: #fff; }
.btn-secondary { background: #fff; color: #4a2e8e; }

/* Header */
.site-header {
  width: 100%;
  background: #efe7fb;
  padding: 10px 0 6px 0;
}
.header-center {
  width: min(1100px, 92%);
  margin: 0 auto;
  text-align: center;
}
.header-graphic {
  max-height: 420px;
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.header-nav { margin-top: 8px; }

/* Main layout */
main {
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* Chapter title + subtitle */
.chapter-title {
  text-align: center;
  margin: 6px auto 12px auto;
}

/* Chapter text column (bookish) */
.chapter-text {
  text-align: left;
  margin: 0 auto;
  max-width: 70ch;
  font-size: 1.2rem; /* ~19px on 16px root, a good 14pt feel */
  line-height: 1.7;
}
.chapter-text p { margin: 0 0 1rem; }

/* Chapter image (painting) ~60% of text width */
.chapter-image {
  display: block;
  margin: 0.25rem auto 0.75rem auto;
  max-width: 42ch;
  width: 100%;
  height: auto;
}

/* Chapter nav buttons centered under text */
.chapter-nav {
  text-align: center;
  margin: 24px auto;
}

/* Horizontal rules inside the reading area */
main hr {
  height: 5px !important;
  border: none !important;
  background: #4a2e8e !important;
  width: 70ch !important;       /* match text column width */
  max-width: 100% !important;   /* don't overflow on small screens */
  margin: 20px auto !important; /* centered and consistent spacing */
  border-radius: 3px !important;
}

/* Small screens */
@media (max-width: 768px) {
  .header-graphic { max-height: 40vh; }
  .chapter-text { font-size: 1.1rem; line-height: 1.65; }
  main hr { height: 4px !important; margin: 16px auto !important; }
}




.site-header .header-nav a.btn.btn-primary,
.header-nav a.btn.btn-primary {
  background-color: #4a2e8e;
  color: #ffffff;
  border-color: #4a2e8e;
}

.site-header .header-nav a.btn.btn-primary:hover,
.site-header .header-nav a.btn.btn-primary:focus,
.header-nav a.btn.btn-primary:hover,
.header-nav a.btn.btn-primary:focus {
  background-color: #3a2372;
  border-color: #3a2372;
  color: #ffffff;
}

/* Keep links white even when visited */
.site-header .header-nav a.btn.btn-primary:visited,
.header-nav a.btn.btn-primary:visited {
  color: #ffffff;
}



/* === Header button dark lavender === */
.site-header .header-nav a.btn.btn-primary,
.header-nav a.btn.btn-primary {
  background-color: #5a3ca6; /* dark lavender */
  color: #ffffff;
  border-color: #5a3ca6;
  transition: background-color 0.3s ease;
}

.site-header .header-nav a.btn.btn-primary:hover,
.site-header .header-nav a.btn.btn-primary:focus,
.header-nav a.btn.btn-primary:hover,
.header-nav a.btn.btn-primary:focus {
  background-color: #462d84; /* deeper lavender hover */
  border-color: #462d84;
  color: #ffffff;
}

.site-header .header-nav a.btn.btn-primary:visited,
.header-nav a.btn.btn-primary:visited {
  color: #ffffff;
}


/* ==================================================
   Additions — Feedback Button + Painting Placeholder
   (Appended by Cole Braddock, 2025-10-22)
   ================================================== */

/* Green feedback button: reuse .btn sizing/shape, override colors */
.btn.btn-green {
  background: #16a34a; /* green-600 */
  color: #fff;
  border-color: #16a34a;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.btn.btn-green:hover {
  background: #15803d; /* green-700 */
  border-color: #15803d;
}
.btn.btn-green:focus {
  outline: 2px solid #166534; /* green-800 */
  outline-offset: 2px;
}

/* Placement for the feedback button row (sits above chapter nav) */
.chapter-feedback {
  text-align: center;
  margin: 8px auto 6px;
}
.chapter-feedback-noscript {
  text-align: center;
  margin: 6px auto 0;
}

/* Chapter painting placeholder block */
.chapter-painting {
  text-align: center;
  margin: 1.5rem auto;
}
.chapter-painting img.painting-frame {
  max-width: 100%;
  height: auto;
  border: 6px solid #cbb68c; /* brass-like frame */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  border-radius: 4px;
}
.chapter-painting figcaption {
  margin-top: .5rem;
  font-style: italic;
  color: #555;
}

/* Optional: story placeholder paragraph tone (safe to remove later) */
.chapter-placeholder {
  font-style: italic;
  opacity: .85;
}