/* layout.css — Clean, explicit, defensive */

/* ---------- Basic variables (light defaults) ---------- */
:root {
  --body-bg: #fefefe;
  --body-text: #1a1a1a;

  --post-bg: #ffffff;
  --post-text: #1f2933;

  --q-bg: #d0e7ff;
  --q-text: #003366;
  --q-border: #4aa3ff;

  --a-bg: #f3e6ff;
  --a-text: #4b0f7b;
  --a-border: #b26bff;
}

/* ---------- Hints for browsers (better handling of color schemes) ---------- */
html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Base ---------- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 16px;
  background: var(--body-bg);
  color: var(--body-text);
}

/* ---------- Content wrapper ---------- */
.content-area {
  max-width: 900px;
  margin: 30px auto;
  padding: 24px;
  background: var(--post-bg) !important;
  color: var(--post-text) !important;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
}

/* ---------- Headings / rainbow ---------- */
.content-area h6.dialogue-title {
  margin: 0 0 12px;
  padding: 6px 8px;
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content-area h1.post-title {
  margin: 0 0 18px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 2rem;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Paragraphs & links ---------- */
.content-area p {
  margin: 0 0 1.25rem;
  line-height: 1.6;
  color: var(--post-text);
  font-size: 1.05rem;
}
.content-area a {
  color: #0073e6;
  text-decoration: none;
  font-weight: 600;
}
.content-area a:hover { text-decoration: underline; }

/* ---------- Post body ---------- */
.post-body {
  background: var(--post-bg) !important;
  color: var(--post-text) !important;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin-top: 20px;
}

/* ---------- Question & Answer blocks ---------- */
.question {
  background: var(--q-bg) !important;
  color: var(--q-text) !important;
  padding: 14px 18px;
  border-left: 6px solid var(--q-border);
  border-radius: 12px;
  margin: 1.2rem 0;
}
.answer {
  background: var(--a-bg) !important;
  color: var(--a-text) !important;
  padding: 14px 18px;
  border-left: 6px solid var(--a-border);
  border-radius: 12px;
  margin: 1.2rem 0;
}

/* ---------- Navigation arrows (kept safe) ---------- */
.post-nav { position: fixed; top: 50%; width: 100%; transform: translateY(-50%); z-index: 9999; pointer-events: none; display:flex; justify-content:space-between; }
.post-nav a.nav-arrow { pointer-events: all; font-size: 2.8rem; padding: 12px; border-radius: 50%; text-decoration:none; background: rgba(0,0,0,0.14); color: #fff; }

/* ---------- Dark-mode variables (OS/browser-based) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #0d1117;
    --body-text: #e6eef2;

    --post-bg: #0f1419;
    --post-text: #d6e7ef;

    --q-bg: #1b2a47;
    --q-text: #a0c4ff;
    --q-border: #339af0;

    --a-bg: #331947;
    --a-text: #e0b0ff;
    --a-border: #be4bdb;
  }

  .content-area, .post-body { box-shadow: 0 8px 30px rgba(0,0,0,0.6); }
}

/* ---------- Dark-reader & extension defense ---------- */
/* Many dark-mode extensions add inline style filter; detect and override */
html[style*="filter"] body,
html[style*="filter"] .content-area,
html[style*="filter"] .post-body {
  background: #0f1419 !important;
  color: #e6eef2 !important;
}
html[style*="filter"] .question { background: #1b2a47 !important; color: #cfe6ff !important; }
html[style*="filter"] .answer { background: #331947 !important; color: #f0d6ff !important; }

/* Prevent forced color adjustments from inverting images */
img { filter: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  html { font-size: 15px; }
  .content-area { padding: 18px; margin: 18px; }
  .post-nav a.nav-arrow { font-size: 2.4rem; padding: 10px; }
}
@media (max-width: 480px) {
  html { font-size: 16px; }
  .content-area { padding: 14px; margin: 12px; }
}

/* Navigation */

.nav-arrow {
    font-size: 1.6rem;
    font-weight: bold;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
    color: inherit;
    text-decoration: none;
}
.nav-arrow:hover {
    background: rgba(0,0,0,0.2);
}