/*
  ============================================================
  ASTRACANA · QUESTION-FIRST NAVIGATOR — STYLES
  ============================================================
*/
.astr-question-nav{
  --bg:#1B1235; --bg-soft:#2A1E4D; --gold:#D4AF37; --gold-dim:#9a7f2a;
  --ink:#FAF6EF; --ink-dim:#C9BFAE;
  font-family: Georgia, 'Times New Roman', serif; color: var(--ink);
  display:flex; flex-direction:column; align-items:center;
  padding:32px 20px 52px; text-align:center;
  /* dark panel so ivory text is readable on any theme background */
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-soft) 0%, var(--bg) 55%, #14102a 100%);
  border:1px solid rgba(212,175,55,.28); border-radius:20px;
  box-shadow:0 24px 60px rgba(20,12,40,.22); margin:8px 0 24px;
}
.astr-question-nav *{ box-sizing:border-box; margin:0; padding:0; }
.astr-question-nav .astr-title{ font-size:clamp(1.8rem,5vw,2.6rem); letter-spacing:.04em; font-weight:normal; }
.astr-question-nav .astr-star{ color:var(--gold); }
.astr-question-nav .astr-subtitle{ margin-top:10px; color:var(--ink-dim); font-style:italic; max-width:580px; line-height:1.6; }
.astr-question-nav .astr-sec-kicker{
  font-size:.75rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}

/* input form */
.astr-question-nav .astrq-form{ width:min(620px,100%); margin-top:28px; }
.astr-question-nav .astrq-label{
  display:block; margin-bottom:10px; font-size:.78rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-dim);
}
.astr-question-nav .astrq-form textarea{
  width:100%; min-height:120px; padding:18px; border-radius:16px;
  border:1px solid var(--gold-dim); background:rgba(255,255,255,.04);
  color:var(--ink); font-family:inherit; font-size:1.05rem; line-height:1.6;
  resize:vertical; color-scheme:dark;
}
.astr-question-nav .astrq-form textarea::placeholder{ color:rgba(201,191,174,.55); font-style:italic; }
.astr-question-nav .astrq-form textarea:focus{ outline:none; border-color:var(--gold); }

.astr-question-nav .astr-btn-row{ margin-top:20px; }
.astr-question-nav .astr-btn{
  font-family:inherit; font-size:.95rem; letter-spacing:.08em; padding:13px 30px;
  border-radius:999px; cursor:pointer; border:1px solid var(--gold);
  background:transparent; color:var(--gold); transition:all .25s;
}
.astr-question-nav .astr-btn:hover{ background:var(--gold); color:#1B1235; }
.astr-question-nav .astr-btn.astr-primary{ background:var(--gold); color:#1B1235; }
.astr-question-nav .astr-btn.astr-primary:hover{ filter:brightness(1.1); }

/* results */
.astr-question-nav .astrq-result{
  margin-top:30px; width:min(680px,100%);
  animation: astrq-rise .5s ease;
}
@keyframes astrq-rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.astr-question-nav .astrq-heard{ color:var(--gold); font-style:italic; font-size:1.05rem; margin-bottom:18px; }
.astr-question-nav .astrq-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;
}
.astr-question-nav .astrq-card{
  display:flex; flex-direction:column; text-align:left; text-decoration:none;
  border:1px solid var(--gold-dim); border-radius:14px; padding:20px 18px;
  background:linear-gradient(165deg, var(--bg-soft), #17102e);
  transition:transform .25s, border-color .25s;
}
.astr-question-nav .astrq-card:hover{ transform:translateY(-3px); border-color:var(--gold); }
.astr-question-nav .astrq-card-title{ color:var(--gold); font-size:1.15rem; letter-spacing:.03em; }
.astr-question-nav .astrq-card-why{ margin-top:10px; color:var(--ink-dim); font-size:.93rem; line-height:1.6; flex:1; }
.astr-question-nav .astrq-card-go{
  margin-top:14px; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}

/* how we route */
.astr-question-nav .astrq-how{
  margin-top:38px; width:min(620px,100%); text-align:left;
  border-top:1px solid rgba(212,175,55,.25); padding-top:26px;
}
.astr-question-nav .astrq-how p{ color:var(--ink-dim); line-height:1.65; font-size:.98rem; margin-bottom:14px; }
.astr-question-nav .astrq-how ul{ list-style:none; margin-bottom:16px; }
.astr-question-nav .astrq-how li{
  position:relative; padding-left:26px; margin-bottom:10px; color:var(--ink-dim); line-height:1.6; font-size:.95rem;
}
.astr-question-nav .astrq-how li::before{ content:"\2726"; position:absolute; left:0; color:var(--gold); }
.astr-question-nav .astrq-how li strong{ color:var(--ink); font-weight:normal; }
.astr-question-nav .astrq-honest{ font-style:italic; }