/* ============================================================
   Question Pages — question.css
   ============================================================ */

.qa-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  min-height: 60vh;
}
.qa-page .page-breadcrumb { max-width: none; margin: 0; }

.qa-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text, #111);
  margin: 12px 0 20px;
  letter-spacing: -0.02em;
}

/* ── Answer hero ── */
.qa-answer {
  padding: 32px;
  border-radius: 16px;
  text-align: center;
  margin-bottom: 24px;
  border: 1px solid transparent;
}
.qa-answer-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.qa-answer-text { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.qa-answer-time { font-size: 12px; opacity: .6; }

/* Answer color variants */
.qa-answer.clear   { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #065f46; border-color: #a7f3d0; }
.qa-answer.rain    { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1e40af; border-color: #93c5fd; }
.qa-answer.maybe   { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #92400e; border-color: #fcd34d; }
.qa-answer.hot     { background: linear-gradient(135deg, #fef2f2, #fecaca); color: #991b1b; border-color: #fca5a5; }
.qa-answer.warm    { background: linear-gradient(135deg, #fff7ed, #fed7aa); color: #9a3412; border-color: #fdba74; }
.qa-answer.mild    { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #065f46; border-color: #a7f3d0; }
.qa-answer.cold    { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1e40af; border-color: #93c5fd; }
.qa-answer.windy   { background: linear-gradient(135deg, #f5f3ff, #ede9fe); color: #5b21b6; border-color: #c4b5fd; }
.qa-answer.calm    { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #065f46; border-color: #a7f3d0; }
.qa-answer.neutral { background: var(--card, #fff); color: var(--text, #111); border-color: var(--border, #e5e7eb); }

/* ── Details ── */
.qa-details {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 24px;
}

/* Stat row */
.qa-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.qa-stat { text-align: center; }
.qa-stat-val { font-size: 22px; font-weight: 700; color: var(--text, #111); }
.qa-stat-label { font-size: 12px; color: var(--text-3, #9ca3af); margin-top: 2px; }

/* Section label */
.qa-section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3, #9ca3af); margin: 20px 0 10px;
}

/* Hourly bars */
.qa-hourly-bars { display: flex; flex-direction: column; gap: 4px; }
.qa-hbar { display: flex; align-items: center; gap: 8px; }
.qa-hbar-time { font-size: 12px; color: var(--text-3, #9ca3af); width: 42px; text-align: right; flex-shrink: 0; }
.qa-hbar-track { flex: 1; height: 8px; background: var(--border-light, #f3f4f6); border-radius: 4px; overflow: hidden; }
.qa-hbar-fill { height: 100%; border-radius: 4px; background: #93c5fd; transition: width .3s; }
.qa-hbar-fill.active { background: #3b82f6; }
.qa-hbar-fill.temp { background: linear-gradient(90deg, #93c5fd, #f59e0b); }
.qa-hbar-val { font-size: 12px; font-weight: 600; color: var(--text-2, #6b7280); width: 36px; flex-shrink: 0; }

/* Rain timeline (for "pote tha vreksei") */
.qa-rain-timeline {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 120px;
  padding-top: 10px;
}
.qa-tl-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.qa-tl-name { font-size: 10px; color: var(--text-3, #9ca3af); }
.qa-tl-bar {
  width: 100%;
  max-width: 28px;
  height: 60px;
  background: var(--border-light, #f3f4f6);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.qa-tl-fill {
  width: 100%;
  background: #93c5fd;
  border-radius: 4px;
  transition: height .3s;
}
.qa-tl-day.active .qa-tl-fill { background: #3b82f6; }
.qa-tl-val { font-size: 10px; font-weight: 600; color: var(--text-3, #9ca3af); }
.qa-tl-day.active .qa-tl-val { color: #3b82f6; font-weight: 700; }

/* ── SEO text ── */
.qa-seo-text {
  margin: 24px 0 0; padding: 24px;
  background: var(--card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px;
}
.qa-seo-text h2 { font-size: 18px; font-weight: 700; color: var(--text, #111); margin: 0 0 10px; }
.qa-seo-text p { font-size: 14px; line-height: 1.7; color: var(--text-2, #4b5563); margin: 0; }

/* ── Links ── */
.qa-links {
  margin: 16px 0 0; padding: 20px 24px;
  background: var(--card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px;
}
.qa-links-title { font-size: 15px; font-weight: 600; color: var(--text, #111); margin: 0 0 12px; }
.qa-links-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-link {
  padding: 8px 14px; background: rgba(22,108,190,.05); border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; font-size: 13px; font-weight: 500; color: #166CBE; text-decoration: none;
  transition: background .2s;
}
.qa-link:hover { background: rgba(22,108,190,.14); }

/* ── Updated ── */
.qa-updated { text-align: center; font-size: 12px; color: var(--text-3, #9ca3af); margin: 20px 0 0; padding: 12px; }

/* ── Loading ── */
.qa-loading { text-align: center; padding: 80px 20px; color: var(--text-3, #9ca3af); }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .qa-title { font-size: 20px; }
  .qa-answer { padding: 24px 16px; }
  .qa-answer-text { font-size: 18px; }
  .qa-stat-row { grid-template-columns: repeat(2, 1fr); }
  .qa-rain-timeline { height: 100px; }
  .qa-tl-bar { height: 45px; }
}

/* ── NIGHT MODE ── */
body.is-night .qa-answer.clear  { background: linear-gradient(135deg, #064e3b, #065f46); color: #a7f3d0; }
body.is-night .qa-answer.rain   { background: linear-gradient(135deg, #1e3a5f, #1e40af); color: #93c5fd; }
body.is-night .qa-answer.maybe  { background: linear-gradient(135deg, #78350f, #92400e); color: #fcd34d; }
body.is-night .qa-answer.hot    { background: linear-gradient(135deg, #7f1d1d, #991b1b); color: #fca5a5; }
body.is-night .qa-answer.warm   { background: linear-gradient(135deg, #7c2d12, #9a3412); color: #fdba74; }
body.is-night .qa-answer.mild   { background: linear-gradient(135deg, #064e3b, #065f46); color: #a7f3d0; }
body.is-night .qa-answer.cold   { background: linear-gradient(135deg, #1e3a5f, #1e40af); color: #93c5fd; }
body.is-night .qa-answer.windy  { background: linear-gradient(135deg, #4c1d95, #5b21b6); color: #c4b5fd; }
body.is-night .qa-answer.calm   { background: linear-gradient(135deg, #064e3b, #065f46); color: #a7f3d0; }